/* =========================================================
   RESPONSIVE — mobile-first overrides via max-width queries
   Base styles above target desktop; these queries scale down.
   ========================================================= */

/* Tablet and below */
@media (max-width: 900px) {
  .issue-grid,
  .theatre-grid,
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .involved-layout {
    grid-template-columns: 1fr;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .issue-grid,
  .theatre-grid,
  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .nav-toggle {
    display: flex;
  }

  .primary-nav {
    display: none;
    width: 100%;
  }

  /* Attribute selector again: only show the nav when JS has
     flagged it open, keeping the show/hide logic out of JS entirely
     aside from toggling this one attribute. */
  .primary-nav[data-open="true"] {
    display: block;
  }

  .primary-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding-block: var(--space-3);
  }

  .site-header__inner {
    flex-wrap: wrap;
  }

  .cta-banner__inner {
    flex-direction: column;
    text-align: center;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .container {
    width: 92%; /* slightly tighter edge margins than desktop's 90% */
  }

  .section {
    padding-block: var(--space-5); /* less vertical padding than desktop's space-6 */
  }

  .hero {
    padding-block: var(--space-5);
  }

  /* Stack hero buttons full-width instead of side-by-side */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
    text-align: center;
  }

  /* Larger tap target for the hamburger on touchscreens (44px+ recommended) */
  .nav-toggle {
    padding: var(--space-3);
  }
}

@media (max-width: 900px) {
  .ask-intro {
    grid-template-columns: 1fr;
  }

  .ask-intro__image {
    min-height: 14rem;
    order: -1;
  }
}

@media (max-width: 900px) {
  .issue-showcase {
    grid-template-columns: 1fr;
  }

  .issue-showcase__media {
    min-height: 20rem;
    order: -1; /* image on top on tablet/mobile, text below */
  }
}

@media (max-width: 480px) {
  .issue-showcase__media {
    min-height: 16rem;
  }
}

@media (max-width: 900px) {
  .ask-intro__text {
    gap: var(--space-3);
  }

  .platitude-marquee {
    flex: none;
  }

  .platitude-pill {
    font-size: 0.85rem;
    padding: var(--space-1) var(--space-3);
  }
}

@media (max-width: 640px) {
  .hero {
    aspect-ratio: 4 / 5;   /* taller/narrower ratio suits phone screens better than desktop's 3:2 */
    min-height: 24rem;
  }

  .page-hero {
    aspect-ratio: 4 / 5;
    min-height: 18rem;
  }
}