/* ============================================================
   DIVE — design system per Divi 5 (child theme)
   Tutto è OPT-IN: agisce solo su elementi con una classe .dive-*
   (o .dive). Senza la classe, i moduli Divi restano invariati.
   Aggiungi le classi nel campo "CSS Class" del modulo
   (scheda Avanzate → CSS ID & Classi).

   ALLINEAMENTI: questo foglio NON li decide. Nessuna regola qui
   imposta text-align, margini automatici o justify-content per
   posizionare un modulo: comanda sempre Divi (Design → Allineamento
   testo / Allineamento del modulo). I pezzi che devono stare in riga
   (tacca dell'eyebrow, freccia del link, meta del blog) usano
   inline-flex proprio per seguire l'allineamento impostato in Divi.
   ============================================================ */

:root{
  --dive-ground:#f4f4f2;
  --dive-surface:#ececeb;
  --dive-ink:#163D34;              /* verde scuro */
  --dive-ink-soft:#4a4560;         /* corpo testo */
  --dive-accent:#3FB498;           /* verde DIVE */
  --dive-accent-100:#e9f8f2; --dive-accent-200:#c9ece0; --dive-accent-300:#99dcc8;
  --dive-accent-400:#66c9ac; --dive-accent-500:#3FB498; --dive-accent-600:#2f9c82;
  --dive-accent-700:#237a66; --dive-accent-800:#1a5c4d; --dive-accent-900:#163D34;
  --dive-divider:color-mix(in srgb, #163D34 16%, transparent);
  --dive-divider-strong:color-mix(in srgb, #163D34 30%, transparent);
  --dive-plate:color-mix(in srgb, #3FB498 7%, #ececeb);
  --dive-font:'Noto Sans','Helvetica Neue',Arial,system-ui,sans-serif;
  --dive-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --dive-ease:cubic-bezier(.2,.7,.2,1);
}

/* Font di brand applicato a tutto il sito (puoi anche impostarlo in
   Divi → Opzioni Tema → Tipografia; questo garantisce Noto Sans ovunque). */
body{ font-family:var(--dive-font); }

/* ---------- 1. FRAME BLUEPRINT + CROCINI ----------
   Classe .dive (o .dive-frame) su un modulo IMMAGINE (o qualsiasi box).
   I 4 crocini d'angolo li inietta dive.js sull'elemento reale della foto.
   .dive-framed è la classe che lo script mette sul box incorniciato. */
.dive .et_pb_image_wrap,
.dive-frame .et_pb_image_wrap,
.dive-framed{ position:relative; overflow:visible; }
.dive-framed{ border:1px solid var(--dive-divider); }
.dive-framed img{ display:block; }

.dive-corner{
  position:absolute; width:11px; height:11px; pointer-events:none; z-index:2;
  color:var(--dive-corner-color, color-mix(in srgb, var(--dive-ink) 52%, transparent));
}
.dive-corner::before,.dive-corner::after{ content:""; position:absolute; background:currentColor; }
.dive-corner::before{ left:5px; top:0; width:1px; height:100%; }
.dive-corner::after { top:5px; left:0; width:100%; height:1px; }
.dive-framed > .dive-corner.tl, .dive-card > .dive-corner.tl{ top:-6px; left:-6px; }
.dive-framed > .dive-corner.tr, .dive-card > .dive-corner.tr{ top:-6px; right:-6px; }
.dive-framed > .dive-corner.bl, .dive-card > .dive-corner.bl{ bottom:-6px; left:-6px; }
.dive-framed > .dive-corner.br, .dive-card > .dive-corner.br{ bottom:-6px; right:-6px; }

/* ---------- 2. EYEBROW (tacca + etichetta) ----------
   Classe .dive-eyebrow su un modulo TESTO (scrivi solo l'etichetta). */
.dive-eyebrow, .dive-eyebrow .et_pb_text_inner, .dive-eyebrow p{
  margin:0; font-family:var(--dive-font); font-size:13px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--dive-accent-700);
}
/* Tacca orizzontale in linea con l'etichetta.
   Niente flex qui dentro: in Divi 5 il modulo è un flex container e
   .et_pb_text_inner è un suo flex item, quindi i figli di un flex NON
   seguono text-align e l'allineamento scelto in Divi resterebbe inerte.
   La tacca è invece un ::before IN LINEA e i wrapper interni sono resi
   inline: tacca ed etichetta stanno sulla stessa riga di testo e si
   spostano con Design → Allineamento testo (sinistra/centro/destra). */
.dive-eyebrow .et_pb_text_inner{ display:block; }
.dive-eyebrow .et_pb_text_inner *{ display:inline; }
.dive-eyebrow .et_pb_text_inner::before,
.dive-eyebrow:not(:has(.et_pb_text_inner))::before{
  content:""; display:inline-block; vertical-align:middle;
  width:34px; height:1px; margin-right:12px;
  background:var(--dive-tick, var(--dive-accent));
}

/* ---------- 3. TITOLI / LEAD ---------- */
.dive-title, .dive-title h1, .dive-title h2, .dive-title h3,
.dive-h1, .dive-h2{
  font-family:var(--dive-font); font-weight:600; color:var(--dive-ink);
  text-transform:uppercase; letter-spacing:-0.02em; line-height:1.08;
  text-wrap:balance;
}
.dive-h1{ font-size:clamp(2.4rem,6vw,4.25rem); }
.dive-h2, .dive-title h2{ font-size:clamp(1.9rem,4vw,2.5rem); }
.dive-lead, .dive-lead p{
  font-family:var(--dive-font);
  font-size:clamp(1.06rem,1.7vw,1.2rem); line-height:1.55; color:var(--dive-ink-soft);
}
.dive-kicker{ font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--dive-accent-700); }

/* ---------- 4. TAG / DATA / LINK ---------- */
.dive-tag{
  display:inline-flex; align-items:center; font-family:var(--dive-font);
  font-size:11px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  padding:3px 10px; background:var(--dive-accent-100); color:var(--dive-accent-800);
}
.dive-date{ font-family:var(--dive-mono); font-size:12px; color:color-mix(in srgb, var(--dive-ink) 64%, transparent); }

.dive-link, .dive-link a{
  font-family:var(--dive-font); font-size:13px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--dive-accent-700);
}
/* Solo l'<a> è inline-flex (serve per la freccia accanto al testo): il
   modulo resta di blocco, così l'allineamento testo di Divi lo governa. */
.dive-link a{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.dive-link a:hover{ color:var(--dive-accent-800); }
.dive-link a::after{
  content:""; width:16px; height:10px; flex:none; transition:transform .3s var(--dive-ease);
  background:center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 24 14' fill='none' stroke='%23237a66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h21M16 1l6 6-6 6'/%3E%3C/svg%3E");
}
.dive-link a:hover::after{ transform:translateX(5px); }

/* ---------- 5. PULSANTE (modulo Pulsante Divi) ----------
   Classe .dive-btn sul modulo PULSANTE. */
.et_pb_button.dive-btn,
.et_pb_button.dive-btn:hover{
  background:var(--dive-accent)!important; color:var(--dive-ink)!important;
  border:1px solid var(--dive-accent)!important; border-radius:0!important;
  padding:14px 30px!important; font-family:var(--dive-font)!important;
  font-weight:600!important; font-size:15px!important; letter-spacing:0.06em!important;
  text-transform:uppercase!important; transition:background .25s var(--dive-ease), transform .1s var(--dive-ease)!important;
}
.et_pb_button.dive-btn:hover{ background:var(--dive-accent-600)!important; border-color:var(--dive-accent-600)!important; }
.et_pb_button.dive-btn:active{ transform:translateY(1px); }
.et_pb_button.dive-btn::before,.et_pb_button.dive-btn::after{ display:none!important; content:none!important; }
/* Allineamento del pulsante: lo decide Divi → Pulsante → Design →
   Allineamento. Qui NON tocchiamo display: Divi 5 centra il pulsante con
   margin-left/right:auto sull'<a>, e un margine automatico non sposta un
   inline-block. Lasciamo quindi il display che assegna Divi (flex sui
   moduli et_flex_module, inline-block sul markup vecchio). */
/* variante chiara su fondo scuro (band/hero): verde pieno, testo verde scuro — resta uguale */

/* Pulsante OUTLINE (classe .dive-btn-outline): bordo, sfondo trasparente.
   Su fondo chiaro = testo/bordo verde; dentro .dive-band/.dive-hero = chiaro. */
.et_pb_button.dive-btn-outline,
.et_pb_button.dive-btn-outline:hover{
  background:transparent!important; color:var(--dive-ink)!important;
  border:1px solid var(--dive-accent)!important; border-radius:0!important;
  padding:14px 30px!important; font-family:var(--dive-font)!important;
  font-weight:600!important; font-size:15px!important; letter-spacing:0.06em!important;
  text-transform:uppercase!important; transition:background .25s var(--dive-ease), color .25s var(--dive-ease), border-color .25s var(--dive-ease)!important;
}
.et_pb_button.dive-btn-outline:hover{ background:var(--dive-accent)!important; color:var(--dive-ink)!important; }
.et_pb_button.dive-btn-outline::before,.et_pb_button.dive-btn-outline::after{ display:none!important; content:none!important; }
/* outline su fondo scuro */
.dive-band .et_pb_button.dive-btn-outline,
.dive-hero .et_pb_button.dive-btn-outline{
  color:#fff!important; border-color:color-mix(in srgb, var(--dive-accent-300) 55%, transparent)!important;
}
.dive-band .et_pb_button.dive-btn-outline:hover,
.dive-hero .et_pb_button.dive-btn-outline:hover{
  background:transparent!important; color:var(--dive-accent-300)!important; border-color:var(--dive-accent-300)!important;
}

/* ---------- 6. CARD (colonna/box griglia) ----------
   Classe .dive-card su una COLONNA (o su un modulo). Dentro ci metti
   un'immagine .dive (crocini), un titolo .dive-card-title, testo, link. */
.dive-card{
  position:relative; overflow:visible;
  border:1px solid var(--dive-divider); padding:18px;
  transition:border-color .3s var(--dive-ease), transform .4s var(--dive-ease);
  background:transparent;
}
.dive-card:hover{ border-color:var(--dive-divider-strong); transform:translateY(-3px); }
/* immagine dive dentro una card (es. "Tre attori"): ritaglio uniforme 16:9 */
.dive-card .dive .et_pb_image_wrap,
.dive-card .dive-frame .et_pb_image_wrap{ aspect-ratio:16/9; }
.dive-card .dive .et_pb_image_wrap img,
.dive-card .dive-frame .et_pb_image_wrap img{ width:100%; height:100%; object-fit:cover; }
.dive-card-title, .dive-card-title h2, .dive-card-title h3, .dive-card-title h4{
  font-family:var(--dive-font); font-weight:600; font-size:1.1rem;
  text-transform:uppercase; letter-spacing:-0.01em; color:var(--dive-ink); line-height:1.2;
}
.dive-card-body, .dive-card-body p{ font-size:0.92rem; line-height:1.55; color:var(--dive-ink-soft); }

/* ---------- 7. RITRATTO COMITATO (immagine tonda + anello) ----------
   Classe .dive-portrait su un modulo IMMAGINE (foto quadrata). */
.dive-portrait{ position:relative; display:inline-block; }
.dive-portrait .et_pb_image_wrap{ position:relative; }
.dive-portrait img{ border-radius:50%; border:1px solid var(--dive-divider); display:block; }
.dive-portrait::after{
  content:""; position:absolute; inset:-8px; border:1px solid var(--dive-accent);
  border-radius:50%; opacity:.5; pointer-events:none;
}

/* ---------- 8. HERO — cover scura + motivo blueprint SVG ----------
   Classe .dive-hero sulla SEZIONE. dive.js inietta l'SVG del motivo
   (griglia + connettori tondi con bagliore + linee arcuate/nette) e
   i 4 crocini d'angolo. Le animazioni sono qui sotto. */
.dive-hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--dive-accent-900); color:var(--dive-ground);
}
.dive-hero-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; }
.dive-hero-svg .base{ fill:none; stroke:#3d5a70; stroke-width:.9; opacity:.5; stroke-linecap:round; stroke-linejoin:round; }
.dive-hero-svg .acc{
  fill:none; stroke:#5fd6b6; stroke-width:1.1; opacity:.55; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:0; animation:dive-draw 1.9s var(--dive-ease) both;
}
.dive-hero-svg .flow{
  fill:none; stroke:#9af2da; stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:.06 .94; stroke-dashoffset:1; animation:dive-flow 4.6s linear infinite;
}
.dive-hero-svg .sq-m{ fill:#5fd6b6; }
.dive-hero-svg .sq-d{ fill:#3d5a70; }
.dive-hero-svg .ring{ fill:none; stroke:#5fd6b6; stroke-width:1.1; }
.dive-hero-svg .core{ fill:#5fd6b6; }
.dive-hero-svg .glow{ fill:url(#dive-glow); opacity:.45; animation:dive-glow 4.8s ease-in-out infinite; }
.dive-hero-svg .hub-faint{ opacity:.55; }
@keyframes dive-draw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes dive-flow{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes dive-glow{ 0%,100%{ opacity:.35; } 50%{ opacity:.8; } }
.dive-hero::before{  /* velatura per la leggibilità del testo */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(130% 100% at 20% 38%, transparent 42%, color-mix(in srgb, var(--dive-accent-900) 62%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--dive-accent-900) 34%, transparent), transparent 20%);
}
.dive-hero > .et_pb_row, .dive-hero .et_pb_row{ position:relative; z-index:2; }
/* testo chiaro nella hero */
.dive-hero, .dive-hero p, .dive-hero .et_pb_text,
.dive-hero h1,.dive-hero h2,.dive-hero h3,.dive-hero h4{ color:var(--dive-ground); }
.dive-hero .dive-eyebrow, .dive-hero .dive-eyebrow p, .dive-hero .dive-eyebrow .et_pb_text_inner{ color:var(--dive-accent-300); --dive-tick:var(--dive-accent-400); }
.dive-hero .dive-lead, .dive-hero .dive-lead p{ color:var(--dive-accent-200); }
/* crocini della hero: verde chiaro, a filo della fascia */
.dive-hero > .dive-corner{ --dive-corner-color:color-mix(in srgb, var(--dive-accent-300) 65%, transparent); z-index:2; }
.dive-hero > .dive-corner.tl{ top:20px; left:20px; }
.dive-hero > .dive-corner.tr{ top:20px; right:20px; }
.dive-hero > .dive-corner.bl{ bottom:20px; left:20px; }
.dive-hero > .dive-corner.br{ bottom:20px; right:20px; }

/* ---------- 9. BAND SCURA (eventi / video / CTA) ----------
   Classe .dive-band sulla SEZIONE: fondo verde scuro, testo chiaro. */
.dive-band{ background:var(--dive-accent-900); color:var(--dive-ground); }
.dive-band, .dive-band p, .dive-band .et_pb_text,
.dive-band h1,.dive-band h2,.dive-band h3,.dive-band h4{ color:var(--dive-ground); }
.dive-band .dive-eyebrow, .dive-band .dive-eyebrow p, .dive-band .dive-eyebrow .et_pb_text_inner{ color:var(--dive-accent-300); --dive-tick:var(--dive-accent-400); }
.dive-band .dive-lead, .dive-band .dive-lead p{ color:var(--dive-accent-200); }
/* immagine/box incorniciati su fondo scuro (band E hero): crocini + bordo
   verde chiaro, altrimenti col colore scuro di default sarebbero invisibili */
.dive-band .dive-framed, .dive-hero .dive-framed{
  --dive-corner-color:color-mix(in srgb, var(--dive-accent-300) 60%, transparent);
  border-color:color-mix(in srgb, var(--dive-accent-300) 26%, transparent);
}

/* ---------- 11. MODULO BLOG DI DIVI ----------
   Classe .dive-blog sul modulo Blog (Avanzate → CSS Class). Stila il markup
   standard di Divi: post→card, immagine→cornice, categoria→tag, data→mono,
   titolo, excerpt, "leggi"→link con freccia. I crocini li aggiunge dive.js
   (aggiunge .dive-card ai post e .dive-framed alle immagini). */
/* il post diventa una card DIVE: bordo + padding + crocini (via JS).
   overflow:visible è OBBLIGATORIO, altrimenti l'overflow:hidden di Divi in
   griglia taglia i crocini (stanno a -6px fuori dal box). */
.dive-blog .et_pb_post{
  position:relative; overflow:visible!important;
  margin-bottom:26px; padding:18px;
  border:1px solid var(--dive-divider)!important;
  background:transparent!important; box-shadow:none!important;
  transition:border-color .3s var(--dive-ease), transform .4s var(--dive-ease);
}
.dive-blog .et_pb_post:hover{ border-color:var(--dive-divider-strong)!important; transform:translateY(-3px); }
/* i contenitori della griglia non devono ritagliare i crocini */
.dive-blog, .dive-blog .et_pb_ajax_pagination_container,
.dive-blog .et_pb_salvattore_content, .dive-blog .et_pb_column{ overflow:visible!important; }
/* posizione crocini attorno al post (oltre a .dive-card aggiunto dal JS) */
.dive-blog .et_pb_post > .dive-corner.tl{ top:-6px; left:-6px; }
.dive-blog .et_pb_post > .dive-corner.tr{ top:-6px; right:-6px; }
.dive-blog .et_pb_post > .dive-corner.bl{ bottom:-6px; left:-6px; }
.dive-blog .et_pb_post > .dive-corner.br{ bottom:-6px; right:-6px; }
/* la foto in evidenza riempie tutto il box con i crocini: niente padding,
   margini o spazi interni del container immagine di Divi */
.dive-blog .et_pb_image_container{
  position:relative; overflow:visible; padding:0; margin:0 0 14px;
  line-height:0; background:transparent; border-radius:0;
  border:1px solid var(--dive-divider)!important;
}
.dive-blog .et_pb_image_container a{ display:block; line-height:0; margin:0; padding:0; }
.dive-blog .et_pb_image_container img{ display:block; width:100%; height:auto; margin:0; border-radius:0; }

.dive-blog .entry-title{
  font-family:var(--dive-font); font-weight:600; font-size:1.1rem; line-height:1.2;
  text-transform:uppercase; letter-spacing:-0.01em; margin:0 0 8px;
}
.dive-blog .entry-title a{ color:var(--dive-ink); text-decoration:none; }
.dive-blog .entry-title a:hover{ color:var(--dive-accent-700); }

/* meta: nascondo i separatori " | " rendendo trasparente il contenitore,
   poi coloro esplicitamente i singoli pezzi (categoria=tag, data=mono). */
.dive-blog .post-meta{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0 0 8px; color:transparent; font-size:12px;
}
.dive-blog .post-meta a{ text-decoration:none; }
.dive-blog .post-meta a[rel~="tag"]{
  order:-1; font-family:var(--dive-font); font-size:11px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; padding:3px 10px;
  background:var(--dive-accent-100); color:var(--dive-accent-800);
}
.dive-blog .post-meta .published{
  font-family:var(--dive-mono); font-size:12px;
  color:color-mix(in srgb, var(--dive-ink) 64%, transparent);
}
.dive-blog .post-meta .author, .dive-blog .post-meta .author a,
.dive-blog .post-meta .comments-number{
  font-family:var(--dive-mono); font-size:12px;
  color:color-mix(in srgb, var(--dive-ink) 55%, transparent);
}

.dive-blog .post-content, .dive-blog .post-content p{
  font-size:0.92rem; line-height:1.55; color:var(--dive-ink-soft);
}

.dive-blog .more-link, .dive-blog a.et_pb_more_button{
  display:inline-flex!important; align-items:center; gap:8px; margin-top:10px;
  font-family:var(--dive-font); font-size:13px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dive-accent-700)!important; text-decoration:none;
  background:none!important; border:0!important; padding:0!important;
}
.dive-blog .more-link::after, .dive-blog a.et_pb_more_button::after{
  content:""!important; width:16px; height:10px; flex:none; opacity:1;
  transition:transform .3s var(--dive-ease); left:auto; margin:0;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 24 14' fill='none' stroke='%23237a66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h21M16 1l6 6-6 6'/%3E%3C/svg%3E");
}
.dive-blog .more-link:hover::after, .dive-blog a.et_pb_more_button:hover::after{ transform:translateX(5px); }

/* ---------- 11b. dive-blog RESPONSIVE ----------
   In layout "Griglia" Divi usa il masonry a posizionamento ASSOLUTO
   (salvattore): imposta left/top/width inline sui post e un'altezza fissa
   sul contenitore, quindi NON è una vera grid responsive. Qui lo neutralizzo
   e uso una CSS grid vera: 3 colonne desktop → 2 su tablet → 1 su mobile,
   con gap uniforme. Vale solo per il layout griglia (.et_pb_salvattore_content);
   il layout "A tutta larghezza" resta impilato di suo. */
.dive-blog .et_pb_salvattore_content{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:26px; height:auto!important;
}
/* annulla il posizionamento assoluto inline messo dal masonry di Divi */
.dive-blog .et_pb_salvattore_content > .et_pb_post{
  position:relative!important;
  left:auto!important; top:auto!important; right:auto!important;
  width:auto!important; float:none!important; margin:0!important;
}
/* Divi affianca gli articoli via .column: neutralizzo le sue larghezze % */
.dive-blog .et_pb_salvattore_content > .et_pb_post.column,
.dive-blog .et_pb_salvattore_content > .column{ width:auto!important; }

/* tablet: due colonne */
@media (max-width:980px){
  .dive-blog .et_pb_salvattore_content{ grid-template-columns:repeat(2, 1fr); gap:22px; }
}
/* mobile: una colonna + card un filo più compatte */
@media (max-width:767px){
  .dive-blog .et_pb_salvattore_content{ grid-template-columns:1fr; gap:20px; }
  .dive-blog .et_pb_post{ padding:16px; margin-bottom:0; }
  .dive-blog .entry-title{ font-size:1.05rem; }
  .dive-blog .post-content, .dive-blog .post-content p{ font-size:0.9rem; }
}

/* ---------- 10. UTILITY ---------- */
.dive-divide-top{ border-top:1px solid var(--dive-divider); }   /* filetto tra sezioni */
.dive-rule{ height:1px; background:var(--dive-divider); border:0; }
.dive-measure{ max-width:66ch; }
.dive-mono{ font-family:var(--dive-mono); }
.dive-ink{ color:var(--dive-ink)!important; }
.dive-accent{ color:var(--dive-accent-700)!important; }

/* Video YouTube/embed nelle NEWS: AUTOMATICO, ma solo sulla LARGHEZZA
   (max 720px). La posizione la decidi in Divi con l'allineamento del
   modulo Video / del modulo Testo: qui non c'è nessun margine automatico.
   Agisce su ogni pagina di singolo articolo (body.single-post): oEmbed di
   WordPress, iframe in un modulo Testo, e modulo Video di Divi. */
.single-post .wp-block-embed,
.single-post .et_pb_video{ max-width:720px; }
/* inline-block e non block: l'iframe segue l'allineamento testo del modulo
   che lo contiene, invece di stare per forza a sinistra o al centro. */
.single-post .et_pb_text iframe,
.single-post .wp-block-embed iframe{
  display:inline-block; width:100%; max-width:720px;
  aspect-ratio:16/9; height:auto; border:0;
}
/* (opzionale) stessa larghezza ovunque, mettendo la classe .dive-video sul
   modulo. Regola la larghezza con --dive-video-w; l'allineamento resta di Divi. */
.dive-video{ --dive-video-w:720px; max-width:var(--dive-video-w); }
.dive-video .et_pb_video_box, .dive-video video, .dive-video .wp-video{ width:100%!important; }
.dive-video iframe{ display:inline-block; width:100%; aspect-ratio:16/9; height:auto; border:0; }

/* ---------- 12. GALLERIA VIDEO — shortcode [dive_videos] ----------
   Ultimo video grande a sinistra + i 3 successivi incolonnati a destra.
   Su desktop le 3 anteprime di destra sono in 16:9 e il player di sinistra
   si allunga a riempire la loro altezza complessiva.
   Click su un video a destra → si apre nel player grande (dive.js).
   Pensata per la fascia scura .dive-band, ma funziona anche su fondo chiaro. */
.dive-videos{
  --dive-videos-main:2.6fr;   /* larghezza del player grande (regolabile):
                                 più alto = player più largo e meno alto,
                                 anteprime di destra più piccole */
  display:grid; grid-template-columns:var(--dive-videos-main) 1fr; gap:28px;
  align-items:start;
}
.dive-videos__stage{ position:relative; }
.dive-videos__frame{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:#000; border:1px solid var(--dive-divider);
}
.dive-videos__frame iframe,
.dive-videos__frame video{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
  object-fit:cover; background:#000;
}
/* titolo del video grande: overlay leggero, pieno contrasto in hover
   (stessa logica delle anteprime della colonna). */
.dive-videos__stagetitle{
  position:absolute; left:0; right:0; bottom:0; z-index:1; pointer-events:none;
  padding:56px 20px 18px;
  background:linear-gradient(to top, rgba(0,0,0,.65), transparent);
  font-family:var(--dive-font); font-weight:600; font-size:1.15rem; line-height:1.2;
  text-transform:uppercase; letter-spacing:-0.01em; color:#fff;
  opacity:.62; transition:opacity .3s var(--dive-ease);
}
.dive-videos__stage:hover .dive-videos__stagetitle{ opacity:1; }
/* colonna destra: 3 anteprime incolonnate — titolo leggero in overlay,
   più contrastato al passaggio del mouse. */
.dive-videos__list{ display:flex; flex-direction:column; gap:10px; }
.dive-videos__item{
  display:block; text-decoration:none; cursor:pointer;
}
.dive-videos__thumb{
  display:block; position:relative; aspect-ratio:16/9; width:100%;
  background:#000 center/cover no-repeat;
  border:1px solid var(--dive-divider); overflow:hidden;
  transition:border-color .3s var(--dive-ease);
}
.dive-videos__item:hover .dive-videos__thumb{ border-color:var(--dive-accent); }
.dive-videos__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%; z-index:1;
  background:color-mix(in srgb, var(--dive-accent) 92%, #000);
  transition:transform .3s var(--dive-ease);
}
.dive-videos__item:hover .dive-videos__play{ transform:translate(-50%,-50%) scale(1.1); }
.dive-videos__play::after{
  content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-style:solid; border-width:7px 0 7px 11px;
  border-color:transparent transparent transparent #0b1f1a;
}
.dive-videos__itemtitle{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:22px 10px 8px;
  background:linear-gradient(to top, rgba(0,0,0,.6), transparent);
  font-family:var(--dive-font); font-weight:600; font-size:0.78rem; line-height:1.25;
  text-transform:uppercase; letter-spacing:-0.01em; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:.62; transition:opacity .3s var(--dive-ease);
}
.dive-videos__item:hover .dive-videos__itemtitle{ opacity:1; }

/* varianti su fascia scura */
.dive-band .dive-videos__frame,
.dive-band .dive-videos__thumb{ border-color:color-mix(in srgb, var(--dive-accent-300) 26%, transparent); }
.dive-band .dive-videos__item:hover .dive-videos__thumb{ border-color:var(--dive-accent-300); }

/* desktop: comanda la colonna di destra — le 3 anteprime restano in 16:9 e
   la loro pila decide l'altezza della riga; il player grande a sinistra si
   allunga fino a riempirla (il video riempie con object-fit:cover). */
@media (min-width:981px){
  .dive-videos{ align-items:stretch; }
  .dive-videos__main{ display:flex; min-height:0; }
  .dive-videos__stage{ flex:1 1 auto; display:flex; min-height:0; }
  .dive-videos__frame{ aspect-ratio:auto; flex:1 1 auto; height:100%; min-height:0; }
  .dive-videos__item{ flex:0 0 auto; }
  .dive-videos__thumb{ aspect-ratio:16/9; height:auto; }
}

/* responsive: sotto i 980px il player va sopra e i 3 video vanno affiancati */
@media (max-width:980px){
  .dive-videos{ grid-template-columns:1fr; gap:22px; }
  .dive-videos__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
}
@media (max-width:600px){
  .dive-videos__list{ grid-template-columns:1fr; }
}

/* ---------- 13. PERSONA — sezione "A chi ci rivolgiamo" ----------
   Card profilo dentro una Colonna con classe .dive-card. Sui moduli TESTO:
   - .dive-kicker        → indice "01 / IMPRESE" (esiste già)
   - .dive-card-title    → titolo del profilo (esiste già)
   - .dive-persona-pay   → pay-off (verde, in evidenza)
   - .dive-persona-who   → riquadro "Per chi è" (fondino verde chiaro)
   - .dive-benefits      → un modulo Testo con una LISTA PUNTATA: ogni voce
                            "Etichetta: descrizione" (l'etichetta in grassetto). */
.dive-persona-pay,
.dive-persona-pay .et_pb_text_inner,
.dive-persona-pay p{
  margin:0; font-family:var(--dive-font); font-weight:600; font-size:15px;
  line-height:1.5; color:var(--dive-accent-700);
}

.dive-persona-who{ background:var(--dive-accent-100); padding:12px 14px; }
.dive-persona-who,
.dive-persona-who .et_pb_text_inner,
.dive-persona-who p{
  margin:0; font-size:13px; line-height:1.5; color:var(--dive-ink-soft);
}
.dive-persona-who strong, .dive-persona-who b{ color:var(--dive-ink); font-weight:600; }

/* Lista benefici: niente pallini, marcatore "+" verde, etichetta in grassetto. */
.dive-benefits ul{
  list-style:none; margin:0; padding:16px 0 0;
  border-top:1px solid var(--dive-divider);
  display:flex; flex-direction:column; gap:13px;
}
.dive-benefits li{
  position:relative; margin:0; padding:0 0 0 30px;
  font-size:14px; line-height:1.55; color:var(--dive-ink-soft);
}
.dive-benefits li::before{
  content:""; position:absolute; left:0; top:5px; width:14px; height:14px;
  background:
    linear-gradient(var(--dive-accent),var(--dive-accent)) center/12px 1.6px no-repeat,
    linear-gradient(var(--dive-accent),var(--dive-accent)) center/1.6px 12px no-repeat;
}
.dive-benefits strong, .dive-benefits b{ color:var(--dive-ink); font-weight:600; }

/* Compattazione forzata della card profilo: schiaccia la spaziatura di
   default dei moduli Divi. Si attiva DA SOLA sulle Colonne .dive-card che
   contengono un modulo .dive-benefits (nessuna classe extra da aggiungere). */
/* Le colonne di Divi 5 sono flex con gap:30px: lo azzero, così a comandare
   la spaziatura restano solo i margini qui sotto (6/6/12/12). */
.dive-card:has(.dive-benefits){ row-gap:0!important; gap:0!important; }
.dive-card:has(.dive-benefits) .et_pb_module,
.dive-card:has(.dive-benefits) .et_pb_text{ margin-bottom:10px!important; }
.dive-card:has(.dive-benefits) .dive-kicker{ margin-bottom:6px!important; }
.dive-card:has(.dive-benefits) .dive-card-title{ margin:0 0 6px!important; }
.dive-card:has(.dive-benefits) .dive-persona-pay{ margin-bottom:12px!important; }
.dive-card:has(.dive-benefits) .dive-persona-who{ margin-bottom:12px!important; }
.dive-card:has(.dive-benefits) .dive-benefits{ margin-bottom:0!important; }

/* varianti su fascia scura (se la sezione persona è dentro .dive-band) */
.dive-band .dive-benefits li{ color:color-mix(in srgb,#fff 78%,transparent); }
.dive-band .dive-benefits strong, .dive-band .dive-benefits b{ color:#fff; }
.dive-band .dive-persona-who{ background:color-mix(in srgb,var(--dive-accent-300) 14%,transparent); }
.dive-band .dive-persona-who,
.dive-band .dive-persona-who p{ color:color-mix(in srgb,#fff 72%,transparent); }
.dive-band .dive-persona-who strong, .dive-band .dive-persona-who b{ color:#fff; }

/* ---------- 14. PAGINA EVENTO (tappe numerate + checklist) ----------
   Componenti usati nella pagina "Fabbricare Cibo" e simili. */

/* Numero grande delle tappe (01/02/03): modulo TESTO con classe .dive-num,
   dentro una card .dive-card. */
.dive-num, .dive-num .et_pb_text_inner, .dive-num p{
  font-family:var(--dive-mono); font-size:52px; font-weight:700; line-height:1;
  color:var(--dive-accent-800); margin:0;
}
.dive-band .dive-num, .dive-band .dive-num p,
.dive-hero .dive-num, .dive-hero .dive-num p{ color:var(--dive-accent-300); }

/* Checklist con spunte (classe .dive-checklist su un modulo TESTO con una
   LISTA PUNTATA). Ogni voce: "**Titolo** descrizione" (titolo in grassetto).
   Righe separate da filetto, marcatore = spunta verde. */
.dive-checklist ul{ list-style:none; margin:0; padding:0; }
.dive-checklist li{
  position:relative; margin:0; padding:16px 0 16px 36px;
  border-top:1px solid var(--dive-divider);
  font-size:0.9rem; line-height:1.5; color:var(--dive-ink-soft);
}
.dive-checklist li:last-child{ border-bottom:1px solid var(--dive-divider); }
.dive-checklist li::before{
  content:""; position:absolute; left:0; top:16px; width:22px; height:22px;
  background:center/22px 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23237a66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6'/%3E%3C/svg%3E");
}
.dive-checklist strong, .dive-checklist b{
  display:block; color:var(--dive-ink); font-weight:600; font-size:0.98rem;
  text-transform:uppercase; letter-spacing:-0.005em; margin-bottom:3px;
}
/* checklist su fondo scuro */
.dive-band .dive-checklist li{ color:color-mix(in srgb,#fff 74%,transparent); border-color:color-mix(in srgb,var(--dive-accent-300) 22%,transparent); }
.dive-band .dive-checklist strong, .dive-band .dive-checklist b{ color:#fff; }
.dive-band .dive-checklist li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2399dcc8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6'/%3E%3C/svg%3E");
}

/* ---------- 15. LIGHTBOX (.dive-modal) ----------
   Classe .dive-modal su un modulo PULSANTE (o su un link), lasciando nel
   campo Link URL l'indirizzo del form (es. https://form.jotform.com/xxx).
   dive.js intercetta il click e apre quell'URL in un iframe qui dentro.
   Senza JS il link resta un link e porta al form: nessun href="#".
   Larghezza e altezza si regolano con le due variabili qui sotto. */
.dive-modal-overlay{
  --dive-modal-w:min(820px, 92vw);
  --dive-modal-h:min(86vh, 900px);
  position:fixed; inset:0; z-index:100000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:color-mix(in srgb, var(--dive-accent-900) 90%, transparent);
  opacity:0; transition:opacity .28s var(--dive-ease);
}
.dive-modal-overlay[hidden]{ display:none; }   /* display:flex batte [hidden]: va riaffermato */
.dive-modal-overlay.is-open{ opacity:1; }

.dive-modal-panel{
  /* i crocini stanno FUORI dal pannello, sul velo scuro: col verde scuro di
     default sarebbero invisibili, come per .dive-band */
  --dive-corner-color:color-mix(in srgb, var(--dive-accent-300) 65%, transparent);
  position:relative; overflow:visible;
  width:var(--dive-modal-w); height:var(--dive-modal-h);
  display:flex; flex-direction:column;
  background:var(--dive-ground);
  border:1px solid var(--dive-divider-strong);
  transform:translateY(10px); transition:transform .28s var(--dive-ease);
}
.dive-modal-overlay.is-open .dive-modal-panel{ transform:none; }
.dive-modal-panel:focus{ outline:none; }
/* crocini d'angolo, come le altre cornici DIVE (li inietta dive.js) */
.dive-modal-panel > .dive-corner.tl{ top:-6px; left:-6px; }
.dive-modal-panel > .dive-corner.tr{ top:-6px; right:-6px; }
.dive-modal-panel > .dive-corner.bl{ bottom:-6px; left:-6px; }
.dive-modal-panel > .dive-corner.br{ bottom:-6px; right:-6px; }

.dive-modal-head{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 16px 14px 20px;
  border-bottom:1px solid var(--dive-divider);
}
.dive-modal-title{
  font-family:var(--dive-font); font-weight:600; font-size:13px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--dive-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dive-modal-close{
  flex:none; width:34px; height:34px; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--dive-font); font-size:15px; line-height:1;
  color:var(--dive-ink); background:transparent;
  border:1px solid var(--dive-divider); border-radius:0;
  transition:border-color .25s var(--dive-ease), background .25s var(--dive-ease);
}
.dive-modal-close:hover{ border-color:var(--dive-accent); background:var(--dive-accent-100); }
.dive-modal-close:focus-visible{ outline:2px solid var(--dive-accent); outline-offset:2px; }

.dive-modal-body{ flex:1 1 auto; min-height:0; background:#fff; }
.dive-modal-frame{
  display:block; width:100%; height:100%; border:0;
}

/* mobile: la modale prende tutto lo schermo, i crocini sparirebbero fuori */
@media (max-width:600px){
  .dive-modal-overlay{ padding:0; }
  .dive-modal-panel{
    --dive-modal-w:100vw; --dive-modal-h:100dvh;
    border:0;
  }
  .dive-modal-panel > .dive-corner{ display:none; }
}

/* ---------- Riduzione movimento ---------- */
@media (prefers-reduced-motion:reduce){
  .dive-card{ transition:none; }
  .dive-modal-overlay, .dive-modal-panel{ transition:none; }
  .dive-modal-panel{ transform:none; }
  .dive-link a::after{ transition:none; }
  /* motivo hero: statico ma completamente visibile */
  .dive-hero-svg .acc{ animation:none; stroke-dasharray:none; stroke-dashoffset:0; }
  .dive-hero-svg .flow{ display:none; }
  .dive-hero-svg .glow{ animation:none; opacity:.55; }
}