/* ==========================================================================
   CALENDARI DE DISPONIBILITAT — component (BLOC 4.2a, 2026-09-23)
   Consumidors: /reserva/ (templates/template-reserva.php, SELECCIÓ) i, des del 4.2c, /preus/
   (templates/template-preus.php, CONSULTA: .mv-cal--consulta, bloc del final).
   JS: assets/js/calendari.js · dades: inc/calendari.php (window.mvCalendari).

   Llenguatge de color = el d'Escapada Rural, que és el que l'encàrrec demana mantenir:
   VERD lliure · VERMELL TEULA ocupat · MARRÓ de marca la vostra estada.
   Contrast del número en CADA estat (text ≥ 4,5:1; calculat i MESURAT al navegador el 2026-09-23,
   també amb el punter a sobre, amb el dit i amb el focus): lliure 12,8 · lliure amb hover 9,9 ·
   lliure no triable 7,1 · ocupat 5,3 · arribada/sortida triades 7,0 · sortida previsualitzada 9,9 ·
   dins de l'estada 12,2 · missatge d'error 6,3. Dies passats: 2,5 a /reserva/ (botons inactius, exempts del
   1.4.3); a /preus/, on són text, ≥ 4,5 (bloc «Mode CONSULTA», revisió 4.2c).
   ⚠️ Els estats de SELECCIÓ han de guanyar sempre el :hover (T1 de la revisió): vegeu el bloc
   `@media (hover: hover)`. El gate ho vigila (`calendari.spec.js`, «la selecció es llegeix…»).
   Cap classe compartida amb la resta del tema → l'ordre de càrrega no altera cap altra pàgina.
   ========================================================================== */

.mv-cal {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 36px);
    background: var(--color-white);
    border-radius: 16px;
    box-shadow: 0 12px 50px rgba(0, 0, 0, 0.08);
    color: var(--color-text);
}

/* Text que serveix el PHP i que el JS substitueix en arrencar: sense JavaScript, o si calendari.js
   no arriba a carregar, és el que queda (i dona una via alternativa). Revisió 2026-09-23, T11. */
.mv-cal__recurs {
    margin: 0;
    text-align: center;
    color: var(--color-text-soft);
}

/* Avís d'estat de la lectura d'ER (antiquat · sense dades) */
.mv-cal__avis {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-left: 3px solid var(--color-stone);
    border-radius: 0 8px 8px 0;
    background: var(--color-cream);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* ---- Capçalera: la selecció (persistent) + la regió `status` ----
   min-height: quan hi apareix un error, la graella no salta. */
.mv-cal__capcal {
    min-height: 3.5em;
    margin: 0 0 16px;
    text-align: center;
}
.mv-cal__seleccio {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.12rem;
    line-height: 1.45;
    color: var(--color-text);
}
.mv-cal__estat {
    margin: 6px 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
}
.mv-cal__estat.is-error {
    color: var(--color-brick);
}
/* Eco de la selecció: només per al lector de pantalla (la selecció ja es veu a dalt) */
.mv-cal__estat.is-eco {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Cos: fletxes a banda i banda dels mesos ---- */
.mv-cal__cos {
    position: relative;
}

.mv-cal__nav {
    position: absolute;
    top: -4px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-text);
    cursor: pointer;
}
.mv-cal__nav--ant { left: 0; }
.mv-cal__nav--seg { right: 0; }
.mv-cal__nav--seg svg { transform: scaleX(-1); }
.mv-cal__nav:hover:not(:disabled) {
    border-color: var(--color-stone);
    background: var(--color-cream);
}
.mv-cal__nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.mv-cal__mesos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
}
.mv-cal__mesos[data-visibles="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mv-cal__titol {
    margin: 0 0 12px;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 36px; /* centrat amb les fletxes (44px, top:-4px) */
    text-align: center;
    color: var(--color-text);
}

.mv-cal__graella {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4px; /* només vertical: l'estada és una banda contínua dins de cada setmana */
    table-layout: fixed;
}

.mv-cal__graella th {
    padding: 0 0 6px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-text-soft);
}

.mv-cal__graella td {
    padding: 0;
    text-align: center;
}

/* ---- El dia ---- */
.mv-cal__dia {
    position: relative;
    display: block;
    width: calc(100% - 4px); /* 2 px d'aire a cada banda: els dies no es fonen en una franja */
    height: 44px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    line-height: 44px;
    color: var(--color-text);
    cursor: pointer;
}

/* Lliure i triable ara: fons verd i una vora verda (el que es pot clicar s'ha de veure com a botó). */
.mv-cal__dia.is-lliure {
    background: #E0E9DC;
    background: color-mix(in srgb, var(--color-secondary) 16%, var(--color-white));
    box-shadow: inset 0 0 0 1px #B5CAAE;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-secondary) 38%, var(--color-white));
}
/* Lliure però no es pot triar ARA (hi falten nits fins al pròxim ocupat): més pàl·lid i SENSE vora. */
.mv-cal__dia.is-lliure.is-inactiu {
    background: #EEF3EC;
    background: color-mix(in srgb, var(--color-secondary) 8%, var(--color-white));
    box-shadow: none;
    color: var(--color-text-soft);
    cursor: default;
}
/* Hover NOMÉS amb punter real i MAI sobre la selecció. En mòbil el :hover es queda enganxat després
   del toc, i abans un `.is-lliure:not(.is-inactiu):hover` (0,4,0) guanyava la regla de selecció
   (0,3,1): el dia triat quedava amb el número blanc sobre verd pàl·lid, 1,58:1 (revisió 2026-09-23, T1).
   I només sobre un <button>: en consulta (4.2c) el dia és un <span> i no s'ha de semblar a un control. */
@media (hover: hover) {
    .mv-cal__graella td:not(.is-arribada):not(.is-sortida):not(.is-dins) button.mv-cal__dia.is-lliure:not(.is-inactiu):hover {
        background: #BFD3B8;
        background: color-mix(in srgb, var(--color-secondary) 34%, var(--color-white));
    }
    .mv-cal__graella td:not(.is-arribada):not(.is-sortida):not(.is-dins) button.mv-cal__dia.is-desconegut:not(.is-inactiu):hover {
        background: var(--color-accent-light);
    }
}

.mv-cal__dia.is-ocupat {
    background: #F4E7E4;
    background: color-mix(in srgb, var(--color-brick) 12%, var(--color-white));
    color: var(--color-brick);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    cursor: not-allowed;
}

.mv-cal__dia.is-passat,
.mv-cal__dia.is-fora {
    color: #A49C95;
    color: color-mix(in srgb, var(--color-text) 42%, var(--color-white));
    cursor: default;
}

/* Sense dades d'ER: cap dia és verd ni vermell, tots neutres i triables (fail-open). */
.mv-cal__dia.is-desconegut {
    background: var(--color-cream);
}

/* Avui: un punt sota el número */
.mv-cal__dia.is-avui::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: currentColor;
}

.mv-cal__dia:focus-visible {
    z-index: 1;
    outline: 2px solid var(--color-text);
    outline-offset: 1px;
    border-radius: 10px;
}

/* ---- La vostra estada: banda contínua entre arribada i sortida ---- */
.mv-cal__graella td.is-dins {
    background: var(--color-accent-light);
}
.mv-cal__graella td.is-dins .mv-cal__dia {
    background: transparent;
    box-shadow: none;
    color: var(--color-text);
}
.mv-cal__graella td.is-arribada.te-rang {
    background: linear-gradient(90deg, transparent 50%, var(--color-accent-light) 50%);
}
.mv-cal__graella td.is-sortida.te-rang {
    background: linear-gradient(90deg, var(--color-accent-light) 50%, transparent 50%);
}
.mv-cal__graella td.is-arribada .mv-cal__dia,
.mv-cal__graella td.is-sortida .mv-cal__dia {
    background: var(--color-primary);
    box-shadow: none;
    color: var(--color-white);
    font-weight: 700;
    text-decoration: none;
}
/* Sortida només PREVISUALITZADA (punter o focus): daurat amb text fosc i vora de marca. El marró suau
   amb text blanc d'abans donava 4,02:1 amb text de 15 px (T1c); així es distingeix de la triada. */
.mv-cal__graella td.is-previ .mv-cal__dia {
    background: var(--color-accent);
    box-shadow: inset 0 0 0 2px var(--color-primary);
    color: var(--color-text);
}

/* ---- Llegenda ---- */
.mv-cal__llegenda {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 24px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.86rem;
    color: var(--color-text-soft);
}
.mv-cal__ll {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.mv-cal__mostra {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 5px;
}
/* Vores sòlides: la mostra ha de distingir-se del blanc (≥ 3:1, WCAG 1.4.11; abans 1,2-1,3:1, T7). */
.mv-cal__ll--lliure .mv-cal__mostra {
    background: #E0E9DC;
    background: color-mix(in srgb, var(--color-secondary) 16%, var(--color-white));
    box-shadow: inset 0 0 0 1px var(--color-secondary);
}
.mv-cal__ll--ocupat .mv-cal__mostra {
    background: #F4E7E4;
    background: color-mix(in srgb, var(--color-brick) 12%, var(--color-white));
    box-shadow: inset 0 0 0 1px var(--color-brick);
}
.mv-cal__ll--estada .mv-cal__mostra {
    background: var(--color-primary);
}
.mv-cal__ll--desconegut .mv-cal__mostra {
    background: var(--color-cream);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

/* ---- Peu: esborrar + frescor de les dades ---- */
.mv-cal__peu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}
.mv-cal__esborra {
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: none;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    margin-left: auto;
}
.mv-cal__esborra[hidden] {
    display: none;
}

.mv-cal__font {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-soft);
}

/* ---- Mode CONSULTA (/preus/, BLOC 4.2c, 2026-09-23) ----
   Els dies són <span> que només es llegeixen: cap cursor de control (tampoc el «prohibit» dels
   ocupats; va aquí, després de .is-ocupat, perquè empaten en especificitat). Mateix aspecte que a
   /reserva/ en repòs, tret dels «lliures que no es poden triar», que en consulta no existeixen. */
.mv-cal--consulta .mv-cal__dia {
    cursor: default;
}
/* En consulta, els dies passats i els de fora de l'horitzó són TEXT, no controls desactivats: han de complir
   el 1.4.3, ≥ 4,5:1 (revisió 4.2c, 🟠1: el gris de /reserva/, 42 %, hi feia 2,53:1). Al 66 % es queden més
   apagats que els de l'horitzó, que a més porten fons i vora. */
.mv-cal--consulta .mv-cal__dia.is-passat,
.mv-cal--consulta .mv-cal__dia.is-fora {
    color: #736D69;
    color: color-mix(in srgb, var(--color-text) 66%, var(--color-white));
}
/* La data sencera i l'estat del dia, per al lector de pantalla (el número visible és aria-hidden). */
.mv-cal__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .mv-cal__dia,
    .mv-cal__nav {
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }
}

/* ---- Mòbil: un sol mes (el JS en decideix el nombre a 900 px) ---- */
@media (max-width: 899px) {
    .mv-cal {
        max-width: 440px;
    }
}

@media (max-width: 480px) {
    .mv-cal {
        padding: 20px 12px;
    }
    .mv-cal__dia {
        width: calc(100% - 2px); /* 44 px de diana tàctil a 390 px */
    }
    .mv-cal__peu {
        flex-direction: column;
    }
    .mv-cal__font {
        text-align: center;
    }
    .mv-cal__esborra {
        margin-left: 0;
    }
}

/* ---- Colors forçats: l'alt contrast de Windows (BLOC 4.2c, grup A, C42-8) ----
   El navegador hi substitueix fons, ombres i colors pels del sistema, i ho deixava TOT blanc (mesurat): el verd,
   el vermell, les mostres, el punt d'avui i, a /reserva/, la selecció desapareixien, i només quedava el ratllat
   dels ocupats. L'estat es torna a dir amb el que es conserva —contorns, vores, ratllat, gruix— i, on cal un fons,
   amb colors DEL SISTEMA i `forced-color-adjust: none`, que respecten els colors que ha triat l'usuari.
   Ho vigila calendari.spec.js («colors forçats»), amb el mode activat per emulateMedia. */
@media (forced-colors: active) {
    .mv-cal__dia.is-lliure {
        outline: 1px solid CanvasText;
        outline-offset: -3px;
    }
    .mv-cal__dia.is-lliure.is-inactiu,
    .mv-cal__dia.is-desconegut {
        outline: 1px dashed CanvasText;
        outline-offset: -3px;
    }
    /* `.mv-cal` al davant: ha de guanyar el gris propi del mode consulta (0,3,0), que si no es quedava. */
    .mv-cal .mv-cal__dia.is-passat,
    .mv-cal .mv-cal__dia.is-fora {
        forced-color-adjust: none;
        color: GrayText;
    }
    .mv-cal__dia.is-avui::after {
        forced-color-adjust: none;
        background: CanvasText;
    }
    /* La selecció de /reserva/, amb el ressaltat del sistema; la sortida només previsualitzada, discontínua. */
    .mv-cal__graella td.is-arribada .mv-cal__dia,
    .mv-cal__graella td.is-sortida .mv-cal__dia,
    .mv-cal__graella td.is-dins .mv-cal__dia {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
    }
    .mv-cal__graella td.is-previ .mv-cal__dia {
        background: Canvas;
        color: CanvasText;
        outline: 2px dashed Highlight;
        outline-offset: -3px;
    }
    /* El focus de teclat ha de guanyar els contorns d'estat de sobre (per això, `.mv-cal__graella` al davant). */
    .mv-cal__graella .mv-cal__dia:focus-visible {
        outline: 2px solid CanvasText;
        outline-offset: 1px;
    }
    /* Llegenda: les mateixes marques que els dies (contorn, ratlla, ressaltat), amb colors del sistema.
       `.mv-cal__llegenda` al davant: les regles de color de les mostres són (0,2,0) i, amb
       forced-color-adjust: none, guanyaven i hi deixaven el verd i el rosa (mesurat). */
    .mv-cal__llegenda .mv-cal__mostra {
        forced-color-adjust: none;
        background: Canvas;
        box-shadow: none;
        border: 1px solid CanvasText;
    }
    .mv-cal__llegenda .mv-cal__ll--desconegut .mv-cal__mostra {
        border-style: dashed;
    }
    .mv-cal__llegenda .mv-cal__ll--ocupat .mv-cal__mostra {
        position: relative;
    }
    .mv-cal__llegenda .mv-cal__ll--ocupat .mv-cal__mostra::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 2px;
        left: 2px;
        border-top: 1px solid CanvasText;
    }
    .mv-cal__llegenda .mv-cal__ll--estada .mv-cal__mostra {
        background: Highlight;
        border-color: Highlight;
    }
}