/* ============================================================
   mobile.css — MOBILE & TABLET ONLY
   ------------------------------------------------------------
   This file is loaded with media="(max-width: 880px)" in the
   HTML, so NOTHING in here can affect the desktop layout.
   Edit freely: any rule you add applies to screens ≤ 880px.
   The nested @media (max-width: 600px) block targets phones only.
   Desktop styles live in styles.css.
   ============================================================ */

@media (max-width: 880px) {
  .nav { padding: 14px var(--pad-x); }
  .work__item { grid-template-columns: 1fr; gap: 32px; }
  .work__item--reverse .work__media,
  .work__item--reverse .work__copy { order: initial; }
  .work__media { aspect-ratio: 4 / 3; }
  .services__grid { grid-template-columns: 1fr; gap: 60px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .about__copy { grid-template-columns: 1fr; gap: 24px; }
  .about__grid { grid-template-columns: 1fr; gap: 32px; }
  .capture-info { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }

  /* Tighten section rhythm */
  :root { --section-y: clamp(56px, 11vw, 96px); }

  /* Hero: smaller mat so the iframe isn't dominated by it */
  .splat-embed { --mat-h: clamp(56px, 11vw, 76px); }

  /* Hero headline shows immediately on mobile (don't wait for scroll-reveal) */
  .hero__caption .display[data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Capture page header: meta stacks cleanly */
  .capture-hero__meta { align-items: flex-start; }
}

/* Phone-specific (< 600px) */
@media (max-width: 600px) {
  /* Nav: shrink WATTS and tighten links so everything fits */
  .nav__logo { font-size: 28px; }
  .nav.scrolled .nav__logo { font-size: 24px; }
  .nav__links { gap: 16px; font-size: 10px; letter-spacing: 0.14em; }

  /* Display type a touch smaller so it doesn't dominate */
  .display-xl { font-size: clamp(44px, 11vw, 80px); }
  .display-lg { font-size: clamp(36px, 9vw, 64px); }

  /* Stats: 1-col reads better on narrow screens */
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
  .stat__value { font-size: clamp(40px, 9vw, 60px); }

  /* Comparison table: re-layout as stacked rows (label on top, two values below) */
  .compare {
    display: flex;
    flex-direction: column;
    border-top: 0;
  }
  .compare__header { display: none; }
  .compare__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line);
    padding-top: 18px;
    margin-bottom: 18px;
    position: relative;
  }
  .compare__row .compare__cell--label {
    grid-column: 1 / -1;
    padding: 0 0 14px;
    border-bottom: 0;
    color: var(--ink-mute);
  }
  .compare__row .compare__cell {
    padding: 14px 14px;
    border-bottom: 0;
    font-size: 14px;
    line-height: 1.45;
    align-items: flex-start;
  }
  .compare__row .compare__cell--legacy { display: flex; }
  .compare__row .compare__cell--legacy::before,
  .compare__row .compare__cell--brand::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 6px;
  }
  .compare__row .compare__cell--brand::before { color: var(--brand-deep); }

  /* Capture page heading: meta tag drops below cleanly */
  .capture-hero__meta { flex-direction: column; gap: 12px; }
  .capture-hero__meta h1 { font-size: clamp(36px, 9vw, 64px); }

  /* Capture nav: stack prev/next vertically */
  .capture-nav { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* Footer: stack rather than wrap mid-row */
  .footer { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer__links { flex-wrap: wrap; gap: 16px; }

  /* Tweaks panel: pin to bottom and constrain */
  #tweaks-root .twk-panel,
  .twk-panel { max-width: calc(100vw - 24px); }

  /* Hero: taller on phone so it reads as a proper hero, not a strip */
  .hero .hero__media.splat-embed {
    aspect-ratio: auto;
    height: calc(72vh + var(--mat-h) - 200px);
  }
  .hero__caption {
    padding-top: clamp(80px, 18vw, 140px);
    padding-bottom: clamp(60px, 12vw, 100px);
  }

  /* Capture pages: matching tall iframe + breathing room around the heading */
  .capture-iframe.splat-embed {
    height: calc(65vh + var(--mat-h));
  }
  .capture-hero {
    padding-top: clamp(80px, 18vw, 120px);
  }
  .capture-hero__meta {
    margin-bottom: clamp(28px, 6vw, 44px);
  }
}