/* ================================================================
   RESPONSIVE — Mobile-first breakpoints
   WP equivalent: Responsive CSS in theme stylesheet
   ================================================================ */

/* ── Tablet ≥ 768px ── */
@media (max-width: 1100px) {
  .hero__content   { grid-template-columns: 1fr; text-align: center; }
  .hero__text      { order: 2; }
  .hero__image-wrap{ order: 1; justify-content: center; }
  .hero__sub       { margin-inline: auto; }
  .hero__arch      { width: clamp(220px, 50vw, 360px); }
  .about-strip     { grid-template-columns: 1fr; }
  .about-strip__circle { width: clamp(240px, 60vw, 380px); }
  .stats-band__grid { grid-template-columns: repeat(2, 1fr); }
  .stats-band__item:nth-child(2) { border-right: none; }
  .site-footer__main { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
  .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* Hide topbar tagline on tablet */
  .topbar-tagline { display: none; }

  .site-nav__links { display: none; flex-direction: column; }
  .site-nav__links.open {
    display: flex;
    position: fixed;
    /* Below topbar + main nav */
    top: calc(var(--topbar-h) + var(--mainnav-h) + var(--stripe-h));
    left: 0; right: 0;
    background: var(--c-dark-2);
    padding: var(--sp-5) var(--sp-4);
    gap: var(--sp-1);
    border-top: 3px solid var(--c-trini-red);
    box-shadow: 0 12px 40px rgba(0,0,0,.7);
    z-index: var(--z-nav);
  }
  .site-nav__links a {
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    display: flex;
    width: 100%;
    font-size: 13px;
    border-bottom: 1px solid rgba(255,255,255,.04);
  }
  .site-nav__links li:last-child a { border-bottom: none; }
  .site-nav__cta { display: none; }
  .site-nav__hamburger { display: flex; }

  .timeline::before { left: 20px; }
  .timeline__item {
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
  }
  .timeline__item:nth-child(odd)  .timeline__card { grid-column: 2; grid-row: 2; text-align: left; }
  .timeline__item:nth-child(odd)  .timeline__dot  { grid-column: 1; grid-row: 2; }
  .timeline__item:nth-child(odd)  .timeline__year { grid-column: 2; grid-row: 1; text-align: left; }
  .timeline__item:nth-child(even) .timeline__card { grid-column: 2; grid-row: 2; }
  .timeline__item:nth-child(even) .timeline__dot  { grid-column: 1; grid-row: 2; }
  .timeline__item:nth-child(even) .timeline__year { grid-column: 2; grid-row: 1; text-align: left; }

  .crackers-box { grid-template-columns: 1fr; }
  .press-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  :root {
    --section-py:  clamp(3rem, 6vw, 5rem);
    /* Mobile header: topbar shrinks, no change to nav-h calculation needed */
    --topbar-h:    30px;
    --mainnav-h:   60px;
    --stripe-h:    6px;
    --nav-h:       96px;
  }
  /* Hide email on very small screens to avoid overflow */
  .topbar-email   { display: none; }
  /* Shorten tagline */
  .topbar-tagline { font-size: 9px; letter-spacing: .08em; }
  .logo-sub       { display: none; }
  .logo-name      { font-size: 1.4rem; }
  .btn-group { flex-direction: column; align-items: stretch; }
  .btn-group .btn { justify-content: center; }
  .stats-band__grid { grid-template-columns: repeat(2, 1fr); }
  .stats-band__item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); padding: var(--sp-5); }
  .stats-band__item:last-child { border-bottom: none; }
  .events-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__main { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; text-align: center; }
  .footer-legal { flex-wrap: wrap; justify-content: center; }
  .hero__social-proof { flex-wrap: wrap; }
  .contact-form-box { padding: var(--sp-6); }
}

@media (max-width: 380px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .kente-stripe { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ── High contrast ── */
@media (prefers-contrast: high) {
  .card--dark, .event-card, .timeline__card, .press-card {
    border: 2px solid var(--color-secondary);
  }
  .btn--primary { background: var(--c-terra); }
}

/* ── Print ── */
@media print {
  .site-nav, .site-footer, .btn, .kente-stripe { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  .hero { min-height: auto; padding: 2rem 0; }
}