/**
 * Styles pour le widget de carte interactive
 *
 * Theming via CSS custom properties (fallbacks = aquagir values):
 *   --ccl-mw-color-primary       : primary brand color
 *   --ccl-mw-color-primary-dark  : darker variant for hover states
 *   --ccl-mw-color-primary-light : light tint for subtle backgrounds
 *   --ccl-mw-bg-input            : input / select background
 *   --ccl-mw-color-text          : total count text color
 *   --ccl-mw-color-input-text    : text color inside inputs and selects
 *   --ccl-mw-select-arrow        : SVG arrow for selects (full url() value)
 */
#map {

    img {
        max-width: unset;
    }

}

.ccl-mw-list-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.ccl-mw-list-item:hover {
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.15);
}

.ccl-mw-item-thumbnail {
    width: 100%;
    margin-bottom: 10px;
    position: relative;
}

.ccl-mw-item-thumbnail img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    max-height: 250px;
}

.ccl-mw-item-thumbnail img:not(.ccl-mw-interviewee-image) {
    border-radius: 20px 20px 0 0 !important;
}

/* Respondent Badge */
.ccl-mw-respondent-badge {
    position: absolute;
    top: 0;
    left: 0;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 16px 16px 16px 0;
    margin: 16px 0 0 16px;
}

/* Interviewee Section */
.ccl-mw-interviewee {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ccl-mw-interviewee-info {
    font-size: 14px;
    line-height: 1.4;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    max-height: 24px;
}

.ccl-mw-interviewee-info strong {
    font-weight: bold;
}

.ccl-mw-interviewee-info span {
    font-weight: normal;
}

.ccl-mw-item-thumbnail .ccl-mw-interviewee-image {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    border: 4px solid #fff !important;
    position: absolute;
    left: 3%;
    bottom: -10%;
}

.ccl-mw-item-content {
    flex: 1;
    padding: 15px;
}

.ccl-mw-item-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    height: 53px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-block-description p {
    height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ccl-mw-list-item.card-highlight {
    border: 3px solid #1B3D44;
}

.ccl-mw-item-title a {
    color: #2271b1;
    text-decoration: none;
}

.ccl-mw-item-title a:hover {
    text-decoration: underline;
}

/* Inspire Button */
.ccl-mw-inspire-button-container {
    text-align: center;
    margin-top: 12px;
}

.ccl-mw-inspire-button {
    display: inline-block;
    padding: 10px 24px;
    border: 1px solid var(--ccl-mw-color-primary, #306E7B);
    border-radius: 24px;
    background: #fff;
    color: var(--ccl-mw-color-primary, #306E7B);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.ccl-mw-inspire-button:hover {
    background: var(--ccl-mw-color-primary, #306E7B);
    color: #fff;
}

/* `isolation` confine l'empilement de la carte a ce conteneur.

   Le composant de cartographie force `z-index: 1033` **en style inline** sur le coin
   bas-droit de ses controles (`leafletBottom.style.zIndex`, dans le JS du marketplace).
   Il passait donc au-dessus des boutons flottants du site — retour en haut de page et
   cloche de notification — qui occupent le meme coin a `z-index: 50`.

   ⚠️ Ne PAS corriger en remontant ces boutons au-dessus de 1033 : le menu mobile est un
   overlay plein ecran a 1003, et ils flotteraient alors par-dessus quand il est ouvert.
   ⚠️ Ni en abaissant le controle : ses panneaux internes sont a 400 et il passerait sous
   les tuiles.

   Creer un contexte d'empilement ici resout les deux : tout ce que la carte dessine reste
   ordonne entre soi, mais ne concourt plus avec la page. Le plein ecran n'en souffre pas,
   il passe par l'API Fullscreen native, dont la top layer ignore ces contextes. */
#ccl-mw-map-container {
    width: 100%;
    position: relative;
    isolation: isolate;
}

#map {
    width: 100%;
}

/* Hauteur de la carte.

   Elle etait posee en JavaScript (`adjustMapHeight()`, retire en 1.2.7), qui ecrivait
   un style inline a chaque redimensionnement -- contraire aux regles du projet, et
   surtout invisible pour qui lit le CSS. Le bloc saisi en back-office portait lui aussi
   un `style="height:728px"`, retire de son cote.

   Sans cette regle, la carte n'a plus AUCUNE hauteur et s'effondre a zero.

   `80vh` plutot qu'une valeur en pixels : la carte suit la hauteur de l'ecran, sans
   qu'on ait a decliner une valeur par palier. Les hauteurs fixes que posaient les media
   queries plus bas ont ete retirees pour la meme raison -- dont un `728px` sur mobile,
   copier-coller de la valeur bureau, qui gagnait en silence grace a son `!important`.
   Plus aucun `!important` ici : il ne servait qu'a battre le style inline des blocs,
   retire de leur cote. */
#ccl-mw-map-container #map {
    height: 80vh;
}

/* Responsive - Tablette et Mobile (1024px et moins) */
@media (max-width: 1024px) {

    #map {
        margin-bottom: 30px;
    }

    .ccl-mw-map-error-placeholder {
        height: 500px;
    }
}

/* Responsive - Mobile (768px et moins) */
@media (max-width: 768px) {

    .ccl-mw-list-item {
        gap: 12px;
    }

    .ccl-mw-item-thumbnail {
        height: 180px;
    }

    .ccl-mw-item-title {
        font-size: 15px;
    }

    .ccl-mw-interviewee {
        gap: 10px;
        margin-bottom: 10px;
    }

    .ccl-mw-interviewee-info {
        font-size: 13px;
    }

    .ccl-mw-inspire-button {
        padding: 8px 20px;
        font-size: 13px;
    }

    #map {
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .ccl-mw-map-error-placeholder {
        height: 400px;
    }

    .ccl-mw-map-error-content {
        padding: 30px 20px;
    }

    .ccl-mw-map-error-content svg {
        width: 60px;
        height: 60px;
    }

    .ccl-mw-map-error-content h3 {
        font-size: 18px;
    }
}

/* Styles pour le placeholder d'erreur de carte */
.ccl-mw-map-error-placeholder {
    width: 100%;
    height: 728px;
    border: 2px dashed #ccc;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
}

.ccl-mw-map-error-content {
    text-align: center;
    padding: 40px;
    color: #666;
}

.ccl-mw-map-error-content svg {
    margin-bottom: 20px;
}

.ccl-mw-map-error-content h3 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 20px;
}

.ccl-mw-map-error-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

@media (min-width: 1024px) {
    .ccl-mw-item-thumbnail img:not(.ccl-mw-interviewee-image) {
        min-height: 150px;
    }
}