/* ==========================================================================
   Responsive : Mobile Overrides
   Desktop-first: 1440px → 375px
   ========================================================================== */

/* ---- Tablet (soft breakpoint for in-between) ---- */
@media (max-width: 1024px) {
  :root {
    --content-margin: 24px;
  }

  .hero-grid {
    flex-direction: column;
    gap: 38px;
  }

  .hero-grid__side {
    width: 100%;
    flex-direction: row;
    gap: 24px;
  }

  .hero-grid__center {
    max-width: 100%;
  }

  .hero-grid__divider {
    display: none;
  }

  .arena-section {
    flex-direction: column;
    gap: 34px;
  }

  .arena-section__image {
    width: 100%;
    height: 400px;
  }

  .arena-section__content {
    width: 100%;
  }

  .arena-section__text {
    height: auto;
    gap: 34px;
  }

  .issue-section__inner {
    flex-direction: column;
    gap: 34px;
  }

  .issue-section__cover {
    width: 100%;
    height: auto;
    aspect-ratio: 521 / 663;
  }

  .issue-section__divider {
    width: 100%;
    height: 1px;
  }

  .card-row {
    flex-wrap: wrap;
    gap: 24px;
  }

  .card-row .divider-v {
    display: none;
  }

  .article-sidebars {
    flex-direction: column;
    gap: 60px;
  }

  .article-sidebars__divider {
    display: none;
  }

  .sidebar-list {
    width: 100%;
  }

  .quote-section {
    flex-direction: column;
    gap: 34px;
  }

  .quote-section__image {
    width: 100%;
    height: auto;
    aspect-ratio: 422 / 361;
  }

  .footer-top {
    flex-direction: column;
    gap: 60px;
  }

  .footer-cta {
    width: 100%;
    flex-direction: column;
    gap: 44px;
  }

  .footer-cta__divider {
    display: none;
  }

  .footer-nav__columns {
    gap: 72px;
  }

  .subscription-tiers {
    flex-direction: column;
    align-items: center;
  }
}

/* ---- Mobile (primary mobile breakpoint matching Figma 375px) ---- */
@media (max-width: 768px) {
  :root {
    --content-margin: 22.5px;
    --section-gap: 38px;
    --card-gap: 28px;
  }

  /* ---- Header Mobile ----
   * Legacy 200px height (from an early mockup with a stacked brand lockup)
   * is retired. _components.css mobile block already sets min-height 56px
   * + padding-block var(--space-2); we explicitly reset any intrinsic
   * height here so the header collapses to its natural content height. */
  .header-inner {
    height: auto;
    padding: 0;
  }

  .header-brand__line {
    max-width: 97px;
  }

  .header-brand__center {
    padding: 0 9px;
    gap: 5px;
  }

  .header-wordmark {
    height: 20px;
  }

  .header-tagline {
    font-size: var(--text-sm);
  }

  /* ---- Context Title Mobile ---- */
  .context-title__heading {
    font-size: var(--text-4xl);
  }

  .context-title__subtitle {
    font-size: var(--text-lg);
    white-space: normal;
  }

  /* ---- Hero Grid Mobile → Stacked ---- */
  .hero-grid {
    flex-direction: column;
    gap: var(--section-gap);
  }

  .hero-grid__side {
    width: 100%;
    flex-direction: column;
    gap: 28px;
  }

  .hero-grid__divider {
    display: none;
  }

  .hero-grid__center {
    max-width: 100%;
  }

  .hero-grid__center-image {
    width: 100%;
    height: 300px;
  }

  .hero-grid__center-title {
    font-size: var(--text-4xl);
  }

  /* ---- Cards Mobile ---- */
  .card {
    width: 100%;
  }

  .card-row {
    flex-direction: column;
    gap: 28px;
  }

  .card-row .card {
    width: 100%;
  }

  .card-row .divider-v {
    display: none;
  }

  .card__image-wrap {
    height: var(--card-image-height);
  }

  .card__title {
    font-size: var(--text-2xl);
  }

  /* Small card mobile */
  .card-small {
    width: 100%;
  }

  .card-small__image-wrap {
    height: 200px;
  }

  /* ---- Arena Section Mobile ---- */
  .arena-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 34px;
  }

  .arena-section__text {
    height: auto;
    gap: 34px;
    align-items: center;
  }

  .arena-section__content {
    width: 100%;
    align-items: center;
  }

  .arena-section__title {
    font-size: var(--text-4xl);
    text-align: center;
  }

  .arena-section__excerpt {
    text-align: center;
    max-width: 320px;
  }

  .arena-section__image {
    width: 100%;
    height: 358px;
  }

  .arena-section__progress {
    width: 100%;
  }

  /* ---- Category Tabs Mobile ---- */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  /* ---- Expanded Article Mobile → Compact Row ---- */
  .article-expanded {
    flex-direction: row;
    gap: 22px;
    padding-bottom: 22px;
  }

  .article-expanded__left {
    flex-direction: row;
    gap: 22px;
    align-items: flex-start;
  }

  .article-expanded__image {
    width: 80px;
    height: 80px;
  }

  .article-expanded__title {
    font-size: var(--text-2xl);
    line-height: normal;
  }

  .article-expanded__excerpt {
    display: none;
  }

  .article-expanded__tag {
    display: block;
    font-size: var(--text-base);
  }

  .article-expanded__content {
    gap: 8px;
  }

  /* ---- Issue Section Mobile ---- */
  .issue-section {
    padding: 34px var(--content-margin);
  }

  .issue-section__inner {
    flex-direction: column;
    gap: 34px;
  }

  .issue-section__cover {
    width: 100%;
    height: auto;
  }

  .issue-section__divider {
    width: 100%;
    height: 1px;
  }

  .issue-section__details {
    width: 100%;
  }

  .issue-section__theme {
    font-size: var(--text-5xl);
  }

  /* ---- Subscribe Banner Mobile ---- */
  .subscribe-banner {
    height: 340px;
  }

  .subscribe-banner__text {
    font-size: var(--text-xl);
    line-height: 1.3;
    max-width: 259px;
  }

  /* ---- Category Section Mobile ---- */
  .category-section__header {
    gap: 0;
  }

  .category-section__desc {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* ---- Article Page Mobile ---- */
  .article-title-block {
    padding: 20px 0;
    height: auto;
  }

  .article-title-block__title {
    font-size: var(--text-4xl);
  }

  .article-body {
    max-width: 100%;
  }

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

  .quote-section {
    flex-direction: column;
    gap: 28px;
  }

  .quote-section__quote {
    font-size: var(--text-2xl);
  }

  .quote-section__image {
    width: 100%;
    height: auto;
  }

  .about-author__name {
    font-size: var(--text-3xl);
  }

  .article-sidebars {
    flex-direction: column;
    gap: 38px;
  }

  .article-sidebars__divider {
    width: 100%;
    height: 1px;
  }

  .sidebar-list {
    width: 100%;
  }

  .sidebar-item {
    gap: 40px;
  }

  .ad-placeholder {
    width: 100%;
    max-width: 330px;
  }

  /* ---- Footer Mobile ---- */
  .footer-inner {
    padding: 36px var(--content-margin);
    gap: 86px;
  }

  .footer-top {
    flex-direction: column;
    gap: 44px;
  }

  .footer-cta {
    width: 100%;
    flex-direction: column;
    gap: 44px;
  }

  .footer-cta__left {
    width: 100%;
  }

  .footer-cta__tagline {
    max-width: 100%;
  }

  .footer-cta__divider {
    display: none;
  }

  .footer-email-field {
    width: 100%;
  }

  .footer-nav {
    width: 100%;
  }

  .footer-nav__columns {
    gap: 72px;
  }

  .footer-nav__heading {
    font-size: var(--text-base);
    color: var(--color-shuttle-gray-soft);
  }

  .footer-legal__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .footer-legal__links {
    display: none;
  }

  /* ---- Mega Menu Mobile ---- */
  .mega-menu__columns {
    flex-direction: column;
    gap: 40px;
    padding: 0 var(--content-margin);
  }

  .mega-menu__col-divider {
    width: 100%;
    height: 1px;
    min-height: 0;
  }

  .mega-menu__column {
    width: 100%;
  }

  .mega-menu__header {
    height: auto;
    padding: 36px var(--content-margin);
  }

  .mega-menu__wordmark {
    height: 20px;
  }

  /* ---- Category Page Mobile ---- */
  .category-header__title {
    font-size: var(--text-4xl);
  }

  .category-subnav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }

  .category-subnav::-webkit-scrollbar {
    display: none;
  }

  /* ---- Subscription Page Mobile ---- */
  .subscription-header__title {
    font-size: var(--text-4xl);
  }

  .subscription-tiers {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .subscription-tier {
    max-width: 100%;
    padding: 28px;
  }

  /* ---- Section Gap Override ---- */
  .home-content__inner {
    gap: var(--section-gap-mobile);
  }

  .section-title {
    height: auto;
    padding: 16px 0;
  }
}

/* ==========================================================================
   Mobile Parity Sweep (LYC-561 / Pass-3 Phase 5 / REQ-12)
   --------------------------------------------------------------------------
   Code-side tap-target audit. Ensures every stand-alone interactive element
   clears 44x44 CSS px at the mobile breakpoint (<=640px). Inline text links
   inside paragraph copy are intentionally exempt (they inherit paragraph
   line-height). PSI >=75 verification is deferred to live-site Lighthouse CI.
   ========================================================================== */
@media (max-width: 640px) {
  /* Footer inline signup: button + email field */
  .footer-signup-form .btn-sm,
  .footer-signup-form input[type="email"] {
    min-height: 44px;
  }

  /* Footer column links : stacked nav at mobile, not inline copy */
  .footer-col a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Filter / topic chips used on search + topic pages */
  .chip {
    min-height: 44px;
    padding-block: 10px;
  }

  /* Unified card-row "Read all" CTA under each homepage section */
  .section-card-row__cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Section head trailing links ("See all", etc.) */
  .section-head a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Category + Latest archive pagination numbers */
  .page-category .pagination a,
  .page-category .pagination span,
  .page-latest__list .pagination a,
  .page-latest__list .pagination .page-numbers {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Header search disclosure field : iOS input default is ~40px */
  .header-search__form input[type="search"] {
    min-height: 44px;
  }
}

/* Responsive stacking guards : every homepage row must collapse to 1fr at
   the iPhone SE viewport (375px). Guards duplicated here from the source
   stylesheets so a future edit that drops a breakpoint rule upstream does
   not silently reintroduce a two-up row on phones. */
@media (max-width: 640px) {
  .five-card-grid,
  .section-card-row__grid,
  .section-card-row__grid--cols-2,
  .section-card-row__grid--cols-3,
  .section-card-row__grid--cols-4 {
    grid-template-columns: 1fr;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }
}