/* ============================================================
   OpenTheDoor — Responsive / Mobile layer
   Caricato DOPO gli <style> inline: sovrascrive dove serve.
   Breakpoint: 1024 (tablet) · 760 (mobile) · 430 (small) · landscape
   ============================================================ */

/* ---------- base globali ---------- */
body{overflow-x:clip;-webkit-text-size-adjust:100%}
*{-webkit-tap-highlight-color:rgba(0,0,0,.06)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}


/* ============================================================
   TABLET  ≤1024px
   ============================================================ */
@media(max-width:1024px){
  .site-header .container{padding:0 24px}
  .section{padding:72px 0}
  .hero{padding:92px 0 48px}
  .strip-item{width:340px;height:400px}
  .quote{padding:48px}
  .quote-media img{top:-90px;height:calc(100% + 180px);right:-10px}
  .contact-grid{gap:40px}
  .shop-cta-inner{min-height:60vh}
}


/* ============================================================
   MOBILE  ≤760px
   ============================================================ */
@media(max-width:760px){

  /* ---------- header ---------- */
  .site-header .container{
    height:58px;
    gap:8px;
    padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));
  }
  .logo{font-size:19px;gap:4px}
  .logo img{height:22px!important}
  .theme-toggle{width:34px;height:34px}
  .theme-toggle svg{width:16px;height:16px}
  .lang-toggle{min-width:34px;height:34px;padding:0 9px;font-size:12px}
  .menu-btn{
    padding:8px 14px;border:1px solid var(--line);border-radius:100px;
    font-size:13px;line-height:1;color:var(--ink);background:transparent;
  }

  /* menu a tendina */
  .nav{
    top:100%;padding:8px 20px max(20px,env(safe-area-inset-bottom));
    gap:0;background:var(--bg);
    box-shadow:0 18px 40px rgba(0,0,0,.10);
  }
  .nav a{
    padding:15px 2px;font-size:17px;font-weight:500;color:var(--ink);
    border-bottom:1px solid var(--line);
  }
  .nav a:last-child{border-bottom:0}
  .nav a:hover,.nav a.active{text-decoration:none;opacity:.65}

  /* blur di fondo pagina: più leggero su mobile */
  body::after{height:64px}

  /* ---------- niente parallasse su mobile (jank + overflow) ---------- */
  .plx{transform:none!important;scale:1!important}

  /* ---------- tipografia ---------- */
  .h-xl{font-size:clamp(34px,10.5vw,46px)}
  .h-lg{font-size:clamp(28px,8vw,38px)}
  .h-md{font-size:clamp(22px,6vw,28px)}

  /* ---------- hero ---------- */
  .hero{padding:76px 0 40px}
  .hero-row{gap:18px;align-items:flex-start}
  .hero h1{max-width:100%}
  .link-arrow{font-size:16px}

  .strip{margin-top:32px}
  .strip-track{gap:10px;animation-duration:32s}
  .strip-item{width:74vw;max-width:300px;height:auto;aspect-ratio:5/6}

  /* ---------- sezioni ---------- */
  .section{padding:56px 0}
  .section-head{margin-bottom:36px}
  .section-head-left{margin-bottom:32px}
  .section-head-left p{max-width:100%}
  .container{padding:0 20px}

  /* ---------- quote / prodotto ---------- */
  .quote{padding:28px 22px;gap:18px;border-radius:20px}
  .quote blockquote{margin:18px 0 26px;line-height:1.2}
  .quote-media{min-height:0}
  .quote-media img{
    position:static;width:100%;max-width:300px;height:auto;
    margin:0 auto;right:auto;top:auto;
  }

  /* ---------- shop CTA gigante ---------- */
  .shop-cta{padding:20px 0}
  .shop-cta-inner{min-height:auto;padding:56px 20px;gap:20px;border-radius:20px}
  .shop-cta-kicker{font-size:12px;letter-spacing:.22em}
  .shop-cta-title{font-size:clamp(42px,15vw,80px);line-height:.95;overflow-wrap:break-word}
  .shop-cta-arrow{font-size:16px;padding:14px 26px}
  .shop-cta-arrow svg{width:18px;height:18px}

  /* ---------- CTA / page hero ---------- */
  .cta{padding:72px 0}
  .cta p{margin:16px auto 26px}
  .page-hero{padding:76px 0 32px}
  .page-hero p.sub{max-width:100%}

  /* ---------- footer ---------- */
  .site-footer{padding:36px 0 max(22px,env(safe-area-inset-bottom))}
  .footer-top{gap:20px;margin-bottom:24px}
  .footer-top .tagline{max-width:100%}
  .socials a{display:inline-block;padding:6px 0}
  .footer-mid{gap:26px;margin-bottom:24px}
  .footer-mid img{max-width:110px}
  .footer-col a{padding:9px 0}
  .footer-bottom{flex-direction:column;gap:6px}

  /* ---------- pagina SHOP (works.html) ---------- */
  .shop{padding:16px 0 64px}
  .shop-head h1{margin-top:10px}
  .shop-counter{margin-top:10px;font-size:12px}
  .shop-stage{min-height:42vh;margin-top:8px}
  .shop-hero-media{height:42vh}
  .shop-hero-media img{max-height:40vh;max-width:72%}
  .shop-arrow{width:42px;height:42px;font-size:20px}
  .shop-info{padding-top:4px}
  .shop-info h2{font-size:clamp(26px,7.5vw,34px)}
  .shop-price{font-size:21px}
  .shop-desc{font-size:14px;margin-bottom:18px}
  .shop-sizes{gap:6px;margin-bottom:18px}
  .shop-size{min-width:44px;padding:11px 12px}
  .shop-specs{gap:12px;margin-bottom:24px}
  .shop-buy{width:100%;min-width:0;padding:16px 20px}
  .shop-dots{margin-top:22px}
  .shop-dot{width:10px;height:10px}

  /* ---------- pagina ABOUT ---------- */
  .otd-grid{gap:10px;grid-auto-rows:140px}
  .about-video{margin-top:28px;border-radius:18px}
  .works-meta{gap:18px;margin-bottom:28px}
  .lightbox{padding:16px}
  .lightbox-close{top:14px;right:16px}

  /* ---------- pagina CONTACT ---------- */
  .contact-grid{gap:28px;padding:24px 0 8px}
  .contact-info h1{margin-bottom:20px}
  .form label{margin:16px 0 7px}
  .form input,.form textarea{font-size:16px;padding:14px 15px}  /* 16px = niente zoom iOS */
  .form textarea{min-height:130px}
  .form button{width:100%;text-align:center;margin-top:20px}

  /* ---------- pagine legali / prose ---------- */
  .legal{padding:32px 20px 72px}
  .legal h2{font-size:21px;margin:30px 0 12px}
  .prose{padding:0 20px 56px}
  .prose p,.prose ul{font-size:16px}

  /* ---------- griglie residue ---------- */
  .stats{grid-template-columns:1fr 1fr;gap:24px;padding:40px 0}
  .team-grid{grid-template-columns:1fr 1fr}
  .wd-meta{grid-template-columns:1fr 1fr}
  .tst-scroll{grid-auto-columns:82vw}
  .tst{padding:26px;min-height:0}
}


/* ============================================================
   SMALL  ≤430px
   ============================================================ */
@media(max-width:430px){
  .logo{font-size:17px}
  .logo img{height:20px!important}
  .menu-btn{padding:8px 12px;font-size:12px}
  .container{padding:0 18px}

  .h-xl{font-size:clamp(30px,9.5vw,38px)}
  .shop-cta-title{font-size:clamp(36px,14vw,58px)}
  .shop-cta-inner{padding:48px 18px}
  .quote{padding:24px 18px}
  .strip-item{width:80vw}
  .shop-specs{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr}
  .btn{padding:14px 22px}
}


/* ============================================================
   LANDSCAPE telefono (altezza bassa)
   ============================================================ */
@media(max-height:520px) and (orientation:landscape){
  .hero{padding:64px 0 32px}
  .strip-item{width:38vw;max-width:260px}
  .shop-stage,.shop-hero-media{min-height:70vh;height:70vh}
  .shop-hero-media img{max-height:66vh}
  .shop-cta-inner{min-height:auto;padding:44px 20px}
  body::after{display:none}
}


/* ============================================================
   TOUCH: niente stati hover appiccicati
   ============================================================ */
@media(hover:none){
  .work-card:hover .media img,.work-card:hover .media video,
  .post-card:hover .media img,.otd-item:hover img{transform:none}
  .btn:hover,.theme-toggle:hover,.lang-toggle:hover{transform:none;opacity:1}
  .link-arrow:hover .ar{transform:none}
  .strip:hover .strip-track{animation-play-state:running}
  .shop-cta-inner:hover .shop-cta-arrow{background:transparent;color:inherit}
  .shop-cta-inner:hover .shop-cta-arrow svg{transform:none}
}