/* =============================================================
   Hard Driven Athletics - Responsive Refinements
   Mobile-first adjustments layered over styles.css.
   Breakpoints tuned for 375, 768, 1024, 1440.
   ============================================================= */

/* ---------- Up to 1024px: collapse editorial splits ---------- */

@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse > .split-media { order: 0; }
  .split-media { max-width: 640px; }

  .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .service-row { grid-template-columns: 64px minmax(0, 1fr); }
  .service-row .service-detail { grid-column: 2; }
  .service-row .service-action { grid-column: 2; }

  .footer-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }

  .hero-watermark { height: 55%; opacity: 0.05; }
}

/* ---------- Up to 860px: mobile navigation ---------- */

@media (max-width: 860px) {
  .menu-toggle { display: inline-flex; align-items: center; gap: 0.5rem; }

  .logo--full { display: none; }
  .logo--acronym { display: block; }

  .primary-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: #050505;
    border-bottom: 1px solid var(--color-border);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  }

  .primary-nav.open { transform: none; opacity: 1; visibility: visible; }

  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem 24px 1.6rem;
  }

  .primary-nav li { border-bottom: 1px solid var(--color-border); }
  .primary-nav li:last-child { border-bottom: 0; }

  .primary-nav a {
    display: block;
    padding: 1.05rem 0.2rem;
    font-size: 0.9rem;
    border-bottom: 0;
  }

  .primary-nav a[aria-current="page"] { color: var(--color-red); }

  .nav-cta { margin: 0.9rem 0 0; justify-content: center; width: 100%; }
}

/* ---------- Up to 768px ---------- */

@media (max-width: 768px) {
  :root { --header-height: 64px; }

  .logo--acronym { height: 30px; }

  .hero { min-height: 88vh; padding-bottom: 4rem; }
  .scroll-cue { display: none; }

  .hero-actions .btn { width: 100%; justify-content: center; }

  .statement blockquote { max-width: none; }

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

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

  .process li { grid-template-columns: 56px minmax(0, 1fr); gap: 1rem; }
  .process li::before { font-size: 1.5rem; }

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

  .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; }

  .footer-bottom { flex-direction: column; }

  .final-cta-watermark { display: none; }
}

/* ---------- Up to 480px (375 design target) ---------- */

@media (max-width: 480px) {
  .container { padding: 0 20px; }

  .display-xl { font-size: clamp(2.6rem, 13vw, 3.4rem); }

  .hero-meta { gap: 0.6rem 1.4rem; font-size: 0.66rem; }

  .btn { padding: 0.95rem 1.4rem; font-size: 0.76rem; }

  .service-row { grid-template-columns: 1fr; gap: 0.8rem; padding: 2rem 0; }
  .service-index { display: none; }

  .media-zone--tall { aspect-ratio: 4 / 5; }

  .faq-question { font-size: 1rem; gap: 1rem; }

  .coach-quote { font-size: 1.15rem; }
}

/* ---------- 1440px and up: let it breathe ---------- */

@media (min-width: 1440px) {
  .hero-content { max-width: 940px; }
  .section-head { max-width: 860px; }
}

/* V1 (July 16, 2026): cap empty photography zones on small screens so a
   tall 4:5 reserved box never dominates a phone viewport. */
@media (max-width: 768px) {
  .media-zone--tall { max-height: 60vh; }
}

/* V2 (July 16, 2026): contact path cards stack below the split collapse;
   source order keeps the booking card first. */
@media (max-width: 1024px) {
  .contact-paths { grid-template-columns: minmax(0, 1fr); }
}