/* ============================================================
   METALMEC — Responsive (caricato per ultimo: vince sui base)
   Breakpoint: 1100 (footer/card), 900 (menu mobile), 768 (stack)
   ============================================================ */

@media (max-width: 1100px) {
  .site-footer__columns {
    grid-template-columns: repeat(3, 1fr);
  }

  .certs__list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 24px;
  }

  .certs__item {
    flex: 0 1 28%;
  }

  .plans__item {
    grid-column: span 3;
  }

  .plans__item--wide {
    grid-column: span 6;
  }
}

@media (max-width: 900px) {
  .site-header__nav,
  .site-header__login {
    display: none;
  }

  .site-header__burger {
    display: flex;
  }

  .site-header.menu-open {
    background-color: var(--white);
    color: var(--ink);
  }

  .site-header.menu-open .btn--light {
    background: var(--ink);
    color: var(--white);
  }
}

@media (max-width: 768px) {
  /* Hero mobile: 3 zone impilate; titoloni più contenuti (vanno a capo su 2 righe). */
  .hero__content {
    padding: calc(var(--header-h) + 18px) 22px 40px;
  }

  .hero__officine {
    font-size: clamp(2.4rem, 13vw, 4.4rem);
  }

  .hero__year1962 {
    font-size: clamp(2.1rem, 11vw, 3.8rem);
  }

  .hero__mid {
    gap: 22px;
  }

  .site-header__actions {
    gap: 12px;
  }

  /* «Richiedi ora» nascosto nel header su mobile (resta solo il burger) —
     richiesta cliente 2026-07-12. Il CTA resta comunque nella hero e nel menu. */
  .site-header__actions .btn--light {
    display: none;
  }

  .site-header__logo svg {
    width: 128px;
    height: auto;
  }

  .hero__lead {
    font-size: 1.0625rem;
    line-height: 1.45;
  }

  /* Hero heritage: su mobile c'è il video VERTICALE 9:16 (vedi js/main.js) →
     centrato, riempie lo schermo mostrando l'intera inquadratura verticale. */
  .hero__video {
    object-position: center center;
  }

  /* Scrim mobile: il titolo sta in alto → scurisco alto e basso (lo scrim
     desktop scurisce a sinistra, qui non basta per il video verticale). */
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(8, 10, 13, 0.78) 0%,
        rgba(8, 10, 13, 0.46) 24%,
        rgba(8, 10, 13, 0.12) 48%,
        rgba(8, 10, 13, 0.26) 74%,
        rgba(8, 10, 13, 0.58) 100%);
  }

  /* Scroll hero più lungo anche su telefono: più tempo per leggere prima che la
     showcase bianca salga a coprire (richiesta cliente 2026-07-12). */
  .hero-pin {
    height: 360vh;
  }

  /* Note legali (.legal-notes) nascoste su mobile (richiesta cliente 2026-07-12). */
  .legal-notes {
    display: none;
  }

  /* Su mobile le card sono impilate (contenuto più alto del viewport):
     niente centratura verticale (taglierebbe le prime card), flusso dall'alto.
     Resta margin-top:-100vh e min-height:100vh dalla regola base (copertura). */
  .showcase {
    justify-content: flex-start;
    padding-block: 64px;
  }

  /* Padding ridotto: con 44px le card (255px) sforerebbero su 375px. */
  .showcase__panel {
    padding: 28px 20px;
  }

  .dept-cards {
    flex-direction: column;
  }

  .certs {
    margin-top: 110px;
    padding-bottom: 72px;
  }

  .certs__item {
    flex: 0 1 42%;
  }

  .works__panel,
  .production__panel {
    aspect-ratio: auto;
    min-height: 640px;
    max-height: none;
  }

  .works__content {
    padding-top: 72px;
  }

  /* Su telefono i pannelli si allungano (min-height, contenuto impilato):
     il contenuto riparte dall'alto (col suo padding-top), non centrato. */
  .works__panel {
    justify-content: flex-start;
    padding-bottom: 140px;
  }

  .production__panel {
    padding-top: 72px;
    padding-bottom: 150px;
  }

  .tabs--dark {
    bottom: 40px;
    flex-wrap: wrap;
    gap: 10px;
    padding-inline: var(--gutter);
  }

  .flange {
    width: 270px;
    height: 270px;
  }

  .production__visual {
    margin-top: 48px;
  }

  /* Su telefono niente modello 3D (il .glb non viene scaricato): tornano i
     dischi CSS in entrambi i pannelli produzione. */
  .production__visual .model3d {
    display: none;
  }

  .production__visual .disc-carousel {
    display: flex;
  }

  /* Caroselli dischi: ridotti per stare nel viewport stretto */
  .disc-carousel--lg {
    --disc-size: 150px;
    --disc-radius: 128px;
    --disc-fs: 1.05rem;
  }

  .disc-carousel--md {
    --disc-size: 132px;
    --disc-radius: 114px;
    --disc-fs: 0.9rem;
  }

  .works__discs {
    bottom: 118px;
  }

  /* Ventaglio disattivato: su mobile le card sono impilate in colonna */
  .dept-cards {
    --fan: 1 !important;
  }

  .quality {
    padding-block: 96px 80px;
  }

  .quality__grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .final-cta {
    padding-block: 90px 64px;
  }

  .plans__item,
  .plans__item--wide {
    grid-column: span 6;
  }

  .site-footer__columns {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__legal-links {
    margin-left: 0;
  }
}

/* Lo scrub ora è da scroll (funziona anche su touch). Su smartphone niente
   hint: lo scorrimento del video è già evidente (ed evita overflow del pill). */
@media (max-width: 768px) {
  .hero__scrubhint {
    display: none;
  }
}