/* ============================================================================
   HOMO LAPIS 2026 — PAGINA CORSI
   ---------------------------------------------------------------------------
   Componenti della sola pagina italiana /corsi/: saluto della hero, i due
   moduli, le persone, la fila delle referenze. Sta in un file suo perche' se
   quella pagina sparisce sparisce anche questo, senza lasciare regole orfane
   in mezzo al sistema.

   Nessun colore nuovo: la bozza aveva un modulo giallo e uno rosa, qui i due
   moduli si distinguono col chiaro e col nero, che sono i due fondi che il
   sito usa gia' ovunque.
   ========================================================================= */

/* --- il saluto -----------------------------------------------------------
   E' una lettera, non un sopratitolo: niente mono maiuscolo, ma una riga di
   testo nel viola del marchio, un corpo sopra al testo corrente. */
body.hl-carta .hl-salute {
  font-size: var(--hl-fs-lead);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: var(--hl-ls-heading);
  color: var(--hl-accent-tx);
  max-width: 24ch;
  margin: 0 0 var(--hl-s-4);
  text-wrap: balance;
}

/* --- a chi e' rivolto ---------------------------------------------------- */
body.hl-carta .hl-audience__title {
  font-size: var(--hl-fs-h3);
  margin: 0 0 var(--hl-s-4);
  padding-bottom: var(--hl-s-3);
  border-bottom: 1px solid var(--hl-rule);
}

/* --- i moduli ------------------------------------------------------------ */
body.hl-carta .hl-module__grid { align-items: start; }

/* Il numero del modulo: contornato, come quello dei pezzi del portfolio.
   E' lo stesso segno, e vuol dire la stessa cosa — questa e' la voce N. */
body.hl-carta .hl-module__idx {
  font-size: 2.4em;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 1px var(--hl-accent-tx);
  margin-right: var(--hl-s-4);
  align-self: baseline;
  transform: translateY(0.06em);
}

@supports not (-webkit-text-stroke: 1px currentColor) {
  body.hl-carta .hl-module__idx { color: var(--hl-accent-tx); }
}

/* Su schermi larghi la testata del modulo resta ferma mentre scorrono gli
   argomenti: sono elenchi lunghi, e senza questo si perde di vista di quale
   modulo si sta leggendo. */
@media (min-width: 981px) {
  body.hl-carta .hl-module__head {
    position: sticky;
    top: calc(var(--hl-header-h, 80px) + var(--hl-s-6));
  }
}

body.hl-carta .hl-topics { margin: 0; }

body.hl-carta .hl-topic {
  padding: var(--hl-s-5) 0;
  border-top: 1px solid var(--hl-rule);
}
body.hl-carta .hl-topic:first-child { padding-top: 0; border-top: 0; }
body.hl-carta .hl-topic:last-child { padding-bottom: 0; }

body.hl-carta .hl-topics dt {
  font-size: var(--hl-fs-h3);
  font-weight: 500;
  line-height: var(--hl-lh-heading);
  letter-spacing: var(--hl-ls-heading);
  color: var(--hl-fg);
  margin: 0 0 var(--hl-s-3);
}

body.hl-carta .hl-topics dd {
  margin: 0;
  max-width: 58ch;
  color: var(--hl-fg-dim);
  line-height: var(--hl-lh-body);
}

/* --- chi siamo -----------------------------------------------------------
   Due persone in fila. La foto non c'e' ancora: al suo posto un riquadro
   dichiarato, con la diagonale che si usa sugli spazi da riempire. */
body.hl-carta .hl-people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hl-s-7) var(--hl-col-gap);
}

body.hl-carta .hl-person {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--hl-s-5);
  align-items: start;
}

body.hl-carta .hl-avatar {
  width: 96px;
  height: 96px;
  border: 1px solid var(--hl-rule-strong);
  border-radius: var(--hl-r-pill);
  background:
    linear-gradient(
      to top right,
      transparent calc(50% - 0.5px),
      var(--hl-rule) calc(50% - 0.5px),
      var(--hl-rule) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    ),
    var(--hl-bg-alt);
}

body.hl-carta .hl-person__text { display: block; min-width: 0; }

body.hl-carta .hl-person__name {
  display: block;
  font-size: var(--hl-fs-h3);
  font-weight: 500;
  letter-spacing: var(--hl-ls-heading);
  color: var(--hl-fg);
}

body.hl-carta .hl-person__role {
  display: block;
  margin-top: var(--hl-s-1);
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  letter-spacing: var(--hl-ls-label);
  text-transform: uppercase;
  color: var(--hl-accent-tx);
}

body.hl-carta .hl-person__bio {
  display: block;
  margin-top: var(--hl-s-3);
  color: var(--hl-fg-dim);
  line-height: var(--hl-lh-body);
}

/* --- referenze -----------------------------------------------------------
   Caselle vuote finche' i loghi non arrivano con la liberatoria. Meglio un
   posto dichiarato che un marchio di qualcun altro ridisegnato a occhio. */
body.hl-carta .hl-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--hl-col-gap);
}

body.hl-carta .hl-logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 2;
  border: 1px dashed var(--hl-rule);
  background: var(--hl-surface);
}

body.hl-carta .hl-logo-slot__mark {
  width: 34px;
  height: 34px;
  border-radius: var(--hl-r-pill);
  border: 1px solid var(--hl-rule-strong);
  opacity: 0.6;
}

body.hl-carta .hl-logos__note { margin-top: var(--hl-s-5); }

/* --- rientri -------------------------------------------------------------- */
@media (max-width: 980px) {
  body.hl-carta .hl-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  body.hl-carta .hl-people { grid-template-columns: minmax(0, 1fr); gap: var(--hl-s-6); }
}

@media (max-width: 640px) {
  body.hl-carta .hl-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.hl-carta .hl-person { grid-template-columns: 72px minmax(0, 1fr); gap: var(--hl-s-4); }
  body.hl-carta .hl-avatar { width: 72px; height: 72px; }
  body.hl-carta .hl-module__idx { font-size: 2em; }
}

/* --- il form, in italiano ------------------------------------------------
   Il marcatore dei campi obbligatori lo scrive il CSS (Divi lo tiene solo
   come attributo sul controllo): su questa pagina lo scrive in italiano. */
body.hl-carta.hl-it .hl-diviform .et_pb_contact_field:has([data-required_mark="required"])
  .et_pb_contact_form_label::after {
  content: 'obbligatorio';
}

/* ---------------------------------------------------------------------------
   COME FUNZIONA — righe native
   ---------------------------------------------------------------------------
   Prima era un blocco `code` unico e nel builder non si poteva toccare.
   Adesso ogni passo e' una riga Divi con tre colonne e un modulo di testo per
   cella: qui la riga viene solo rivestita, il contenuto resta suo.
   ------------------------------------------------------------------------ */
body.hl-carta .hl-stepline.et_pb_row {
  align-items: baseline;
  gap: var(--hl-s-5);
  padding: var(--hl-s-6) var(--hl-s-4);
  border-bottom: 1px solid var(--hl-rule);
}
body.hl-carta .hl-how .hl-band__head + .hl-stepline.et_pb_row { border-top: 1px solid var(--hl-rule); }

body.hl-carta .hl-stepline .hl-row__idx,
body.hl-carta .hl-stepline .hl-row__title,
body.hl-carta .hl-stepline .hl-row__lead,
body.hl-carta .hl-stepline .hl-row__meta { margin: 0; }

body.hl-carta .hl-stepline__main .et_pb_text + .et_pb_text { margin-top: var(--hl-s-2); }
body.hl-carta .hl-stepline__meta { justify-self: end; }

@media (max-width: 780px) {
  body.hl-carta .hl-grid-row--index.et_pb_row { grid-template-columns: 2.5rem minmax(0, 1fr); }
  body.hl-carta .hl-stepline.et_pb_row { padding: var(--hl-s-5) var(--hl-s-2); }
  body.hl-carta .hl-stepline__meta { grid-column: 2; justify-self: start; }
}

/* ---------------------------------------------------------------------------
   CHI SIAMO — modulo team member
   ---------------------------------------------------------------------------
   Nome, ruolo e testo sono campi del builder. La fotografia si carica da li':
   finche' manca, `hl-member--nophoto` disegna al suo posto lo stesso cerchio
   col taglio in diagonale che si usa sugli spazi da riempire.
   ------------------------------------------------------------------------ */
body.hl-carta .hl-member.et_pb_team_member {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--hl-s-5);
  align-items: start;
  margin: 0;
}

body.hl-carta .hl-member .et_pb_team_member_image {
  width: 96px;
  margin: 0;
  float: none;
  max-width: none;
}

body.hl-carta .hl-member .et_pb_team_member_image img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--hl-r-pill);
  border: 1px solid var(--hl-rule-strong);
}

/* Senza fotografia Divi non stampa il contenitore: il posto lo tiene un
   pseudo elemento sulla scheda, cosi' la griglia non collassa. */
body.hl-carta .hl-member--nophoto::before {
  content: '';
  display: block;
  width: 96px;
  height: 96px;
  border: 1px solid var(--hl-rule-strong);
  border-radius: var(--hl-r-pill);
  background:
    linear-gradient(
      to top right,
      transparent calc(50% - 0.5px),
      var(--hl-rule) calc(50% - 0.5px),
      var(--hl-rule) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    ),
    var(--hl-surface);
}

body.hl-carta .hl-member .et_pb_team_member_description { padding: 0; min-width: 0; }

body.hl-carta .hl-member .et_pb_module_header {
  font-family: var(--hl-font-sans);
  font-size: var(--hl-fs-h3);
  font-weight: 500;
  line-height: var(--hl-lh-heading);
  letter-spacing: var(--hl-ls-heading);
  color: var(--hl-fg);
  padding: 0;
  margin: 0;
}

body.hl-carta .hl-member .et_pb_member_position {
  display: block;
  margin-top: var(--hl-s-1);
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  letter-spacing: var(--hl-ls-label);
  text-transform: uppercase;
  color: var(--hl-accent-tx);
}

body.hl-carta .hl-member .et_pb_team_member_description_content { margin-top: var(--hl-s-3); }
body.hl-carta .hl-member .et_pb_team_member_description_content p {
  margin: 0;
  color: var(--hl-fg-dim);
  line-height: var(--hl-lh-body);
}

/* ---------------------------------------------------------------------------
   REFERENZE — carosello nativo
   ---------------------------------------------------------------------------
   `divi/group-carousel`: scorre da solo da destra a sinistra e rientra in
   loop. Qui si tolgono solo i fondi e le spaziature del tema, e si da' al
   riquadro del logo la stessa forma che avevano i segnaposto.
   ------------------------------------------------------------------------ */
/* Il binario e' piu' largo del riquadro: lo taglia il modulo, non
   l'`overflow-x: hidden` del body. Su schermo stretto la differenza si
   vede: senza questa riga la pagina ha contenuto oltre il bordo e certi
   browser mobili lo lasciano trascinare. */
body.hl-carta .hl-logocarousel { margin: 0; overflow: hidden; }

body.hl-carta .hl-logocarousel .et_pb_group_carousel_slide { padding-inline: calc(var(--hl-col-gap) / 2); }

body.hl-carta .hl-logoslide.et_pb_group {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: none;
}

body.hl-carta .hl-logoimg.et_pb_image {
  width: 100%;
  margin: 0;
  text-align: center;
}

body.hl-carta .hl-logoimg img {
  width: 100%;
  aspect-ratio: 5 / 2;
  object-fit: contain;
  background: var(--hl-surface);
}

/* Le due sfumature ai bordi dicono che la fila continua oltre il taglio. */
body.hl-carta .hl-clients .hl-logocarousel {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

/* Chi ha chiesto meno animazioni non si ritrova una fila che scorre da sola:
   il carosello resta fermo sul primo gruppo di loghi. */
@media (prefers-reduced-motion: reduce) {
  body.hl-carta .hl-logocarousel .et_pb_group_carousel_track {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ---------------------------------------------------------------------------
   ELENCHI E ARGOMENTI — moduli nativi
   ---------------------------------------------------------------------------
   `divi/icon-list` per le liste e un `divi/group` per ogni argomento dei
   moduli. Prima erano due blocchi `code`: il testo che vende il corso non
   puo' stare dove chi scrive i testi non arriva.
   ------------------------------------------------------------------------ */
/* L'elenco sta in components.css, non qui.
   Quando /corsi/ era l'unica pagina con una lista nativa le sue regole erano
   qui dentro; poi lo sono diventate tutte, e le regole si sono spostate. Per
   un giro sono rimaste tutte e due, e si vedeva: corsi.css veniva caricato
   dopo e vinceva su `content`, `left` e `top`, ma non su `width`, `height` e
   `background` — cosi' ogni voce mostrava il segno disegnato e il segno piu'
   scritto a mano, uno sopra l'altro. Una definizione sola, e sta in
   components.css. */

/* Un argomento del modulo: due moduli di testo dentro un gruppo. Il filetto
   di separazione sta sul gruppo, come stava sul <div> di prima. */
body.hl-carta .hl-topic.et_pb_group {
  display: block;
  padding: var(--hl-s-5) 0;
  margin: 0;
  border-top: 1px solid var(--hl-rule);
  background: none;
}
body.hl-carta .hl-module__body .hl-topic.et_pb_group:first-child {
  padding-top: 0;
  border-top: 0;
}
body.hl-carta .hl-module__body .hl-topic.et_pb_group:last-child { padding-bottom: 0; }

body.hl-carta .hl-topic__t {
  font-size: var(--hl-fs-h3);
  font-weight: 500;
  line-height: var(--hl-lh-heading);
  letter-spacing: var(--hl-ls-heading);
  color: var(--hl-fg);
  margin: 0 0 var(--hl-s-3);
}

body.hl-carta .hl-topic__d {
  margin: 0;
  max-width: 58ch;
  color: var(--hl-fg-dim);
  line-height: var(--hl-lh-body);
}

/* --- la dichiarazione ----------------------------------------------------
   Deve leggersi, non nascondersi: filetto rosso a lato e fondo appena tinto.
   Il rosso qui e' un segno, non testo — il testo resta inchiostro, perche' il
   rosso del marchio sotto i 18px non tiene il contrasto. */
body.hl-carta .hl-disclaimer {
  margin: var(--hl-s-6) 0 0;
  padding: var(--hl-s-4) var(--hl-s-5);
  border-left: 2px solid var(--hl-red);
  background: var(--hl-bg-alt);
  font-size: var(--hl-fs-sm);
  line-height: 1.6;
  color: var(--hl-fg-dim);
  max-width: 62ch;
}

body.hl-carta .hl-disclaimer strong { color: var(--hl-fg); }