/* =====================================================================
   APPROFONDIMENTI — LAYER UX (override chirurgici, additivi)
   Caricato DOPO gallo.css. Non ridisegna: usa solo variabili/colori/font
   già definiti in gallo.css. gallo.css resta INVARIATO.
   Ambito: solo le pagine del modulo Approfondimenti.
   ===================================================================== */

/* ---------- Focus visibile su tutti gli elementi interattivi ---------- */
.site-header a:focus-visible,
.breadcrumb a:focus-visible,
.silo-step:focus-visible,
.silo-backlinks a:focus-visible,
.chiusura a:focus-visible,
.discreet-cta a:focus-visible,
.el-item:focus-visible,
.site-footer a:focus-visible,
.tile:focus-visible{
  outline:3px solid var(--verde); outline-offset:3px; border-radius:6px;
}

/* ---------- Breadcrumb: contrasto ≥4.5:1 (usa testo-corpo, in palette) ---------- */
.breadcrumb ol{ color:var(--testo-corpo); }
.breadcrumb a{ color:var(--testo-corpo); }
.breadcrumb a:hover{ color:var(--verde); }

/* =====================================================================
   HUB — gerarchia: 1 card principale (Trauma e ricordi) a tutta larghezza
   + 3 card uniformi (Corpo, Ansia, Coppia).
   Riusa .tile/.t-* di gallo.css per look/simboli; qui cambia solo la griglia.
   ===================================================================== */
.hub-mosaico{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding-bottom:56px; }

/* card principale a tutta larghezza */
.hub-mosaico .t-emdr{ grid-column:1 / -1; grid-row:auto; min-height:300px; }
.hub-mosaico .hub-desc{
  font-family:var(--sans); font-size:16px; line-height:1.55; color:var(--testo-corpo);
  max-width:52ch; margin-top:12px; position:relative; z-index:2;
}

/* 3 card uniformi: stessa altezza/struttura/densità */
.hub-mosaico .t-corpo,
.hub-mosaico .t-trauma,
.hub-mosaico .t-coppia{
  grid-column:auto; grid-row:auto; min-height:300px;
  padding-right:24px; justify-content:flex-start;
}

/* Desktop (≥981px, oltre il breakpoint 980 di gallo.css): posizione simboli */
@media (min-width:981px){
  .hub-mosaico .t-emdr{ padding-right:34%; }
  .hub-mosaico .t-emdr .simbolo{
    width:clamp(180px,26%,260px); top:50%; right:4%; bottom:auto; transform:translateY(-50%);
  }
  /* Simbolo secondario, ancorato nell'angolo inferiore destro, separato */
  .hub-mosaico .t-corpo .simbolo,
  .hub-mosaico .t-trauma .simbolo,
  .hub-mosaico .t-coppia .simbolo{
    width:clamp(60px,15%,88px); right:18px; bottom:18px; top:auto; transform:none;
  }
  /* Testo/titolo a piena larghezza (il simbolo è solo nell'angolo basso-dx) */
  .hub-mosaico .t-corpo .blocco,
  .hub-mosaico .t-trauma .blocco,
  .hub-mosaico .t-coppia .blocco{ padding-right:0; }
  /* Parte inferiore: pulsante a sx + conteggio subito dopo, con spazio riservato
     al simbolo → nessuna sovrapposizione tra pulsante/conteggio e simbolo */
  .hub-mosaico .t-corpo .riga-cta,
  .hub-mosaico .t-trauma .riga-cta,
  .hub-mosaico .t-coppia .riga-cta{ padding-right:112px; row-gap:8px; }
  .hub-mosaico .t-coppia{ padding-right:24px; justify-content:flex-start; }
  /* uniformità tipografica delle 3 card */
  .hub-mosaico .t-corpo h2,
  .hub-mosaico .t-trauma h2,
  .hub-mosaico .t-coppia h2{ font-size:22px; line-height:1.18; max-width:100%; }
}

/* Tablet: 1 principale + 2+1 */
@media (max-width:980px) and (min-width:601px){
  .hub-mosaico{ grid-template-columns:1fr 1fr; }
  .hub-mosaico .t-emdr{ grid-column:1 / -1; }
  .hub-mosaico .t-corpo,
  .hub-mosaico .t-trauma,
  .hub-mosaico .t-coppia{ min-height:240px; }
}

/* Mobile: colonna singola (simboli tornano in flusso via gallo.css ≤980) */
@media (max-width:600px){
  .hub-mosaico{ grid-template-columns:1fr; }
  .hub-mosaico .t-emdr{ min-height:0; padding-right:24px; }
  .hub-mosaico .t-emdr,
  .hub-mosaico .t-corpo,
  .hub-mosaico .t-trauma,
  .hub-mosaico .t-coppia{ min-height:0; }
}

/* Meno vuoto tra testata e mosaico */
.testata{ padding-bottom:26px; }

/* =====================================================================
   SILO — lista come percorso: card uniformi 01/02/03, interamente cliccabili
   ===================================================================== */
.steps-lead{ font-size:16px; line-height:1.55; color:var(--testo-corpo); max-width:60ch; margin:2px 0 22px; }

.silo-steps{ display:flex; flex-direction:column; gap:12px; margin-bottom:6px; }
.silo-step{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px;
  background:var(--crema-card); border:1px solid var(--bordo); border-radius:var(--radius-card);
  padding:22px 24px; text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.silo-step:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -16px rgba(38,48,42,.34); border-color:var(--beige); }
.silo-step:hover .sx-title{ color:var(--verde); }
.silo-step:focus-visible{ outline:3px solid var(--verde); outline-offset:3px; }

.sx-n{ font-family:var(--serif); font-size:26px; color:var(--terra);
  font-variant-numeric:tabular-nums; line-height:1; align-self:start; padding-top:3px; }
.sx-main{ min-width:0; }
.sx-badge{ display:inline-block; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  font-weight:700; color:var(--verde); background:rgba(65,84,63,.10);
  border-radius:999px; padding:4px 11px; margin-bottom:10px; }
.sx-title{ font-family:var(--serif); font-weight:500; font-size:20px; line-height:1.26;
  color:var(--testo); margin-bottom:6px; transition:color .18s ease; }
.sx-sub{ font-size:15px; line-height:1.5; color:var(--testo-corpo); margin-bottom:8px; }
.sx-meta{ font-size:13px; color:var(--testo-corpo); }   /* testo-corpo → contrasto ≥4.5:1 */
.sx-arrow{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--beige);
  display:flex; align-items:center; justify-content:center; color:var(--verde); flex:0 0 auto;
  transition:border-color .18s ease, background .18s ease; }
.silo-step:hover .sx-arrow{ border-color:var(--verde); background:rgba(65,84,63,.06); }

@media (max-width:520px){
  .silo-step{ gap:14px; padding:18px 18px; }
  .sx-n{ font-size:22px; }
  .sx-arrow{ width:44px; height:44px; }
}

/* =====================================================================
   CTA CHIUSURA — aggiunta del sottotitolo (componente identico hub/silo/articolo)
   ===================================================================== */
.chiusura .testo{ margin-right:auto; max-width:48ch; }
.chiusura .invito-sub{ font-size:15.5px; line-height:1.55; color:var(--testo-corpo); margin-top:8px; }
@media (max-width:980px){
  .chiusura .testo{ max-width:100%; }
}

/* ---------- Footer del modulo: meno vuoto (solo pagine Approfondimenti) ---------- */
.site-footer .wrap.top{ padding-top:40px; padding-bottom:40px; }
.footer-legal{ padding-bottom:32px; }

/* =====================================================================
   SILO HERO — simbolo INTERAMENTE contenuto (niente frammenti/tagli)
   Dimensionato per ALTEZZA (aspetto preservato, una sola dimensione fissa)
   così non tocca mai i bordi superiore/inferiore dell'hero.
   ===================================================================== */
.silo-hero{ padding-bottom:48px; }
.silo-hero .simbolo{
  width:auto; height:74%;
  top:13%; bottom:auto; right:3%; transform:none;
}
@media (max-width:600px){
  /* Riserva una colonna a destra per il simbolo: eyebrow/H1/metodo restano
     a sinistra e non possono mai sovrapporsi al simbolo (vale anche per il
     metodo più lungo, "PSICOTERAPIA SENSOMOTORIA"). */
  .silo-hero .wrap{ padding-right:110px; }
  .silo-hero .simbolo{
    height:auto; width:clamp(72px,22%,96px);
    top:14px; bottom:auto; right:14px;
  }
}