/* =========================================================
   Responsive refinements
   (Component/layout files already contain most breakpoints;
   this file holds cross-cutting adjustments.)
   ========================================================= */

@media (max-width: 640px) {
  :root {
    --fs-3xl: 2.4rem;
    --fs-2xl: 1.9rem;
    --fs-xl: 1.5rem;
    --fs-base: 1.0625rem;
  }

  .section {
    padding-block: var(--space-7);
  }

  .card--featured {
    gap: var(--space-4);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .article-body > p:first-of-type::first-letter {
    font-size: 3rem;
  }
}

@media (min-width: 1400px) {
  .container {
    padding-inline: var(--space-8);
  }
}

/* Prevent any horizontal overflow from long words/URLs in content */
.article-body, .card__excerpt, .hero p.lede {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Touch target sizing on small screens */
@media (pointer: coarse) {
  .btn, .chip, .tag, .nav-toggle, .share-row a, .share-row button {
    min-height: 44px;
  }
  .primary-nav__list a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}