/* ============================================================
   RESTYLING 09/2026 — HOME MULTI-CORSO
   Caricato DOPO restyling-comuni.css, e solo da
   /home-5-ottobre: qui sta SOLO cio' che e' specifico della
   home. Tutto il resto (sezioni, testate, specifiche, spunte,
   pilastri, numeri, pulsanti, badge) arriva dal foglio comune
   e non viene ridefinito.

   Stessa convenzione di nomi del foglio comune: prefisso r-.
   ============================================================ */

/* ------------------------------------------------------------
   TESTATA: SEI VOCI IN UNA BARRA LARGA 1240

   La testata nasce con tre voci e ne ha cinque. Fra 992 e 1200px
   logo + cinque pillole + pulsante non ci stanno in riga e il
   testo delle voci andrebbe a capo dentro la pillola. Invece di
   accorciare le etichette stringo gli spazi interni: le voci
   restano alte 40px e larghe abbastanza per il dito.
   ------------------------------------------------------------ */
.nav-item p {
  white-space: nowrap;
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  .flex-block-2 {
    gap: var(--_project-font---spacing--20);
  }
  .nav-item {
    padding: 0 10px;
  }
  .nav-cta {
    padding: 0 18px;
  }
}

/* ------------------------------------------------------------
   IL FUOCO DA TASTIERA SI VEDE SU OGNI COMANDO

   Il foglio comune lo dichiara sui suoi pulsanti; qui lo estendo
   a tutti i collegamenti delle sezioni nuove e del piede pagina,
   compresi quelli che pulsanti non sono (loghi, voci di elenco).
   ------------------------------------------------------------ */
.r-sezione a:focus-visible,
.r-piede a:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   1. HERO
   Testo a sinistra, immagine a destra. Non uso .hero-section:
   quelle regole impongono l'altezza dello schermo intero, che
   con la testata fissa da 80px spinge sotto la piega meta' del
   contenuto.
   ------------------------------------------------------------ */
.r-hero {
  display: grid;
  grid-template-columns: minmax(0, 616px) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.r-hero-testo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--_project-font---spacing--24);
}

.r-hero-testo h1 {
  margin: 0;
}

.r-hero-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--_project-font---spacing--16);
}

/* La riga di credito ai due enti che fanno la scuola. */
.r-hero-credito {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: var(--_project-font---spacing--8);
}

.r-logo-credito {
  width: auto;
  height: 40px;
  object-fit: contain;
}

.r-hero-media {
  /* .w-background-video impone height: 500px: senza height: auto
     l'altezza fissa vince sulla proporzione e il riquadro si
     stringe invece di riempire la colonna. */
  height: auto;
  aspect-ratio: 5 / 6;
  max-height: 548px;
  border-radius: var(--_project-font---border-radius--32);
  overflow: hidden;
}

/* ------------------------------------------------------------
   2. LE DUE SCHEDE CORSO
   Griglia a due colonne di uguale larghezza: e' il punto di
   tutta la sezione. Le voci sono le stesse e nello stesso
   ordine, quindi l'occhio confronta in orizzontale; perche'
   funzioni davvero le righe devono partire alla stessa altezza,
   e per questo prezzo e specifiche hanno un'altezza propria che
   non dipende da quanto e' lunga la descrizione sopra.
   ------------------------------------------------------------ */
.r-schede-corso {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--_project-font---spacing--24);
  align-items: stretch;
}

.r-scheda-corso {
  display: flex;
  flex-direction: column;
  gap: var(--_project-font---spacing--24);
  padding: var(--_project-font---all-padding--40px);
  border: 1px solid var(--neutral-02);
  border-radius: var(--_project-font---border-radius--32);
  background-color: var(--neutral-01);
}

.r-scheda-riga-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}

.r-scheda-nome {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Due descrizioni di lunghezza diversa non devono sfalsare le
     righe sotto: il blocco occupa lo spazio della piu' alta. */
  min-height: 116px;
}

.r-scheda-nome h3 {
  margin: 0;
}

/* Il prezzo e' sempre presente e sempre sulla stessa riga: e'
   la voce che rende le due schede confrontabili a colpo d'occhio
   ("Gratuito" e "690€" alla stessa misura, alla stessa altezza). */
.r-scheda-prezzo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: var(--_project-font---spacing--20) 0;
  border-bottom: 1px solid var(--neutral-02);
}

.r-scheda-spunte {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Il comando sta in fondo alla scheda e largo quanto la scheda:
   le due schede hanno contenuti di altezza diversa e senza
   questo i due pulsanti non sarebbero allineati fra loro. */
.r-scheda-cta {
  width: 100%;
  margin-top: auto;
}


/* ------------------------------------------------------------
   IMPAGINAZIONE A DUE COLONNE
   La usano quattro sezioni: la scuola, la sede, i requisiti e
   l'attestato. Due varianti soltanto, per non moltiplicare le
   griglie: colonne uguali, oppure colonna sinistra stretta.
   ------------------------------------------------------------ */
.r-due-colonne {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px;
  align-items: center;
}

.r-due-colonne.stretta-sinistra {
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}

.r-colonna {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--_project-font---spacing--24);
}

.r-colonna h2 {
  margin: 0;
}

/* ------------------------------------------------------------
   3. UNA NUOVA GENERAZIONE
   ------------------------------------------------------------ */
.r-media-generazione {
  width: 100%;
  max-width: 380px;
  height: auto;
  aspect-ratio: 38 / 26;
  border-radius: var(--_project-font---border-radius--32);
  overflow: hidden;
}

/* I numeri della home sono tre, non quattro come nella fascia
   delle pagine corso: variante invece di ritoccare il comune.
   Restano tre su una riga anche sul telefono, come da specifica:
   sono cifre corte e una griglia 2+1 lascerebbe un buco. */
.r-numeri.r-numeri-tre {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--_project-font---spacing--8);
}

/* ------------------------------------------------------------
   4. MENO TEORIA, PIU' PRATICA
   ------------------------------------------------------------ */
.r-pilastri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--_project-font---spacing--24);
}

.r-pilastri h3 {
  margin: 0;
}

/* ------------------------------------------------------------
   5. IL POSTO GIUSTO — media e righe con icona
   ------------------------------------------------------------ */
.r-media-sede {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  border-radius: var(--_project-font---border-radius--32);
  overflow: hidden;
}

.r-elenco-icone {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.r-riga-icona {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Le icone sono a tratto e seguono currentColor: il colore lo
   decide la riga, non l'icona. */
.r-icona {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--primary-color);
}

/* ------------------------------------------------------------
   6. IL COORDINATORE DIDATTICO
   Scheda bianca sul fondo alternato: citazione a sinistra,
   ritratto a destra.
   ------------------------------------------------------------ */
.r-coordinatore {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 56px;
  align-items: center;
  padding: 48px;
  border-radius: var(--_project-font---border-radius--32);
  background-color: var(--neutral-01);
}

.r-coordinatore-testo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--_project-font---spacing--24);
}

.r-coordinatore-nome {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.r-coordinatore-ritratto {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: var(--_project-font---border-radius--24);
}

/* Etichetta neutra: la pillola del badge, ma spenta. Il viola di
   .r-badge qui griderebbe piu' della citazione che annuncia. */
.r-etichetta-neutra {
  display: inline-flex;
  align-items: center;
  height: 32px;
  margin: 0;
  padding: 0 16px;
  border-radius: var(--_project-font---border-radius--58);
  background-color: var(--neutral-02);
  color: var(--neutral-03);
}

/* ------------------------------------------------------------
   7. I REQUISITI PER PARTECIPARE
   ------------------------------------------------------------ */
.r-requisiti {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--_project-font---spacing--20);
}

.r-requisito {
  display: flex;
  gap: 12px;
  padding: var(--_project-font---all-padding--tm-padding);
  border: 1px solid var(--neutral-02);
  border-radius: var(--_project-font---border-radius--24);
  background-color: var(--neutral-01);
}

.r-requisito-testo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.r-requisito h3 {
  margin: 0;
}

/* Da 768 in su i requisiti sono schede e la spunta non serve:
   il riquadro fa gia' da segno. Sul telefono diventano un
   elenco e la spunta torna a essere l'unico segno disponibile. */
.r-requisito .r-spunta-icona {
  display: none;
}

/* ------------------------------------------------------------
   8. DAI VALORE ALLE TUE COMPETENZE — il fac-simile dell'attestato
   Non e' un attestato vero: e' un disegno di come sara'. Il nome
   e' dichiarato finto come tutti gli altri buchi di contenuto.
   ------------------------------------------------------------ */
.r-attestato {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--_project-font---spacing--24);
  width: 100%;
  min-height: 340px;
  margin: 0;
  padding: 36px;
  border: 1px solid var(--neutral-02);
  border-radius: var(--_project-font---border-radius--32);
  background-color: var(--neutral-01);
}

.r-attestato-testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--_project-font---spacing--16);
}

.r-attestato-logo {
  width: auto;
  height: 36px;
  object-fit: contain;
}

.r-attestato-corpo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* La barretta col gradiente: l'unico posto della home in cui il
   gradiente non e' ritagliato da delle lettere. */
.r-attestato-barra {
  width: 160px;
  height: 6px;
  border-radius: var(--_project-font---border-radius--8);
  background-image: var(--gaa-gradient);
}

.r-attestato-didascalia {
  margin: 0;
}

/* ------------------------------------------------------------
   10. DOMANDE FREQUENTI
   Testata ferma a sinistra, domande a destra in tre gruppi.
   ------------------------------------------------------------ */
.r-faq-colonne {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}

.r-faq-laterale {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--_project-font---spacing--24);
  position: sticky;
  /* Sotto la testata fissa, piu' il respiro di una scheda. */
  top: calc(var(--r-ingombro-testata) + var(--_project-font---all-padding--card-padding));
}

.r-faq-laterale h2 {
  margin: 0;
}

.r-faq-gruppi {
  display: flex;
  flex-direction: column;
  gap: var(--_project-font---spacing--32);
}

.r-faq-gruppo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.r-faq-etichetta {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Le domande in attesa di risposta: elenco dentro al segnaposto.
   Restano domande, non finte risposte. */
.r-elenco-domande {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 0;
  padding-left: 20px;
}

.r-elenco-domande li {
  color: var(--neutral-04);
}

/* ------------------------------------------------------------
   PIEDE PAGINA — le tre colonne di collegamenti
   ------------------------------------------------------------ */
.r-piede-colonne {
  display: flex;
  /* Le tre colonne stanno in riga e si prendono lo spazio che
     serve: il blocco del logo accanto e' elastico e si stringe.
     Con "wrap" invece restavano schiacciate in 400px e la terza
     colonna finiva sotto le altre due. */
  flex: none;
  flex-wrap: nowrap;
  gap: var(--_project-font---spacing--40);
  /* .footer-logo-menu-area dichiara text-align: center e i
     collegamenti lo ereditavano, finendo centrati sotto le loro
     etichette invece che incolonnati. */
  text-align: left;
}

.r-piede-gruppo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.r-piede-titolo {
  margin: 0;
  color: var(--neutral-03);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.r-piede-link {
  color: var(--neutral-04);
  text-decoration: none;
}

@media (hover: hover) {
  .r-piede-link:hover {
    color: var(--primary-color);
  }
}

/* ============================================================
   PUNTI DI ROTTURA
   991 / 767 / 479, gli stessi del sito e del foglio comune.
   ============================================================ */

@media screen and (max-width: 991px) {

  /* Tutte le impaginazioni a due colonne diventano una sola.
     L'immagine della hero passa sotto al testo: a 900px di
     larghezza una colonna da 450 non regge un titolo da 60px. */
  .r-hero,
  .r-due-colonne,
  .r-due-colonne.stretta-sinistra,
  .r-faq-colonne {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--_project-font---spacing--40);
  }

  .r-hero-media {
    aspect-ratio: 16 / 9;
    max-height: none;
  }

  /* Ferma non ha piu' senso quando la testata sta sopra le
     domande invece che accanto. */
  .r-faq-laterale {
    position: static;
  }

  .r-coordinatore {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--_project-font---spacing--32);
    padding: var(--_project-font---all-padding--32px);
  }

  .r-coordinatore-ritratto {
    height: 320px;
  }

  .r-media-generazione {
    max-width: none;
  }

  .r-piede-colonne {
    gap: var(--_project-font---spacing--40);
  }
}

@media screen and (max-width: 767px) {
  /* Le due schede corso si impilano. Fra 768 e 991 restano
     affiancate: e' li' che il confronto serve di piu' e lo
     schermo lo consente ancora. */
  .r-schede-corso,
  .r-pilastri,
  .r-requisiti {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Impilate, le due descrizioni non devono piu' allinearsi fra
     loro: l'altezza minima diventa solo un buco bianco. */
  .r-scheda-nome {
    min-height: 0;
  }

  .r-scheda-corso {
    padding: var(--_project-font---all-padding--32px);
  }

  /* I requisiti smettono di essere schede e diventano un elenco
     con la spunta: quattro riquadri in colonna su 375px sono
     quattro scatole vuote, la spunta dice la stessa cosa in un
     quarto dello spazio. */
  .r-requisiti {
    gap: 0;
  }

  .r-requisito {
    padding: var(--_project-font---spacing--20) 0;
    border: 0;
    border-top: 1px solid var(--neutral-02);
    border-radius: 0;
    background-color: #0000;
  }

  .r-requisito:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .r-requisito .r-spunta-icona {
    display: inline-flex;
    margin-top: 2px;
  }

  .r-attestato {
    min-height: 0;
    padding: var(--_project-font---all-padding--card-padding);
  }

  /* Sul telefono il piede e' gia' in colonna: le tre colonne di
     collegamenti possono andare a capo fra loro. */
  .r-piede-colonne {
    flex-wrap: wrap;
    gap: var(--_project-font---spacing--24) var(--_project-font---spacing--40);
  }

  /* I due comandi della hero sono passati al componente .cta: il
     selettore segue, se no sul telefono tornano affiancati e stretti. */
  .r-hero-azioni .cta {
    flex: 1 1 100%;
  }
}