/* Opportunity Srl — adattamento a tablet e smartphone */
html,body{overflow-x:clip}
img,svg,video,iframe,canvas{max-width:100%}
.nav-toggle{display:none}

/* ===== TABLET E SOTTO: menu a scomparsa ===== */
@media (max-width:1100px){
  nav{height:72px !important;padding:0 20px !important}
  nav .logo svg{width:42px;height:42px}
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;padding:11px;border:none;background:transparent;cursor:pointer;border-radius:10px;-webkit-tap-highlight-color:transparent}
  .nav-toggle span{display:block;height:2.5px;width:100%;background:#1a1a2e;border-radius:2px;transition:transform .25s,opacity .2s}
  nav.open .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  nav.open .nav-toggle span:nth-child(2){opacity:0}
  nav.open .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  nav .nav-links{display:none !important;position:fixed;top:72px;left:0;right:0;flex-direction:column;align-items:stretch !important;gap:0 !important;margin:0;padding:8px 20px 20px;background:#fff;border-bottom:1px solid rgba(58,127,193,.15);box-shadow:0 16px 32px rgba(26,26,46,.12);max-height:calc(100vh - 72px);overflow-y:auto}
  nav.open .nav-links{display:flex !important}
  nav .nav-links li{border-bottom:1px solid rgba(58,127,193,.08)}
  nav .nav-links li:last-child{border-bottom:none;padding-top:14px}
  nav .nav-links a{display:block;padding:15px 4px;font-size:17px !important;white-space:nowrap}
  nav .nav-links a.btn-area-privata{text-align:center;padding:14px 18px !important;font-size:15px !important}
  .offset{height:72px !important}

  .fg-grid{grid-template-columns:1fr 1fr !important;gap:32px !important}
  .dist-grid,.gadget-grid{grid-template-columns:repeat(2,1fr) !important}
  .ph-inner{grid-template-columns:1fr !important}
}

/* ===== TABLET VERTICALE ===== */
@media (max-width:900px){
  .grid-2,.ss-intro,.main-inner,.ponte-inner,.team-top,.orange-hero,.interviste-grid{grid-template-columns:1fr !important;gap:40px !important}
  .aree-grid,.valori-grid,.bio-grid,.details-grid,.riviste-grid{grid-template-columns:repeat(2,1fr) !important}
  .orange-hero{padding:40px 28px !important}
  .tab-btn{padding:18px 24px !important}
  .sn-btn{padding:16px 18px !important}
}

/* ===== SMARTPHONE ===== */
@media (max-width:600px){
  nav .logo-text{font-size:20px !important}
  nav .logo-sub{font-size:8.5px !important;letter-spacing:1.5px !important}
  section,.section{padding-left:20px !important;padding-right:20px !important}
  .aree-grid,.valori-grid,.bio-grid,.details-grid,.riviste-grid,.dist-grid,.numeri,.form-row{grid-template-columns:1fr !important}
  .gadget-grid{grid-template-columns:1fr 1fr !important;gap:12px !important}
  .numeri{grid-template-columns:1fr 1fr !important}
  .fg-grid{grid-template-columns:1fr 1fr !important;gap:28px 20px !important}
  .fg-grid > :first-child{grid-column:1 / -1}
  .fb{flex-direction:column;align-items:flex-start}
  .page-lead{font-size:16px !important}
  .page-title{letter-spacing:-1px !important}
  .tab-inner,.sn-inner{overflow-x:auto;justify-content:flex-start !important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tab-inner::-webkit-scrollbar,.sn-inner::-webkit-scrollbar{display:none}
  .tab-btn,.sn-btn{flex:0 0 auto;padding:14px 16px !important;font-size:13px !important;white-space:nowrap}
  .orange-hero{padding:32px 20px !important;border-radius:18px !important}
  .notify-form{flex-direction:column}
  .notify-form button{width:100%}
  .circle-wrap{width:280px !important;height:280px !important;max-width:100%}
  .desc-box{width:100% !important;max-width:320px}
  .verde-inner{flex-direction:column;text-align:center;gap:10px !important}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .stats{grid-template-columns:repeat(2,1fr) !important;row-gap:10px;padding:12px 16px !important}
  .stat:nth-child(2){border-right:none !important}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Timeline "Chi siamo" su smartphone: linea a sinistra, testi a tutta larghezza */
@media (max-width:700px){
  .comic-timeline::before{left:24px !important}
  .ct-step{grid-template-columns:48px 1fr !important;column-gap:14px !important;margin-bottom:28px !important;align-items:start !important}
  .ct-icon-wrap{grid-column:1 !important;grid-row:1}
  .ct-icon{width:48px !important;height:48px !important;font-size:20px !important}
  .ct-col-left,.ct-col-right{grid-column:2 !important;grid-row:1;padding:0 !important;justify-content:stretch !important}
  .ct-col-left:empty,.ct-col-right:empty{display:none}
  .ct-bubble{width:100% !important;max-width:none !important}
  .ctb-tail{display:none !important}
}