/**
 * WebResa Départs – Feuille de style
 * /wp-content/mu-plugins/webresa-sync/assets/webresa-departs.css
 *
 * Polices : héritées du thème (DM Sans pour le texte, Conthrax sur le h3 des mois).
 *
 * Variables du site utilisées :
 *   --primary                : doré (nom du séjour, bouton Réserver, survol)
 *   --light                  : crème, base de tous les textes et gris (déclinés en transparence)
 *   --dark                   : noir (texte du bouton au survol)
 *   --coral                  : rouge "Complet" (via --color-sejour-complet si elle existe)
 *   --radius                 : arrondi des boutons
 *
 * Le bloc s'adapte à la largeur de SON conteneur (container queries) :
 *   ≥ 900 px  : une ligne par départ, colonnes alignées
 *   600–899 px: accueil/destination → niveau et places passent sous le nom du séjour
 *   < 600 px  : ligne empilée, aucun scroll horizontal
 *
 * Sections :
 *   1. Variables locales
 *   2. Mois
 *   3. Ligne (grille desktop)
 *   4. Contenu
 *   5. Boutons
 *   6. Message aucun départ
 *   7. Tablette
 *   8. Mobile
 *   9. Modal
 */


/* ─── 1. Variables locales ──────────────────────────────────────────────── */

.webresa-wrap {
    --wr-text:   color-mix(in srgb, var(--light) 92%, transparent);
    --wr-title:  color-mix(in srgb, var(--light) 82%, transparent);
    --wr-muted:  color-mix(in srgb, var(--light) 60%, transparent);
    --wr-faint:  color-mix(in srgb, var(--light) 25%, transparent);
    --wr-border: color-mix(in srgb, var(--light) 12%, transparent);
    --wr-hover:  color-mix(in srgb, var(--light) 6%, transparent);
    --wr-accent: var(--primary);
    --wr-complet: var(--color-sejour-complet, var(--coral));

    container: webresa / inline-size;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    color: var(--wr-text);
    font-size: 16px;
    line-height: 1.4;
}


/* ─── 2. Mois ───────────────────────────────────────────────────────────── */

.webresa-mois + .webresa-mois {
    margin-top: 48px;
}

/* h3 : Conthrax, italique et majuscules viennent du thème */
.webresa-mois-titre {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.2;
    color: var(--wr-title);
}

.webresa-liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.webresa-liste > li {
    margin: 0;
}


/* ─── 3. Ligne (grille desktop) ─────────────────────────────────────────── */

/* Accueil / destination : Dates · Séjour · Niveau · Places · Bouton */
.wr-row {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr) 150px 150px 120px;
    grid-template-areas: "dates sejour niveau places action";
    align-items: center;
    column-gap: 24px;
    row-gap: 4px;
    padding: 18px 12px;
    border-bottom: 1px solid var(--wr-border);
    transition: background-color .15s ease, box-shadow .15s ease;
}

/* Page séjour : Dates · Durée · Places · Bouton */
.webresa-wrap--sejour .wr-row {
    grid-template-columns: 240px 140px minmax(0, 1fr) 120px;
    grid-template-areas: "dates duree places action";
}

.wr-row:hover {
    background-color: var(--wr-hover);
    box-shadow: inset 2px 0 0 var(--wr-accent);
}

.wr-dates  { grid-area: dates; }
.wr-sejour { grid-area: sejour; min-width: 0; }
.wr-niveau { grid-area: niveau; }
.wr-duree  { grid-area: duree; }
.wr-places { grid-area: places; }
.wr-action { grid-area: action; justify-self: end; }

/* En desktop, les éléments de .wr-meta sont des colonnes de la grille */
.wr-meta { display: contents; }


/* ─── 4. Contenu ────────────────────────────────────────────────────────── */

.wr-date {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Départ complet : date barrée */
.wr-row.is-complet .wr-date {
    color: var(--wr-muted);
    text-decoration: line-through;
    text-decoration-color: var(--wr-muted);
}

.wr-sejour-link {
    color: var(--wr-accent);
    font-weight: 600;
    text-decoration: none;
}

.wr-sejour-link:hover {
    text-decoration: underline;
}

.wr-sejour-nolink {
    font-weight: 600;
}

.wr-niveau,
.wr-duree,
.wr-places-label {
    color: var(--wr-muted);
}

.wr-places-complet {
    color: var(--wr-complet);
    font-weight: 600;
}


/* ─── 5. Boutons ────────────────────────────────────────────────────────── */

.wr-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: var(--radius, 5px);
    border: 1px solid var(--wr-accent);
    background: transparent;
    color: var(--wr-accent);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.wr-btn:hover {
    background: var(--wr-accent);
    color: var(--dark);
}

.wr-btn--complet,
.wr-btn--complet:hover {
    border-color: var(--wr-border);
    background: transparent;
    color: var(--wr-faint);
    cursor: default;
}


/* ─── 6. Message aucun départ ───────────────────────────────────────────── */

.webresa-no-departs {
    margin: 0;
    padding: 16px 0;
    font-style: italic;
    color: color-mix(in srgb, var(--light) 60%, transparent);
}


/* ─── 7. Tablette ───────────────────────────────────────────────────────── */

@container webresa (max-width: 899px) {

    /* Accueil / destination : niveau et places passent sous le nom du séjour */
    .webresa-wrap--liste .wr-row {
        grid-template-columns: 170px minmax(0, 1fr) 120px;
        grid-template-areas:
            "dates sejour action"
            "dates meta   action";
        column-gap: 20px;
    }

    .webresa-wrap--liste .wr-sejour {
        align-self: end;
    }

    .webresa-wrap--liste .wr-meta {
        grid-area: meta;
        align-self: start;
        display: flex;
        flex-wrap: wrap;
        gap: 0 8px;
        font-size: 14px;
    }

    .webresa-wrap--liste .wr-meta > * + *::before {
        content: "·";
        margin-right: 8px;
        color: var(--wr-muted);
    }

    /* Page séjour : même ligne qu'en desktop, colonnes resserrées */
    .webresa-wrap--sejour .wr-row {
        grid-template-columns: 200px 110px minmax(0, 1fr) 120px;
        column-gap: 20px;
    }
}


/* ─── 8. Mobile ─────────────────────────────────────────────────────────── */

@container webresa (max-width: 599px) {

    .webresa-mois-titre {
        font-size: 18px;
    }

    /* Accueil / destination : séjour / dates + bouton / niveau · places */
    .webresa-wrap--liste .wr-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "sejour sejour"
            "dates  action"
            "meta   meta";
        column-gap: 12px;
        padding: 16px 12px;
    }

    .webresa-wrap--liste .wr-sejour {
        align-self: auto;
    }

    /* Page séjour : dates + bouton / durée · places */
    .webresa-wrap--sejour .wr-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "dates action"
            "meta  action";
        column-gap: 12px;
        padding: 16px 12px;
    }

    .webresa-wrap--sejour .wr-meta {
        grid-area: meta;
        display: flex;
        flex-wrap: wrap;
        gap: 0 8px;
        font-size: 14px;
    }

    .webresa-wrap--sejour .wr-meta > * + *::before {
        content: "·";
        margin-right: 8px;
        color: var(--wr-muted);
    }

    .wr-action {
        align-self: center;
    }

    .wr-btn {
        padding: 9px 14px;
        font-size: 12px;
    }
}


/* ─── 9. Modal ──────────────────────────────────────────────────────────── */

.webresa-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: color-mix(in srgb, var(--dark) 85%, transparent);
}

.webresa-modal-overlay.is-open {
    display: flex;
}

.webresa-modal-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    background: #ffffff;
    border-radius: calc(var(--radius, 5px) * 2);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.webresa-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 18px 24px;
    border-bottom: 1px solid color-mix(in srgb, var(--dark) 12%, transparent);
}

/* h2 : police Conthrax héritée du thème */
.webresa-modal-titre {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    color: var(--dark);
}

.webresa-modal-close {
    padding: 4px 8px;
    border: none;
    border-radius: var(--radius, 5px);
    background: none;
    font-size: 20px;
    line-height: 1;
    color: color-mix(in srgb, var(--dark) 60%, transparent);
    cursor: pointer;
}

.webresa-modal-close:hover {
    color: var(--dark);
}

.webresa-modal-loader {
    padding: 40px;
    text-align: center;
    font-size: 14px;
    color: color-mix(in srgb, var(--dark) 60%, transparent);
}

.webresa-modal-iframe {
    display: none;
    flex: 1;
    width: 100%;
    min-height: 520px;
    border: 0;
    border-radius: 0 0 calc(var(--radius, 5px) * 2) calc(var(--radius, 5px) * 2);
}

body.webresa-modal-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .webresa-modal-box {
        max-height: 95vh;
    }

    .webresa-modal-iframe {
        min-height: 420px;
    }
}