/* =============================================================
   Settore metalmeccanico — /settori/metalmeccanico/   (v5, 30/9/2026)
   Namespace .met-, variabili su .page-met. Il vecchio
   settore-metalmeccanico.css resta alla pagina inglese: questo foglio
   basta a se stesso.
   Stessa famiglia delle pagine cavi e gomma (carta bianca, inchiostro
   blu notte, un accento blu, titoli al centro con la seconda frase
   grigia), con la sua composizione:
   1 · apertura: solo testo
   2 · il settore: testo a sinistra, la ruota aperta a DESTRA, a meta' schermo
   3 · il giro dei reparti: sei tessere grigie, righe 5/7 · 7/5 · 5/7.
       In TUTTE il primo piano sta sopra, a filo dei bordi, e il testo
       sotto: l'immagine apre la tessera, il testo la chiude
   4 · cosa portiamo in officina: quattro tessere bianche 2 x 2 sul grigio
   5 · domande (faq.css, componente unico)
   6 · cosa ci serve: su bianco, le tre cose in un solo riquadro grigio
   (La sezione clienti non esiste.)
   La pagina la scrive tools/settori-v5/metalmeccanico/pagina.py.
   ============================================================= */

.page-met {
  --met-ink: #0b1220;
  --met-copy: #56627a;
  --met-gray: #7b889c;
  --met-accent: #2563eb;
  --met-accent-ink: #1d4ed8;
  --met-accent-deep: #1e3a8a;
  --met-mist: #f5f5f7;
  --met-rule: rgba(15, 23, 42, 0.14);
  --met-pad: clamp(96px, 11vw, 168px);
  --met-gap: clamp(14px, 1.6vw, 20px);
  --met-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* .page-home-corporate impone main{overflow:hidden}: qui basta non far scorrere di lato */
body.page-met main {
  overflow-x: clip;
  overflow-y: visible;
  padding-top: 0;
  background: #ffffff;
}

.met-wrap {
  width: min(100% - 40px, var(--max-width, 1200px));
  margin-inline: auto;
}

.page-met section[id] { scroll-margin-top: 72px; }

.page-met main :is(a, button, summary):focus-visible {
  outline: 3px solid var(--met-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* l'occhiello e' LA voce delle etichette piccole: tessere dei reparti,
   nomi dei servizi e numeri della chiusura parlano con lo stesso
   carattere, peso e spaziatura */
.met-eyebrow,
.met-tile__n,
.met-svc__n,
.met-start__n {
  margin: 0;
  color: var(--met-accent-deep);
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* intestazione di sezione: al centro, seconda frase grigia, il corpo dei
   cavi. Ogni frase ha al piu' 31 caratteri e sta sulla sua riga */
.met-head {
  margin-inline: auto;
  text-align: center;
}
.met-title {
  margin: 0.42em 0 0;
  color: var(--met-ink);
  font-size: clamp(2.4rem, 5.4vw, 4.7rem);
  font-weight: 790;
  letter-spacing: -0.048em;
  line-height: 1.02;
  text-wrap: balance;
}
.met-title span {
  display: block;
  color: var(--met-gray);
}

.met-link {
  color: var(--met-accent);
  font-size: var(--fs-caption);
  font-weight: 640;
  text-decoration: none;
  white-space: nowrap;
}
.met-link span { display: inline-block; transition: transform 0.25s ease; }
/* bersaglio alto almeno 44 px a ogni larghezza (anche il tablet si tocca):
   il riempimento lo allarga, il margine negativo lascia la riga dov'e' */
.met-link:hover { color: var(--met-accent-ink); }
.met-link:hover span { transform: translateX(3px); }

/* i paragrafi non finiscono con una parola sola nell'ultima riga
   (dove il browser non lo sa fare restano come sono) */

/* comparse: solo se il JS e' vivo (html.reveal-ready, rete di sicurezza nel <head>) */
.reveal-ready .met-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--met-ease), transform 0.8s var(--met-ease);
}
.reveal-ready .met-in.is-in {
  opacity: 1;
  transform: none;
}
.reveal-ready .met-in--d1 { transition-delay: 0.08s; }

/* =============================================================
   1 · APERTURA
   ============================================================= */
.met-hero {
  padding-block: clamp(72px, 10vw, 144px) clamp(24px, 3vw, 40px);
  text-align: center;
}
.met-hero__copy { max-width: 1040px; }
/* su 360 px l'occhiello non sta in una riga: va a capo a meta', non con una
   parola sola sotto */
.met-hero .met-eyebrow { text-wrap: balance; }
.met-hero h1 {
  margin: 0.34em auto 0;
  color: var(--met-ink);
  font-size: clamp(2.7rem, 5.9vw, 5.4rem);
  font-weight: 790;
  letter-spacing: -0.05em;
  line-height: 1;
  text-wrap: balance;
}
.met-hero h1 span {
  display: block;
  color: var(--met-gray);
}
.met-hero__lead {
  margin: 28px auto 0;
  max-width: 47ch;
  color: var(--met-copy);
  font-size: clamp(1.1rem, 1.45vw, 1.3rem);
  line-height: 1.55;
  text-wrap: balance;
}
.met-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

/* =============================================================
   2 · IL SETTORE — il testo a sinistra, la ruota aperta a destra
   Il render riempie il suo riquadro (la ruota e' l'84% della larghezza):
   sta nella sua colonna, a meta' schermo, senza uscire.
   ============================================================= */
.met-intro {
  padding-block: clamp(32px, 5vw, 72px) clamp(88px, 10vw, 152px);
}
.met-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.met-intro__gear { margin: 0; }
.met-intro__gear img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1248 / 1072;
  object-fit: contain;
}
.reveal-ready .met-intro__gear img {
  animation: met-arrive 1.6s var(--met-ease) 0.1s both;
}
@keyframes met-arrive {
  from { opacity: 0; transform: translate3d(3%, 0, 0); }
  to { opacity: 1; transform: none; }
}
.met-intro__title {
  margin: 0.5em 0 0;
  color: var(--met-ink);
  font-size: clamp(2rem, 3.1vw, 2.8rem);
  font-weight: 790;
  letter-spacing: -0.045em;
  line-height: 1.04;
  text-wrap: balance;
}
.met-intro__title span {
  display: block;
  color: var(--met-gray);
}
.met-intro__copy > p:not(.met-eyebrow) {
  margin: 24px 0 0;
  max-width: 47ch;
  color: var(--met-copy);
  font-size: clamp(1.04rem, 1.2vw, 1.14rem);
  line-height: 1.62;
}
.met-intro__copy > p:not(.met-eyebrow) + p { margin-top: 14px; }

/* =============================================================
   3 · IL GIRO DEI REPARTI — sei tessere, righe 5/7 · 7/5 · 5/7
   Il primo piano apre la tessera, a filo dei bordi alto e laterali; il
   testo la chiude. Il render e' composto sul grigio della tessera e ha
   fondo puro in alto e in basso: nessuna giuntura dove comincia il testo.
   Niente effetti al passaggio del mouse: la tessera non e' un bottone.
   ============================================================= */
.met-lines {
  --met-tile-pad: clamp(26px, 2.8vw, 40px);
  padding-block: clamp(24px, 3vw, 48px) clamp(80px, 9vw, 136px);
}
.met-lines__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--met-gap);
  margin: clamp(56px, 7vw, 88px) 0 0;
  padding: 0;
  list-style: none;
}
/* la lista compare tutta insieme solo su telefono (la fila che scorre):
   qui compaiono le tessere, una per una */
.reveal-ready .met-lines__grid.met-in {
  opacity: 1;
  transform: none;
  transition: none;
}

.met-tile {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 28px;
  background: var(--met-mist);
  container-type: inline-size;
}
/* il primo piano: 1600 x 1320 nella tessera stretta, 1600 x 932 nella larga.
   Con righe 5/7 le due immagini risultano alte uguali (488 / 1,2121 =
   692 / 1,7167 = 403 px): i due testi partono alla stessa quota.
   (Finitura del 30/9: erano 1600 x 1120 e 1600 x 790, 342 px: i pezzi
   prendevano meta' tessera. Riquadro piu' alto e inquadrature piu' strette.) */
.met-tile__img {
  flex: none;
  margin: 0;
  aspect-ratio: 1600 / 1320;
  overflow: hidden;
}
.met-tile__img picture {
  display: block;
  height: 100%;
}
.met-tile__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* il render arriva di poco: nasce un filo piu' grande, fermo sul bordo basso
   (dove comincia il testo) */
.reveal-ready .met-tile.met-in .met-tile__img img {
  opacity: 0;
  transform: scale(1.04);
  transform-origin: 50% 100%;
  transition: opacity 1.1s var(--met-ease) 0.12s, transform 1.5s var(--met-ease) 0.12s;
}
.reveal-ready .met-tile.met-in.is-in .met-tile__img img {
  opacity: 1;
  transform: none;
}

/* il testo: l'8% basso del render e' gia' fondo puro, qui basta poco */
.met-tile__body {
  flex: 1 1 auto;
  padding: clamp(2px, 0.6vw, 8px) var(--met-tile-pad) calc(var(--met-tile-pad) + 4px);
}
/* l'etichetta: le due parti non si spezzano. Su una riga serve una tessera
   di almeno 380 px; sotto, due righe senza il punto medio */
.met-tile__n span { white-space: nowrap; }
@container (max-width: 379px) {
  .met-tile__n { line-height: 1.5; }
  .met-tile__n span { display: block; }
  .met-tile__n .met-tile__sep { display: none; }
}
.met-tile h3 {
  margin: 14px 0 0;
  color: var(--met-ink);
  font-size: clamp(1.5rem, 2.05vw, 1.85rem);
  font-weight: 780;
  letter-spacing: -0.04em;
  line-height: 1.08;
  text-wrap: balance;
  /* sempre su due righe (le frasi hanno 35-39 caratteri): a nessuna larghezza
     una tessera ha il titolo su una riga e la vicina su due */
  max-width: 12em;
}
.met-tile__text {
  margin: 16px 0 0;
  max-width: 47ch;
  color: var(--met-copy);
  font-size: clamp(1rem, 1.12vw, 1.06rem);
  line-height: 1.6;
}
.met-tile__link {
  display: inline-block;
  margin-top: 18px;
}

/* la tessera LARGA: sette colonne, immagine piu' bassa e piu' lunga; titolo
   e testo un gradino sopra, cosi' i due testi di una riga pesano uguale */
@media (min-width: 1101px) {
  .met-tile--wide { grid-column: span 7; }
  .met-tile--wide .met-tile__img { aspect-ratio: 1600 / 932; }
  .met-tile--wide .met-tile__body { padding-inline: calc(var(--met-tile-pad) + 4px); }
  /* il titolo e' piu' grande ma resta su due righe */
  .met-tile--wide h3 {
    max-width: 13em;
    font-size: clamp(1.7rem, 2.45vw, 2.2rem);
  }
  .met-tile--wide .met-tile__text {
    margin-top: 18px;
    font-size: clamp(1.02rem, 1.18vw, 1.12rem);
  }
}

.met-ask {
  margin: clamp(40px, 5vw, 64px) auto 0;
  color: var(--met-copy);
  font-size: clamp(1.04rem, 1.2vw, 1.14rem);
  line-height: 1.5;
  text-align: center;
}
.met-ask a {
  color: var(--met-accent);
  font-weight: 640;
  text-decoration: none;
}
.met-ask a:hover { color: var(--met-accent-ink); }

/* =============================================================
   4 · COSA PORTIAMO IN OFFICINA — quattro tessere bianche 2 x 2
   sulla fascia grigia. Il nome del servizio con la voce dell'occhiello,
   il titolo grande, una frase, il link in fondo (i link di una riga
   stanno alla stessa quota). Nessun bordo, nessuna ombra.
   ============================================================= */
.met-svc {
  padding-block: var(--met-pad);
  background: var(--met-mist);
}
.met-svc__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--met-gap);
  margin: clamp(56px, 7vw, 88px) 0 0;
  padding: 0;
  list-style: none;
}
.met-svc__tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(30px, 4vw, 56px);
  border-radius: 28px;
  background: #ffffff;
}
.met-svc__tile h3 {
  margin: 16px 0 0;
  color: var(--met-ink);
  font-size: clamp(1.7rem, 2.7vw, 2.4rem);
  font-weight: 780;
  letter-spacing: -0.042em;
  line-height: 1.06;
  text-wrap: balance;
  /* tutti e quattro i titoli su due righe: le frasi partono alla stessa quota */
  max-width: 11em;
}
.met-svc__text {
  margin: 20px 0 18px;
  max-width: 47ch;
  color: var(--met-copy);
  font-size: clamp(1.02rem, 1.15vw, 1.1rem);
  line-height: 1.62;
}
.met-svc__link { margin-top: auto; }

/* =============================================================
   5 · DOMANDE — il componente e' quello del sito (faq.css)
   ============================================================= */
/* righe entro i 75 caratteri (il componente ne lascia fino a 97) e nessuna
   parola sola nell'ultima riga di domande e sommario */
/* il titolo sta su due righe piene («Prima di toccare / una macchina.»): al
   corpo del componente (4,6vw) la colonna lo spezzava in tre, con una parola
   sola nell'ultima */
/* dove le domande stanno a tutta larghezza (tablet) la riga si ferma a 32em;
   il segno + resta sul bordo destro */

/* =============================================================
   6 · COSA CI SERVE — su bianco. Le tre cose da mandarci stanno in un
   solo riquadro grigio (il grigio delle tessere), divise da due filetti;
   sotto, i pulsanti. Le domande qui sopra hanno gia' il loro respiro in
   basso: la sezione non ne aggiunge altro in alto.
   ============================================================= */
.met-cta {
  padding-block: 0 var(--met-pad);
  background: #ffffff;
}
.met-start {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: clamp(30px, 3.6vw, 48px) 0;
  list-style: none;
  border-radius: 28px;
  background: var(--met-mist);
}
.met-start li {
  padding: 6px clamp(24px, 3.4vw, 48px);
}
.met-start li + li { border-left: 1px solid var(--met-rule); }
.met-start p {
  margin: 14px 0 0;
  color: var(--met-ink);
  font-size: clamp(1.1rem, 1.4vw, 1.24rem);
  font-weight: 640;
  letter-spacing: -0.018em;
  line-height: 1.32;
  text-wrap: pretty;
}
.met-cta__foot { text-align: center; }
.met-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(40px, 5vw, 56px);
}
.met-cta__note {
  margin: 24px auto 0;
  max-width: 46ch;
  color: var(--met-copy);
  line-height: 1.55;
  text-wrap: balance;
}

/* =============================================================
   Tablet e telefono
   ============================================================= */
@media (max-width: 1100px) {
  /* due colonne uguali, tutte col formato 1600 x 1320 */
  .met-tile { grid-column: span 6; }
}

@media (max-width: 900px) {
  .met-intro__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .met-intro__gear { order: -1; width: min(100%, 520px); margin-inline: auto; }
  .met-intro__copy { max-width: 560px; margin-inline: auto; }

  /* le tre cose: una sotto l'altra, numero a sinistra */
  .met-start {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin-inline: auto;
    padding: 10px clamp(24px, 5vw, 40px);
  }
  .met-start li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: baseline;
    padding: 20px 0;
  }
  .met-start li + li {
    border-left: 0;
    border-top: 1px solid var(--met-rule);
  }
  .met-start p { margin: 0; }
}

@media (max-width: 700px) {
  .met-hero { padding-top: 48px; }
  /* una frase per riga anche qui, fino a 320 px di schermo (a 9,6vw «La macchina
     è veloce.» andava a capo per un pixel a 360; il titolo del settore a 2rem
     faceva quattro righe) */
  .met-hero h1 { font-size: clamp(1.8rem, 9.2vw, 2.9rem); }
  .met-intro__title { font-size: clamp(1.55rem, 7.8vw, 2rem); }
  .met-title { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }

  /* le sei tessere in una fila che scorre: la tessera dopo spunta dal bordo */
  .met-lines { --met-tile-pad: 22px; }
  .met-lines__grid {
    display: flex;
    gap: 12px;
    margin: 40px -20px 0;
    padding: 0 0 0 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .met-lines__grid::-webkit-scrollbar { display: none; }
  /* il margine dopo l'ultima (Safari ignora il padding finale di un flex che scorre) */
  .met-lines__grid::after {
    content: "";
    flex: 0 0 8px;
  }
  .met-tile {
    flex: 0 0 min(82vw, 340px);
    scroll-snap-align: start;
    border-radius: 22px;
  }
  .met-tile__body { padding-top: 4px; }
  .met-tile h3 { font-size: 1.5rem; }
  /* compare la fila intera: le tessere fuori schermo non devono restare vuote */
  .reveal-ready .met-lines__grid.met-in {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s var(--met-ease), transform 0.8s var(--met-ease);
  }
  .reveal-ready .met-lines__grid.met-in.is-in {
    opacity: 1;
    transform: none;
  }
  .reveal-ready .met-tile.met-in,
  .reveal-ready .met-tile.met-in .met-tile__img img {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* la domanda in fondo: il link va a capo e resta staccato dalla frase */
  .met-ask a { margin-block: 0; }

  /* i servizi: una colonna */
  .met-svc__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .met-svc__tile { padding: 28px 24px 22px; border-radius: 22px; }
  .met-svc__text { margin-bottom: 8px; }
  .met-svc__link { padding-block: 14px; margin-block: 0; }

  .met-start { border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .met-in { opacity: 1; transform: none; transition: none; }
  .reveal-ready .met-intro__gear img { animation: none; }
  .met-link span { transition: none; }
  .reveal-ready .met-lines__grid.met-in,
  .reveal-ready .met-tile.met-in .met-tile__img img { opacity: 1; transform: none; transition: none; }
}