/**
 * On My Feet — Responsive / Mobile Stylesheet
 * 
 * DEVELOPER INSTRUCTIONS:
 * Add <link rel="stylesheet" href="responsive.css"> AFTER styles.css in every page.
 * Test at these breakpoints: 375px (iPhone SE), 390px (iPhone 15), 
 * 768px (iPad), 1024px (iPad landscape), 1280px (laptop), 1440px (desktop)
 * 
 * NOTE: These breakpoints are best-guess from code review without live rendering.
 * Developer should test each page and adjust values as needed.
 */

/* ── TABLET (max 1024px) ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Nav — compress gap */
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 13px; }

  /* Hero split — stack vertically */
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-left, .hero-right { padding: 60px 8% 48px; }
  .hero-right { border-top: 1px solid rgba(255,255,255,0.1); }

  /* Two-col grids → single col */
  .what-grid,
  .impact-intro,
  .heritage-grid,
  .partner-cols,
  .story-full-grid,
  .financial-grid,
  .contact-grid,
  .map-grid,
  .enterprise-grid,
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Map grid — info above map */
  .map-grid { grid-template-columns: 1fr; }
  .map-embed { height: 300px; }

  /* Four-col grids → two col */
  .wellbeing-grid,
  .voices-mosaic { grid-template-columns: repeat(2, 1fr); }
  .voice-card.featured { grid-column: span 2; }

  /* Marathon grid → two col */
  .marathon-grid { grid-template-columns: repeat(2, 1fr); }

  /* Outcome stats → two col */
  .outcomes-grid { grid-template-columns: repeat(2, 1fr); }

  /* Newsletter grid → single col */
  .newsletter-grid { grid-template-columns: 1fr; }

  /* Media video grid → two col */
  .media-video-grid { grid-template-columns: repeat(2, 1fr); }

  /* Stories grids → two col */
  .stories-grid,
  .stories-video-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer grid → two col */
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Partner cols stack */
  .partner-cols { grid-template-columns: 1fr; }

  /* Impact stats row → two col */
  .impact-stats-row { grid-template-columns: repeat(2, 1fr); }

  /* Book banner stack */
  .book-banner { flex-direction: column; gap: 24px; }
  .book-banner-left { flex-direction: column; }

  /* Socks callout stack */
  .socks-callout { flex-direction: column; text-align: center; }

  /* Referral card stack */
  .referral-card { flex-direction: column; }

  /* Marathon total stack */
  .marathon-total { flex-direction: column; text-align: center; }
}

/* ── MOBILE (max 768px) ───────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Nav — hide text links, show hamburger placeholder */
  /* TODO: Developer to implement hamburger menu */
  .nav-links { display: none; }
  nav { padding: 0 5%; }

  /* Section padding reduce */
  section { padding: 56px 5%; }
  .heritage-section,
  .outcomes-section,
  .marathon-section { padding: 56px 5%; }

  /* Page hero */
  .page-hero { padding: 100px 5% 48px; }
  .page-hero-title { font-size: clamp(28px, 8vw, 40px); }

  /* Hero panels full width */
  .hero-left, .hero-right { padding: 48px 5% 40px; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .rise-pillars { grid-template-columns: 1fr 1fr; }

  /* Stats strip — two col on mobile */
  div[style*="grid-template-columns:1fr auto 1fr auto 1fr auto 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
  }

  /* Grids → single col */
  .wellbeing-grid,
  .voices-mosaic,
  .marathon-head-grid { grid-template-columns: 1fr; gap: 28px; }
  .story-body-grid { grid-template-columns: 1fr; gap: 0; }
  .story-body-photo { min-height: 0 !important; margin-top: 8px; }
  .story-body-photo img { height: 240px; }
  .heritage-intro-grid { grid-template-columns: 1fr; gap: 28px; }
  .marathon-grid,
  .stories-grid,
  .stories-video-grid,
  .media-video-grid { grid-template-columns: 1fr; }
  .voice-card.featured { grid-column: span 1; }

  /* Outcomes → single col */
  .outcomes-grid { grid-template-columns: 1fr 1fr; }
  .outcomes-programs { grid-template-columns: 1fr; }

  /* Footer → single col */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }

  /* Partner testimonials */
  .partner-testi-grid { grid-template-columns: 1fr; }
  .partner-testi-card.wide { grid-column: span 1; }

  /* Impact stats → two col */
  .impact-stats-row { grid-template-columns: repeat(2, 1fr); }

  /* Heritage grid → single col */
  .heritage-grid { grid-template-columns: 1fr; gap: 40px; }

  /* Endorsers row → single col */
  .endorsers-row { grid-template-columns: 1fr; }

  /* FAQ grid */
  div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Book banner */
  .book-banner { padding: 40px 5%; }
  .book-cta-wrap { align-items: center; width: 100%; }
  .book-cta { width: 100%; justify-content: center; }

  /* Section labels and titles */
  .section-title { font-size: clamp(24px, 7vw, 32px); }

  /* Volunteer role grid → single col */
  div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Contact pathway cards */
  div[style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Form row half → single col */
  .form-row-half { grid-template-columns: 1fr; }

  /* Program pills wrap tighter */
  .program-pill-row { gap: 6px; }
  .program-pill { font-size: 11px; padding: 4px 10px; }

  /* Marathon total */
  .marathon-total { padding: 20px; gap: 16px; }
  .marathon-total-value { font-size: 40px; }

  /* Media logos wrap */
  .media-logo-pill { width: 88px; height: 34px; margin-right: 28px; }
  .media-logos-track { animation-duration: 38s; }

  /* What grid → single col */
  .what-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ── SMALL MOBILE (max 390px) ────────────────────────────────────────────── */
@media (max-width: 390px) {
  .nav-logo-text { font-size: 16px; }
  .hero-stats { grid-template-columns: 1fr; }
  .outcomes-grid { grid-template-columns: 1fr; }
  .impact-stats-row { grid-template-columns: 1fr; }
  section { padding: 48px 4%; }
}

/* ── PRINT (already in styles.css — kept here for reference) ─────────────── */
/* See @media print block in styles.css */

/* ── HAMBURGER MENU (developer to implement) ─────────────────────────────── */
/* 
  Suggested implementation:
  1. Add <button class="nav-hamburger" aria-label="Open menu">☰</button> to nav HTML
  2. Add class="nav-mobile-open" to <body> when hamburger clicked
  3. Style .nav-mobile-open .nav-links { display: flex; flex-direction: column; ... }
  
  .nav-hamburger {
    display: none;
    background: none; border: none; cursor: pointer;
    font-size: 24px; color: var(--navy);
  }
  @media (max-width: 768px) {
    .nav-hamburger { display: block; }
    .nav-links.open { 
      display: flex; flex-direction: column;
      position: fixed; top: 68px; left: 0; right: 0;
      background: white; padding: 24px 5%;
      border-bottom: 1px solid var(--rule);
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      z-index: 99;
    }
  }
*/