/* ============================================================
   RESTYLING 09/2026 — PAGINE CORSO
   Caricato DOPO restyling-comuni.css, e solo dalle due pagine
   corso: /ai-essentials e /pro-hospitality.

   Le due pagine condividono un unico template: qui dentro non
   c'e' niente che valga per una sola delle due. Tutto quello che
   compare anche in home sta in restyling-comuni.css e da qui non
   viene ridefinito: dove serviva una variante l'ho aggiunta come
   classe nuova accanto a quella condivisa, non sovrascrivendola.

   Prefisso r- come nel foglio condiviso.
   ============================================================ */

/* ------------------------------------------------------------
   NOMI DEI TOKEN — due trappole della tabella di conversione

   La tabella nel documento di handoff sbaglia due nomi. Quelli
   veri, gli unici dichiarati nel design system, sono:
     --_project-font---all-padding--left-right     (non --padding-left-right)
     --_project-font---all-padding--tm-padding     (non --tm)

   Vale la pena saperlo prima di scrivere un padding: in una
   scorciatoia "padding: A B" basta che B sia una variabile non
   dichiarata perche' il browser scarti l'INTERA dichiarazione,
   quindi si perde anche il valore verticale scritto giusto. In
   questo foglio sono usati i nomi veri.
   ------------------------------------------------------------ */
:root {

  /* Stacco fra i blocchi della colonna contenuti, come il mockup. */
  --r-stacco-blocchi: 96px;
}

/* ------------------------------------------------------------
   HERO DI SECONDO LIVELLO

   Non e' la hero della home: non prende tutto lo schermo, non ha
   pulsanti (quelli stanno nel box di iscrizione, che sul telefono
   le finisce subito sotto) e si legge in un colpo d'occhio.
   Fondo neutral-02, cosi' il corpo bianco che segue stacca.
   ------------------------------------------------------------ */
.r-hero-corso {
  width: 100%;
  padding: var(--_project-font---spacing--40)
           var(--_project-font---all-padding--left-right)
           var(--_project-font---all-padding--80px);
  background-color: var(--neutral-02);
}

.r-hero-contenuto {
  display: flex;
  align-items: center;
  gap: 64px;
  width: 100%;
  max-width: var(--r-larghezza-contenuto);
  margin: 0 auto;
}

.r-hero-testo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--_project-font---spacing--20);
}

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

/* L'immagine sta a destra e non cresce: 380x300 come nel mockup.
   object-fit: cover, cosi' cambia l'inquadratura e non le
   proporzioni. */
.r-hero-media {
  flex: none;
  width: 380px;
  height: 300px;
  border-radius: var(--_project-font---border-radius--32);
  overflow: hidden;
  position: relative;
  /* Il contenitore video di Webflow mette il <video> a z-index
     -100, pensato per stare dietro a un contenuto sovrapposto. Qui
     il video E' il contenuto, e senza un contesto di
     impilamento proprio finiva dietro al fondo della fascia hero:
     la cornice restava vuota. "isolate" lo trattiene qui dentro. */
  isolation: isolate;
}

/* Il riquadro riempie la cornice a prescindere da cosa contiene:
   una foto, oppure il contenitore video di Webflow. Serve per
   forza, perche' .w-background-video impone height: 500px e una
   larghezza sua: senza questa riga il video si mostrava 190x870
   dentro una cornice 380x300, lasciandone vuota meta'. La cornice
   qui ha un'altezza dichiarata, quindi il figlio la riempie al
   100% invece di tornare ad "auto". */
.r-hero-media > * {
  width: 100%;
  height: 100%;
}

.r-hero-media img,
.r-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Riga di metadati: valori separati da punti mediani. I punti
   sono decorativi, quindi aria-hidden nel markup. */
.r-metadati {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.r-metadati > li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.r-metadati > li + li:before {
  content: "\00b7";
  color: var(--neutral-03);
}

/* Le briciole di pane hanno gia' la loro classe condivisa: qui
   serve solo il separatore fra una voce e l'altra. */
.r-briciole span[aria-hidden] {
  color: var(--neutral-03);
}

/* ------------------------------------------------------------
   CORPO DELLA PAGINA — colonna contenuti + box di iscrizione

   Il contenitore a due colonne (.r-colonne-corso) e il box sticky
   (.r-box-iscrizione) vengono dal foglio condiviso. Qui c'e' solo
   quello che riguarda il ritmo interno della colonna sinistra.
   ------------------------------------------------------------ */
.r-corpo-corso {
  padding-top: var(--_project-font---all-padding--padding-top-bottom);
}

.r-blocchi {
  display: flex;
  flex-direction: column;
  gap: var(--r-stacco-blocchi);
  width: 100%;
}

/* ------------------------------------------------------------
   L'ATTERRAGGIO DELLE ANCORE

   Le voci di menu portano a un'ancora nella pagina, e a spostare
   la pagina non e' il browser ma js/custom.js, che calcola da se'
   il punto di atterraggio tenendo conto dell'altezza della barra.

   Quella funzione si fermava se la barra non era "position:
   fixed", e con la barra sticky del restyling rispondeva zero: le
   sezioni atterravano col titolo coperto. E' stata corretta il
   25/09/2026 e ora riconosce entrambe le posizioni, quindi qui
   non serve piu' nessuna compensazione.

   Resta scroll-margin-top, che non riguarda il JS: serve quando
   si arriva sulla pagina con l'ancora gia' nell'indirizzo, dove a
   scorrere e' il browser.
   ------------------------------------------------------------ */
.r-blocco {
  scroll-margin-top: calc(var(--r-ingombro-testata) + 28px);
}

/* Testata di blocco: nelle pagine corso titolo e occhiello stanno
   incolonnati, non affiancati come in home (.r-testata-sezione). */
.r-testata-blocco {
  display: flex;
  flex-direction: column;
  gap: var(--_project-font---spacing--16);
  margin-bottom: var(--_project-font---spacing--40);
}

.r-testata-blocco h2,
.r-testata-blocco p {
  margin: 0;
}

/* ------------------------------------------------------------
   SCHEDE MODULO
   Base .single-courses-card dell'export (fondo, ombra, colonna):
   qui sopra ci va solo cio' che il restyling cambia, cioe' raggio
   24 invece di 16, spazio interno 28 e il piede separato da una
   riga. Le schede non si sollevano al passaggio del mouse: il
   sito definisce le schede col bordo, non con l'ombra.
   ------------------------------------------------------------ */
.r-moduli {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--_project-font---spacing--20);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.r-scheda-modulo {
  gap: var(--_project-font---spacing--16);
  padding: var(--_project-font---all-padding--tm-padding);
  border-radius: var(--_project-font---border-radius--24);
  border: 1px solid var(--neutral-02);
}

.r-scheda-modulo h3,
.r-scheda-modulo p {
  margin: 0;
}

.r-etichetta-modulo {
  color: var(--primary-color);
  text-transform: none;
}

/* Il piede si appoggia in fondo alla scheda anche quando i testi
   hanno lunghezze diverse: cosi' le due colonne restano allineate. */
.r-piede-modulo {
  width: 100%;
  margin-top: auto;
  padding-top: var(--_project-font---spacing--16);
  border-top: 1px solid var(--neutral-02);
  color: var(--neutral-03);
}

/* La scheda dei criteri di eleggibilita' e' una scheda modulo che
   occupa tutta la riga: stessa forma, contenuto diverso. */
.r-scheda-criteri {
  grid-column: 1 / -1;
}

.r-scheda-criteri ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--_project-font---spacing--16);
  width: 100%;
}

/* Il programma non ancora consegnato: la griglia dei moduli sta
   dentro la cornice tratteggiata dei segnaposto, cosi' si vede
   l'impaginazione che avra' senza che le schede vuote passino per
   contenuto vero. Il segnaposto e' fatto per schede piccole, qui
   deve contenere una griglia: gli serve solo piu' respiro. */
.r-segnaposto-programma {
  gap: var(--_project-font---spacing--20);
  padding: var(--_project-font---all-padding--32px);
}

.r-segnaposto-programma .r-moduli {
  margin-top: var(--_project-font---spacing--16);
}

/* Le schede dentro la cornice restano riconoscibili come schede,
   ma senza ombra: non sono contenuto, sono la forma che avra'. */
.r-segnaposto-programma .r-scheda-modulo {
  box-shadow: none;
}

/* Una domanda con la risposta gia' scritta non ha bisogno di
   essere un accordion: sarebbe un comando che apre l'unica cosa
   che c'e' da leggere. Stessa scheda delle altre, aperta. */
.r-faq-statica {
  display: flex;
  flex-direction: column;
  gap: var(--_project-font---all-padding--tm-padding);
  width: 100%;
  padding: var(--_project-font---all-padding--tm-padding);
  border-radius: var(--_project-font---border-radius--16);
  border: 1px solid var(--r-bordo-scheda-chiara);
  background-color: var(--neutral-01);
}

.r-faq-statica h3,
.r-faq-statica p {
  margin: 0;
}

/* ------------------------------------------------------------
   CALENDARIO — schede modalita'
   ------------------------------------------------------------ */
.r-modalita-elenco {
  display: flex;
  flex-direction: column;
  gap: var(--_project-font---spacing--20);
  width: 100%;
}

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

.r-modalita h3,
.r-modalita p {
  margin: 0;
}

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

/* Pillola neutra: non e' un badge (quelli sono viola e annunciano
   qualcosa), e' un'etichetta di conteggio. */
.r-pillola {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 30px;
  padding: 0 16px;
  border-radius: var(--_project-font---border-radius--58);
  background-color: var(--neutral-02);
  color: var(--neutral-03);
}

.r-giorni {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--_project-font---spacing--16);
  width: 100%;
}

.r-giorno {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--_project-font---all-padding--20px);
  border-radius: var(--_project-font---border-radius--16);
  background-color: var(--neutral-02);
}

.r-giorno p {
  margin: 0;
}

/* Il riquadro di avviso e' .disclaimer-calendario dell'export (fondo
   #fdf4f4, bordo #fab7af): qui gli serve solo di stare in colonna
   dentro un blocco flex invece che in riga dentro il vecchio
   contenitore del calendario. */
.r-blocco .disclaimer-calendario {
  flex: none;
  align-self: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: var(--_project-font---spacing--20);
}

/* ------------------------------------------------------------
   FASCIA CTA IN RIGA
   La versione condivisa incolonna titolo, testo e pulsante. Nelle
   pagine corso il pulsante sta a destra del testo: variante, non
   modifica di .r-fascia-cta.
   ------------------------------------------------------------ */
.r-fascia-cta.r-in-riga {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
}

.r-fascia-cta-testo {
  display: flex;
  flex-direction: column;
  gap: var(--_project-font---spacing--16);
  min-width: 0;
}

.r-fascia-cta .cta {
  flex: none;
}

/* ------------------------------------------------------------
   BOX DI ISCRIZIONE — contenuti interni
   La scatola, la sua posizione sticky e il separatore vengono dal
   foglio condiviso. Qui ci sono solo i pezzi che stanno dentro.
   ------------------------------------------------------------ */
.r-box-testata {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.r-box-testata h2,
.r-box-testata p {
  margin: 0;
}

/* Prezzo e postilla sulla stessa riga, allineati alla base: e' la
   stessa impaginazione della scheda corso in home. */
.r-box-prezzo {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.r-box-prezzo p {
  margin: 0;
}

.r-box-comandi {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* La larghezza piena e l'altezza dei comandi del box ora le
   portano le classi del componente (.cta--piena e .cta--l), quindi
   qui non resta niente da dimensionare. Resta un solo aggiustamento:
   il componente stacca di 8px due comandi a larghezza piena
   impilati, ma questa colonna ha gia' il suo gap di 12px e le due
   spaziature si sommerebbero. */
.r-box-comandi .cta--piena + .cta--piena {
  margin-top: 0;
}

/* Tranne che sopra un comando spento: li' i 6px in piu' non sono
   spaziatura, sono l'aria che serve al badge a cavallo del bordo
   per non finire addosso al comando di sopra. */
.r-box-comandi .cta--piena + .cta--spenta {
  margin-top: 6px;
}

.r-box-nota {
  margin: 0;
  color: var(--neutral-03);
}

/* Le tre spunte in fondo al box. */
.r-elenco-spunte {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ------------------------------------------------------------
   BARRA D'AZIONE DEL TELEFONO
   La barra la disegna il foglio condiviso. Qui c'e' il blocchetto
   di testo che le sta a sinistra, che non poteva stare li' perche'
   nome del corso e sintesi sono cose delle pagine corso.
   ------------------------------------------------------------ */
.r-barra-mobile-testo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.r-barra-mobile-testo p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   FUOCO DA TASTIERA
   L'anello dei comandi veri lo porta il componente. Questa regola
   copre tutto il resto: i collegamenti ereditati dall'export
   arrivano senza bordo del fuoco, e serve davvero, non e' una
   cintura in piu'. Misurato con la tabulazione vera: .faq-question
   (che e' .w-dropdown-toggle) ha "outline: 0" da webflow.css,
   quindi chi naviga da tastiera attraversava le quindici domande
   senza vedere dov'era.

   Le .cta sono escluse con :not(): il componente sa anche quando
   l'anello deve diventare bianco - sulla fascia blu, dove un
   anello blu su blu non si vedrebbe - e questa regola, che di
   superfici non sa niente, gli vincerebbe sopra.
   ------------------------------------------------------------ */
.r-hero-corso a:not(.cta):focus-visible,
.r-corpo-corso a:not(.cta):focus-visible,
.r-barra-mobile a:not(.cta):focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   PIEDE PAGINA DELLE PAGINE CORSO
   Fondo neutral-02, come chiede la specifica: il corpo della
   pagina e' bianco e senza questo stacco il piede ci si fonde.
   Il selettore parte dal corpo della pagina corso, cosi' vale
   solo dove quel corpo esiste e non tocca la home.
   ------------------------------------------------------------ */
.r-corpo-corso ~ .footer-section {
  background-color: var(--neutral-02);
}

/* ============================================================
   PUNTI DI ROTTURA — 991 / 767 / 479, gli stessi del sito
   ============================================================ */

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

  /* Il box non e' piu' una colonna: la specifica lo vuole SUBITO
     sotto la hero, a larghezza piena, non in fondo alla pagina.
     Nel DOM sta dopo la colonna contenuti (l'ordine di lettura
     giusto sul desktop), quindi qui lo tiro davanti con order.
     La tabulazione segue l'ordine del DOM e resta corretta. */
  .r-colonne-corso > .r-box-iscrizione {
    order: -1;
  }

  .r-hero-contenuto {
    flex-direction: column;
    align-items: stretch;
    gap: var(--_project-font---spacing--32);
  }

  .r-hero-media {
    width: 100%;
    height: 260px;
  }
}

@media screen and (max-width: 767px) {
  .r-moduli {
    grid-template-columns: 1fr;
  }

  .r-giorni {
    grid-template-columns: 1fr;
  }

  .r-modalita-testata {
    flex-direction: column;
    align-items: flex-start;
  }

  .r-fascia-cta.r-in-riga {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--_project-font---spacing--24);
  }

  .r-hero-corso {
    padding-bottom: var(--_project-font---all-padding--40px);
  }

  .r-hero-media {
    height: 200px;
  }

  /* Il comando della barra d'azione non si restringe: accanto c'e'
     il nome del corso, e in un flex con "space-between" senza
     questo il pulsante cederebbe spazio al testo fino a mandare
     l'etichetta a capo. Il "flex: none" lo portava il vecchio
     .r-pulsante; la misura M la porta ora il componente, che sul
     telefono vale 48px, cioe' l'altezza che aveva. */
  .r-barra-mobile .cta {
    flex: none;
    padding: 0 22px;
  }

  /* La barra d'azione fissa copre l'ultima fascia del piede:
     gli lascio sotto l'altezza della barra piu' un respiro. */
  .r-corpo-corso ~ .footer-section {
    padding-bottom: calc(var(--r-pulsante-medio) + 40px);
  }
}

@media screen and (max-width: 479px) {
  /* Sotto i 480 il margine laterale del sito scende a 12px: la
     barra d'azione lo eredita dal token, qui restano solo i due
     comandi che devono poter stare su una riga sola. */
  .r-barra-mobile .cta {
    padding: 0 18px;
  }
}

/* ------------------------------------------------------------
   LE CLASSI DELLA SECONDA EDIZIONE
   Dieci classi, ognuna con la data di partenza e i suoi quattro
   incontri. Le date stanno in un elenco numerato perche' sono una
   sequenza: la prima lezione viene prima della seconda, e l'ordine
   e' informazione, non impaginazione.
   ------------------------------------------------------------ */
.r-classi-blocco {
  margin-top: var(--_project-font---spacing--40);
}

.r-classi-blocco > p {
  max-width: 68ch;
  margin: var(--_project-font---spacing--8) 0 var(--_project-font---spacing--32);
}

.r-classi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--_project-font---spacing--16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.r-classe {
  display: flex;
  flex-direction: column;
  gap: var(--_project-font---spacing--8);
  padding: var(--_project-font---all-padding--card-padding);
  border: 1px solid var(--neutral-02);
  border-radius: var(--_project-font---border-radius--16);
  background-color: var(--neutral-01);
}

.r-classe-capo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--_project-font---spacing--8);
}

.r-classe-nome {
  padding: 2px 8px;
  border-radius: var(--_project-font---border-radius--8);
  background-color: var(--neutral-02);
  color: var(--primary-color);
}

.r-classe-modo { color: var(--neutral-03); }

/* Le quattro date: numerate, e i numeri sono gia' nel nome della
   lezione, quindi il segno di elenco si toglie. */
.r-classe-date {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}

/* La figura del modulo: le stesse sei del sito online. Quadrata e
   piccola, perche' e' un segno di riconoscimento della scheda, non
   un'illustrazione da guardare. */
.r-modulo-figura {
  width: 72px;
  height: 72px;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: var(--_project-font---spacing--8);
}

/* Il prezzo pieno barrato accanto a quello di lancio: piu' piccolo
   e grigio, perche' e' il termine di paragone e non il prezzo. */
.r-prezzo-vecchio {
  font-size: 0.6em;
  font-weight: 400;
  color: var(--neutral-03);
  text-decoration-thickness: 1.5px;
  margin-right: 6px;
}

.r-prezzo-lancio-nota {
  color: var(--primary-color);
}