/* =========================================================
   T.I.S. Srl — Layer MOBILE
   Va caricato SEMPRE dopo assets/styles.css.
   Non modifica il desktop: tutto è dentro media query.
   ========================================================= */

/* ---------- 1. Base sicura su tutti i dispositivi ---------- */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  overflow-x:clip;
}
/* Gli anchor non finiscono più sotto la barra fissa */
[id]{scroll-margin-top:104px;}

/* Il preloader sparisce da solo anche se il JS non parte o è lento */
@keyframes tisPreloaderFallback{to{opacity:0;visibility:hidden;pointer-events:none}}
.preloader{animation:tisPreloaderFallback .4s ease 2.6s forwards;}

/* Nessun elemento può sfondare la larghezza dello schermo */
img,video,iframe{max-width:100%;}
.container,.nav-shell,.hero-grid{max-width:100%;}

/* Input: 16px minimo = niente zoom automatico su iOS */
.form input,.form textarea,.form select,input,textarea,select{
  font-family:inherit;
  font-size:16px;
}

/* Il cursore del confronto prima/dopo non blocca più lo scroll verticale */
.compare-range{touch-action:pan-y;}

/* ---------- 2. Tablet e sotto (<= 980px) ---------- */
@media (max-width:980px){
  .site-header{top:10px;}
  .nav-shell{
    width:calc(100% - 20px);
    padding:8px 8px 8px 14px;
    gap:10px;
  }
  .menu-btn{
    min-width:48px;
    min-height:48px;
    padding:12px 18px;
    font-size:13px;
  }
  .nav-links{
    top:70px;
    width:calc(100vw - 20px);
    max-height:calc(100dvh - 110px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    gap:4px;
    box-shadow:0 24px 60px rgba(0,0,0,.45);
  }
  .nav-links a{
    padding:16px 18px;
    font-size:15px;
    text-align:center;
  }
  /* Blocca lo scroll della pagina mentre il menu è aperto */
  body.nav-open{overflow:hidden;}

  /* Effetti pesanti spenti: risparmio batteria e scroll fluido */
  .sig,.method-final-card,.method-final-stats div,.showcase-frame{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .parallax{transform:none !important;}
  .hero-lines,.method-showcase-final:after{display:none;}
}

/* ---------- 3. Telefono (<= 760px) ---------- */
@media (max-width:760px){
  .container{width:calc(100% - 28px);}
  .section{padding:68px 0;}

  /* Altezza hero corretta: niente salto quando compare/scompare
     la barra degli indirizzi del browser */
  .hero{
    min-height:auto;
    padding:120px 0 64px;
  }
  @supports (height:100svh){
    .hero{min-height:88svh;}
  }
  .scroll-cue{display:none;}

  /* Tipografia leggibile su schermi stretti */
  .hero h1{font-size:clamp(34px,8.6vw,48px);line-height:1;}
  .page-hero h1{font-size:clamp(32px,8.2vw,44px);line-height:1.02;}
  .page-hero{min-height:auto;padding:118px 0 56px;}
  .lead{font-size:17px;line-height:1.62;}
  .section-head h2{font-size:clamp(30px,7.4vw,40px);line-height:1.04;}
  .copy-panel h2,.cta h2,.detail-copy h2,.contact-card h2,
  .form-card h2,.showcase-copy h2,.method-final-copy h2,
  .signature-panel h2{font-size:clamp(28px,7vw,38px);line-height:1.06;}
  .service-tile h3,.method-final-card h3{font-size:26px;line-height:1.1;}
  .sig strong,.lux-stat strong,.method-final-stats strong{font-size:36px;}
  .kicker,.eyebrow{font-size:10px;letter-spacing:.16em;}
  .kicker:before,.eyebrow:before{width:24px;}

  /* Bottoni a piena larghezza: più facili da centrare col pollice */
  .hero-actions{gap:10px;}
  .hero-actions .btn,.cta .btn{width:100%;}
  .btn{padding:16px 22px;min-height:50px;}

  /* Immagini: altezze proporzionate allo schermo */
  .cinema img,.detail-media img{height:240px;}
  .service-tile img{height:210px;}
  .method-final-image{height:300px;}
  .rail-track img{width:190px;height:250px;}
  .editorial-photo-grid{gap:10px;}

  /* Card e pannelli più compatti */
  .copy-panel,.contact-card,.form-card,.signature-panel,.cta{padding:24px;border-radius:26px;}
  .service-tile,.detail-card{border-radius:24px;}
  .lux-stats{margin-top:-18px;gap:12px;}
  .lux-stat{padding:20px;}
  .hero-badges span{font-size:10px;padding:8px 11px;}

  /* Form comodi da compilare col pollice */
  .form input,.form textarea{padding:15px 16px;border-radius:14px;}
  .form textarea{min-height:120px;}
  .form-row{display:grid;grid-template-columns:1fr;gap:12px;}
  .form label{font-size:14px;}

  /* Pulsanti flottanti: sopra la barra gesti iPhone e più piccoli */
  .float-actions{
    right:14px;
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
    gap:8px;
  }
  .float-actions a,.go-top{width:50px;height:50px;border-radius:15px;}
  .go-top{
    right:14px;
    bottom:calc(128px + env(safe-area-inset-bottom,0px));
  }

  /* Footer leggibile in colonna */
  .footer{padding:40px 0;}
  .footer .container{display:grid;gap:18px;}

  /* Confronto prima/dopo: maniglia più grande e visibile al dito */
  .slider-handle{width:46px;height:46px;font-size:20px;}
  .compare{padding:14px;border-radius:22px;}
  .tag-before,.tag-after{font-size:9px;padding:7px 10px;bottom:12px;}
}

/* ---------- 4. Telefoni piccoli (<= 400px) ---------- */
@media (max-width:400px){
  .container{width:calc(100% - 22px);}
  .section{padding:56px 0;}
  .hero h1{font-size:31px;}
  .page-hero h1{font-size:29px;}
  .brand-logo-original{height:38px;}
  .menu-btn{padding:12px 14px;}
  .nav-shell{padding:7px 7px 7px 11px;}
}

/* ---------- 5. Telefono in orizzontale ---------- */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding:104px 0 48px;}
  .preloader{display:none;}
}

/* ---------- 6. Rispetto delle preferenze di sistema ---------- */
@media (prefers-reduced-motion:reduce){
  .marquee-track,.rail-track,.loading-bar i,.slider-handle:before,.slider-handle:after{
    animation:none !important;
  }
  html{scroll-behavior:auto;}
}

/* ---------- 7. Dettagli del form appuntamento su telefono ---------- */
@media (max-width:760px){
  .form input[type="checkbox"]{
    width:22px;height:22px;flex:0 0 22px;margin-right:10px;accent-color:#c79a55;
  }
  .form select{
    width:100%;padding:15px 16px;border-radius:14px;
    border:1px solid rgba(0,0,0,.08);background:#faf6ef;
    appearance:none;-webkit-appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,#8a6534 50%),linear-gradient(135deg,#8a6534 50%,transparent 50%);
    background-position:calc(100% - 20px) 24px,calc(100% - 14px) 24px;
    background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  }
  .appointment-submit{width:100%;}
}

/* ---------- 8. Riga dati societari nel footer ---------- */
.footer .legal-line{
  margin-top:6px;
  font-size:12px;
  letter-spacing:.02em;
  color:#7a8794;
}
@media (max-width:760px){
  .footer .legal-line{font-size:11px;}
}

/* ---------- 9. Sicurezza anti pagina bianca ----------
   Se mobile.js non viene eseguito (file non caricato, errore, JS disattivato)
   i contenuti restano comunque visibili: niente piu' sezioni vuote. */
html:not(.tis-anim) .reveal,
html:not(.tis-anim) .reveal-group > *{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}
html:not(.tis-anim) .preloader{display:none !important;}

/* =========================================================
   10. FIX IMPAGINAZIONE HOME SU TELEFONO
   Causa: in styles.css le regole
     .service-tile:nth-child(1){grid-column:span 7}
     .service-tile:nth-child(2){grid-column:span 5}
   hanno specificita' PIU' ALTA di .service-tile{grid-column:span 1}
   scritta dentro @media(max-width:980px). Quindi su telefono
   le prime due tessere continuano a occupare 7 e 5 colonne di una
   griglia che ne ha una sola: il browser crea colonne implicite,
   la pagina diventa larghissima e scorre in orizzontale.
   ========================================================= */

/* Niente puo' allargare la pagina oltre lo schermo */
html{overflow-x:clip;}
@supports not (overflow:clip){
  html,body{overflow-x:hidden;}
}
html,body{max-width:100%;}

@media (max-width:980px){
  /* Griglia servizi: una tessera per riga, davvero */
  .mega-grid{grid-template-columns:minmax(0,1fr) !important;}
  .mega-grid > .service-tile,
  .service-tile:nth-child(1),
  .service-tile:nth-child(2),
  .service-tile:nth-child(n){
    grid-column:1 / -1 !important;
    min-width:0;
  }

  /* Le celle delle griglie possono restringersi sotto la larghezza
     del contenuto: senza min-width:0 una parola lunga sfonda il layout */
  .mega-grid > *,.lux-stats > *,.hero-signature > *,.section-head > *,
  .wow-strip > *,.signature-shell > *,.signature-matrix > *,.story-grid > *,
  .step-row > *,.compare-grid > *,.contact-grid > *,.feature > *{
    min-width:0;
  }
}

@media (max-width:760px){
  /* Pannello "Dal primo contatto alla consegna": le 4 card in colonna */
  .signature-matrix,.story-grid{grid-template-columns:minmax(0,1fr);}
  .signature-panel{padding:24px;}

  /* Titoli e testi lunghi vanno a capo invece di uscire dallo schermo */
  h1,h2,h3,p,.lead,.signature-card strong,.service-tile h3,.spot-head h2{
    overflow-wrap:break-word;
    word-break:normal;
  }
  .service-tile h3{font-size:24px;}
  .signature-card strong{font-size:26px;}
}