/* =============================================================================
   Percorsi — catalogo dei corsi LearnDash
   Trasposizione della pagina «Corsi» del layout `layout-accademy/`.
   Markup: percorsi.php · Base: assets/css/academy-base.css
   ========================================================================== */

/* =============================================================================
   COME SI SALE
   ========================================================================== */
.mca-ladder-wrap { padding-top: 80px; padding-bottom: 20px; }

.mca-ladder {
    border: 1px solid rgba(14, 14, 14, .14);
    border-radius: 22px;
    padding: 40px 40px 44px;
}
.mca-ladder__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 34px;
}
.mca-ladder__note {
    max-width: 400px;
    font-size: 15.5px;
    line-height: 1.7;
    font-weight: 300;
}

/* Una colonna per livello: il numero lo passa il PHP in --mca-steps. */
.mca-ladder__steps {
    display: grid;
    grid-template-columns: repeat(var(--mca-steps, 5), 1fr);
    gap: 0;
    align-items: start;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mca-ladder__step { padding-right: 14px; }
.mca-ladder__step.is-last { padding-right: 0; }

.mca-ladder__marker { display: flex; align-items: center; }
.mca-ladder__num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(14, 14, 14, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
/* Il primo livello è quello ad accesso libero: pieno, come nel layout. */
.mca-ladder__num.is-open {
    background: var(--mca-ink);
    border-color: var(--mca-ink);
    color: #fff;
}
.mca-ladder__line { flex: 1; height: 1px; background: rgba(14, 14, 14, .18); }

.mca-ladder__name { font-size: 16px; font-weight: 600; margin-top: 16px; }
.mca-ladder__access { font-size: 13px; color: var(--mca-muted); margin-top: 5px; }

/* =============================================================================
   CARD DEI PERCORSI
   ========================================================================== */
.mca-courses { padding-top: 60px; padding-bottom: 40px; }

.mca-courses__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.mca-courses__empty {
    padding: 60px 0 80px;
    font-size: 17px;
    font-weight: 300;
}

.mca-course {
    /* Riferimento per la copertura cliccabile stesa dal link del titolo. */
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(14, 14, 14, .14);
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    transition: border-color .3s ease, box-shadow .3s ease,
                opacity .8s cubic-bezier(.19, 1, .22, 1), transform .8s cubic-bezier(.19, 1, .22, 1);
}
/* `focus-within` accanto a `hover`: chi arriva col tabulatore deve vedere la
   card accendersi come chi ci passa sopra col mouse. */
.mca-course:hover,
.mca-course:focus-within {
    border-color: rgba(14, 14, 14, .3);
    box-shadow: 0 24px 50px rgba(14, 14, 14, .1);
}

/* ── Card cliccabile ─────────────────────────────────────────
   Tutta la card porta al corso, ma il carrello deve restare il carrello.
   L'ancora vera sta sul titolo — così il link ha un testo suo e il markup
   resta valido — e questo ::after la allarga fino ai bordi della card.
   Sopra la copertura risalgono i soli elementi con un'azione propria: il
   bottone principale, il rimando «scopri» e il «visualizza carrello» che
   WooCommerce inserisce dopo l'aggiunta via AJAX. */
.mca-course__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.mca-course .mca-btn,
.mca-course .mca-course__more,
.mca-course .added_to_cart {
    position: relative;
    z-index: 2;
}

/* Il titolo non deve virare da solo al passaggio del mouse: il colore del link
   generico di `.mca` vincerebbe qui, e la risposta al hover è già della card. */
.mca .mca-course__link,
.mca .mca-course__link:hover { color: inherit; }

/* Il vertice del percorso: card scura. */
.mca-course--top {
    background: var(--mca-ink);
    border-color: var(--mca-ink);
    color: #fff;
}
.mca-course--top .mca-course__title { color: #fff; }
.mca-course--top .mca-course__text { color: var(--mca-onDark); }
.mca-course--top .mca-tag { border-color: rgba(255, 255, 255, .25); color: #fff; }
.mca-course--top .mca-course__price-now { color: #fff; }

/* ── Immagine ────────────────────────────────────────────── */
.mca-course__media {
    position: relative;
    overflow: hidden;
}
/* Niente riquadro imposto: la foto entra con le sue proporzioni e non viene
   tagliata. `object-*` resta per il giorno in cui il riquadro tornasse. */
.mca-course__media img {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* Le copertine dei corsi hanno il soggetto (e spesso il titolo) in alto. */
    object-position: top;
    transition: transform .7s cubic-bezier(.19, 1, .22, 1);
}
.mca-course:hover .mca-course__media img { transform: scale(1.04); }

/* ── Corpo ───────────────────────────────────────────────── */
.mca-course__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 26px 26px 28px;
}
.mca .mca-course__title { font-weight: 600; font-size: 25px; }
.mca-course__text {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.65;
    font-weight: 300;
    /* Spinge prezzo e bottone in fondo: le card restano allineate. */
    flex: 1;
}
.mca-course__tags { display: flex; gap: 7px; margin-top: 16px; flex-wrap: wrap; }

/* Prossima partenza: sta fra le pastiglie e il prezzo perché è l'informazione
   che si cerca subito dopo aver capito di cosa si tratta. */
.mca-course__start {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 13.5px;
    color: var(--mca-body);
}
.mca-course__start svg { flex-shrink: 0; color: var(--mca-muted); }
.mca-course--top .mca-course__start { color: var(--mca-onDark); }
.mca-course--top .mca-course__start svg { color: rgba(255, 255, 255, .5); }

/* I posti rimasti sulla prossima partenza, e la riga che dice che non ce ne
   sono più. Il verde è la risposta che si cerca; lo spento dice di aspettare. */
.mca-course__seats {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 100px;
    background: rgba(23, 132, 90, .1);
    font-size: 11px;
    font-weight: 600;
    color: #17845a;
    white-space: nowrap;
}
.mca-course__start--out span {
    padding: 4px 11px;
    border-radius: 100px;
    background: rgba(14, 14, 14, .07);
    font-size: 11.5px;
    letter-spacing: .04em;
    color: var(--mca-muted);
}
.mca-course--top .mca-course__start--out span { background: rgba(255, 255, 255, .14); color: var(--mca-onDark); }

/* Accesso teoria: una riga che dice cosa c'è e cosa manca. Il tono è quello
   della nota, non dell'avviso: non è un problema, è un mezzo passo. */
.mca-course__theory {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(14, 14, 14, .05);
    font-size: 13px;
    line-height: 1.5;
}
.mca-course--top .mca-course__theory { background: rgba(255, 255, 255, .1); color: var(--mca-onDark); }

.mca-course__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 22px;
}
.mca-course__price-now { font-size: 30px; font-weight: 700; }
.mca-course__price-now--sm { font-size: 24px; margin-top: 18px; }
.mca-course__price-old { font-size: 14px; color: var(--mca-muted); text-decoration: line-through; }
.mca-course__note { font-size: 12.5px; color: var(--mca-muted); margin-top: 3px; }

.mca-course .mca-btn--block { margin-top: 18px; }

/* Quando il percorso si compra, il carrello prende il posto d'onore e questo
   diventa il rimando alla pagina del livello: sta sotto il bottone, in tono
   minore, così la card resta una sola gerarchia e non due bottoni pari. */
.mca-course__more {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-size: 13px;
    color: var(--mca-body);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mca-course__more:hover { color: var(--mca-ink); }

/* Card scura in cima alla scala: testo e link tornano chiari. */
.mca-course--top .mca-course__more,
.mca-course--top .added_to_cart { color: var(--mca-onDark); }
.mca-course--top .mca-course__more:hover,
.mca-course--top .added_to_cart:hover { color: #fff; }

/* ── Card «Level Match» ──────────────────────────────────── */
.mca-course--match {
    justify-content: center;
    padding: 34px 30px;
    background: var(--mca-cream);
    border: 1px dashed rgba(14, 14, 14, .3);
}
.mca-course--match:hover { box-shadow: none; border-color: rgba(14, 14, 14, .5); }
.mca-course__mark {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
}
.mca-course__mark circle:first-child {
    transform-origin: 50px 50px;
    animation: mcaSpin 26s linear infinite;
}
.mca-course--match .mca-course__text { flex: 0 0 auto; }

/* =============================================================================
   LEVEL MATCH: come funziona

   Era una lastra nera alta mezzo schermo, e su questa pagina la lastra nera
   c'è già: la cover in cima. Due blocchi pieni sullo stesso scorrimento
   pesano, e il secondo, che spiega una strada alternativa e non la
   principale, non ha il diritto di gridare quanto la testata.

   Quindi il fondo diventa la crema del marchio, il nero resta solo dove serve
   a segnare (numeri, filetto della nota, occhiello) e i quattro passi
   diventano quattro schede bianche staccate. Lo stesso contenuto smette di
   essere un muro e diventa una sequenza, che è quello che è: uno, due, tre,
   quattro.
   ========================================================================== */
.mca-lm-wrap { padding-top: 50px; padding-bottom: 40px; }

.mca-lm {
    border-radius: 26px;
    padding: 44px 40px 40px;
    background: var(--mca-cream);
    color: var(--mca-ink);
}

.mca-lm__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 36px;
    flex-wrap: wrap;
    padding-bottom: 30px;
    margin-bottom: 30px;
    /* Un filetto invece di uno stacco vuoto: dice «qui finisce il perché e
       comincia il come» senza aggiungere un titolo che nessuno leggerebbe. */
    border-bottom: 1px solid rgba(14, 14, 14, .12);
}
.mca .mca-lm__head .mca-title { font-size: 28px; }
.mca .mca-lm__lead {
    max-width: 520px;
    font-size: 15.5px;
    line-height: 1.7;
    font-weight: 400;
    color: var(--mca-body-dark);
}

.mca-lm__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Ogni passo è una scheda a sé, non una colonna di un blocco: il bianco su
   crema stacca da solo e rende il conto, quattro cose da fare, visibile
   prima di leggere una parola. */
.mca-lm__step {
    padding: 24px 22px 26px;
    border: 1px solid rgba(14, 14, 14, .1);
    border-radius: 18px;
    background: #fff;
}

/* Il numero come sigillo, non come etichetta: alla misura di prima era una
   riga di testo in più sopra il titolo, e si perdeva. */
.mca-lm__num {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mca-ink);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
}
.mca .mca-lm__title { font-size: 17px; font-weight: 600; margin: 16px 0 8px; }
.mca .mca-lm__step p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 400;
    color: var(--mca-body-dark);
}

/* La nota non è un quinto passo: è la precisazione che evita l'equivoco più
   costoso della pagina. Il filetto nero a sinistra la marca come un a parte,
   e il fondo bianco la stacca dalla crema senza chiuderla in un riquadro. */
.mca .mca-lm__note {
    margin: 26px 0 0;
    padding: 20px 22px;
    border-left: 3px solid var(--mca-ink);
    border-radius: 0 14px 14px 0;
    background: #fff;
    max-width: none;
    font-size: 14.5px;
    line-height: 1.7;
    font-weight: 400;
    color: var(--mca-body-dark);
}

/* =============================================================================
   CONTENUTO DELLA PAGINA + CTA
   ========================================================================== */
.mca-percorsi__content {
    padding-top: 20px;
    padding-bottom: 20px;
    max-width: 820px;
    font-size: 17px;
    line-height: 1.8;
    font-weight: 300;
}
.mca-percorsi__content p { margin-bottom: 18px; }

.mca-percorsi__cta-wrap { padding-top: 40px; padding-bottom: 110px; }

.mca-percorsi__cta {
    border-radius: 22px;
    padding: 52px 48px;
    background: var(--mca-cream);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.mca-percorsi__cta p {
    margin: 10px 0 0;
    max-width: 560px;
    font-size: 16.5px;
    line-height: 1.7;
    font-weight: 300;
}

/* =============================================================================
   PACCHETTI
   Più livelli in un acquisto solo: card gemelle di quelle dei percorsi.
   Markup: percorsi.php · template-parts/learndash/bundle-card.php
   ========================================================================== */
.mca-bundles { padding-top: 20px; padding-bottom: 40px; }

.mca-bundles__head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: end;
    margin-bottom: 26px;
}
.mca-bundles__note {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    font-weight: 300;
    color: var(--mca-body);
}

/* La card del pacchetto non ha la copertura cliccabile delle card percorso:
   il link è il titolo e finisce lì. Dentro c'è l'elenco dei livelli, e una
   copertura sopra lo renderebbe un elenco che porta da un'altra parte. */
.mca-course--bundle { border-color: rgba(14, 14, 14, .22); }
.mca .mca-course--bundle .mca-course__title a { color: inherit; }
.mca .mca-course--bundle .mca-course__title a:hover { color: var(--mca-body); }

/* Nella card percorso è la descrizione a prendersi lo spazio in eccesso; qui
   quel ruolo passa all'elenco dei livelli, che è la parte che cresce davvero.
   Senza, due card con un numero diverso di livelli mandano prezzo e bottone a
   quote diverse. */
.mca-course--bundle .mca-course__text { flex: 0 0 auto; }
.mca-course--bundle .mca-bundle__levels { flex: 1; }

/* ── I livelli compresi ─────────────────────────────────────────────────── */
.mca-bundle__levels {
    list-style: none;
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(14, 14, 14, .1);
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.mca-bundle__level {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--mca-body-dark);
}
.mca-bundle__level svg {
    flex-shrink: 0;
    /* `baseline` allinea il testo, non l'icona: questi 2px la rimettono
       sulla riga invece che appesa sopra. */
    transform: translateY(2px);
    color: var(--mca-muted);
}
.mca-bundle__level.is-owned { color: var(--mca-muted); }
.mca-bundle__level.is-owned svg { color: var(--mca-done, #17845a); }
.mca-bundle__level em {
    display: block;
    font-style: normal;
    font-size: 12.5px;
    color: var(--mca-muted);
    margin-top: 1px;
}

/* ── Quello che ha già ──────────────────────────────────────────────────── */
.mca-bundle__owned {
    margin: 16px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--mca-cream);
    font-size: 13px;
    line-height: 1.55;
    color: var(--mca-body-dark);
}

/* ── Il risparmio ───────────────────────────────────────────────────────── */
/* Il prezzo pieno barrato sta con gli altri prezzi (`.mca-course__price-old`):
   qui c'è solo la riga che dice quanto si risparmia, e va letta dopo la cifra. */
.mca-bundle__saving {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--mca-done, #17845a);
}
.mca-bundle__saving .amount,
.mca-bundle__saving bdi { font-weight: 600; }

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199.98px) {
    .mca .mca-cover__title { font-size: 42px; }
    .mca-courses__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991.98px) {
    .mca-bundles__head { grid-template-columns: 1fr; align-items: start; gap: 12px; }

    .mca-cover__inner { padding-top: 60px; padding-bottom: 56px; }
    .mca-cover__stats { gap: 28px; }
    .mca-ladder-wrap { padding-top: 56px; }
    .mca-ladder { padding: 30px 26px 32px; }

    /* Lo schema a colonne diventa una lista: sotto i 1000px cinque tappe
       affiancate finirebbero illeggibili. */
    .mca-ladder__steps { grid-template-columns: 1fr; gap: 18px; }
    .mca-ladder__step { display: grid; grid-template-columns: 34px 1fr; gap: 0 14px; padding-right: 0; }
    .mca-ladder__marker { grid-row: span 2; }
    .mca-ladder__line { display: none; }
    .mca-ladder__name { margin-top: 0; }
    .mca-ladder__access { margin-top: 2px; }

    .mca-percorsi__cta { padding: 36px 28px; }
    .mca-lm { padding: 34px 26px 30px; }
    .mca-lm__head { padding-bottom: 24px; margin-bottom: 24px; }
    /* Le schede hanno già il loro bordo: qui basta lo spazio fra due colonne. */
    .mca-lm__steps { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 767.98px) {
    .mca .mca-cover__title { font-size: 28px; letter-spacing: .08em; }
    .mca-cover__text { font-size: 16px; }
    .mca-courses { padding-top: 40px; }
    .mca-courses__grid { grid-template-columns: 1fr; }
    .mca-lm-wrap { padding-top: 30px; }
    .mca-lm__steps { grid-template-columns: 1fr; }
    .mca-lm__step { padding: 20px 20px 22px; }
    .mca-percorsi__cta-wrap { padding-bottom: 70px; }
}