/* ════════════════════════════════════════
   MOBILE RESPONSIVE — runflow.it
   Tutti i breakpoint e la nav hamburger
════════════════════════════════════════ */

/* ─── HAMBURGER BUTTON ─── */
#nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: .5rem;
  background: none;
  border: none;
  z-index: 310;
  position: relative;
  flex-shrink: 0;
}
#nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,.8);
  border-radius: 2px;
  transition: transform .28s ease, opacity .28s ease;
  transform-origin: center;
}
#nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
#nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ════════════════════════════════════════
   TABLET + MOBILE (≤ 768px)
════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─── HAMBURGER VISIBILE ─── */
  #nav-hamburger { display: flex; }

  /* ─── NAV OVERLAY ─── */
  .nav-links {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(8,12,20,.97) !important;
    backdrop-filter: blur(20px) !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2.5rem !important;
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .nav-links.open {
    opacity: 1 !important;
    pointer-events: all !important;
  }
  .nav-link { font-size: 1.3rem !important; }
  .nav-cta-btn,
  .nav-cta {
    font-size: 1rem !important;
    margin-left: 0 !important;
    border-left: none !important;
    padding-left: 1.4rem !important;
  }
  #nav { padding: 1rem 1.25rem !important; }

  /* ─── SCROLL SNAP OFF ─── */
  html { scroll-snap-type: none !important; }
  section, div { scroll-snap-align: none !important; }

  /* ─── SEZIONI: HEIGHT AUTO ─── */
  /* Le sezioni snap su sub-pages hanno height:100vh; overflow:hidden
     che taglia il contenuto. Su mobile le rendiamo auto. */
  section[id] {
    height: auto !important;
    min-height: 100svh;
    overflow: visible !important;
  }

  /* Sezioni che non devono essere full-height */
  #strip {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    padding: 2.5rem 1.25rem !important;
  }
  #ticker-wrap {
    height: auto !important;
    min-height: auto !important;
    overflow: hidden !important;
    padding: .75rem 0 !important;
  }
  #cta { min-height: auto !important; }
  .cta-inner { padding: 4rem 1.5rem 2rem !important; }

  /* ─── PADDING SEZIONI ─── */
  section[id] {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* ─── DARKAUDIT: STRIP ─── */
  .strip-inner { grid-template-columns: 1fr !important; }
  .sitem {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    padding: 2rem 1.25rem !important;
  }
  .sitem:last-child { border-bottom: none !important; }

  /* ─── DARKAUDIT: AGENT GRID ─── */
  .tagent-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* ─── DARKAUDIT: FIND GRID ─── */
  /* già gestita inline, ma per sicurezza */
  .find-grid { grid-template-columns: 1fr !important; }

  /* ─── DARKAUDIT: REPORT PREVIEW ─── */
  .m-row { flex-direction: column !important; }
  .m-right { width: 100% !important; }

  /* ─── DARKAUDIT: SIMULAZIONI ─── */
  .sim-inner {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  /* ─── DARKAUDIT: ADVANCED SIMS ─── */
  .advsim-grid { grid-template-columns: 1fr !important; }
  #advanced-sims { justify-content: flex-start !important; }

  /* ─── REFERENZE: NUM GRID ─── */
  .num-grid { grid-template-columns: 1fr 1fr !important; }

  /* ─── REFERENZE: CCASE ─── */
  .ccase {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 1.25rem !important;
  }

  /* ─── REFERENZE: TESTIMONIALS ─── */
  .test-grid { grid-template-columns: 1fr !important; }

  /* ─── GLOBAL: SCAN REGIONS ─── */
  .scan-regions { grid-template-columns: repeat(3, 1fr) !important; }
  .scan-stats { grid-template-columns: 1fr 1fr !important; }

  /* ─── GLOBAL: DIFF GRID ─── */
  .diff-grid { grid-template-columns: 1fr !important; }

  /* ─── GLOBAL: RESULTS GRID ─── */
  .res-grid { grid-template-columns: 1fr 1fr !important; }

  /* ─── INDEX: VS GRID ─── */
  .vs-grid { flex-direction: column !important; }

  /* ─── INDEX: DEMO ─── */
  .demo-layout { grid-template-columns: 1fr !important; }

  /* ─── INDEX: CTA FORM ─── */
  .cta-form {
    flex-direction: column !important;
    max-width: 100% !important;
  }
  .cta-form input,
  .cta-form button { width: 100% !important; box-sizing: border-box !important; }

  /* ─── FOOTER ─── */
  footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .6rem !important;
    padding: 1.25rem 1.5rem !important;
  }

  /* ─── TERMINAL ─── */
  .terminal { margin-top: 2rem !important; }
  .term-body { padding: .75rem 1rem !important; }

  /* ─── HERO HERO-CTAS ─── */
  .hero-ctas, .cta-btns {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .btn-primary, .btn-ghost {
    text-align: center !important;
    width: 100% !important;
  }
}

/* ════════════════════════════════════════
   SMALL MOBILE (≤ 480px)
════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ─── TIPOGRAFIA ─── */
  .hero-title { font-size: clamp(2.8rem, 16vw, 4.5rem) !important; }
  .sec-title  { font-size: clamp(1.6rem, 7vw, 2.5rem) !important; }
  .cta-title  { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .sim-title  { font-size: clamp(1.5rem, 6vw, 2.2rem) !important; }
  .cta-h      { font-size: clamp(2.2rem, 10vw, 3.5rem) !important; }

  /* ─── CONTATORI ─── */
  .nval  { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .snum  { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .rnum  { font-size: clamp(1.8rem, 7vw, 2.5rem) !important; }

  /* ─── TERMINAL FONT ─── */
  .term-body { font-size: .68rem !important; }
  .scan-regions { grid-template-columns: repeat(2, 1fr) !important; }

  /* ─── REFERENZE CASE ─── */
  .cc-name { font-size: 1.1rem !important; }
  .ccr-val { font-size: 1.3rem !important; }

  /* ─── INDEX STORY PANELS ─── */
  .panel-lead { font-size: .9rem !important; }

  /* ─── PADDING RIDOTTO ─── */
  section[id] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}