/* ==========================================================================
   Paradise Home — pagine Formazione (corso e indice Ateneo)
   Token e componenti di base vengono da main.css: qui c'è solo ciò che è
   specifico dei corsi. Nessun colore nuovo, nessun font nuovo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Intestazione del corso
   -------------------------------------------------------------------------- */

/* L'originale non ha una fascia d'apertura: il titolo scorre nel contenitore
   sopra lo stesso sfondo sfumato del resto della pagina (post-1323: la sezione
   `9891b89` ha solo margine superiore da 50px, nessuno sfondo). */
.corso-hero {
  padding: 50px 0 0;
}

.corso-hero__inner {
  display: block;
}

.corso-hero__percorso {
  margin: 0 0 10px;
  font-family: var(--ph-font-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ph-text-muted);
}

.corso-hero__percorso a {
  color: var(--ph-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* post-1323 `bd0c8b3` e post-1251 `2775c1a`: Poppins 60px/600 nel colore primario. */
.corso-hero__title {
  margin: 0;
  font-size: var(--ph-hero-title);
  font-weight: 600;
}

.corso-hero__claim {
  margin: 12px 0 0;
  font-family: var(--ph-font-heading);
  font-size: var(--ph-h4);
  font-weight: 500;
  color: var(--ph-accent-ink);
}

/* Sull'originale i paragrafi di apertura prendono tutta la larghezza del
   contenitore (`b609608`: width 100.526%) col corpo del testo corrente. */
.corso-hero__abstract {
  margin-top: 18px;
}

.corso-hero__abstract > *:last-child {
  margin-bottom: 0;
}

.corso-hero__media {
  margin: 0;
}

.corso-hero__img {
  width: 100%;
  height: auto;
  border-radius: var(--ph-radius-lg);
}

/* Dati essenziali in evidenza sotto l'abstract. */
.corso-hero__dati {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.corso-dato {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 18px;
  background: var(--ph-white);
  border: 1px solid var(--ph-border);
  border-radius: var(--ph-radius-lg);
}

.corso-dato__icon {
  width: 16px;
  height: 16px;
  color: var(--ph-accent-ink);
}

.corso-dato__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-accent-ink);
}

.corso-dato__value {
  font-family: var(--ph-font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--ph-primary);
}

.corso-hero__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}

/* --------------------------------------------------------------------------
   Colonna principale e colonna laterale
   -------------------------------------------------------------------------- */

.corso-layout__main > *:first-child {
  margin-top: 0;
}

/* Corso senza scheda dati: una sola colonna, stessa aria di .layout-with-sidebar. */
.corso-layout--full {
  padding-block: 24px;
}

@media (min-width: 1025px) {
  .corso-layout__aside {
    position: sticky;
    top: 120px;
    align-self: start;
  }
}

.corso-section {
  padding-block: 40px 0;
}

.corso-section__title {
  margin-bottom: 20px;
  font-size: var(--ph-h3);
}

.corso-section__intro {
  max-width: 46em;
}

.corso-testo > *:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Scheda dati del corso
   -------------------------------------------------------------------------- */

.corso-box {
  padding: 28px;
  background: var(--ph-surface);
  border-radius: var(--ph-radius-lg);
}

.corso-box__title {
  margin: 0 0 18px;
  font-size: var(--ph-h5);
}

.corso-dettagli {
  margin: 0;
}

.corso-dettagli__riga + .corso-dettagli__riga {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ph-border-soft);
}

.corso-dettagli__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ph-text-muted);
}

.corso-dettagli__icon {
  width: 15px;
  height: 15px;
  color: var(--ph-accent-ink);
}

.corso-dettagli__value {
  margin: 4px 0 0;
  font-family: var(--ph-font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--ph-primary);
}

.corso-box__nota {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--ph-text-muted);
}

.corso-box__cta {
  width: 100%;
  margin-top: 20px;
}

/* --------------------------------------------------------------------------
   Elenchi di competenze, prerequisiti, esiti
   -------------------------------------------------------------------------- */

.corso-lista {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .corso-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }

  .corso-lista--link {
    grid-template-columns: minmax(0, 1fr);
  }
}

.corso-lista__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.corso-lista__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--ph-accent-ink);
}

.corso-lista__testo {
  display: block;
}

.corso-lista__voce {
  display: block;
  font-family: var(--ph-font-heading);
  font-weight: 500;
  color: var(--ph-text);
}

.corso-lista__dettaglio {
  display: block;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   Profili «a chi è rivolto»
   -------------------------------------------------------------------------- */

.corso-profili {
  display: grid;
  gap: 24px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.corso-profilo {
  padding: 22px 24px;
  background: var(--ph-white);
  border: 1px solid var(--ph-border);
  border-radius: var(--ph-radius-lg);
}

.corso-profilo__titolo {
  margin: 0 0 8px;
  font-size: var(--ph-h6);
}

.corso-profilo__testo {
  margin: 0;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   Accordion (programma e FAQ)
   -------------------------------------------------------------------------- */

.accordion {
  border-top: 1px solid var(--ph-border);
}

.accordion__item {
  border-bottom: 1px solid var(--ph-border);
}

.accordion__heading {
  margin: 0;
  font-size: inherit;
}

.accordion__trigger {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
  padding: 20px 4px;
  background: none;
  border: 0;
  font-family: var(--ph-font-heading);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  color: var(--ph-primary);
  cursor: pointer;
  transition: color var(--ph-transition);
}

.accordion__trigger:hover {
  color: var(--ph-accent-ink);
}

.accordion__numero {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ph-primary-pale);
  font-size: 14px;
  font-weight: 600;
}

.accordion__label {
  flex: 1 1 auto;
}

.accordion__sommario {
  display: block;
  margin-top: 4px;
  font-family: var(--ph-font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--ph-text-muted);
}

/* Stessi valori di trattamento.css: i due accordion del sito devono somigliarsi. */
.accordion__icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 7px;
  transition: transform var(--ph-transition);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(180deg);
}

.accordion__panel {
  padding: 0 4px 24px;
}

.accordion__content > *:first-child {
  margin-top: 0;
}

.accordion__content > *:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .accordion__icon {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Metodologia
   -------------------------------------------------------------------------- */

.corso-metodologia__lista {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.corso-metodologia__voce {
  padding: 24px;
  background: var(--ph-surface);
  border-radius: var(--ph-radius-lg);
}

.corso-metodologia__quota {
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: var(--ph-h3);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ph-primary);
}

.corso-metodologia__etichetta {
  margin: 6px 0 8px;
  font-size: var(--ph-h6);
}

.corso-metodologia__testo {
  margin: 0;
  font-size: 15px;
}

.corso-metodologia__nota {
  margin: 20px 0 0;
  font-size: 15px;
  color: var(--ph-text-muted);
}

/* --------------------------------------------------------------------------
   Certificazione
   -------------------------------------------------------------------------- */

.corso-certificazione__attestato {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 18px;
  padding: 14px 20px;
  background: var(--ph-primary-pale);
  border-radius: var(--ph-radius-lg);
  font-family: var(--ph-font-heading);
  font-weight: 500;
  color: var(--ph-primary);
}

.corso-certificazione__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.corso-certificazione__sottotitolo {
  margin: 28px 0 14px;
  font-size: var(--ph-h5);
}

/* --------------------------------------------------------------------------
   Percorso a livelli e griglia dei corsi
   -------------------------------------------------------------------------- */

.card-grid--plain {
  margin: 0;
  padding: 0;
  list-style: none;
}

.corso-percorso__item,
.formazione-percorsi__item,
.corso-docenti__item {
  display: flex;
  flex-direction: column;
}

.corso-percorso__item > .card,
.formazione-percorsi__item > .card,
.corso-docenti__item > .card {
  height: 100%;
}

.card--corrente {
  border-color: var(--ph-primary-light);
  box-shadow: var(--ph-shadow-card);
}

.card__meta--numero {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.card__badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ph-primary-pale);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ph-primary);
}

.card__claim {
  margin: 0 0 10px;
  font-family: var(--ph-font-heading);
  font-size: 15px;
  font-weight: 500;
  color: var(--ph-accent-ink);
}

.card__dati {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 16px;
  font-family: var(--ph-font-heading);
  font-size: 14px;
  font-weight: 500;
  color: var(--ph-primary);
}

.card__dato {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.card__dato .icon {
  width: 15px;
  height: 15px;
  color: var(--ph-accent-ink);
}

/* --------------------------------------------------------------------------
   Prossime edizioni
   -------------------------------------------------------------------------- */

.corso-edizioni__intro {
  margin: 0 0 24px;
}

.corso-edizioni__azioni,
.corso-edizioni__vuoto-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}

.corso-edizioni__vuoto {
  padding: 32px;
  background: var(--ph-surface);
  border-radius: var(--ph-radius-lg);
}

.corso-edizioni__vuoto-testo {
  max-width: 46em;
  margin: 0;
  font-size: 17px;
}

.corso-edizioni__vuoto-calendario {
  margin: 18px 0 0;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   Docenti
   -------------------------------------------------------------------------- */

.corso-docenti__contesto {
  margin: 12px 0 0;
  font-size: 14px;
}

.corso-docenti__ruolo {
  display: block;
  font-family: var(--ph-font-heading);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ph-accent-ink);
}

.corso-docenti__bio {
  display: block;
  margin-top: 4px;
  color: var(--ph-text-muted);
}

/* --------------------------------------------------------------------------
   Come iscriversi
   -------------------------------------------------------------------------- */

.corso-iscrizione__inner {
  display: grid;
  gap: 32px;
  padding: 36px;
  background: var(--ph-surface);
  border-radius: var(--ph-radius-lg);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1025px) {
  .corso-iscrizione__inner:has(.corso-iscrizione__pratiche) {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
  }

  .corso-iscrizione__azioni {
    grid-column: 1 / -1;
  }
}

.corso-iscrizione__contatti {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.corso-iscrizione__contatti li {
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: var(--ph-font-heading);
  font-size: 17px;
  font-weight: 500;
}

.corso-iscrizione__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--ph-accent-ink);
}

.corso-iscrizione__azioni {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Approfondimenti
   -------------------------------------------------------------------------- */

.corso-approfondimenti__azioni {
  margin: 28px 0 0;
}

/* --------------------------------------------------------------------------
   Indice dell'Ateneo
   -------------------------------------------------------------------------- */

.corso-hero--indice {
  padding-bottom: 40px;
}

.formazione-numeri {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.formazione-numeri__voce {
  display: flex;
  flex-direction: column;
}

.formazione-numeri__valore {
  font-family: var(--ph-font-heading);
  font-size: var(--ph-h2);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ph-primary);
}

.formazione-numeri__etichetta {
  font-size: 14px;
  color: var(--ph-text-muted);
}

/* --------------------------------------------------------------------------
   Riquadri di richiamo: «Prenota la tua data» e «FAQ & Approfondimenti».
   Valori da post-1323: contenitore `7613e90` con 20px di respiro laterale,
   riga `451aa11`, riquadro verde `f2e3ccc` su #00BF630D largo 36,113% e
   riquadro rosa `054ed55` su #FFEAF7; entrambi angoli 20px e padding 20px.
   Il verde e' trasparente al 5%: lo sfondo sfumato della pagina passa
   attraverso, ed e' per questo che a destra il riquadro sembra rosato.
   -------------------------------------------------------------------------- */

.corso-richiami {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ph-widget-gap);
  padding-inline: var(--ph-gutter);
  margin-block: 50px;
}

.corso-richiamo {
  flex: 1 1 320px;
  padding: 20px;
  border-radius: var(--ph-radius-lg);
}

/* `cd5ec7c` e `912dcfa` sono colonne `space-between`: i due riquadri sono alti
   uguali e il contenuto si distribuisce fino in fondo, per questo sull'originale
   fra la riga di testo e i pulsanti resta più aria che fra titolo e testo. */
.corso-richiamo--prenota {
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 191, 99, 0.05);
}

@media (min-width: 768px) {
  .corso-richiami:not(.corso-richiami--sola) .corso-richiamo--prenota {
    flex: 0 0 36.113%;
  }
}

.corso-richiamo--faq {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background-color: var(--ph-tint-pink);
}

/* `912dcfa`: la colonna del testo occupa il 68,653% del riquadro rosa, la
   foto il resto. */
.corso-richiamo__testo {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .corso-richiamo--faq .corso-richiamo__testo {
    flex: 0 0 68.653%;
  }
}

/* `430a97d` / `e3b2db0`: Poppins 30px/500, interlinea 1.2, colore #242068. */
.corso-richiamo__titolo {
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: var(--ph-section-title);
  font-weight: 500;
  line-height: var(--ph-leading-heading);
  color: var(--ph-heading-section);
}

/* `fb0d5b0`: Montserrat 15px/500 #777777, con il rientro negativo che
   avvicina la riga al titolo. */
.corso-richiamo__nota {
  margin: -14px 0 0;
  padding-top: var(--ph-widget-gap);
  font-family: var(--ph-font-body);
  font-size: var(--ph-body-size);
  font-weight: var(--ph-body-weight);
  color: var(--ph-text-muted);
}

.corso-richiamo__azioni {
  display: flex;
  flex-direction: column;
  gap: var(--ph-widget-gap);
  margin: var(--ph-widget-gap) 0 0;
}

/* I pulsanti si appoggiano in fondo al riquadro, come sull'originale. */
.corso-richiamo--prenota .corso-richiamo__azioni {
  margin-top: auto;
  padding-top: var(--ph-widget-gap);
}

/* Nel riquadro delle date non c'è nulla da spingere in fondo: la lista di eventi
   occupa già lo spazio, e il link al calendario la segue. */
.corso-date__box {
  display: block;
}

.corso-richiamo__media {
  flex: 1 1 160px;
  margin: 0;
}

/* `b2c67ee`: angoli da 20px sull'immagine. */
.corso-richiamo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--ph-radius-lg);
}

/* --------------------------------------------------------------------------
   Pulsante dei riquadri e delle card.
   `48e28d1`: gradiente 90 gradi dal primario a #B195E3, angoli 4px, padding
   11px 10px, Poppins 15px/400 bianco, testo centrato. In hover il gradiente
   ruota a 180 gradi e si scambia.
   -------------------------------------------------------------------------- */

.corso-cta {
  display: block;
  padding: 11px 10px;
  background-image: linear-gradient(90deg, var(--ph-primary) 0%, var(--ph-gradient-end) 100%);
  border-radius: var(--ph-radius);
  font-family: var(--ph-font-heading);
  font-size: var(--ph-body-size);
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  color: var(--ph-white);
  transition: background-image 0.4s ease;
}

.corso-cta:hover,
.corso-cta:focus-visible {
  background-image: linear-gradient(180deg, var(--ph-gradient-end) 0%, var(--ph-primary) 100%);
  color: var(--ph-white);
}

@media (prefers-reduced-motion: reduce) {
  .corso-cta {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Fila delle card dei livelli.
   `7640f3d` / `d0b232b` / `25e7a0c`: tre container al 33% su #00BF630D,
   angoli 20px, padding 20px. Con quattro livelli (Guarigione Filippina)
   diventano quattro colonne. Titolo come i riquadri, sottotitolo `3ebf7eb`
   Montserrat 18px/500 nel colore secondario.
   -------------------------------------------------------------------------- */

.corso-livelli {
  display: grid;
  gap: var(--ph-widget-gap);
  padding-inline: var(--ph-gutter);
  margin-block: 50px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .corso-livelli {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Card sola: tiene tutta la riga invece di lasciare mezza colonna vuota. Succede
     sulle pagine dove la fila elenca un solo altro livello, da quando la card della
     pagina corrente non entra più nell'elenco. */
  .corso-livelli[data-colonne="1"] {
    grid-template-columns: minmax(0, 1fr);
  }

  /* E l'ultima card quando resta sola in fondo: con tre livelli su due colonne
     usciva 2+1. Il numero lo calcola `ph_griglia_span_attributi()` in
     inc/contenuto.php e arriva qui come variabile, contesto per contesto. */
  .corso-livelli[data-card] > .corso-livello:last-child {
    grid-column: span var(--ph-cli-sm-span, 1);
  }
}

@media (min-width: 1025px) {
  .corso-livelli[data-colonne="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .corso-livelli[data-colonne="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .corso-livelli[data-colonne="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .corso-livelli[data-card] > .corso-livello:last-child {
    grid-column: span var(--ph-cli-lg-span, 1);
  }
}

.corso-livello {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: rgba(0, 191, 99, 0.05);
  border-radius: var(--ph-radius-lg);
}

.corso-livello__titolo {
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: var(--ph-section-title);
  font-weight: 500;
  line-height: var(--ph-leading-heading);
  color: var(--ph-heading-section);
}

.corso-livello__claim {
  margin: -14px 0 0;
  padding-top: var(--ph-widget-gap);
  font-family: var(--ph-font-body);
  font-size: 18px;
  font-weight: 500;
  color: var(--ph-secondary);
}

.corso-livello__testo {
  margin-top: var(--ph-widget-gap);
}

.corso-livello__testo > *:last-child {
  margin-bottom: 0;
}

/* Il pulsante resta appoggiato in fondo: sull'originale le colonne sono alte
   uguali e i pulsanti si allineano fra loro. */
.corso-livello__azioni {
  margin: auto 0 0;
  padding-top: var(--ph-widget-gap);
}

/* --------------------------------------------------------------------------
   Riquadro delle prossime date.
   Stesso container verde dei richiami, con dentro il widget «Elenco eventi»:
   colonna del giorno larga 56px (--tec-spacer-11), righe distanziate 16px,
   link al calendario 16px sotto l'ultima riga.
   -------------------------------------------------------------------------- */

.corso-date {
  padding-block: 0;
  margin-block: 50px;
}

.corso-date__box {
  padding: 20px;
  margin-inline: var(--ph-gutter);
}

.corso-date__lista {
  margin: var(--ph-widget-gap) 0 0;
  padding: 0;
  list-style: none;
}

.corso-date__riga {
  display: flex;
  gap: var(--ph-widget-gap);
  align-items: flex-start;
}

.corso-date__riga + .corso-date__riga {
  margin-top: 16px;
}

.corso-date__tag {
  flex: 0 0 56px;
  display: flex;
  flex-direction: column;
  text-align: center;
  font-family: var(--ph-font-heading);
  color: var(--ph-secondary);
}

.corso-date__mese {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
}

.corso-date__giorno {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}

.corso-date__corpo {
  flex: 1 1 auto;
  min-width: 0;
}

.corso-date__ora {
  margin: 0;
  font-family: var(--ph-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ph-text-soft);
}

.corso-date__titolo {
  margin: 2px 0 0;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
}

.corso-date__titolo a {
  color: var(--ph-primary);
  text-decoration: none;
}

.corso-date__titolo a:hover,
.corso-date__titolo a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.corso-date__vuoto {
  margin: var(--ph-widget-gap) 0 0;
}

.corso-date__tutte {
  margin: 16px 0 0;
}

.corso-date__tutte a {
  font-family: var(--ph-font-heading);
  font-size: var(--ph-body-size);
  color: var(--ph-primary);
  text-decoration: none;
}

.corso-date__tutte a:hover,
.corso-date__tutte a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   FAQ in accordion.
   Titolo doppio `beb9804`: Poppins 40px, FAQ in 300 corsivo e il resto in
   600, entrambi nel primario. Filetto `caf3efa`: 1px #D0D0E6 al 75%,
   allineato a sinistra. Pillole `26eaae3`: fondo bianco, bordo 1px #D4DEE6,
   angoli 10px, 6px di aria sopra e sotto, padding 12px, Poppins 15px/500 nel
   colore secondario che passa al primario in hover e da aperta; freccia
   #B3C9DA da 15px; pannello su #FFFFFFB5 con bordo #E2E2E2, angoli 10px,
   padding 17px e testo Montserrat 14px/500 #777777.
   -------------------------------------------------------------------------- */

.corso-faq {
  padding-block: 50px 0;
}

/* Come in trattamento.css: senza JavaScript nessuno potrebbe aprire i pannelli,
   quindi restano tutti visibili. */
html:not(.js) .accordion__panel[hidden] {
  display: block;
}

html:not(.js) .accordion__icon {
  display: none;
}

.corso-faq__heading {
  margin-bottom: var(--ph-widget-gap);
}

.corso-faq__titolo {
  margin: 0;
  font-size: 40px;
  line-height: var(--ph-leading-heading);
  color: var(--ph-primary);
}

.corso-faq__titolo-light {
  font-weight: 300;
  font-style: italic;
}

.corso-faq__titolo-strong {
  font-weight: 600;
}

.corso-faq__filetto {
  display: block;
  width: 75%;
  margin-top: var(--ph-widget-gap);
  border-top: 1px solid var(--ph-divider);
}

@media (max-width: 767px) {
  .corso-faq__titolo {
    font-size: 35px;
  }
}

.accordion--pillole {
  border-top: 0;
}

.accordion--pillole .accordion__item {
  border-bottom: 0;
}

.accordion--pillole .accordion__trigger {
  gap: 12px;
  align-items: center;
  padding: 12px;
  margin-block: 6px;
  background: var(--ph-white);
  border: 1px solid var(--ph-border-cool);
  border-radius: var(--ph-radius-md);
  font-size: var(--ph-body-size);
  font-weight: 500;
  color: var(--ph-secondary);
}

.accordion--pillole .accordion__trigger:hover,
.accordion--pillole .accordion__trigger[aria-expanded="true"] {
  color: var(--ph-primary);
}

.accordion--pillole .accordion__icon {
  width: 15px;
  height: 15px;
  margin-top: 0;
  color: var(--ph-icon-soft);
}

.accordion--pillole .accordion__panel {
  padding: 17px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.71);
  border: 1px solid var(--ph-border-panel);
  border-radius: var(--ph-radius-md);
  font-family: var(--ph-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ph-text-muted);
}

/* --------------------------------------------------------------------------
   Corpo redazionale del corso: e' testo lungo e sull'originale prende tutta
   la larghezza del contenitore invece di incolonnarsi.
   -------------------------------------------------------------------------- */

/* Sull'originale il corpo del testo è a filo del titolo, mentre i riquadri e le
   card sono rientrati di 20px: l'inset sta su quelli, non qui. */
.corso-corpo {
  max-width: none;
}

.corso-corpo > *:first-child {
  margin-top: 0;
}

/* Le immagini di corpo dell'originale sono `alignnone size-full` senza raggio:
   annulla gli angoli arrotondati che `.entry-content img` mette in main.css. */
.corso-corpo img {
  display: block;
  width: 100%;
  height: auto;
  margin-block: var(--ph-widget-gap);
  border-radius: 0;
}

/* Sull'originale l'immagine di corpo e' l'unico contenuto di un h2: senza
   questo l'interlinea del titolo le lascerebbe uno stacco sbagliato. */
.corso-corpo h2:has(> img) {
  margin: 0;
  line-height: 0;
}

/* --------------------------------------------------------------------------
   Griglia dei sette percorsi (indice dell'Ateneo).
   post-1251 `c08b635`: griglia a 4 colonne; card `b474f0f`: fondo bianco,
   padding 30px, bordo 1px #E2DCF1, angoli 20px, distanza fra icona e testo
   15px, titolo nel primario con 20px di stacco.
   -------------------------------------------------------------------------- */

.formazione-percorsi {
  display: grid;
  gap: var(--ph-widget-gap);
  padding-inline: var(--ph-gutter);
  margin-block: 50px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .formazione-percorsi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Sette percorsi su due colonne facevano 2+2+2+1: l'ultima card, quando resta
     sola, prende la riga intera. Il numero arriva da `ph_griglia_span_attributi()`
     (inc/contenuto.php) insieme al conteggio in `data-card`. */
  .formazione-percorsi[data-card] > .percorso-card:last-child {
    grid-column: span var(--ph-fp-sm-span, 1);
  }
}

@media (min-width: 1025px) {
  .formazione-percorsi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .formazione-percorsi[data-card] > .percorso-card:last-child {
    grid-column: span var(--ph-fp-lg-span, 1);
  }
}

.percorso-card {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: var(--ph-card-pad);
  background: var(--ph-white);
  border: 1px solid var(--ph-border-card);
  border-radius: var(--ph-radius-lg);
}

.percorso-card__icona {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--ph-primary);
  border-radius: 8px;
  color: var(--ph-white);
}

.percorso-card__icona svg {
  width: 20px;
  height: 20px;
}

.percorso-card__icona:hover,
.percorso-card__icona:focus-visible {
  background: var(--ph-primary-mid);
  color: var(--ph-white);
}

.percorso-card__titolo {
  margin: 0 0 5px;
  font-size: var(--ph-h3);
  line-height: var(--ph-leading-heading);
}

.percorso-card__titolo a {
  color: var(--ph-primary);
  text-decoration: none;
}

.percorso-card__titolo a:hover,
.percorso-card__titolo a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.percorso-card__testo > *:first-child {
  margin-top: 0;
}

.percorso-card__testo > *:last-child {
  margin-bottom: 0;
}

.percorso-card__testo ul {
  margin: 0.6rem 0;
  padding-left: 1.2em;
}

.percorso-card__azioni {
  margin: auto 0 0;
  padding-top: 5px;
}

/* L'unico link magenta del sito: `.elementor-icon-box-description a`
   sull'indice dell'Ateneo. */
.percorso-card__link {
  font-weight: 700;
  color: #c2298e;
  text-decoration: none;
}

.percorso-card__link:hover,
.percorso-card__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Immagini dell'indice dell'Ateneo, allineate al sito ufficiale
   (ateneo-paradise-formazione): la foto di gruppo in apertura, le tre foto
   dopo «abbiamo scelto il nome Ateneo Paradise», i due fregi col logo, il
   riquadro scuro «Dopo la Formazione» e gli sfondi delle card dei percorsi.
   Nessun colore nuovo: il velo delle card è #692A98B3 come sul sito
   (.wpr-promo-box-bg-overlay), cioè il primario al 70%; il riquadro usa il
   viola profondo dei token. Il markup del corpo lo scrive
   deploy/seed-immagini/indice-formazione.php.
   -------------------------------------------------------------------------- */

/* Foto di apertura (DSC00682): il widget del sito ufficiale è largo 960px e
   centrato, con gli angoli da 20px. */
.formazione-hero__media {
  max-width: 960px;
  margin: 40px auto 0;
}

.formazione-hero__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ph-radius-lg);
}

/* Le tre foto in fila (DDD, DSC01187, DSC01774): tre colonne da 640px in su,
   una sola sotto. `.corso-corpo img` le vorrebbe a tutta larghezza, con il
   margine verticale e senza raggio: qui il sito ufficiale le affianca con
   gli angoli da 20px. */
.corso-corpo .formazione-galleria {
  display: grid;
  gap: var(--ph-widget-gap);
  grid-template-columns: minmax(0, 1fr);
  margin-block: var(--ph-section-gap);
}

@media (min-width: 640px) {
  .corso-corpo .formazione-galleria {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.corso-corpo .formazione-galleria figure {
  margin: 0;
}

.corso-corpo .formazione-galleria img {
  margin: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--ph-radius-lg);
}

/* Fregio: il logo Paradise ai due lati di un passo di testo. Sul sito ufficiale
   Logo-Retina-1 (nero) sta attorno a «Ogni partecipante definirà i tempi…» e
   Logo-Retina-2 (bianco, su un quadrato viola dagli angoli da 20px) attorno a
   «Clicca su ogni modulo…». Sotto i 1025px il testo scende sotto il primo
   logo e il secondo, che sarebbe un doppione, non si mostra. */
.corso-corpo .formazione-fregio {
  display: grid;
  gap: var(--ph-widget-gap) var(--ph-section-gap);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  margin-block: var(--ph-section-gap);
}

@media (min-width: 1025px) {
  .corso-corpo .formazione-fregio {
    grid-template-columns: 250px minmax(0, 1fr) 250px;
  }
}

.corso-corpo .formazione-fregio__logo {
  width: 250px;
  max-width: 100%;
  margin: 0 auto;
}

.corso-corpo .formazione-fregio__logo img {
  width: 100%;
  margin: 0;
}

.corso-corpo .formazione-fregio__logo--viola {
  padding: 25px;
  background: var(--ph-primary);
  border-radius: var(--ph-radius-lg);
}

@media (max-width: 1024px) {
  .corso-corpo .formazione-fregio__logo + .formazione-fregio__testo + .formazione-fregio__logo {
    display: none;
  }
}

.corso-corpo .formazione-fregio__testo > *:first-child {
  margin-top: 0;
}

.corso-corpo .formazione-fregio__testo > *:last-child {
  margin-bottom: 0;
}

/* Riquadro scuro (Back-Formazione.webp): fotografia di sfondo, velo scuro e
   testo bianco, come la fascia «Dopo aver frequentato almeno 10 giornate…»
   del sito ufficiale. L'URL dello sfondo arriva dal contenuto
   (style="background-image:…"), tutto il resto sta qui. */
.corso-corpo .formazione-riquadro {
  position: relative;
  z-index: 0;
  overflow: hidden;
  margin-block: var(--ph-section-gap);
  padding: 40px var(--ph-card-pad);
  border-radius: var(--ph-radius-lg);
  background-color: var(--ph-primary-deep);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--ph-white);
}

.corso-corpo .formazione-riquadro::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: var(--ph-primary-deep);
  opacity: 0.8;
}

.corso-corpo .formazione-riquadro > *:first-child {
  margin-top: 0;
}

.corso-corpo .formazione-riquadro > *:last-child {
  margin-bottom: 0;
}

.corso-corpo .formazione-riquadro h2,
.corso-corpo .formazione-riquadro h3,
.corso-corpo .formazione-riquadro h4,
.corso-corpo .formazione-riquadro p,
.corso-corpo .formazione-riquadro li,
.corso-corpo .formazione-riquadro strong,
.corso-corpo .formazione-riquadro a {
  color: var(--ph-white);
}

/* Card con la foto di sfondo (sottocampo `sfondo` del repeater): la foto
   dietro, sopra il velo #692A98B3 del sito ufficiale, testo e link in bianco,
   l'icona bianca col simbolo viola. L'URL arriva dal partial
   (style="background-image:…"). */
.percorso-card--sfondo {
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-color: transparent;
  background-color: var(--ph-primary);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--ph-white);
}

.percorso-card--sfondo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: rgba(105, 42, 152, 0.7);
}

.percorso-card--sfondo .percorso-card__icona {
  background: var(--ph-white);
  color: var(--ph-primary);
}

.percorso-card--sfondo .percorso-card__icona:hover,
.percorso-card--sfondo .percorso-card__icona:focus-visible {
  background: var(--ph-primary-pale);
  color: var(--ph-primary);
}

.percorso-card--sfondo .percorso-card__titolo,
.percorso-card--sfondo .percorso-card__titolo a,
.percorso-card--sfondo .percorso-card__testo,
.percorso-card--sfondo .percorso-card__testo strong,
.percorso-card--sfondo .percorso-card__link {
  color: var(--ph-white);
}

.percorso-card--sfondo .percorso-card__link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Le regole che seguono sono identiche a quelle di trattamento.css: la CTA di
   chiusura è lo stesso blocco su pagine trattamento, indice formazione e corsi,
   ma i due fogli non si caricano mai insieme (mappa $contextual di
   inc/enqueue.php), quindi va scritto in entrambi. Se si tocca uno, si tocca
   anche l'altro. */

/* --------------------------------------------------------------------------
   CTA di chiusura: «Hai domande? Contattaci per qualsiasi informazione»

   Stesso blocco su tutte e otto le pagine trattamento, sull'indice della
   formazione e su ogni pagina corso. Valori dal CSS reale del sito
   (uploads__elementor__css__post-1301.css; 1297 / 1251 / 1323 / 9775 coincidono):

     bd8691f  sezione, --margin-top/--margin-bottom:100px
     259375e  riquadro a due colonne, --border-radius:20px, --gap:0,
              background #FFFFFF + bg.jpg center/cover con velo ::before
              linear-gradient(-90deg,#C595FF52 0%,#0625FF 100%) e
              --overlay-opacity:0.23; sotto i 1025px va in colonna
     6cc67b8  colonna del testo, --width:56% (100% fra 768 e 1024px),
              --justify-content:center, --padding:30px 30px 30px 70px
              (20px su tutti i lati sotto i 768px)
     cb938b0  titolo doppio Poppins 50px: «Hai domande?» in 300 corsivo e
              «Contattaci per qualsiasi informazione» in 600, nel primario,
              allineati a sinistra. Nessuna variante responsive: l'originale
              non ne dichiara nemmeno una, e non se ne inventa una qui.
     7fbf5ce  testo Montserrat 15px/500 #54595F
     b6b5574  bottone bianco, raggio 4px, Poppins 15px/400 #692A98,
              max-width 248px, durata 0.4s; in hover fondo
              linear-gradient(180deg,#B195E3 0%,#2B2D69 100%) e testo bianco.
              Nel markup dell'originale questo bottone non ha icona.
     2d74cbd  colonna dell'immagine, 10px di imbottitura di default;
              sotto i 1025px l'immagine scende al 70%.
   -------------------------------------------------------------------------- */

.trattamento-cta-finale {
  margin-block: 100px;
}

.trattamento-cta-finale__riquadro {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--ph-radius-lg);
  background-color: var(--ph-white);
  background-image: var(--cta-finale-sfondo, none);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.trattamento-cta-finale__riquadro::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(-90deg, #c595ff52 0%, #0625ff 100%);
  opacity: 0.23;
}

.trattamento-cta-finale__body {
  display: flex;
  flex: 0 0 56%;
  flex-direction: column;
  gap: var(--ph-widget-gap);
  justify-content: center;
  width: 56%;
  min-width: 0;
  padding: 30px 30px 30px 70px;
}

.trattamento-cta-finale__title {
  margin: 0;
  font-family: var(--ph-font-heading);
  /* 50px, la misura dell'originale, che non dichiara nessuna variante
     responsive per questo titolo. Sotto i 480px però non ci sta più: vedi la
     regola in fondo a questo blocco. */
  font-size: 50px;
  line-height: var(--ph-leading-heading);
  color: var(--ph-primary);

  /* La rete, sull'intero titolo e non sul solo pezzo in grassetto: una parola
     più larga della colonna si spezza invece di sporgere dal riquadro, che ha
     `overflow:hidden` e la taglierebbe a metà senza mostrare che manca.

     Solo `overflow-wrap`: qui c'era anche `hyphens: auto`, ed era il difetto più
     visibile del sito. La colonna del testo è il 56% del riquadro, cioè 606px a
     1300 di finestra: «Contattaci» a 50px ne occupa 268 e ci starebbe comodo,
     ma la sillabazione lo tagliava lo stesso per riempire la riga, e in fondo a
     16 pagine si leggeva «Hai domande? Contat-taci per qualsiasi informazione».
     `overflow-wrap` non fa niente finché la parola entra nella riga. */
  overflow-wrap: break-word;
}

.trattamento-cta-finale__title-light {
  font-weight: 300;
  font-style: italic;
}

/* Fra i due pezzi del titolo doppio l'originale ha uno spazio di testo. */
.trattamento-cta-finale__title-light::after {
  content: " ";
}

.trattamento-cta-finale__title-strong {
  font-weight: 600;
}

/* --- il titolo sotto i 480px ---------------------------------------------
   «informazione» in Poppins 600 a 50px misura 336,5px. La colonna del testo
   della CTA è larga quanto la finestra meno i 20px di gabbia e i 20px di
   imbottitura per lato: a 390px sono 310px, e la parola sporgeva di 26,5px
   dentro un riquadro con `overflow:hidden` — le ultime lettere sparivano
   (misurato: clientWidth 310, scrollWidth 336).

   Il conto dice che il titolo a 50px smette di entrarci sotto i 417px di
   finestra (336,5 + 40 di imbottitura + 40 di gabbia): sopra quella misura
   resta quello dell'originale, e la variante vale solo dove serve davvero. Il
   taglio è 479px, che il tema usa già in contenuto.css.

   34px è la misura che il sito stesso dà allo stesso titolo nel piè di pagina
   sui piccoli schermi, quindi non è un corpo nuovo: «informazione» diventa
   229px e ci sta con margine fino a una finestra da 320px. */
@media (max-width: 479px) {
  .trattamento-cta-finale__title {
    font-size: 34px;
  }
}

.trattamento-cta-finale__text {
  font-family: var(--ph-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ph-secondary);
}

.trattamento-cta-finale__text > *:first-child {
  margin-top: 0;
}

.trattamento-cta-finale__text > *:last-child {
  margin-bottom: 0;
}

.trattamento-cta-finale__actions {
  display: flex;
}

.trattamento-cta-finale__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 248px;
  padding: 11px 10px;
  border: 0;
  border-radius: 4px;
  background-color: var(--ph-white);
  background-image: none;
  font-family: var(--ph-font-heading);
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  color: var(--ph-primary);
  transition: all 0.4s;
}

.trattamento-cta-finale__btn:hover,
.trattamento-cta-finale__btn:focus-visible {
  background-image: linear-gradient(180deg, #b195e3 0%, #2b2d69 100%);
  color: var(--ph-white);
}

.trattamento-cta-finale__media {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  padding: 10px;
}

.trattamento-cta-finale__img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1024px) {
  .trattamento-cta-finale__riquadro {
    flex-direction: column;
  }

  .trattamento-cta-finale__body {
    flex: 1 1 auto;
    width: 100%;
  }

  .trattamento-cta-finale__img {
    width: 70%;
  }
}

@media (max-width: 767px) {
  .trattamento-cta-finale__body {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trattamento-cta-finale__btn {
    transition: none;
  }
}