/* asiz-mobile.css — responsive overrides for tablet/phone */

/* ============ Nav: hamburger hidden on desktop ============ */

.asiz-nav-burger {
  display: none;
  background: transparent;
  border: 0;
  padding: 10px;
  margin: -10px -10px -10px 0;
  cursor: pointer;
  color: var(--ink);
}
.asiz-burger-lines {
  position: relative;
  display: block;
  width: 22px;
  height: 14px;
}
.asiz-burger-lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), opacity .2s;
}
.asiz-burger-lines span:nth-child(1) { top: 0; }
.asiz-burger-lines span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.asiz-burger-lines span:nth-child(3) { bottom: 0; }
.asiz-burger-lines.is-open span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.asiz-burger-lines.is-open span:nth-child(2) { opacity: 0; }
.asiz-burger-lines.is-open span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

.asiz-nav-drawer {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .25s, transform .25s cubic-bezier(.2,.7,.3,1);
  overflow-y: auto;
}
.asiz-nav-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.asiz-nav-drawer-inner {
  padding: 32px 24px 48px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.asiz-nav-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.asiz-nav-drawer-links a {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-soft);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.asiz-nav-drawer-links a.is-active {
  color: var(--ink);
  font-style: italic;
}
.asiz-nav-drawer-cta {
  padding-top: 32px;
  display: flex;
  flex-direction: column;
}

/* ============ Tablet (≤ 900px) ============ */

@media (max-width: 900px) {
  /* Nav */
  .asiz-nav-links { display: none; }
  .asiz-nav-cta-btn { display: none; }
  .asiz-nav-cta .asiz-phone { font-size: 13px; }
  .asiz-nav-burger { display: block; }

  /* Page heads */
  .asiz-page-head { padding: 56px 0 40px; }
  .asiz-page-head h1 { font-size: clamp(42px, 8vw, 64px); }

  /* Footer: 2-col */
  .asiz-foot-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px;
  }
  .asiz-foot-grid > div:first-child { grid-column: 1 / -1; }
  .asiz-foot-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Tablet grid collapse: 3-col → 2-col, tighten gaps */
  .asiz-root div[style*="grid-template-columns: 1fr 1fr 1fr"],
  .asiz-root div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
  /* Any very-wide inline grids give a bit of breathing room on tablet */
  .asiz-root div[style*="grid-template-columns"] {
    gap: 32px !important;
  }

  /* Wrap padding */
  .asiz-wrap { padding: 0 24px; }

  /* Section vertical padding tightening */
  .asiz-root section[style*="padding: 120px 0"],
  .asiz-root section[style*="padding: 96px 0"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* Hero split layouts lose their enforced min-height on tablet */
  .asiz-root section [style*="min-height: 92vh"],
  .asiz-root section [style*="min-height: 88vh"] {
    min-height: 70vh !important;
  }

  /* Compare table */
  .asiz-compare { font-size: 13px; }
  .asiz-compare th, .asiz-compare td { padding: 14px 10px; }

  /* Marquee speed */
  .asiz-marquee { font-size: 13px; }
}

/* ============ Phone (≤ 640px) — real mobile design, not squeezed desktop ============ */

@media (max-width: 640px) {
  /* Wrap */
  .asiz-wrap { padding: 0 20px; }

  /* Nav: tighter */
  .asiz-nav { padding: 14px 0 !important; }
  .asiz-nav-drawer-links a { font-size: 32px; padding: 12px 0; }

  /* Type rhythm — raise the floor on every display head */
  .asiz-root section .asiz-display,
  .asiz-root .asiz-display {
    font-size: clamp(32px, 9vw, 48px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }
  /* Hero headlines are allowed to run larger */
  .asiz-root section:first-of-type .asiz-display,
  .asiz-root section[style*="background: var(--ink)"] .asiz-display {
    font-size: clamp(40px, 11vw, 60px) !important;
  }

  /* Eyebrows */
  .asiz-eyebrow { font-size: 10px !important; letter-spacing: 0.14em !important; }

  /* Body copy rhythm */
  .asiz-body { font-size: 15px; line-height: 1.55; }
  .asiz-root section p.asiz-body,
  .asiz-root p.asiz-body {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* Page heads */
  .asiz-page-head { padding: 32px 0 24px; }
  .asiz-page-head h1 { font-size: clamp(36px, 10vw, 48px) !important; letter-spacing: -0.02em; line-height: 1.05; }
  .asiz-page-head p { font-size: 15px !important; margin-top: 16px !important; }

  /* Universal grid collapse — any inline `display: grid` stacks to a single column
     clamped to the container width. minmax(0, 1fr) (not plain 1fr) is required so
     min-content of children can't blow the column out; plain 1fr fails when a child
     has intrinsic min-width larger than the container (seen with OfferCalculator).
     Also catches implicit single-column grids (display:grid without template-columns). */
  .asiz-root div[style*="display: grid"],
  .asiz-root div[style*="display:grid"],
  .asiz-root section[style*="display: grid"],
  .asiz-root section[style*="display:grid"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .asiz-root div[style*="grid-template-columns"],
  .asiz-root section[style*="grid-template-columns"] {
    gap: 28px !important;
  }

  /* Step row on How page: preserve tighter gap */
  .asiz-root div[style*="grid-template-columns: 100px 1fr 1fr"] {
    gap: 12px !important;
    padding: 28px 0 !important;
  }

  /* Any constrained content widths go full */
  .asiz-root section [style*="max-width: 60%"],
  .asiz-root section [style*="max-width: 50%"],
  .asiz-root section [style*="max-width: 55%"],
  .asiz-root section [style*="max-width: 46ch"],
  .asiz-root section [style*="max-width: 50ch"] {
    max-width: 100% !important;
  }

  /* No desktop min-height on mobile */
  .asiz-root section [style*="min-height: 92vh"],
  .asiz-root section [style*="min-height: 88vh"],
  .asiz-root section [style*="min-height: calc(100vh"] {
    min-height: 0 !important;
  }

  /* CTA / button rows: stack vertically and make full-width */
  .asiz-root [style*="display: flex"][style*="gap: 14px"],
  .asiz-root [style*="display: flex"][style*="gap: 16px"],
  .asiz-root [style*="display: flex"][style*="gap: 12px"] {
    flex-wrap: wrap !important;
  }
  .asiz-root section .asiz-btn {
    min-height: 48px;
  }

  /* Section vertical padding */
  .asiz-root section[style*="padding: 120px 0"],
  .asiz-root section[style*="padding: 96px 0"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .asiz-root section[style*="padding: 80px"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Kill any large horizontal inner padding on hero split panels */
  .asiz-root section [style*="padding: 80px 56px"],
  .asiz-root section [style*="padding: 96px 56px"] {
    padding: 40px 20px !important;
  }

  /* Footer: single column */
  .asiz-foot-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Compare table: tighter */
  .asiz-compare { font-size: 12px; }
  .asiz-compare th, .asiz-compare td { padding: 10px 6px; }
  .asiz-compare th:first-child,
  .asiz-compare td:first-child { min-width: 0; }

  /* FAQ */
  .asiz-faq-q { font-size: 16px; }

  /* Stats: 4-col class-based grid — collapse to 2×2 (universal grid rule above only matches inline styles) */
  .asiz-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .asiz-stats .asiz-stat { padding: 28px 20px; }
  .asiz-stats .asiz-stat:nth-child(2) { border-right: 0; }
  .asiz-stats .asiz-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .asiz-stat-num { font-size: clamp(40px, 12vw, 56px) !important; }

  /* Marquee */
  .asiz-marquee { font-size: 12px; padding: 8px 0; }

  /* Forms — breathe */
  .asiz-form { padding: 24px 20px !important; }
  .asiz-form input, .asiz-form textarea, .asiz-form select { font-size: 16px; }

  /* Buttons */
  .asiz-btn { padding: 14px 20px; font-size: 14px; }

  /* Sticky calculators / sticky columns — cancel sticky on mobile */
  .asiz-root [style*="position: sticky"] {
    position: static !important;
  }

  /* Remove heavy section margin-tops */
  .asiz-root section [style*="margin-top: 64px"] { margin-top: 32px !important; }
  .asiz-root section [style*="margin-top: 56px"] { margin-top: 28px !important; }
  .asiz-root section [style*="margin-top: 48px"] { margin-top: 24px !important; }

  /* Page padding bottom */
  .asiz-page-head + section { padding-top: 24px !important; }

  /* Before/after: taller on mobile to preserve detail */
  .asiz-root [style*="aspect-ratio: 16 / 10"] { aspect-ratio: 4 / 3 !important; }
}

/* ============ Very small (≤ 380px) ============ */

@media (max-width: 380px) {
  .asiz-wrap { padding: 0 16px; }
  .asiz-nav-cta .asiz-phone { display: none; }
}