/* ============================================================
   Wolf in the Woods — Responsive
   Breakpoints: 1024 (tablet), 768 (small tablet), 560 (phone).
   Mobile-first refinements + reveal of mobile nav & sticky bar.
   ============================================================ */

/* ---------- <= 1024px : tablet ---------- */
@media (max-width: 1024px) {
  .nav, .header__phone { display: none; }
  .nav-toggle { display: inline-flex; }
  .header__cta { display: none; }              /* CTA lives in drawer + mobile bar */

  .gallery__grid { grid-template-columns: repeat(4, 1fr); }
  .gallery__item--feature { grid-column: span 4; }
  .gallery__item--tall { grid-column: span 2; }
  .gallery__item--std { grid-column: span 2; }

  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-7) var(--sp-6); }
}

/* ---------- <= 768px : stack major layouts ---------- */
@media (max-width: 768px) {
  :root { --header-h: 64px; }

  /* Hero headline: the desktop 16ch cap wraps a short headline into 4+
     lines at phone widths, pushing CTAs further down than needed. */
  .hero h1 { font-size: clamp(2rem, 1.5rem + 5vw, 2.75rem); max-width: 22ch; }

  .brand__logo { height: 32px; }

  .split, .callout { grid-template-columns: 1fr; gap: var(--sp-6); }
  .split--reverse .split__media { order: 0; }

  .card-grid--2, .card-grid--3 { grid-template-columns: 1fr; }
  .cross-sell { grid-template-columns: 1fr; }

  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__item--feature { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
  .gallery__item--tall { grid-column: span 1; grid-row: auto; aspect-ratio: 3 / 4; }
  .gallery__item--std { grid-column: span 1; aspect-ratio: 3 / 2; }
  /* Captions always visible on touch (no hover) */
  .gallery__cap { opacity: 1; transform: none; }

  .process__step { grid-template-columns: 2.5rem 1fr; gap: var(--sp-4); padding-block: var(--sp-5); }

  .hero__media { min-height: 78vh; }
  .hero__actions .btn { flex: 1 1 auto; }

  /* Reveal sticky mobile conversion bar + pad page so it never covers content */
  .mobile-bar { display: grid; }
  body { padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0)); }
  /* Keep anchored sections clear of both header and bottom bar */
  html { scroll-padding-bottom: calc(var(--mobile-bar-h) + 16px); }

  /* Comparison table -> horizontal scroll */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-table { min-width: 640px; }
}

/* ---------- <= 560px : phone ---------- */
@media (max-width: 560px) {
  .option-grid { grid-template-columns: 1fr; }
  .field--row { grid-template-columns: 1fr; }
  .gallery__grid { grid-template-columns: 1fr; }
  /* Reset the 768px tier's 2-column spans — a single explicit column here
     would otherwise force an auto-sized implicit 2nd column and break the
     grid into a lopsided, partly-collapsed layout on phones. */
  .gallery__item,
  .gallery__item--feature,
  .gallery__item--tall,
  .gallery__item--std { grid-column: span 1; grid-row: auto; aspect-ratio: 4 / 3; }

  .trust-strip__row { justify-content: flex-start; gap: var(--sp-3) var(--sp-5); }
  .footer__grid { grid-template-columns: 1fr; }

  .modal__body { padding: var(--sp-5) var(--sp-4); }
  .form-nav, .modal__head { padding-inline: var(--sp-4); }
  .btn { width: 100%; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .hero__phone { justify-content: center; margin-top: var(--sp-2); }
}

/* ---------- Larger screens: let hero copy breathe ---------- */
@media (min-width: 1280px) {
  .hero__inner { padding-bottom: 6rem; }
}

/* ---------- Print (spec-sheet friendly) ---------- */
@media print {
  .site-header, .mobile-bar, .modal, .hero__scrim { display: none !important; }
  body { padding: 0; background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
}