/* catalogo.css - la pagina indice dei corsi (corsi/index.html e en/courses/index.html).
   Sta sopra style.css e ne usa i token: qui dentro non si ridefinisce nessuna variabile.

   ⚠️ I colori seguono website/design-system/AIMAX-ACADEMY-BRUTALIST-DESIGN-SYSTEM.md:
   il GIALLO e' il primary, cioe' il colore dell'azione. L'arancione e' `warning`, un
   colore di STATO: usarlo per un pulsante direbbe "attenzione" dove si voleva dire
   "premi qui". La prima stesura di questa pagina lo sbagliava.

   Le variabili qui sotto sono quelle di style.css (--aimax-yellow, --shadow-md...),
   che sono gli stessi valori del design system con un altro nome. */

/* ===== LE RIGHE ORIZZONTALI =====
   ⚠️ `ds-allineamento.css` §6 mette `border-top: 4px !important` su OGNI <section>.
   Sulla home ci sono cinque sezioni lunghe e quel tratto le separa; qui le sezioni
   sono una per area, quindi diventavano nove righe in una schermata, che non
   dividevano niente e facevano rumore. Le card hanno gia' il loro bordo nero: fra
   una sezione e l'altra la separazione la fa lo spazio.

   L'`!important` qui e' l'unico modo di rispondere a un `!important`: la specificita'
   da sola non basta. Si spegne solo dentro questa pagina, perche' catalogo.css lo
   carica solo lei; il foglio condiviso non si tocca. */
main > section,
main .cat-sezione {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* Stesso discorso per l'aria: il foglio condiviso da alle <section> un padding
   verticale pensato per le sezioni lunghe della home. Qui ogni area e' una
   <section>, quindi quel padding si sommava al margine e fra una fila di card e
   il titolo dopo restavano quasi cento pixel di niente. Lo spazio lo decide
   .cat-sezione + .cat-sezione, un posto solo. */
main .cat-sezione {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ===== INTESTAZIONE ===== */
.cat-intro {
    padding: var(--space-lg) 0 var(--space-md);
}

.cat-titolo {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.15;
    margin: var(--space-xs) 0 var(--space-sm);
    /* niente max-width: le righe le decide il <br> nel markup, non la colonna */
}

.cat-titolo mark {
    background: var(--aimax-yellow);
    padding: 0 0.15em;
}

.cat-sottotitolo {
    font-size: 1.05rem;
    max-width: 62ch;
    color: var(--text-secondary);
}

.cat-sottotitolo strong { color: var(--text-primary); }

/* ===== BARRA DEI COMANDI =====
   Appiccicata in alto: con undici corsi si scorre, e il selettore deve restare
   raggiungibile senza tornare su. */
.cat-comandi {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg-primary);
    border-bottom: var(--border-width) solid var(--border-color);
    padding: var(--space-sm) 0;
}

.cat-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.cat-gruppo-scelta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.cat-etichetta {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

/* i due modi di leggere il catalogo */
.cat-tabs { display: flex; }

.cat-tab {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    background: var(--bg-card);
    color: var(--text-primary);
    border: var(--border-width) solid var(--border-color);
    padding: 0.45rem 0.9rem;
    transition: none;            /* il brutalismo non sfuma: o e' premuto o non lo e' */
}

.cat-tab + .cat-tab { border-left: 0; }
.cat-tab:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.cat-tab:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.cat-tab:hover { background: var(--bg-secondary); }

.cat-tab.is-attiva {
    background: var(--aimax-yellow);
    box-shadow: inset 0 -3px 0 var(--border-color);
}

/* ricerca */
.cat-ricerca { position: relative; display: flex; align-items: center; }

.cat-ricerca input {
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 0.45rem 2.25rem 0.45rem 0.75rem;
    min-width: 15rem;
    background: var(--bg-card);
    color: var(--text-primary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-sm);
}

.cat-ricerca input:focus {
    outline: none;
    box-shadow: var(--shadow-sm);
}

.cat-ricerca input::-webkit-search-cancel-button { display: none; }

.cat-pulisci {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: 0;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0 0.25rem;
}

.cat-pulisci:hover { color: var(--text-primary); }

.cat-conteggio {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-top: var(--space-xs);
}

.cat-conteggio strong { color: var(--text-primary); }

/* ===== SEZIONI =====
   Le sezioni si separano con lo spazio, non con una riga: le card hanno gia' il
   loro bordo nero, e sommarci tratti orizzontali riempiva la pagina di linee che
   non dividevano niente. */
.cat-lista { padding: var(--space-md) 0 var(--space-xl); }

.cat-sezione + .cat-sezione { margin-top: var(--space-lg); }

.cat-sezione-testa {
    margin-bottom: var(--space-sm);
}

.cat-sezione-titolo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.cat-sezione-titolo h2 {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 2vw, 1.3rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.cat-sezione-quanti {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--bg-secondary);
    border: var(--border-width) solid var(--border-color);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    white-space: nowrap;
}

.cat-sezione-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 0.2rem;
}

/* ===== GRIGLIA =====
   Card piu' strette di prima (15rem invece di 19): a 1440 ne stanno quattro per riga
   invece di tre, e la pagina si legge senza scorrere per mezzo minuto.

   ⚠️ `auto-fill` teneva in piedi le colonne vuote: la sezione con un corso solo
   restava alta come quella con quattro, e fra una sezione e l'altra si aprivano
   buchi da mezzo schermo. `auto-fit` fa collassare le tracce senza contenuto. */
.cat-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-md);
}

/* Con poche card la traccia 1fr le allargherebbe fino a mezza pagina: il tetto
   le tiene della stessa larghezza delle altre sezioni. */
.cat-griglia > * { max-width: 22rem; }

/* ===== CARD =====
   L'immagine del corso non e' piu' una banda in cima: sta DIETRO al testo, tenuta
   bassa di opacita'. Cosi' la card e' meta' di prima e l'illustrazione fa il suo
   mestiere (riconoscere il corso a colpo d'occhio) senza rubare spazio. */
.cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    isolation: isolate;                    /* tiene lo sfondo sotto al testo */
    overflow: hidden;
    min-height: 12rem;
    background: var(--bg-card);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: var(--space-sm) var(--space-md) var(--space-md);
    text-decoration: none;
    color: inherit;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* La card si accende quando il mouse e' sul corpo, non sui pulsanti del piede:
   con :has() l'hover sul piede la lascia ferma. Passando su "Acquista" la card che
   si sposta di 4px sembra un difetto, non un invito.
   Dove :has() non c'e', si torna al comportamento di prima - la card si sposta
   sempre - che e' esattamente quello che faceva fino a ieri: nessuno ci perde. */
.cat-card:hover,
.cat-card:focus-within {
    transform: translate(4px, 4px);
    box-shadow: none;
    outline: none;
}

@supports selector(:has(*)) {
    .cat-card:has(.cat-card-piede:hover) {
        transform: none;
        box-shadow: var(--shadow-md);
    }
}

/* ===== IL LINK AL CORSO =====
   Sta sul titolo, ed e' l'unico link "corso" della card: per un crawler il testo
   del link e' il nome del corso. Il ::after lo stende su tutta la card, cosi' si
   continua a cliccare ovunque come quando la card era un <a>. Il piede sta sopra
   di lui (z-index), quindi "Acquista" resta cliccabile. */
.cat-card-link {
    color: inherit;
    text-decoration: none;
}

.cat-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* lo sfondo, sbiadito. In hover si alza: la card "si accende" senza cambiare forma */
.cat-card-sfondo {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.12;
    transition: opacity 0.1s ease;
}

/* :focus-within e non :focus-visible: la card adesso e' un <div> e il fuoco lo
   prendono i link dentro di lei, non lei. */
.cat-card:hover .cat-card-sfondo,
.cat-card:focus-within .cat-card-sfondo { opacity: 0.22; }

/* riga in cima: icona + livello a sinistra, bollini a destra */
.cat-card-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.cat-card-chi {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

/* Senza bordo e senza fondo: l'illustrazione e' gia' un oggetto disegnato, e
   incorniciarla la faceva sembrare un'icona di sistema. */
.cat-ico {
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    object-fit: contain;
}

.cat-card-livello {
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.cat-bollini { display: flex; gap: 0.3rem; flex: none; }

.cat-bollino {
    font-family: var(--font-heading);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.12rem 0.45rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: 999px;
}

/* verde = success, azzurro = info. Il giallo qui NON si usa: e' il colore
   dell'azione (la CTA), e un bollino giallo sembrerebbe un pulsante. */
.cat-bollino--gratis { background: var(--aimax-green); }
.cat-bollino--beta   { background: #4DD2FF; }

/* corpo */
.cat-card h3 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    line-height: 1.25;
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
}

.cat-card-frase {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-secondary);
    flex: 1;                              /* spinge i numeri in fondo, card allineate */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Niente tratteggio sopra: bastano il colore piu' chiaro e lo spazio a staccarli
   dalla frase, e undici card con la riga punteggiata facevano rumore. */
.cat-card-numeri {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    margin-top: var(--space-sm);
}

/* ===== IL PIEDE, DUE AZIONI =====
   Prima qui c'era una CTA sola, in overlay, che compariva in hover. Adesso sono due
   e una vende, quindi stanno SEMPRE in vista: un pulsante d'acquisto che si mostra
   solo al passaggio del mouse non esiste su un telefono, dove non c'e' hover.
   Divide la larghezza in due parti uguali, attaccato al fondo della card. */
.cat-card-piede {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: var(--space-sm) calc(-1 * var(--space-md)) calc(-1 * var(--space-md));
    border-top: var(--border-width) solid var(--border-color);
}

.cat-card-scopri,
.cat-card-compra {
    position: relative;
    z-index: 1;                            /* sopra al ::after che copre la card */
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    text-decoration: none;
    padding: 0.65rem 0.5rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: background 0.1s ease, color 0.1s ease;
}

/* Il filo che divide i due: e' un bordo solo, non due, o a meta' card si vedrebbe
   una riga doppia spessa il doppio di tutte le altre. */
.cat-card-compra {
    border-left: var(--border-width) solid var(--border-color);
    color: var(--aimax-blue);
}

.cat-card-scopri:hover,
.cat-card-scopri:focus-visible {
    background: var(--aimax-yellow);
    outline: none;
}

/* Si inverte: il blu che era testo diventa fondo. */
.cat-card-compra:hover,
.cat-card-compra:focus-visible {
    background: var(--aimax-blue);
    color: var(--bg-secondary);
    outline: none;
}

/* la parola cercata, evidenziata nel titolo */
.cat-card mark {
    background: var(--aimax-yellow);
    padding: 0 0.1em;
}

/* L'elenco di riserva senza javascript: nudo, serve a chi non esegue gli script. */
.cat-noscript {
    list-style: square;
    padding-left: 1.2rem;
    font-size: 1.05rem;
    line-height: 2;
}

/* ===== NIENTE RISULTATI ===== */
.cat-vuoto {
    text-align: center;
    padding: var(--space-2xl) 0;
    font-size: 1.05rem;
}

.cat-azzera {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    background: var(--aimax-yellow);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: 0.4rem 0.9rem;
    margin-left: 0.4rem;
}

.cat-azzera:active { transform: translate(2px, 2px); box-shadow: none; }

/* ===== CHIUSURA ===== */
.cat-fondo { padding: 0 0 var(--space-2xl); }

.cat-fondo-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
    /* Il grigio di servizio del sito, non il giallo: il giallo qui competeva col
       pulsante, che e' la cosa da guardare. Adesso e' l'unico colore del riquadro. */
    background: var(--bg-secondary);
}

.cat-fondo-box h2 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    margin-bottom: 0.3rem;
}

.cat-fondo-box p { max-width: 52ch; }

/* ===== SOLO PER I LETTORI DI SCHERMO ===== */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ===== TELEFONO ===== */
@media (max-width: 640px) {
    /* Su schermo stretto gli a capo scritti a mano darebbero righe da una parola:
       il testo va a capo da solo. */
    .cat-titolo br, .cat-sottotitolo br { display: none; }
    .cat-barra { flex-direction: column; align-items: stretch; }
    .cat-gruppo-scelta { justify-content: space-between; }
    .cat-ricerca input { min-width: 0; width: 100%; }
    .cat-griglia { grid-template-columns: 1fr; }
    .cat-card { min-height: 0; }
}

/* Chi ha chiesto meno animazioni non le riceve. I due pulsanti del piede restano
   comunque leggibili: cambiano colore di colpo invece di sfumare. */
@media (prefers-reduced-motion: reduce) {
    .cat-card,
    .cat-card-sfondo,
    .cat-card-scopri,
    .cat-card-compra { transition: none; }
    .cat-card:hover, .cat-card:focus-within { transform: none; }
}