/* =====================================================================
   responsive.css - mobile-first overrides
   Breakpoints: 1440 (max width) / 1024 (tablet-L) / 768 (tablet) / 375 (mobile)
   Layout is mobile-first in the component files where practical; this file
   collects the breakpoint adjustments in one place.
   ===================================================================== */

/* ----------------------------------------------- Large desktop (1440+) */
@media (min-width: 1440px) {
  :root {
    --container: 1280px;
  }
}

/* ------------------------------------------------- Tablet-L (≤1024px) */
@media (max-width: 1024px) {
  /* Three tall image cards get cramped at 3-up on tablets - and the long
     audience names no longer fit on one line - so stack them here. */
  .audience-grid {
    grid-template-columns: 1fr;
  }
  .audience-card {
    min-height: 360px;
  }
  .about-teaser__grid {
    gap: var(--space-5);
  }
  .about-block {
    grid-template-columns: 180px 1fr;
    gap: var(--space-3);
  }
  .contact-grid {
    gap: var(--space-5);
  }
  .hero__inner {
    padding-top: var(--space-7);
  }
}

/* ---------------------------------------------------- Tablet (≤768px) */
@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
  .section {
    padding-block: var(--space-6);
  }

  /* --- Navigation collapses to hamburger --- */
  .nav__toggle {
    display: flex;
  }
  .nav__right {
    position: fixed;
    inset: var(--nav-height) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--c-primary-dark);
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    transform: translateY(-120%);
    transition: transform var(--transition);
    box-shadow: var(--shadow-md);
  }
  .nav.is-open .nav__right {
    transform: translateY(0);
  }
  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__link {
    padding-block: var(--space-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .nav__link.is-active::after {
    display: none;
  }
  .nav__controls {
    margin-top: var(--space-3);
    justify-content: space-between;
  }
  .nav__cta {
    flex: 1;
    text-align: center;
    justify-content: center;
  }

  /* --- Stack all multi-column grids to a single column --- */
  .hero__cards,
  .audience-grid,
  .process__steps,
  .pricing-grid,
  .entry-grid,
  .cred-list {
    grid-template-columns: 1fr;
  }
  .proof__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }
  .proof__item:nth-child(odd) {
    border-left: none;
  }
  .proof__item:nth-child(1),
  .proof__item:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-1);
  }
  .proof__label {
    min-height: 0;
  }

  .about-teaser__grid,
  .about-hero__grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  /* Show the headshot above the text on mobile reading order */
  .about-teaser__media,
  .about-hero__media {
    order: -1;
    max-width: 380px;
  }

  .about-block {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .audience-card {
    min-height: 360px;
  }

  .hero__inner {
    padding: var(--space-6) var(--space-4) var(--space-6);
  }

  /* Featured pricing card no longer needs to pop out of the row */
  .price-card--featured {
    order: -1;
  }
}

/* ---------------------------------------------------- Mobile (≤375px) */
@media (max-width: 375px) {
  .container,
  .nav__inner,
  .hero__inner,
  .page-hero__inner,
  .proof__inner,
  .footer__inner {
    padding-inline: var(--space-3);
  }
  .nav__brand-line {
    display: none;
  }
  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .proof__inner {
    grid-template-columns: 1fr;
  }
  .proof__item {
    border-left: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-block: var(--space-2);
  }
  .proof__item:last-child {
    border-bottom: none;
  }
  .btn {
    width: 100%;
  }
  .hero__cta .btn {
    width: auto;
  }
}