/* ==========================================================================
   RESPONSIVE — mobile-first overrides
   Breakpoints: 1024px (tablet), 768px (large mobile), 480px (small mobile)
   ========================================================================== */

/* ---------- Tablet & below ---------- */
@media (max-width: 1024px) {
  :root {
    --fs-display: 2.75rem;
    --fs-3xl: 2.25rem;
    --fs-2xl: 1.85rem;
  }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }

  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Mobile nav breakpoint ---------- */
@media (max-width: 900px) {
  .navbar__links {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(320px, 85vw);
    background-color: var(--color-surface);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-2);
    padding: calc(var(--navbar-height) + var(--space-6)) var(--space-6) var(--space-6);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    z-index: var(--z-overlay);
  }

  .navbar__links.is-open {
    transform: translateX(0);
  }

  .navbar__link {
    width: 100%;
    padding: var(--space-3) 0;
    font-size: var(--fs-md);
    border-bottom: 1px solid var(--color-border);
  }

  .navbar__actions .btn-outline {
    display: none;
  }

  .navbar__toggle {
    display: flex;
  }

  .navbar__overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(36, 28, 21, 0.4);
    z-index: calc(var(--z-overlay) - 1);
  }

  .navbar__overlay.is-open {
    display: block;
  }
}

/* ---------- Large mobile ---------- */
@media (max-width: 768px) {
  :root {
    --container-padding: var(--space-4);
    --fs-display: 2.25rem;
    --fs-2xl: 1.65rem;
    --fs-xl: 1.25rem;
  }

  .section {
    padding-block: var(--space-8);
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .navbar__brand-tagline {
    display: none;
  }
}

/* ---------- Small mobile ---------- */
@media (max-width: 480px) {
  :root {
    --fs-display: 1.9rem;
  }

  .btn {
    padding: var(--space-3) var(--space-5);
    font-size: var(--fs-sm);
  }

  .navbar__logo {
    height: 34px;
  }
}