/*
 * B-v2 chrome — responsive overrides + CSS-only mobile nav.
 *
 * Owns every breakpoint that adapts the shared chrome (Nav / Footer /
 * Page Hero / Final CTA) for narrow viewports. Loaded AFTER chrome.css
 * so cascade-specificity stays simple.
 *
 * Mobile nav is a checkbox+label hamburger (no JS) — checked state on
 * `.b-nav-toggle` reveals `.b-nav-menu` as an absolutely-positioned
 * dropdown beneath the nav bar.
 */

/* ============ TABLET — 1024px ============ */
@media (max-width: 1024px) {
  .b-nav-inner { padding: 18px 32px; }
  .b-page-hero { padding: 96px 32px 72px; }
  .b-page-hero-title { font-size: 64px; }
  .b-final-cta { padding: 96px 32px; }
  .b-final-cta-title { font-size: 48px; }
  .b-footer { padding: 56px 32px 28px; }
  .b-footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
  .b-footer-brand-col { grid-column: 1 / -1; max-width: none; padding-bottom: 16px; border-bottom: 1px solid var(--ink-3); }
}

/* ============ PHONE — 768px ============ */
@media (max-width: 768px) {
  .b-nav-inner { padding: 16px 20px; flex-wrap: wrap; gap: 16px; }

  /* Hamburger button */
  .b-nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--ink-3);
    padding: 8px;
    transition: border-color 0.15s;
  }
  .b-nav-burger:hover { border-color: var(--paper); }
  .b-nav-burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--paper);
    transition: transform 0.2s, opacity 0.2s;
  }
  .b-nav-toggle:checked ~ .b-nav-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .b-nav-toggle:checked ~ .b-nav-burger span:nth-child(2) { opacity: 0; }
  .b-nav-toggle:checked ~ .b-nav-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Collapse the nav menu by default; expand when the toggle is checked */
  .b-nav-menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    order: 99;
  }
  .b-nav-toggle:checked ~ .b-nav-menu { display: flex; }
  .b-nav-links {
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--ink-3);
    padding-top: 16px;
    margin-top: 8px;
  }
  .b-nav-link {
    padding: 14px 4px;
    border-bottom: 1px solid var(--ink-3);
    font-size: 16px;
  }
  .b-nav-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 20px 0 8px;
  }
  .b-nav-login { padding: 12px 4px; font-size: 16px; }
  .b-btn-amber-sm { padding: 14px 18px; font-size: 14px; justify-content: center; }

  /* Page hero */
  .b-page-hero { padding: 72px 20px 56px; }
  .b-page-hero-title { font-size: 44px; }
  .b-page-hero-lede { font-size: 17px; }
  .b-page-hero-eyebrow { font-size: 10px; margin-bottom: 24px; }

  /* Final CTA */
  .b-final-cta { padding: 72px 20px; }
  .b-final-cta-title { font-size: 36px; }
  .b-final-cta-sub { font-size: 16px; margin-bottom: 28px; }
  .b-final-cta-actions { flex-direction: column; gap: 12px; align-items: center; }
  .b-btn-amber-lg,
  .b-btn-outline-dark {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* Footer */
  .b-footer { padding: 48px 20px 24px; }
  .b-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
    padding-bottom: 32px;
  }
  .b-footer-brand-col { grid-column: 1 / -1; padding-bottom: 16px; }
  .b-footer-tagline { max-width: none; }
  .b-footer-bottom {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    padding-top: 20px;
    text-align: left;
  }
}

/* ============ SMALL PHONE — 480px ============ */
@media (max-width: 480px) {
  .b-page-hero-title { font-size: 36px; }
  .b-final-cta-title { font-size: 30px; }
  .b-footer-grid { grid-template-columns: 1fr; }
}