/* ============================================================
   HOME IT - stili di sezione (eredita tokens.css + main.css).
   Solo ciò che è specifico della home: il resto è nel design system.
   Anchor: Landing Bronzo (hero video colata, fondo scuro, testo a sinistra).
   ============================================================ */

/* ============================================================
   HERO - full-bleed, video colata (soggetto a destra, testo a sinistra).
   Header è .site-header--overlay (fixed) → hero parte da top:0, il padding
   interno del contenuto scavalca l'altezza dell'header.
   ============================================================ */
#hero {
    position: relative;
    min-height: 100vh;            /* fallback */
    min-height: 100svh;           /* iOS: no salto barra indirizzi */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;    /* contenuto ancorato in basso */
    overflow: hidden;
    background: var(--dark-deep);
}

/* Sfondo video (parallax gestito da main.js: translateY su .hero-bg video) */
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg video,
.hero-bg img {
    width: 100%; height: 135%;    /* extra height = margine per il parallax */
    object-fit: cover;
    object-position: 10% center;  /* video 11/09: colata al centro del quadro, la porta a destra */
}

/* Velo full-bleed: la colata deve leggersi da bordo a bordo (non più un
   pannello nero piatto sulla metà sinistra). Il video ha già la fornace
   scura a sinistra → basta un velo leggero in alto-sinistra + un letto
   scuro in basso dove siede il testo. Leggibilità AA garantita dal
   bottom-scrim + text-shadow su titolo/tagline. */
.hero-fade {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(
        100deg,
        oklch(8% 0.01 50 / 0.78) 0%,
        oklch(8% 0.01 50 / 0.42) 22%,
        oklch(8% 0.01 50 / 0.10) 44%,
        transparent 62%
    );
}
.hero-fade-bottom {
    position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none;
    background: linear-gradient(
        to top,
        oklch(8% 0.01 50 / 0.78) 0%,
        oklch(8% 0.01 50 / 0.34) 42%,
        transparent 100%
    );
}

.hero-content {
    position: relative; z-index: 2;
    width: 100%;
    padding-top: clamp(7rem, 13vw, 10rem);      /* scavalca header fixed */
    padding-bottom: clamp(3rem, 6vw, 5rem);
}
.hero-left { max-width: 40rem; }

.hero-label { color: var(--bronze-on-dark); margin-bottom: 1.35rem; }

/* Logo BOA grande nell'hero (requisito cliente tassativo - come sito originale).
   Riusa boa-logo.svg (già bronzo #985a19); drop-shadow per stacco sul video scuro. */
.hero-logo {
    display: block;
    width: clamp(210px, 30vw, 400px);
    height: auto;
    margin-bottom: var(--space-lg);
    filter: drop-shadow(0 3px 16px oklch(0% 0 0 / 0.55));
}

.hero-title {
    font-family: var(--font-serif-display);
    font-size: clamp(2.1rem, 4.4vw, 3.5rem);   /* descrittore sotto il logo, ora con presenza editoriale (stacked su 2 righe) */
    line-height: 1.04;
    letter-spacing: var(--ls-heading);
    font-weight: 400;
    color: var(--on-dark);
    margin-bottom: 1.4rem;
    max-width: 16ch;                            /* spezza "Fonderia e Officina / Meccanica" → verticalità commanding */
    text-wrap: balance;
    text-shadow: 0 2px 22px oklch(0% 0 0 / 0.55);
}
.hero-title .dot { color: var(--bronze-on-dark); }

.hero-tagline {
    font-family: var(--font-ui);
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    line-height: var(--lh-body);
    letter-spacing: 0.01em;
    color: oklch(84% 0.01 50);
    max-width: 30rem;
    margin-bottom: 2.2rem;
    text-shadow: 0 1px 14px oklch(0% 0 0 / 0.5);
}

.hero-ctas { display: flex; gap: 0.85rem; flex-wrap: wrap; }
/* btn-ghost su hero scuro: vetro chiaro traslucido (verbatim landing) */
.hero-ctas .btn-ghost {
    background: var(--overlay-tint);
    color: var(--on-dark);
    border-color: oklch(100% 0 0 / 0.32);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.hero-ctas .btn-ghost:hover { background: oklch(100% 0 0 / 0.22); border-color: oklch(100% 0 0 / 0.55); }

/* Trust ISO (dato reale, verbatim landing) */
.hero-trust { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.9rem; }
.trust-chip {
    font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 600;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: oklch(80% 0.05 50);
    border: 1px solid oklch(100% 0 0 / 0.28); border-radius: var(--radius-sm);
    padding: 4px 9px; white-space: nowrap;
}

/* Indicatore scroll - decorativo (aria-hidden). Linea che pulsa verso il basso. */
.hero-scroll {
    position: absolute; z-index: 2; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
    width: 1px; height: 46px; overflow: hidden;
    background: oklch(100% 0 0 / 0.15);
    pointer-events: none;
}
.hero-scroll::after {
    content: ''; position: absolute; left: 0; top: -60%;
    width: 100%; height: 60%;
    background: linear-gradient(to bottom, transparent, var(--bronze-on-dark));
    animation: hero-scroll-travel 2.1s var(--ease-expo) infinite;
}
@keyframes hero-scroll-travel {
    0%   { transform: translateY(0);    opacity: 0; }
    35%  { opacity: 1; }
    100% { transform: translateY(280%); opacity: 0; }
}

@media (max-width: 768px) {
    /* 82% 62%: a 68% center il bordo sinistro del frame entrava in quadro e in alto a
       sinistra restava un alone azzurro sfocato che sembrava un artefatto di
       compressione. Spostando il quadro a destra e in basso l'alone esce, la colata
       occupa la fascia alta e il fondo scuro sotto accoglie logo e titolo. */
    .hero-bg video, .hero-bg img { object-position: 47% 62%; }
    /* Sotto i 400px il quadro è più verticale e la massa incandescente risaliva
       dietro al logo, che perdeva stacco. Annidata qui dentro di proposito: così
       sta accanto alla regola che sovrascrive e nessuno la può scavalcare per
       ordine nel foglio. */
    @media (max-width: 400px) {
        .hero-bg video, .hero-bg img { object-position: 47% 78%; }
    }
    /* velo più verticale su mobile (testo sopra la colata, non a fianco);
       alto alleggerito → la colata si legge full-bleed, il letto scuro in
       basso (+ .hero-fade-bottom) tiene il testo AA. */
    .hero-fade {
        background: linear-gradient(
            to bottom,
            oklch(8% 0.01 50 / 0.48) 0%,
            oklch(8% 0.01 50 / 0.38) 40%,
            oklch(8% 0.01 50 / 0.84) 100%
        );
    }
    .hero-content { padding-bottom: 2.5rem; }
    .hero-ctas { width: 100%; }
    .hero-ctas .btn { flex: 1 1 auto; justify-content: center; }
    .hero-scroll { display: none; }
    /* il toggle media (44px, angolo basso-destra) copriva l'ultimo trust-chip:
       si riserva lo spazio del bottone + un margine d'aria, i chip vanno a capo prima. */
    .hero-trust { padding-right: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-scroll::after { animation: none; opacity: 0; }
}

/* Controllo play/pausa del video hero (creato da main.js, vedi modulo 3b).
   WCAG 2.2.2: il video dura ~12s in loop, deve poter essere fermato.
   Discreto ma raggiungibile: 44px reali, angolo basso-destra dell'hero,
   fuori dalla colonna del testo. */
.hero-media-toggle {
    position: absolute; z-index: 3;
    right: var(--container-pad); bottom: 1.4rem;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: oklch(8% 0.01 50 / 0.55);
    border: 1px solid oklch(100% 0 0 / 0.28);
    border-radius: 50%;
    color: var(--on-dark);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.hero-media-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.hero-media-toggle:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
    .hero-media-toggle:hover { background: oklch(8% 0.01 50 / 0.78); border-color: oklch(100% 0 0 / 0.55); }
}
/* su mobile lo scroll-indicator è nascosto: il bottone prende il centro-basso */
@media (max-width: 768px) {
    .hero-media-toggle { right: var(--container-pad); bottom: 1rem; }
}

/* ============================================================
   PRODOTTI E SERVIZI - griglia bordata gapless (anchor: .settori-list
   della Landing Bronzo). Fondo chiaro, 4 celle con bordi condivisi 1px,
   icone bronzo = sezione del materiale. Estetica industriale/blueprint:
   niente card floating con ombra (AI-slop) → struttura a griglia tecnica.
   ============================================================ */
.ps { background: var(--bg); }

/* Header a 2 colonne: titolo sx / intro dx. Riempie il vuoto a destra e
   toglie l'eyebrow ridondante (il titolo dichiara già la sezione). */
.ps-head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
    margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
.ps-head-lead { max-width: 30rem; }
.ps-head .t-heading { margin-bottom: 1.35rem; }
.ps-head .rule-draw { margin-bottom: 0; }
.ps-intro { max-width: 34rem; color: var(--text-2); }

@media (max-width: 860px) {
    .ps-head { grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
    .ps-head-lead { max-width: none; }
}

.ps-cta { margin-top: clamp(2rem, 4vw, 2.75rem); }

/* ============================================================
   MATERIE PRIME - foto immersiva half-bleed (sborda al bordo sinistro,
   pannello a piena altezza) + testo tagliato a destra allineato al
   container. Rimpiazza lo split simmetrico: foto grande protagonista,
   copy ridotta a teaser (il dettaglio è sulla pagina /materie-prime/).
   Layout DISTINTO dalla band scura sopra (lì testo su foto) e da Storia
   sotto (split mirror → diventerà timeline).
   ============================================================ */
.mp--immersive { background: var(--surface); }
.mp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.mp-figure {
    position: relative;
    margin: 0;
    min-height: clamp(22rem, 42vw, 33rem);
    overflow: hidden;
}
.mp-figure img {
    position: absolute;
    /* oversize verticale = spazio di travel per il parallax (JS [data-parallax]);
       a riposo (translateY 0) l'overflow è centrato → framing invariato. */
    top: -6%; left: 0;
    width: 100%; height: 112%;
    object-fit: cover;
    display: block;
    will-change: transform;
}

.mp-body {
    align-self: center;
    max-width: none;
    padding-block: var(--section-y);
    padding-left: clamp(1.5rem, 4vw, 4rem);
    /* allinea il bordo destro del testo al bordo-contenuto del container */
    padding-right: max(var(--container-pad), calc((100vw - var(--container)) / 2 + var(--container-pad)));
}
.mp-body .t-heading { margin-bottom: 1.4rem; }
.mp-body .rule-draw { margin-bottom: 1.6rem; }
.mp-lead { color: var(--text-2); max-width: 42ch; text-wrap: pretty; }
.mp-cta { margin-top: clamp(1.6rem, 3vw, 2.25rem); }

/* link-freccia editoriale: underline che si disegna + freccia che scorre */
.link-arrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-ui); font-size: var(--fs-ui); font-weight: 600;
    letter-spacing: 0.005em;
    color: var(--bronze-dark);
    position: relative;
    transition: color var(--dur-fast) ease;
}
.link-arrow::after {
    content: ''; position: absolute; left: 0; bottom: -3px;
    width: 100%; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur-mid) var(--ease-expo);
}
.link-arrow svg {
    width: 20px; height: 20px;
    transition: transform var(--dur-fast) var(--ease-expo);
}
.link-arrow:hover { color: var(--bronze); }
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow:hover svg { transform: translateX(4px); }

@media (max-width: 860px) {
    /* stack: foto immersiva sopra (full-bleed) + testo sotto padded */
    .mp-grid { grid-template-columns: 1fr; }
    .mp-figure { min-height: clamp(15rem, 58vw, 22rem); }
    .mp-body {
        padding-inline: var(--container-pad);
        padding-block: clamp(2rem, 8vw, 3rem);
    }
    .mp-lead { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .link-arrow::after, .link-arrow svg { transition: none; }
}

/* ============================================================
   STORIA - timeline teaser editoriale (NON più split mirror).
   Header 2-col (heading sx / lead+CTA dx) + timeline ORIZZONTALE di 4
   milestone reali. Sezione type/number-driven (niente foto) = varietà
   dopo Materie-foto e band-foto. Fondo --bg. "1974" = nodo origine, il
   più grande. Connettori deterministici: ogni nodo disegna la linea fino
   al successivo (larghezza = colonna + gap), l'ultimo no → zero segmenti
   sospesi. Firma Playfair sui numeri, coerente con band e watermark.
   ============================================================ */
.st--timeline { background: var(--bg); }

.st-head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
    margin-bottom: clamp(2.75rem, 6vw, 4.75rem);
}
.st-head__main .t-heading { margin-bottom: 1.35rem; }
.st-head__main .rule-draw { margin-bottom: 0; }
.st-lead { color: var(--text-2); max-width: none; text-wrap: pretty; }
.st-cta { margin-top: clamp(1.5rem, 3vw, 2rem); }

@media (max-width: 720px) {
    .st-head {
        grid-template-columns: 1fr;
        align-items: start;
        gap: clamp(1.1rem, 4vw, 1.75rem);
        margin-bottom: clamp(2rem, 8vw, 3rem);
    }
}

/* ============================================================
   MATERIA BAND - full-bleed scura tra Materie e Storia.
   Spezza il ritmo split-split e stacca il muro chiaro con l'unica
   isola scura del corpo pagina. Dato editoriale enorme su dettaglio
   officina (bronzina al tornio). Scrim sx→dx: testo su area scura a
   sinistra, glow del bronzo verso destra.
   ============================================================ */
.materia-band {
    position: relative;
    isolation: isolate;
    min-height: clamp(23rem, 56vh, 33rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background: var(--dark-deep);
    color: var(--on-dark);
}
.materia-band__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 47%;   /* incornicia mandrino + bronzina */
    z-index: -2;
}
.materia-band__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(96deg, rgba(16,13,11,0.93) 0%, rgba(16,13,11,0.72) 34%, rgba(16,13,11,0.34) 62%, rgba(16,13,11,0.12) 100%),
        linear-gradient(to top, rgba(16,13,11,0.55), transparent 46%);
}
.materia-band__inner { position: relative; width: 100%; }
.materia-band__kicker {
    font-family: var(--font-ui);
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bronze-on-dark);
    margin-bottom: clamp(0.85rem, 1.6vw, 1.4rem);
}
.materia-band__line {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    line-height: 1.5;
    color: var(--on-dark);
    max-width: 32ch;
    text-wrap: pretty;
}

@media (max-width: 700px) {
    .materia-band { min-height: clamp(22rem, 66vh, 30rem); }
    .materia-band__scrim {
        background: linear-gradient(to top, rgba(16,13,11,0.92) 0%, rgba(16,13,11,0.6) 46%, rgba(16,13,11,0.4) 100%);
    }
    .materia-band__line { max-width: 26ch; }
}
.psd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.psd-card { min-width: 0; display: flex; }
.psd-card > a {
    display: block; width: 100%; text-decoration: none; color: inherit;
    border: 1px solid var(--border); background: var(--bg);
    transition: transform var(--dur-fast) var(--ease-expo),
                box-shadow var(--dur-fast) var(--ease-expo),
                border-color var(--dur-fast) var(--ease-expo);
}
.psd-card > a:hover, .psd-card > a:focus-visible {
    border-color: var(--bronze);
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(36, 31, 27, 0.10);
}
.psd-media { display: block; height: clamp(9rem, 13.9vw, 12.5rem); overflow: hidden; }
.psd-media img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: center 35%;
    transition: transform 0.5s var(--ease-expo);
}
.psd-card > a:hover .psd-media img { transform: scale(1.06); }
.psd-body { display: block; padding: 1rem 1.125rem 1.125rem; }
.psd-name {
    display: block; font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.15rem, 1.55vw, 1.375rem); line-height: 1.2; color: var(--text-1);
}
.psd-spec { display: block; font-size: var(--fs-small); color: var(--text-2); margin-top: 0.25rem; }

/* Timeline storia (design D): 4 colonne con border-top - 1974 bronzo 2px,
   le altre hairline. Niente dot né rail. */
.std-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem; list-style: none; margin: 0; padding: 0;
}
.std-item { border-top: 1px solid var(--border); padding-top: 1rem; }
.std-item--origin { border-top: 2px solid var(--bronze); }
.std-year {
    display: block;
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.7rem, 2.4vw, 2.125rem); line-height: 1.1;
    color: var(--text-1); font-feature-settings: "lnum" 1;
}
.std-item--origin .std-year { color: var(--bronze); }
.std-label { display: block; font-size: var(--fs-small); color: var(--text-2); margin-top: 0.25rem; }

@media (max-width: 860px) {
    .psd-grid { grid-template-columns: 1fr 1fr; gap: 0.625rem; }
    .psd-media { height: clamp(6rem, 25vw, 8rem); }
    .std-grid { grid-template-columns: 1fr 1fr; gap: 1.125rem 0.875rem; }
}