/* ═══════════════════════════════════════════════════════════════
   EOHSJ North Central Lieutenancy — Responsive Media Queries
   Mobile-first: base = < 480px, then 480, 768, 1024
   Requires: all other CSS files
   ═══════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────
   480px — Small tablet / large phone
   ──────────────────────────────────────────────────────────── */
@media (min-width: 480px) {
  /* Stats: stay 2-col on 480, move to 4-col at 768 */
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(3) { border-top: 1px solid var(--c-border-lt); }
  .stat:nth-child(4) { border-top: 1px solid var(--c-border-lt); border-right: none; }

  /* Footer: 2 columns */
  .footer-grid { grid-template-columns: 1fr 1fr; }
}


/* ────────────────────────────────────────────────────────────────
   768px — Tablet / small desktop
   ──────────────────────────────────────────────────────────── */
@media (min-width: 768px) {

  /* ── NAVIGATION ── */
  .hamburger  { display: none !important; }
  .nav-links  { display: flex !important; }
  .nav-member { display: block !important; }

  /* ── HERO ── */
  .hero { padding: 4.5rem var(--gutter); }
  .hero h1 { font-size: 3rem; }
  .hero-actions { flex-direction: row; }

  /* ── STATS ── */
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat { border-top: none !important; border-right: 1px solid var(--c-border-lt) !important; }
  .stat:last-child { border-right: none !important; }

  /* ── CARDS ── */
  .card-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── FOOTER ── */
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* ── LAYOUT HELPERS ── */
  .officer-grid { grid-template-columns: repeat(2, 1fr); }
  .sections-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; }

  /* ── DONATE / CONTACT SIDEBAR ── */
  .layout-with-sidebar { grid-template-columns: 1fr; }

  /* ── EVENT ── */
  .event-inner { flex-direction: row; }
  .event-img { flex: 0 0 260px; height: 185px; }

  /* ── EMAIL ── */
  .email-form { flex-direction: row; }
}


/* ────────────────────────────────────────────────────────────────
   1024px — Full desktop
   ──────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {

  /* ── HERO ── */
  .hero { padding: 5.5rem var(--gutter); }
  .hero h1 { font-size: 3.5rem; }

  /* ── CARDS ── */
  .card-grid { grid-template-columns: repeat(3, 1fr); }

  /* ── FOOTER ── */
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }  .officer-grid { grid-template-columns: repeat(4, 1fr); }  .faq-grid { grid-template-columns: repeat(2, 1fr); }  /* ── ORG GRID ── */
  .org-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── CROSS TEXTURES: parallax on desktop ── */
  .hero-texture,
  .event-texture,
  .cta-texture,
  .footer-texture { background-attachment: fixed; }
}


/* ────────────────────────────────────────────────────────────────
   Max-width base: mobile (<= 767px) overrides
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* ── NAVIGATION ── */
  .hamburger  { display: flex !important; }
  .nav-links  { display: none !important; }
  .nav-member { display: none !important; }
  /* Donate is still accessible via the hamburger drawer; hiding it from
     the top bar gives the hamburger room on small viewports. */
  .nav-actions .btn-donate { display: none !important; }

  /* ── HERO ── */
  .hero { padding: 3rem 1.25rem; }
  .hero h1 { font-size: 2.125rem; }
  .hero .sub { font-size: 1.0625rem; }
  .hero-actions { flex-direction: column; align-items: center; gap: 0.625rem; }

  /* ── STATS ── */
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 1.5rem 0.75rem; }
  .stat:nth-child(2)  { border-right: none; }
  .stat:nth-child(3),
  .stat:nth-child(4)  { border-top: 1px solid var(--c-border-lt); }
  .stat:nth-child(4)  { border-right: none; }

  /* ── CARDS ── */
  .card-grid { grid-template-columns: 1fr; }
  .card-img { aspect-ratio: 768 / 220; }   /* mobile spec aspect (full-width banner) */

  /* ── EVENT ── */
  .event-inner { flex-direction: column; }
  .event-img { flex: none; width: 100%; height: 180px; }

  /* ── EMAIL ── */
  .email-form { flex-direction: column; }

  /* ── SECTION ── */
  .section { padding: 2.5rem 1.25rem; }
  .section-header h2 { font-size: 1.875rem; }

  /* ── CTA BAND ── */
  .cta-band { padding: 2.5rem 1.25rem; }
  .cta-band h2 { font-size: 1.625rem; }

  /* ── FOOTER ── */
  .footer-grid { grid-template-columns: 1fr; }

  /* ── LAYOUT HELPERS ── */
  .officer-grid { grid-template-columns: repeat(2, 1fr); }
  .sections-grid { grid-template-columns: 1fr; }
  .pillar-grid { grid-template-columns: 1fr; }
  .org-grid { grid-template-columns: 1fr; }
  .cost-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .related-row { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .amount-grid { grid-template-columns: repeat(2, 1fr); }
  .cause-grid { grid-template-columns: 1fr; }
  .layout-with-sidebar { grid-template-columns: 1fr; }
  /* ── PARALLAX ── disable on mobile, causes janky scroll */
  .hero-texture,
  .event-texture,
  .cta-texture,
  .footer-texture { background-attachment: scroll; }

  /* ── PAGE HEADER ── */
  .page-header { padding: var(--space-8) var(--space-4) var(--space-6); }
  .page-header h1 { font-size: var(--text-3xl); }

  /* ── CHARITY ── stacked, photo on top */
  /* ── FOOTER BOTTOM ── */
  .footer-bottom { flex-direction: column; gap: 0.25rem; text-align: center; }
}


/* ────────────────────────────────────────────────────────────────
   480px and below — very small phones
   ──────────────────────────────────────────────────────────── */
@media (max-width: 479px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }  .officer-grid { grid-template-columns: 1fr 1fr; }

  h1 { font-size: 1.75rem; }
  .hero h1 { font-size: 1.875rem; }
  .page-header h1 { font-size: var(--text-2xl); }
}