/* ============================================================
   LEGA.CSS - schede tecniche /ccXXX/ (5 pagine, template unico).
   Dipende da tokens.css + main.css (reveal, rule-draw, container,
   cta-final, btn/btn-on-bronze). Nessuna dipendenza da prodotti.css.
   ============================================================ */

/* --- HERO scheda (compatto, data-first, niente foto) --- */
.lega-hero { padding-block: clamp(3rem, 6vw, 5rem) var(--section-y); }
.lega-back {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--text-2); font-size: .95rem; text-decoration: none;
    transition: color var(--dur-fast) var(--ease-expo);
}
.lega-back svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-expo); }
.lega-back:hover { color: var(--bronze); }
.lega-back:hover svg { transform: translateX(-3px); }

.lega-hero__title {
    margin-top: var(--space-md);
    font-size: clamp(3rem, 8vw, 5.5rem);
    letter-spacing: -0.01em;
}
.lega-norma {
    margin-top: var(--space-md);
    color: var(--text-2); font-size: 1.05rem; line-height: var(--lh-body);
}
.lega-norma strong { color: var(--text-1); }

/* --- Blocco tabella (heading + hint + scroll) --- */
.spec-block { margin-top: var(--space-xl); }
.spec-block:first-of-type { margin-top: 0; }
/* hint di scroll: solo dove la chimica (min-width 720px) scrolla davvero -
   sopra ~820px la tabella sta nel container e l'istruzione sarebbe falsa */
.spec-hint { display: none; }
@media (max-width: 820px) {
    .spec-hint {
        margin-top: var(--space-sm); color: var(--text-2);
        font-size: .9rem; display: inline-flex; align-items: center; gap: .4rem;
    }
    .spec-hint svg { width: 15px; height: 15px; color: var(--bronze); }
}

.spec-scroll {
    margin-top: var(--space-md);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border); border-radius: var(--radius);
}
.spec-scroll:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 2px; }

/* --- Tabella generica schede --- */
.spec-table {
    border-collapse: collapse; width: 100%;
    font-variant-numeric: tabular-nums;
}
.spec-table th, .spec-table td {
    padding: .6rem .7rem; text-align: center; white-space: nowrap;
    border-bottom: 1px solid var(--border);
    font-size: .92rem; color: var(--text-2);
}
.spec-table thead th {
    color: var(--text-1); font-family: var(--font-display);
    font-weight: 600; background: var(--bronze-light);
    border-bottom: 1px solid var(--border);
}
.spec-table tbody th[scope="row"] {
    color: var(--text-1); font-weight: 600; text-align: left;
}
.spec-table tbody tr:last-child th, .spec-table tbody tr:last-child td { border-bottom: none; }

/* Chimica: 14 colonne → scroll orizzontale, prima colonna (Min/Max) sticky */
.spec-table--chimica { min-width: 720px; }
.spec-table--chimica tbody th[scope="row"] {
    position: sticky; left: 0; z-index: 1;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border);
}
.spec-table--chimica td:last-child { color: var(--text-3, var(--text-2)); }

/* Proprietà meccaniche: 5 colonne, prima colonna a sinistra */
.spec-table--mecc { min-width: 560px; }
/* header lunghi wrappano → la tabella sta nel container su desktop (no clip);
   i valori numerici restano su una riga. Sotto min-width scrolla su mobile. */
.spec-table--mecc thead th { white-space: normal; vertical-align: bottom; }
.spec-table--mecc th:first-child, .spec-table--mecc td:first-child {
    text-align: left; color: var(--text-1); white-space: normal;
}
.spec-table--mecc tbody tr:hover td, .spec-table--mecc tbody tr:hover th { background: var(--bronze-light); }

/* --- Applicazione (prosa) --- */
.lega-apply { max-width: var(--container-prose); }
.lega-apply > * + * { margin-top: var(--space-md); }
.lega-apply p { color: var(--text-2); line-height: var(--lh-prose); }
.lega-apply__examples strong { color: var(--text-1); }
.lega-note {
    margin-top: var(--space-lg); padding-top: var(--space-md);
    border-top: 1px solid var(--border);
    color: var(--text-2); font-size: .95rem;
}
.lega-note a { color: var(--bronze); text-decoration: underline; text-underline-offset: .2em; border-bottom: 1px solid transparent; }
.lega-note a:hover { border-bottom-color: currentColor; }

/* --- Mobile: la chimica resta scrollabile (hint visibile); la meccaniche
       scrolla anch'essa sotto i 560px. Nessun card-stack: i valori numerici
       sono più leggibili in tabella affiancata (con hint di scroll). --- */
@media (max-width: 640px) {
    .lega-hero__title { font-size: clamp(2.6rem, 13vw, 3.4rem); }
    .spec-table th, .spec-table td { padding: .55rem .6rem; font-size: .88rem; }
}