/* =============================================================================
   LEVEL MATCH — la pagina unica dei due esami
   Markup: level-match.php
   Caricato da: src/Controllers/LevelMatch/LevelMatchHubPageController.php

   La pagina alterna due registri, e l'alternanza è il progetto: il fondo scuro
   sta dove si decide (la prenotazione in cima, gli esiti a metà), il fondo
   chiaro dove si legge (gli argomenti, la giornata, il costo). Chi scorre
   sente il ritmo prima di leggere le parole, e capisce senza accorgersene
   quali sono i due momenti in cui deve fermarsi.

   Il modulo è l'unica isola bianca dentro al buio della copertina: su un fondo
   scuro una scheda chiara non è decorazione, è la cosa che si vede per prima.

   I token --mca-* arrivano da academy-base.css, dichiarato come dipendenza.
   ========================================================================== */

.mca-lmh {
    /* I tre esiti. Verde/ambra/rosso attenuati: sono informazioni, non allarmi
       — «ti manca poco» non deve avere il colore di un errore. */
    --lmh-pass: #3fb865;
    --lmh-improve: #e0a423;
    --lmh-restart: #d16a5c;
    --lmh-radius: 20px;
}

/* =============================================================================
   COPERTINA E PRENOTAZIONE
   ========================================================================== */

.mca-lmh__hero {
    position: relative;
    background: var(--mca-ink);
    color: #fff;
    padding: 34px 0 96px;
}

.mca-lmh__crumbs { margin-bottom: 34px; }

.mca-lmh__grid {
    display: grid;
    /* La colonna del modulo è la più stretta delle due e resta la più
       importante: il video può respirare, il modulo no — oltre una certa
       larghezza le righe di scelta diventano nastri e si leggono peggio. */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 64px;
    align-items: start;
}

/* ── La colonna del video ───────────────────────────────────────────────── */

.mca-lmh__media { position: sticky; top: 104px; }

.mca-lmh__frame {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    background: #1b1b1b;
}

/* Senza foto il riquadro non collassa: tiene la sua forma e resta un vuoto
   voluto invece di una riga schiacciata. */
.mca-lmh__frame:not(:has(img)) { aspect-ratio: 16 / 10; }

.mca-lmh__poster {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: cover;
}

.mca-lmh__frame iframe,
.mca-lmh__frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
    object-fit: contain;
}

/* La velatura dal basso esiste per il tasto play: senza, il bianco della
   pastiglia sparisce su una foto chiara. Finita la posa, sparisce anche lei. */
.mca-lmh__frame.has-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(14, 14, 14, .6), rgba(14, 14, 14, 0) 45%);
    pointer-events: none;
}

.mca-lmh__frame.is-playing::after { display: none; }

.mca-lmh__play {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 8px 22px 8px 8px;
    border: 0;
    border-radius: 100px;
    background: rgba(255, 255, 255, .95);
    color: var(--mca-ink);
    cursor: pointer;
    transition: transform .3s ease;
}

.mca-lmh__play:hover { transform: translateY(-2px); }

.mca-lmh__play-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--mca-ink);
    color: #fff;
}

.mca-lmh__play-label {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ── I tre dati sotto al video ──────────────────────────────────────────── */

.mca-lmh__facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin: 1px 0 0;
    padding: 0;
    /* Il fondo si vede solo nelle fessure di 1px lasciate dal gap e fa da riga
       di separazione: niente bordi per cella da togliere sull'ultima, e in
       colonna singola le righe passano da verticali a orizzontali da sole. */
    background: rgba(255, 255, 255, .14);
    border-radius: 14px;
    overflow: hidden;
    margin-top: 16px;
}

.mca-lmh__fact {
    padding: 18px 20px;
    background: #171717;
}

.mca-lmh__fact dt {
    margin: 0 0 6px;
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mca-muted);
}

.mca-lmh__fact dd {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
}

/* ── La colonna del modulo ──────────────────────────────────────────────── */

.mca-lmh__panel { padding-top: 6px; }

.mca .mca-lmh__title {
    font-size: 46px;
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -.02em;
    margin: 14px 0 0;
    color: #fff;
}

/* Il prefisso `.mca` è obbligatorio: academy-base dichiara `.mca p { color:
   var(--mca-body) }`, che vale (0,1,1) e batte la classe da sola — senza
   prefisso questo paragrafo su fondo scuro finirebbe del grigio caldo pensato
   per il testo su fondo chiaro. */
.mca .mca-lmh__text {
    margin: 18px 0 0;
    font-size: 17px;
    line-height: 1.7;
    font-weight: 300;
    color: var(--mca-onDark);
}

/* «Ti richiamiamo noi»: detto sopra al modulo, sul fondo scuro, perché chi
   cerca il menu delle date sappia subito che non c'è di proposito. Il bordo
   oro lo stacca dal paragrafo di copertina senza fare un secondo modulo. */
.mca-lmh__callback {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-top: 24px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-left: 3px solid var(--lmh-improve);
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
}

.mca-lmh__callback-icon { margin-top: 2px; color: var(--lmh-improve); }

.mca .mca-lmh__callback p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 300;
    color: var(--mca-onDark);
}

.mca .mca-lmh__callback strong { font-weight: 500; color: #fff; }

/* Il modulo: l'unica isola chiara della copertina. */
.mca-lmh__form {
    margin-top: 30px;
    padding: 30px;
    border-radius: var(--lmh-radius);
    background: #fff;
    color: var(--mca-ink);
}

.mca-lmh__notices:empty { display: none; }
.mca-lmh__notices { margin-bottom: 20px; }

.mca-lmh__step {
    margin: 0 0 26px;
    padding: 0;
    border: 0;
}

.mca-lmh__step-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mca-ink);
}

.mca-lmh__step-num {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mca-ink);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
}

/* ── 1. Il livello ──────────────────────────────────────────────────────── */

.mca-lmh__levels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mca-lmh__level {
    position: relative;
    display: block;
    padding: 16px 18px;
    border: 1px solid var(--mca-line);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease;
}

.mca-lmh__level:hover { border-color: rgba(14, 14, 14, .4); }

/* Il pallino nativo sparisce ma il campo resta focalizzabile e raggiungibile
   da tastiera: è il bordo della scheda a dire quale è scelta. */
.mca-lmh__level input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.mca-lmh__level:has(input:checked) {
    border-color: var(--mca-ink);
    background: var(--mca-cream);
}

.mca-lmh__level:has(input:focus-visible) { outline: 2px solid var(--mca-ink); outline-offset: 2px; }

.mca-lmh__level.is-closed {
    cursor: not-allowed;
    opacity: .55;
}

.mca-lmh__level-body { display: block; }

.mca-lmh__level-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.mca-lmh__level-name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
}

/* WooCommerce stampa il prezzo dentro a `<span class="woocommerce-Price-…">`:
   si allinea qui una volta invece di inseguirlo con selettori suoi. */
.mca-lmh__level-price {
    font-size: 14px;
    font-weight: 500;
    color: var(--mca-body-dark);
    white-space: nowrap;
}

.mca-lmh__level-price del { display: none; }

.mca-lmh__level-course {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--mca-muted);
}

.mca-lmh__level-closed {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lmh-restart);
}

/* ── 2. La data ─────────────────────────────────────────────────────────── */

.mca-lmh__select {
    width: 100%;
    padding: 14px 42px 14px 16px;
    border: 1px solid var(--mca-line);
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    color: var(--mca-ink);
    cursor: pointer;
    /* La freccia nativa varia troppo da un sistema all'altro per convivere con
       un bordo disegnato: si spegne e se ne disegna una che sta ferma. */
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230e0e0e' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.mca-lmh__select:focus-visible { outline: 2px solid var(--mca-ink); outline-offset: 1px; }

/* Il cellulare prende il bordo del menu delle date, non la sua freccia. */
.mca-lmh__phone {
    padding-right: 16px;
    background-image: none;
    cursor: text;
}

.mca .mca-lmh__field-hint {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--mca-body);
}

.mca-lmh__dates-closed {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mca-body);
}

/* ── 3. I cinquanta euro ────────────────────────────────────────────────── */

.mca-lmh__choices { display: grid; gap: 10px; }

.mca-lmh__choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px 16px;
    border: 1px solid var(--mca-line);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease;
}

.mca-lmh__choice:hover { border-color: rgba(14, 14, 14, .4); }
.mca-lmh__choice:has(input:checked) { border-color: var(--mca-ink); background: var(--mca-cream); }

.mca-lmh__choice input { margin-top: 3px; accent-color: var(--mca-ink); }

.mca-lmh__choice strong {
    display: block;
    font-size: 15px;
    font-weight: 500;
}

.mca-lmh__choice em {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-style: normal;
    line-height: 1.55;
    color: var(--mca-body);
}

/* ── Il bottone e le note ───────────────────────────────────────────────── */

.mca-lmh__submit { margin-top: 4px; }

.mca .mca-lmh__note {
    margin: 14px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--mca-muted);
}

.mca .mca-lmh__note--warn {
    margin: 0;
    font-size: 14px;
    color: var(--mca-body);
}

/* =============================================================================
   ARGOMENTI DA CONOSCERE
   ========================================================================== */

.mca-lmh__topics {
    background: var(--mca-cream);
    padding: 110px 0;
}

.mca-lmh__boxes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

/* Colonna flessibile, e il piede spinto in fondo da `margin-top: auto`: i due
   elenchi non sono lunghi uguale — nove voci brevi da una parte, nove lunghe
   dall'altra — e due bottoni «Scarica la scheda» sfalsati di centocinquanta
   pixel si leggono come un errore di impaginazione.

   Con le righe di una griglia si può fare, ma dipende da quanti figli ha
   davvero la scheda: la nota è facoltativa, e quando c'è sposta tutto di una
   riga. Qui non c'è niente da contare. */
.mca-lmh__box {
    display: flex;
    flex-direction: column;
    padding: 34px;
    border-radius: var(--lmh-radius);
    background: #fff;
    border: 1px solid rgba(14, 14, 14, .07);
}

.mca-lmh__box-head { margin-bottom: 22px; }

.mca-lmh__box-title {
    margin: 14px 0 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.mca-lmh__box-sub {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.6;
}

.mca-lmh__box-sub a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mca-lmh__checks {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
    align-content: start;
}

.mca-lmh__check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    font-size: 15px;
    line-height: 1.6;
    color: var(--mca-body-dark);
}

.mca-lmh__check-icon {
    margin-top: 4px;
    color: var(--lmh-pass);
    flex: none;
}

.mca .mca-lmh__box-note {
    margin: 18px 0 0;
    padding-left: 14px;
    border-left: 2px solid var(--mca-line);
    font-size: 13.5px;
    line-height: 1.6;
}

.mca-lmh__box-foot { margin-top: auto; padding-top: 28px; }

.mca .mca-lmh__box-meta {
    margin: 10px 0 0;
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mca-muted);
    text-align: center;
}

.mca .mca-lmh__topics-foot {
    margin: 34px 0 0;
    text-align: center;
    font-size: 14px;
    color: var(--mca-muted);
}

/* =============================================================================
   COME SI SVOLGE
   ========================================================================== */

.mca-lmh__how { padding-top: 110px; padding-bottom: 110px; }

.mca-lmh__how-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
}

.mca-lmh__how-head { max-width: none; }

/* La frase che dice cos'è, più grande del resto: è la risposta alla domanda
   con cui si arriva, e le tre righe sotto sono i dettagli. `.mca` davanti per
   battere `.mca p` di academy-base. */
.mca .mca-lmh__how-lead {
    margin: 0;
    font-size: 26px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--mca-ink);
}

.mca-lmh__how-rows {
    margin: 40px 0 0;
    border-top: 1px solid var(--mca-line);
}

.mca-lmh__how-row {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--mca-line);
}

.mca-lmh__how-row dt {
    padding-top: 3px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mca-muted);
}

.mca-lmh__how-row dd {
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    font-weight: 300;
    color: var(--mca-body);
}

/* =============================================================================
   DA SAPERE
   ========================================================================== */

/* Il `how` sopra ha già il suo spazio sotto: qui basta chiudere. */
.mca-lmh__know { padding-bottom: 110px; }

.mca-lmh__rules {
    margin: 0;
    padding: 30px 34px;
    list-style: none;
    border: 1px solid var(--mca-line);
    border-radius: var(--lmh-radius);
    display: grid;
    gap: 12px;
}

.mca-lmh__rules li {
    position: relative;
    padding-left: 22px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--mca-body);
}

.mca-lmh__rules li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mca-ink);
}

/* =============================================================================
   CHIUSURA
   ========================================================================== */

.mca-lmh__closing {
    padding-bottom: 130px;
    text-align: center;
    max-width: 720px;
}

.mca-lmh__closing { margin-left: auto; margin-right: auto; }

.mca-lmh__closing p {
    margin: 18px 0 30px;
    font-size: 16px;
    line-height: 1.75;
    font-weight: 300;
}

/* =============================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1199.98px) {
    .mca-lmh__grid { gap: 44px; }
    .mca .mca-lmh__title { font-size: 40px; }
    .mca-lmh__form { padding: 26px; }
}

@media (max-width: 991.98px) {
    /* Il video smette di essere appiccicato: in colonna singola seguirebbe lo
       scorrimento restando sopra al modulo, che è quello che si deve usare. */
    .mca-lmh__grid { grid-template-columns: 1fr; gap: 36px; }
    .mca-lmh__media { position: static; }
    .mca-lmh__poster { max-height: 52vh; }

    .mca-lmh__hero { padding-bottom: 72px; }
    .mca-lmh__how { padding-top: 84px; padding-bottom: 84px; }
    .mca-lmh__know { padding-bottom: 84px; }
    .mca-lmh__topics { padding: 84px 0; }

    .mca-lmh__boxes { grid-template-columns: 1fr; gap: 20px; }

    .mca-lmh__how-grid { grid-template-columns: 1fr; gap: 32px; }

    .mca-lmh__closing { padding-bottom: 96px; }
}

@media (max-width: 767.98px) {
    .mca .mca-lmh__title { font-size: 32px; }
    .mca-lmh__frame { border-radius: 18px; }

    .mca-lmh__form { padding: 22px 20px; }
    /* Due schede di livello affiancate sotto i 768px diventano due colonne da
       130px: il prezzo va a capo sul nome e si legge peggio di una sopra
       l'altra. */
    .mca-lmh__levels { grid-template-columns: 1fr; }

    .mca-lmh__facts { grid-template-columns: 1fr; }

    .mca-lmh__box { padding: 26px 22px 28px; }

    .mca .mca-lmh__how-lead { font-size: 21px; }
    .mca-lmh__how-row { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
    .mca-lmh__rules { padding: 24px 22px; }

    .mca-lmh__play { left: 14px; bottom: 14px; padding: 6px 18px 6px 6px; gap: 10px; }
    .mca-lmh__play-icon { width: 42px; height: 42px; }
}

@media (max-width: 575.98px) {
    .mca-lmh__box-title { font-size: 23px; }
    .mca-lmh__play-label { display: none; }
    .mca-lmh__play { padding: 6px; }
}

/* Il video che parte al clic è una scelta di chi guarda, non un'animazione:
   qui si toglie solo il sollevamento del tasto. */
@media (prefers-reduced-motion: reduce) {
    .mca-lmh__play { transition: none; }
    .mca-lmh__play:hover { transform: none; }
}