/* 90 — Narrow screens (≤ 23rem / 368px, down to 300px phones)
   Everything above is mobile-first for ~375px and up. This file only tightens what would otherwise
   crowd or overflow in a ~250px content column. Loaded last so it can override component padding. */

/* Long words, emails and URLs wrap instead of stretching their box. */
:where(h1, h2, h3, h4, p, li, a, dd, span, address) { overflow-wrap: anywhere; }

@media (max-width: 23rem) {
  :root { --gutter: 1.25rem; }

  /* Boxes: shrink the inside padding, keep the outside margins (the page gutter) generous. */
  .card,
  .fact-tile,
  .callout--blue,
  .callout--action,
  .pull-quote,
  .meeting-item__link,
  .benefit-card,
  .service-card,
  .filter-panel,
  .news-card__body,
  .event-card__link,
  .event-card:first-child .event-card__link { padding: 1.25rem; }
  .card--roomy,
  .callout--green { padding: 1.5rem; }
  .meeting-list--archive .meeting-item__link { padding: 1.25rem; }
  .callout--action { gap: 1.25rem; }
  .event-card__link,
  .event-card:first-child .event-card__link { gap: 1rem; }
  .pull-quote { font-size: 1.25rem; }

  /* Buttons fill the column so labels never overflow; long labels wrap. */
  .btn { max-width: 100%; white-space: normal; text-align: center; }
  .btn--lg { padding-inline: 1.5rem; }
  .prose .btn { justify-self: stretch; }

  /* Resource cards: tags stay on one line and drop below the format label if they can't fit. */
  .resource-card__meta { flex-wrap: wrap; row-gap: 0.5rem; }
  .badge { white-space: nowrap; }

  /* Hero carousel */
  .hero-note { padding: 1.5rem; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.22); }
  .hero-controls { gap: 0.75rem; padding-bottom: 3.5rem; }
  .hero-dot { width: 1.25rem; }
  .hero-dot.is-active { width: 2.25rem; }
  .hero-count { display: none; }

  /* Leadership */
  .leader--officer { padding: 1.5rem; }
  .leader--cochair,
  .leader--staff { padding: 1.25rem; }

  /* Carousel cards leave a sliver of the next card visible; 84vw is fine, but keep text inside. */
  .service-card { width: 86vw; min-height: 0; }
}