/* ============================================================
   Base reset + tipografia + utilities
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Difesa globale contro scroll orizzontale accidentale.
   `clip` non crea uno scroll container quindi non rompe position:sticky. */
html, body { overflow-x: clip; max-width: 100%; }

/* Ancore in-page (#sezione): compensa l'header sticky, così il titolo target
   non finisce nascosto sotto l'header. Vale per tutto il sito. */
:target { scroll-margin-top: calc(var(--t-header-h, 124px) + 16px); }

/* Niente highlight blu/grigio al tap su mobile (iOS/Android) */
a, button, [role="button"], .t-mm-top, .t-header__burger, .t-megamenu__close {
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    font-family: var(--t-font);
    font-weight: var(--t-fw-regular);
    font-size: var(--t-fs-base);
    line-height: 1.55;
    color: var(--t-ink);
    background: var(--t-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--t-trans);
}
a:hover { color: var(--t-sector); }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--t-sp-4);
    font-weight: var(--t-fw-light);
    line-height: 1.15;
    color: var(--t-ink);
    letter-spacing: -0.01em;
}
h1 { font-size: var(--t-fs-h1); }
h2 { font-size: var(--t-fs-h2); }
h3 { font-size: var(--t-fs-h3); font-weight: var(--t-fw-medium); }
h4 { font-size: var(--t-fs-xl);  font-weight: var(--t-fw-semibold); }

p { margin: 0 0 var(--t-sp-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--t-sp-4); padding-left: 1.25rem; }

hr { border: 0; height: 1px; background: var(--t-line); margin: var(--t-sp-6) 0; }

/* ---- Container ---- */
.t-container {
    max-width: var(--t-container);
    margin-inline: auto;
    padding-inline: var(--t-container-x);
}

.t-container--narrow { max-width: 880px; }
.t-container--wide   { max-width: var(--t-container-wide); }

/* ---- Buttons ---- */
.t-btn {
    --btn-bg: var(--t-black);
    --btn-fg: #fff;
    display: inline-flex;
    align-items: center;
    gap: var(--t-sp-3);
    padding: 0.5rem 4.2rem;
    font-family: inherit;
    font-size: var(--t-fs-sm);
    font-weight: var(--t-fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 1px solid var(--btn-bg);
    cursor: pointer;
    transition: background var(--t-trans), color var(--t-trans), border-color var(--t-trans);
}
.t-btn:hover { --btn-bg: var(--t-sector-dark); color: #fff; border-color: var(--t-sector-dark); }

.t-btn--industria { --btn-bg: var(--t-industria); }
.t-btn--edilizia  { --btn-bg: var(--t-edilizia); }
.t-btn--ghost     { --btn-bg: transparent; --btn-fg: var(--t-black); border-color: var(--t-black); }
.t-btn--ghost:hover { background: var(--t-black); color: #fff; }

/* Bottone bianco su fondo scuro (es. "Scopri tutti i settori") — hover trasparente leggibile */
.t-btn--light { --btn-bg: #fff; --btn-fg: var(--t-black); border-color: #fff; }
.t-btn--light:hover { background: transparent; color: #fff; border-color: #fff; }

/* Freccia DOPO il testo per tutti i bottoni */
.t-btn::after {
    content: "→";
    transition: transform var(--t-trans);
}
.t-btn:hover::after { transform: translateX(4px); }

/* Mobile: il padding orizzontale enorme (4.2rem) fa andare il testo su più righe
   in box stretti (es. "Scopri tutti i settori"). Lo riduciamo così il testo sta
   su una riga con la freccia in fondo. */
@media (max-width: 700px) {
    .t-btn {
        padding: 0.75rem 1.6rem;
        gap: var(--t-sp-2);
        max-width: 100%;
        text-align: center;
    }
}

/* Classe legacy mantenuta come alias (markup esistente): nessun effetto extra */
.t-btn--wide { padding: 0.5rem 4.2rem; }

/* ---- CTA banner (riquadro contenuto) ---- */
.t-cta-banner-wrap { padding: var(--t-sp-5) 0; }
.t-cta-banner {
    background-color: var(--t-industria);
    color: #fff;
    padding: var(--t-sp-8) var(--t-sp-6);
    position: relative;
    overflow: hidden;
    text-align: center;
}
/* settore Edilizia: fondo arancione come da bozza */
.t-cta-banner.is-edilizia { background-color: var(--t-edilizia); }
/* pattern come overlay sottile: il colore del settore resta dominante */
.t-cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/home/tresoldi-home-hai-bisogno.webp') center / cover no-repeat;
    opacity: .40;
    z-index: 0;
}
.t-cta-banner > * { position: relative; z-index: 1; }
.t-cta-banner h2 {
    color: #fff;
    font-weight: var(--t-fw-bold);
    font-size: clamp(1.5rem, 2.2vw, 2.1rem);
    line-height: 1.3;
    margin-bottom: var(--t-sp-6);
    max-width: 820px;
    margin-inline: auto;
}
.t-cta-banner__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--t-sp-5) var(--t-sp-8);
    max-width: 960px;
    margin: 0 auto;
}
@media (min-width: 720px) {
    .t-cta-banner__actions { grid-template-columns: 1fr 1fr; }
}
.t-cta-banner__action {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--t-sp-4);
    color: #fff;
    text-align: left;
    justify-content: flex-start;
}
.t-cta-banner__action:hover { color: #fff; }
.t-cta-banner__action:hover .t-cta-banner__arrow { transform: translateY(4px); }
.t-cta-banner__arrow {
    flex: 0 0 auto;
    font-size: 2.6rem;
    font-weight: var(--t-fw-light);
    line-height: 1;
    color: var(--t-black);
    transition: transform .25s ease;
}
.t-cta-banner__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.t-cta-banner__label {
    font-size: 1.15rem;
    font-weight: var(--t-fw-bold);
    line-height: 1.25;
}
.t-cta-banner__desc {
    font-size: .85rem;
    font-weight: var(--t-fw-regular);
    color: rgba(255,255,255,.9);
    line-height: 1.45;
}

/* ---- Sezione ---- */
.t-section { padding: var(--t-sp-9) 0; }
.t-section--tight { padding: var(--t-sp-7) 0; }
.t-section__head { text-align: center; margin-bottom: var(--t-sp-7); }
.t-section__head h2 { margin-bottom: var(--t-sp-2); }
.t-section__head p  { color: var(--t-mute); }

/* ---- Utilities ---- */
.t-sr-only {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
.t-center { text-align: center; }
.t-uppercase { text-transform: uppercase; letter-spacing: .08em; }

/* Mobile: nascondi la maschera decorativa "low-poly" a sinistra su TUTTE le slide/hero.
   Su schermi piccoli l'effetto grafico risulta troppo invasivo (richiesta cliente). */
@media (max-width: 900px) {
    .t-hero__slide::before,
    .t-mat-hero::after,
    .t-page-hero:not(.t-page-hero--plain)::after,
    .t-pillar-hero::after,
    .t-prodotti-hero::after {
        display: none !important;
    }
}