/* ==========================================================================
   base.css — foglio comune dei siti satelliti del gruppo edilgetica
   Consuma SOLO variabili emesse da build/<brand>/variables.css.
   Va incluso DOPO variables.css e PRIMA del CSS locale del satellite.
   ========================================================================== */

/* Font di gruppo (stesso import del DS di riferimento: tokens/fonts.css) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap');

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font-body);font-size:var(--text-md);line-height:var(--leading-body);color:var(--text-body);background:var(--surface-page)}
img,svg{max-width:100%;display:block}
address{font-style:normal}

/* overflow-wrap: i floor delle clamp tipografiche (--text-display 2.75rem,
   --text-3xl 2.25rem) non scendono sotto i 360-390px, dove parole italiane
   lunghe ("Intermediazione", "accompagnate") superano la colonna e venivano
   tagliate. Interviene SOLO quando la parola non sta nella riga. */
h1,h2,h3,h4{font-family:var(--font-display);line-height:var(--leading-tight);color:var(--ink-900);margin:0 0 var(--space-4);overflow-wrap:break-word}
h1{font-size:var(--text-display);font-weight:var(--weight-black);letter-spacing:-.01em}
h2{font-size:var(--text-3xl);font-weight:var(--weight-bold)}
h3{font-size:var(--text-xl);font-weight:var(--weight-bold)}
p{margin:0 0 var(--space-4)}
a{color:var(--link-color,var(--color-primary-strong))}
a:focus-visible,button:focus-visible{outline:3px solid var(--color-primary-strong);outline-offset:2px;border-radius:var(--radius-sm)}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink-900);color:#fff;padding:var(--space-3) var(--space-4);z-index:100;border-radius:0 0 var(--radius-md) 0}
.skip-link:focus{left:0}

.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--space-5)}
.container--narrow{max-width:var(--container-narrow)}
.section{padding-block:clamp(var(--space-8),8vw,var(--space-9))}
.section--alt{background:var(--surface-alt)}
.section--dark{background:var(--surface-dark);color:#fff}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark p{color:rgba(255,255,255,.82)}

.kicker{display:block;font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--color-primary-strong);margin-bottom:var(--space-3)}
.section--dark .kicker{color:var(--color-primary-on-dark)}
/* Regola AA di gruppo: niente testo accent su sand (primary-strong < 4.5:1 su sand per gio/alpiadelmo/savorani) */
.section--alt .kicker{color:var(--ink-800)}
.section--alt a:not([class]){color:var(--ink-900)}
.lead{font-size:var(--text-lg);color:var(--text-muted)}

/* Bottoni — pill, tap target ≥44px */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:.7em 1.5em;border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-sm);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform var(--dur-fast) var(--ease-brand),box-shadow var(--dur-fast) var(--ease-brand),background var(--dur-fast) var(--ease-brand)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--button-primary-bg,var(--color-primary-strong));color:var(--button-primary-text,#fff)}
.btn-primary:hover{box-shadow:var(--shadow-lift)}
.btn-secondary{background:transparent;color:var(--ink-900);border-color:var(--ink-400)}
.btn-secondary:hover{border-color:var(--ink-900)}
.section--dark .btn-secondary,.btn-on-dark{background:#fff;color:var(--ink-900);border-color:#fff}

/* Link-CTA: il link che chiude una card o una colonna è un controllo autonomo,
   non un link dentro un paragrafo → 44px di altezza. Nessun cambio di voce
   tipografica: resta un link di testo, cambia solo l'area toccabile.
   Da usare su ogni nuovo satellite per i link "Scopri…"/"Vedi…". */
.link-cta{display:inline-flex;align-items:center;min-height:44px}

/* Card */
.card{background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-6);transition:transform var(--dur-fast) var(--ease-brand),box-shadow var(--dur-fast) var(--ease-brand)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.card .card-accent{display:block;width:2.5rem;height:4px;border-radius:var(--radius-pill);background:var(--color-primary);margin-bottom:var(--space-4)}

.grid{display:grid;gap:var(--space-5)}
@media (min-width:48rem){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}

/* Stat */
.stat{font-family:var(--font-display)}
.stat .stat-value{display:block;font-size:var(--text-3xl);font-weight:var(--weight-black);color:var(--color-primary-strong)}
.section--alt .stat .stat-value{color:var(--ink-900)}
.section--dark .stat .stat-value{color:var(--color-primary-on-dark)}
.stat .stat-label{color:var(--text-muted);font-size:var(--text-sm)}
.section--dark .stat .stat-label{color:rgba(255,255,255,.72)}

/* Punto elenco di marca: filetto orizzontale.
   Il motivo chevron e' stato abolito su indicazione del cliente e non
   deve ricomparire in nessuna forma. Il filetto e' neutro, editoriale
   e resta riconoscibile perche' usa l'accento del ramo.
   La classe conserva il nome per non toccare 20 pagine di markup. */
.chevron-list{list-style:none;padding:0;margin:0 0 var(--space-4)}
.chevron-list li{position:relative;padding-left:var(--space-6);margin-bottom:var(--space-3)}
.chevron-list li::before{content:"";position:absolute;left:0;top:.72em;width:.85rem;height:2px;background:var(--color-primary)}
.section--alt .chevron-list li::before{background:var(--ink-800)}

/* Tag */
/* .tag: testo ink, non accent — strong su soft è 3.9-4.1:1 a 13px (qa-audit B3) */
.tag{display:inline-block;background:var(--tag-bg,var(--color-primary-soft));color:var(--ink-800);font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:.04em;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill)}

/* Placeholder fotografici (nessun asset binario nello scaffold) */
.ph{border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--color-primary-soft),var(--sand-100) 60%,var(--sand-050));border:1px solid var(--border-card);position:relative;overflow:hidden}
.ph::after{content:attr(data-caption);position:absolute;inset:auto var(--space-4) var(--space-4);font-size:var(--text-xs);color:var(--text-muted);font-family:var(--font-display);letter-spacing:.04em}
.ph-16x9{aspect-ratio:16/9}.ph-4x3{aspect-ratio:4/3}.ph-3x4{aspect-ratio:3/4}.ph-1x1{aspect-ratio:1/1}

/* ==========================================================================
   Header endorsed (markup: components/shared/endorsed-header.html)
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface-page) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-card)}
.site-header .container{display:flex;align-items:center;gap:var(--space-5);min-height:4.25rem}
/* padding-block: il link del marchio è un controllo autonomo, non un link
   inline → tap target ≥44px (misurava 32px). Il min-height dell'header non
   cambia, quindi nessuno spostamento visivo. */
.brand{display:inline-flex;align-items:baseline;gap:var(--space-2);text-decoration:none;padding-block:var(--space-2)}
.brand .brand-name{font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-lg);color:var(--ink-900);white-space:nowrap}
/* padding-block space-3 (non space-2): la firma è un link autonomo al portale,
   deve arrivare a 44px di altezza (misurava 37px). */
.brand-signature{font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--header-signature-color,var(--color-group));text-decoration:none;white-space:nowrap;align-self:center;padding-block:var(--space-3)}
.brand-signature:hover{text-decoration:underline}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:var(--space-4)}
.site-nav a{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--text-sm);color:var(--ink-800);text-decoration:none;padding:var(--space-3) var(--space-2)}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--color-primary-strong)}
.site-nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--color-primary)}
/* Sotto 48rem marchio + nav non stanno in 360px con white-space:nowrap:
   il viewport di LAYOUT si allargava da solo per contenerli (360→519px su
   alpiadelmo, 360→396 savorani, 360→391 gio) e tutta la pagina si rimpiccioliva.
   Non lo vede il controllo di scroll orizzontale, perché scrollWidth cresce
   insieme a innerWidth. Qui tutto può andare a capo, ma solo quando serve. */
@media (max-width:47.99rem){
  .site-header .container{flex-wrap:wrap;gap:var(--space-2) var(--space-3);padding-block:var(--space-2)}
  .brand .brand-name{white-space:normal}
  .site-nav{flex-wrap:wrap;gap:var(--space-2)}
  .site-nav .btn{display:none}
  .brand-signature{display:none}
}

/* ==========================================================================
   Footer di gruppo (markup: components/shared/group-footer.html)
   ========================================================================== */
.group-footer{background:var(--footer-group-bg,var(--surface-dark));color:rgba(255,255,255,.82);padding-block:var(--space-8) var(--space-6);font-size:var(--text-sm)}
.group-footer a{color:#fff;text-decoration:none}
.group-footer a:hover{text-decoration:underline}
.group-footer a:focus-visible{outline-color:#fff}
.group-footer .footer-grid{display:grid;gap:var(--space-6)}
@media (min-width:48rem){.group-footer .footer-grid{grid-template-columns:2fr 1fr 1fr}}
.group-footer .footer-brand{font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-lg);color:#fff}
.group-footer .footer-signature{color:rgba(255,255,255,.7);font-size:var(--text-xs);font-family:var(--font-display)}
.group-footer h2{font-size:var(--text-xs);font-family:var(--font-display);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:var(--space-4)}
.group-footer ul{list-style:none;margin:0;padding:0}
.group-footer li{margin-bottom:var(--space-3)}
.group-footer li[aria-current="true"] a{color:rgba(255,255,255,.55);pointer-events:none;text-decoration:none}
.group-footer .footer-legal{border-top:1px solid rgba(255,255,255,.15);margin-top:var(--space-7);padding-top:var(--space-5);display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;color:rgba(255,255,255,.6);font-size:var(--text-xs)}
.group-footer .footer-legal a{color:rgba(255,255,255,.75)}

/* Sezione "Il gruppo" (breve, rimanda SEMPRE al portale) */
.group-teaser{border-top:4px solid var(--color-group)}
.group-teaser .kicker{color:var(--color-group)}

/* ==========================================================================
   LIVELLO EDITORIALE — utility per l'art direction sofisticata
   (docs/editorial-art-direction.md). Additive: non toccano le classi base.
   ========================================================================== */

/* Testata di sezione split: kicker/titolo a sinistra, lead a destra */
.section-head-split{display:grid;gap:var(--space-4);margin-bottom:var(--space-7)}
@media (min-width:64rem){
  .section-head-split{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:end;gap:var(--space-8)}
  .section-head-split h2{margin-bottom:0}
  .section-head-split .lead{margin-bottom:.35rem}
}

/* Numerazione editoriale di capitolo */
.sec-num{display:block;font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-xs);letter-spacing:var(--tracking-caps);color:var(--color-primary-strong);margin-bottom:var(--space-2)}
/* su sand: ink-800 leggibile (AA), non l'accento (sotto 4.5:1) — qa-restyle */
.section--alt .sec-num{color:var(--ink-800)}
.section--dark .sec-num{color:inherit;opacity:.7}

/* Numero fantasma (outline muto) per step e capitoli */
.ghost-num{font-family:var(--font-display);font-weight:var(--weight-black);font-size:clamp(3.5rem,9vw,6.5rem);line-height:.9;color:transparent;-webkit-text-stroke:1.5px var(--ink-200);user-select:none}
.section--dark .ghost-num{-webkit-text-stroke-color:rgba(255,255,255,.25)}

/* Kicker con barra d'accento */
.kicker--bar{display:flex;align-items:center;gap:var(--space-3)}
.kicker--bar::before{content:"";width:2.5rem;height:2px;background:var(--color-primary);flex:none}
.section--alt .kicker--bar::before{background:var(--ink-800)}

/* Griglie asimmetriche 5/7 */
.grid-asym{display:grid;gap:var(--space-6)}
@media (min-width:64rem){
  .grid-asym{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:var(--space-8)}
  .grid-asym--rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}

/* Media a tutto bordo (dentro un .container).
   La gronda reale fra il bordo del contenuto e il bordo del viewport vale
   (100vw - var(--container))/2 + il padding del container: il margine negativo
   non deve MAI superarla, o la pagina scrolla in orizzontale.
   Perché il vecchio `max(-6rem,calc(50% - 50vw))` era sbagliato: il 50% di un
   margine si risolve sul *containing block*, che qui è la colonna di .grid-asym
   e non il container centrato; il calc restava sempre più negativo di -6rem e
   vinceva il tetto fisso, che sfora quando la gronda è più stretta di 6rem
   (misurato: +72px a 1024px, +8px a 1280px su gio/alpiadelmo/faro).
   var(--space-4) è la franchigia per la barra di scorrimento, che 100vw include. */
@media (min-width:64rem){
  .bleed-right,.bleed-left{
    --bleed:clamp(var(--space-5),(100vw - var(--container))/2 + var(--space-5) - var(--space-4),6rem)
  }
  .bleed-right{margin-right:calc(-1 * var(--bleed))}
  .bleed-left{margin-left:calc(-1 * var(--bleed))}
}

/* Sovrapposizione alla sezione precedente */
.overlap-up{position:relative;z-index:2;margin-top:calc(-1 * var(--space-9))}

/* Cornice media: zoom lento su hover, angoli dei token */
.media-frame{overflow:hidden;border-radius:var(--radius-lg)}
.media-frame .ph{border-radius:0;border:0;height:100%}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .media-frame .ph{transition:transform 1.2s var(--ease-brand)}
  .media-frame:hover .ph{transform:scale(1.04)}
}

/* Citazione display */
.display-quote{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-bold);line-height:var(--leading-snug);color:var(--ink-900);max-width:var(--container-narrow);margin:0}
.display-quote::before{content:"« "}
.display-quote::after{content:" »"}
.display-quote + figcaption{margin-top:var(--space-4);color:var(--text-muted);font-size:var(--text-sm)}

/* Sezione quiete: solo testo, narrow, molto margine */
.section--quiet{padding-block:clamp(var(--space-9),12vw,var(--space-10))}
.section--quiet .container{max-width:var(--container-narrow)}

/* Placeholder più materici: luce radiale + grana.
   La filigrana chevron è stata rimossa (motivo abolito): con essa spariscono
   .ph--mark e .ph-watermark, non più presenti in nessuna pagina. */
.ph::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(120% 85% at 18% 0%,rgba(255,255,255,.55),transparent 55%),
  repeating-linear-gradient(45deg,rgba(35,37,37,.025) 0 2px,transparent 2px 11px)}

/* Riga meta in fondo alla hero (sedi · anno · firma) */
.fh-meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin-top:var(--space-7);padding-top:var(--space-4);border-top:1px solid var(--line);font-family:var(--font-display);font-size:var(--text-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}

/* Parola in accento dentro il display (em non corsivo, colore strong) */
h1 em,h2 em{font-style:normal;color:var(--color-primary-strong)}
.section--dark h2 em{color:var(--color-primary-on-dark)}