/* ============================================================================
   HOMO LAPIS 2026 — PONTE DIVI
   ---------------------------------------------------------------------------
   Divi porta con se' un proprio reset, una griglia a percentuali e stili di
   modulo pensati per un tema generico. Questo foglio riporta i moduli nativi
   dentro il design system, senza toccare il markup che il builder genera.

   Regola: si interviene solo su cio' che Divi impone e che confligge con i
   token. Tutto il resto lo fanno components.css e le classi CSS assegnate ai
   moduli dal lato pagina.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   CONTENITORI
   Divi limita le righe a 80% / 1080px e le centra. Il rebuild lavora su una
   griglia piu' larga con gutter fluidi.
   ------------------------------------------------------------------------ */

body.hl-carta #page-container { background: var(--hl-light); overflow: clip; }
body.hl-carta #et-main-area { background: var(--hl-light); }

body.hl-carta .et_pb_section {
  background-color: transparent;
  padding: 0;
}

body.hl-carta .et_pb_row {
  width: 100%;
  max-width: var(--hl-content-max);
  padding: 0 var(--hl-gutter);
  margin-inline: auto;
}
body.hl-carta .et_pb_row.hl-row-wide { max-width: var(--hl-page-max); }
body.hl-carta .et_pb_row.hl-row-full { max-width: none; padding-inline: 0; }
body.hl-carta .et_pb_row.hl-row-prose { max-width: 820px; }

/* Le colonne Divi usano margin-right in percentuale per il gutter. Sulle
   sezioni marcate .hl-grid-row passiamo a CSS grid: le altezze si allineano
   e il gutter smette di dipendere dalla larghezza. */
body.hl-carta .hl-grid-row.et_pb_row {
  display: grid;
  gap: var(--hl-col-gap);
  align-items: stretch;
}
body.hl-carta .hl-grid-row.et_pb_row > .et_pb_column {
  width: 100% !important;
  margin: 0 !important;
  float: none;
}
body.hl-carta .hl-grid-row--2.et_pb_row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.hl-carta .hl-grid-row--3.et_pb_row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.hl-carta .hl-grid-row--4.et_pb_row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Asimmetrica: il contenuto non sta mai esattamente a meta'. */
body.hl-carta .hl-grid-row--index.et_pb_row { grid-template-columns: 3.5rem minmax(0, 1fr) auto; }
body.hl-carta .hl-grid-row--split.et_pb_row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
body.hl-carta .hl-grid-row--split-r.et_pb_row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

@media (max-width: 1024px) {
  body.hl-carta .hl-grid-row--4.et_pb_row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.hl-carta .hl-grid-row--3.et_pb_row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  body.hl-carta .hl-grid-row.et_pb_row,
  body.hl-carta .hl-grid-row--split.et_pb_row,
  body.hl-carta .hl-grid-row--split-r.et_pb_row { grid-template-columns: minmax(0, 1fr); }
}

/* Divi mette 27px di margine sotto ogni modulo. Il ritmo lo danno i token. */
body.hl-carta .et_pb_module { margin-bottom: 0; }
body.hl-carta .et_pb_row { padding-block: 0; }
body.hl-carta .et_pb_column { padding: 0; }

/* Spaziatura verticale di sezione, applicata via classe dal lato pagina. */
body.hl-carta .hl-sec        { padding-block: var(--hl-section-y); position: relative; }
body.hl-carta .hl-sec--tight { padding-block: var(--hl-section-y-tight); }
body.hl-carta .hl-sec--flush { padding-block: 0; }
body.hl-carta .hl-sec--hero  { padding-block: 0; min-height: 100svh; display: flex; align-items: center; }

/* I fondi delle sezioni stanno qui e non in sections.css: sopra c'e'
   `.et_pb_section { background-color: transparent }`, che ha la stessa
   specificita' e vince perche' questo foglio viene accodato dopo. Metterli
   altrove significa scriverli e non vederli. */
body.hl-carta .hl-sec--alt   { background-color: var(--hl-light-2); }
body.hl-carta .hl-sec--sheet { background-color: var(--hl-sheet); color: var(--hl-ink); }
body.hl-carta .hl-sec--dark  { background-color: var(--hl-dark); color: var(--hl-paper-fg); }

/* ---------------------------------------------------------------------------
   TIPOGRAFIA DEI MODULI
   ------------------------------------------------------------------------ */

body.hl-carta .et_pb_text,
body.hl-carta .et_pb_text_inner,
body.hl-carta .et_pb_blurb_description,
body.hl-carta .et_pb_toggle_content {
  font-family: var(--hl-font-sans);
  font-size: var(--hl-fs-body);
  line-height: var(--hl-lh-body);
  letter-spacing: var(--hl-ls-body);
  color: var(--hl-fg-dim);
}

body.hl-carta .et_pb_text_inner > *:last-child { margin-bottom: 0; }

body.hl-carta .et_pb_heading .et_pb_heading_container > *,
body.hl-carta .et_pb_module_header {
  font-family: var(--hl-font-sans);
  font-weight: 500;
  line-height: var(--hl-lh-heading);
  letter-spacing: var(--hl-ls-heading);
  color: var(--hl-fg);
  margin: 0;
  padding: 0;
  text-wrap: balance;
}

/* Divi assegna dimensioni proprie agli heading dentro i moduli: le
   riportiamo alla scala fluida dei token. */
body.hl-carta .et_pb_text_inner h1,
body.hl-carta .et_pb_heading h1 { font-size: var(--hl-fs-h1); line-height: var(--hl-lh-display); letter-spacing: var(--hl-ls-display); }
body.hl-carta .et_pb_text_inner h2,
body.hl-carta .et_pb_heading h2 { font-size: var(--hl-fs-h2); }
body.hl-carta .et_pb_text_inner h3,
body.hl-carta .et_pb_heading h3 { font-size: var(--hl-fs-h3); }
body.hl-carta .et_pb_text_inner h4,
body.hl-carta .et_pb_heading h4 { font-size: var(--hl-fs-h4); }

body.hl-carta .et_pb_text_inner h1,
body.hl-carta .et_pb_text_inner h2,
body.hl-carta .et_pb_text_inner h3,
body.hl-carta .et_pb_text_inner h4 { color: var(--hl-fg); margin: 0 0 var(--hl-s-4); }

/* Il titolo di una riga indice e' un link dentro un modulo di testo, ma non
   e' un link nel testo: e' il titolo della riga, e la riga intera e' il
   bersaglio. Senza l'esclusione prende accento e sottolineatura e l'indice
   diventa un elenco di link viola. */
body.hl-carta .et_pb_text_inner a:not(.hl-row__link) { color: var(--hl-accent); }
body.hl-carta .et_pb_text_inner a:hover { text-decoration: underline; text-underline-offset: 3px; }

body.hl-carta .et_pb_text_inner ul,
body.hl-carta .et_pb_text_inner ol { padding-left: 1.15em; margin: 0 0 var(--hl-s-4); }
body.hl-carta .et_pb_text_inner li { margin-bottom: var(--hl-s-2); color: var(--hl-fg-dim); }
body.hl-carta .et_pb_text_inner li::marker { color: var(--hl-accent); }

/* ---------------------------------------------------------------------------
   BOTTONE NATIVO DIVI
   ---------------------------------------------------------------------------
   Tutti i bottoni del sito sono `divi/button`: erano <a> scritti a mano in un
   blocco code, e adesso etichetta e destinazione si cambiano dal builder.
   Perche' resti lo stesso bottone di prima servono tre cose.

   1. La forma e' quella di `.hl-btn`: pillola per il primario, rettangolo con
      filetto per il secondario, solo testo per il terziario.
   2. La freccia. Divi la disegna col ::after e una webfont sua, nascosta
      finche' non passi il mouse, e la fa entrare allargando il padding. Qui
      quel ::after diventa la stessa freccia degli altri elementi del sito:
      sempre in vista, in linea, e scorre di 4px al passaggio. E' l'unico
      movimento sui controlli.
   3. I padding vanno con `!important` perche' Divi li ridichiara sull'hover.
   ------------------------------------------------------------------------ */

body.hl-carta .et_pb_button,
body.hl-carta .et_pb_button:hover,
body.hl-carta a.et_pb_button {
  display: inline-flex;
  /* `et_flex_module` arriva con flex-direction: column, e senza questa riga
     la freccia va a capo sotto l'etichetta. */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--hl-s-3);
  padding: 13px 24px !important;
  border: 1px solid var(--hl-rule-strong);
  border-radius: var(--hl-r-none);
  background: transparent;
  /* Divi colora i bottoni col suo azzurro tramite
     `.et_pb_bg_layout_light .et_pb_button`, e il suo foglio dinamico arriva
     dopo il nostro: a parita' di specificita' vince lui. Qui serve
     `!important`, non una classe in piu'. */
  color: var(--hl-fg) !important;
  font-family: var(--hl-font-mono);
  font-weight: 500;
  font-size: var(--hl-fs-label) !important;
  letter-spacing: var(--hl-ls-label);
  text-transform: uppercase;
  line-height: 1;
  transition:
    background var(--hl-d-ui) var(--hl-e-ui),
    color var(--hl-d-ui) var(--hl-e-ui),
    border-color var(--hl-d-ui) var(--hl-e-ui);
}

body.hl-carta .et_pb_button::after {
  content: "\2192" !important;
  font-family: var(--hl-font-mono) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  position: static !important;
  display: inline-block !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  line-height: 1 !important;
  /* Divi centra la sua icona alzandola di meta' altezza con
     `transform: translateY(-50%)`, perche' la posiziona in assoluto. Qui la
     freccia e' un elemento in linea dentro un contenitore flex, che la centra
     da solo: se quella trasformazione resta, la freccia esce alzata di cinque
     pixel e mezzo e sembra un esponente. */
  transform: none;
  vertical-align: middle;
  transition: transform var(--hl-d-ui) var(--hl-e-out);
}

body.hl-carta .et_pb_button:hover,
body.hl-carta .et_pb_button:focus-visible {
  background: var(--hl-ink);
  border-color: var(--hl-ink);
  color: var(--hl-light) !important;
}
body.hl-carta .et_pb_button:hover::after,
body.hl-carta .et_pb_button:focus-visible::after { transform: translateX(4px); }

/* Il primario: l'unica pillola del sistema. */
body.hl-carta .et_pb_button.hl-btn-primary,
body.hl-carta .et_pb_button.hl-btn-primary:hover {
  border-radius: var(--hl-r-pill);
  padding: 14px 26px !important;
  background: var(--hl-violet);
  border-color: var(--hl-violet);
  color: #fff !important;
}
body.hl-carta .et_pb_button.hl-btn-primary:hover,
body.hl-carta .et_pb_button.hl-btn-primary:focus-visible {
  background: var(--hl-violet-deep);
  border-color: var(--hl-violet-deep);
}

/* Il terziario: solo testo, senza cornice. */
body.hl-carta .et_pb_button.hl-btn-ghost,
body.hl-carta .et_pb_button.hl-btn-ghost:hover {
  border-color: transparent;
  background: transparent;
  padding-inline: 0 !important;
  color: var(--hl-accent-tx) !important;
}
body.hl-carta .et_pb_button.hl-btn-ghost:hover,
body.hl-carta .et_pb_button.hl-btn-ghost:focus-visible { color: var(--hl-fg) !important; }

body.hl-carta .et_pb_button_module_wrapper { margin: 0; }
body.hl-carta .et_pb_button_wrapper { text-align: inherit; }

/* Il gruppo che tiene le azioni: era un <div class="hl-hero__actions"> nel
   blocco code, adesso e' un `divi/group` con la stessa classe. I figli sono i
   wrapper che Divi mette intorno a ogni bottone. */
body.hl-carta .hl-hero__actions.et_pb_group,
body.hl-carta .hl-hero__actions .et_pb_group_inner {
  display: flex;
  /* Anche qui: `et_flex_group` impila in colonna di suo. */
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--hl-s-3);
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
}

/* Sulle sezioni chiare il bottone secondario prende il filetto scuro. */
body.hl-carta .hl-sec--sheet .et_pb_button:not(.hl-btn-primary) {
  color: var(--hl-fg) !important;
  border-color: rgba(10, 10, 14, 0.25);
}

/* ---------------------------------------------------------------------------
   BLURB — usato per le schede di servizio
   ------------------------------------------------------------------------ */

body.hl-carta .et_pb_blurb {
  padding: var(--hl-s-6);
  background: var(--hl-surface);
  border: 1px solid var(--hl-rule);
  border-radius: var(--hl-r-none);
  height: 100%;
  position: relative;
  overflow: hidden;
  transition:
    border-color 420ms var(--hl-e-out),
    transform 420ms var(--hl-e-out);
}
body.hl-carta .et_pb_blurb::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 78% 0%,
    rgba(146,76,151,0.08) 0%, rgba(146,76,151,0.02) 26%, rgba(0,0,0,0) 62%);
  opacity: 0;
  transition: opacity 520ms var(--hl-e-out);
}
body.hl-carta .et_pb_blurb:hover::before { opacity: 1; }
body.hl-carta .et_pb_blurb:hover { border-color: var(--hl-rule-strong); transform: translateY(-3px); }

body.hl-carta .et_pb_blurb .et_pb_module_header {
  font-size: var(--hl-fs-h3);
  margin-bottom: var(--hl-s-3);
}
body.hl-carta .et_pb_blurb_container { position: relative; z-index: 1; }
body.hl-carta .et_pb_main_blurb_image { margin-bottom: var(--hl-s-5); }
body.hl-carta .et_pb_blurb .et-pb-icon { color: var(--hl-accent); font-size: 34px !important; }

/* ---------------------------------------------------------------------------
   TOGGLE / ACCORDION — le FAQ
   ------------------------------------------------------------------------ */

body.hl-carta .et_pb_toggle {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hl-rule);
  border-radius: 0;
  padding: var(--hl-s-5) 0;
}
body.hl-carta .et_pb_accordion .et_pb_toggle:last-child { border-bottom: 1px solid var(--hl-rule); }
body.hl-carta .et_pb_toggle_title {
  font-family: var(--hl-font-sans);
  font-size: var(--hl-fs-h4);
  font-weight: 500;
  letter-spacing: var(--hl-ls-heading);
  color: var(--hl-fg);
  padding: 0 44px 0 0;
  cursor: pointer;
  transition: color var(--hl-d-ui) var(--hl-e-out);
}
body.hl-carta .et_pb_toggle_title:hover { color: var(--hl-accent); }
body.hl-carta .et_pb_toggle_title::before {
  color: var(--hl-accent);
  right: 0;
  left: auto;
  font-size: 22px;
  transition: transform 380ms var(--hl-e-out);
}
body.hl-carta .et_pb_toggle_content {
  padding-top: var(--hl-s-4);
  max-width: var(--hl-prose-max);
}
body.hl-carta .et_pb_toggle_open { background: transparent; }

/* ---------------------------------------------------------------------------
   IMMAGINI E VIDEO
   ------------------------------------------------------------------------ */

body.hl-carta .et_pb_image { margin: 0; }
body.hl-carta .et_pb_image .et_pb_image_wrap {
  border-radius: var(--hl-r-none);
  overflow: hidden;
  border: 1px solid var(--hl-rule);
  display: block;
}
body.hl-carta .et_pb_image img { width: 100%; height: auto; display: block; }

body.hl-carta .et_pb_video .et_pb_video_box {
  border-radius: var(--hl-r-none);
  overflow: hidden;
  border: 1px solid var(--hl-rule);
}
body.hl-carta .et_pb_video_overlay_hover:hover { background: rgba(146,76,151,0.16); }

/* ---------------------------------------------------------------------------
   MODULO CODE — ospita le scene WebGL e i blocchi custom
   Divi gli mette padding e larghezze proprie: qui deve essere trasparente.
   ------------------------------------------------------------------------ */

body.hl-carta .et_pb_code { margin: 0; }
body.hl-carta .et_pb_code_inner { padding: 0; margin: 0; }
body.hl-carta .hl-code-bleed .et_pb_code_inner { position: static; }

/* ---------------------------------------------------------------------------
   DIVIDER
   ------------------------------------------------------------------------ */

body.hl-carta .et_pb_divider::before {
  border-top-color: var(--hl-rule);
  top: 0;
}
body.hl-carta .et_pb_divider { margin: 0; }

/* ---------------------------------------------------------------------------
   FORM CONTATTI
   ------------------------------------------------------------------------ */

body.hl-carta .et_pb_contact_form_label { display: none; }
body.hl-carta .et_pb_contact_field { padding: 0 0 var(--hl-s-4); }
body.hl-carta .et_pb_contact_form input[type="text"],
body.hl-carta .et_pb_contact_form input[type="email"],
body.hl-carta .et_pb_contact_form textarea,
body.hl-carta .et_pb_contact_form select {
  width: 100%;
  background: var(--hl-surface);
  border: 1px solid var(--hl-rule);
  border-radius: var(--hl-r-none);
  color: var(--hl-ink);
  font-family: var(--hl-font-sans);
  font-size: var(--hl-fs-body);
  padding: 15px 16px;
  transition: border-color var(--hl-d-ui) var(--hl-e-out), background-color var(--hl-d-ui) var(--hl-e-out);
}
body.hl-carta .et_pb_contact_form ::placeholder { color: var(--hl-fg-mute); opacity: 1; }
body.hl-carta .et_pb_contact_form input:focus,
body.hl-carta .et_pb_contact_form textarea:focus {
  border-color: var(--hl-violet);
  background: var(--hl-light-2);
  outline: none;
}
body.hl-carta .et_pb_contact_submit { margin-top: var(--hl-s-3); }
body.hl-carta .et_pb_contact_form textarea { min-height: 150px; resize: vertical; }

/* ---------------------------------------------------------------------------
   SEZIONE SU CARTA — inversione completa dei ruoli dentro Divi
   ------------------------------------------------------------------------ */

body.hl-carta .hl-sec--sheet .et_pb_text_inner,
body.hl-carta .hl-sec--sheet .et_pb_text,
body.hl-carta .hl-sec--sheet .et_pb_blurb_description { color: var(--hl-fg-dim); }
body.hl-carta .hl-sec--sheet .et_pb_module_header,
body.hl-carta .hl-sec--sheet .et_pb_text_inner h1,
body.hl-carta .hl-sec--sheet .et_pb_text_inner h2,
body.hl-carta .hl-sec--sheet .et_pb_text_inner h3,
body.hl-carta .hl-sec--sheet .et_pb_text_inner h4,
body.hl-carta .hl-sec--sheet .et_pb_heading .et_pb_heading_container > * { color: var(--hl-fg); }
body.hl-carta .hl-sec--sheet .et_pb_blurb { background: var(--hl-surface); }
body.hl-carta .hl-sec--sheet .et_pb_button:hover { color: #fff; }

/* ---------------------------------------------------------------------------
   PULIZIA
   ------------------------------------------------------------------------ */

/* Divi inserisce uno spazio prima del footer sulle pagine senza sidebar. */
body.hl-carta #main-content .container::before { display: none; }
body.hl-carta .et_pb_with_border { border: 0; }

/* La barra di amministrazione non deve coprire la nav fissa. */
body.admin-bar.hl-carta .hl-nav { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar.hl-carta .hl-nav { top: 46px; }
}