/* ============================================================
   responsive.css — every media query, grouped by breakpoint,
   largest first. Loaded last so it always wins.
   ============================================================ */

/* ------------------------------------------------------------
   xxl — ≥1600: content never exceeds the 1320 container.
   ------------------------------------------------------------ */
@media (min-width: 1600px) {
    .cards--auto { --cols: 4; }
}

/* ------------------------------------------------------------
   ≤1439 (lg)
   ------------------------------------------------------------ */
@media (max-width: 1439px) {
    :root {
        --container: 1140px;
        --section-pad: 88px;
    }
}

/* ------------------------------------------------------------
   ≤1199 (md) — the share rail and mega menu go away
   ------------------------------------------------------------ */
@media (max-width: 1199px) {
    :root {
        --container: 960px;
        --grid-gap: 24px;
        --section-pad: 80px;
    }

    .quick-search { display: none; }
    .mega { display: none !important; }

    /* Six cards stop fitting the 960 container: three to a row, two rows. */
    .top-stories__slide { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .picks__grid { grid-template-columns: 1fr 1fr; }
    .picks__center { grid-column: 1 / -1; order: -1; }

    /* No room for three columns: the sidebar drops below the article. */
    .article-shell { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin-inline: auto; }
    .article-shell .listing__aside { position: static; top: auto; }
    .article-rail { display: none; }

    .legal { grid-template-columns: minmax(0, 1fr); }
    .legal__toc { display: none; }

    .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer__brand { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------
   ≤991 (sm) — mobile header takes over
   ------------------------------------------------------------ */
@media (max-width: 991px) {
    :root {
        --container: 720px;
        --section-pad: 64px;
        --section-head-gap: 28px;
    }

    .header__utility,
    .header__masthead,
    .header__nav { display: none; }
    .header__mobile { display: block; }
    .chip-strip { display: block; }
    .header__spacer { display: none !important; }


    .latest__grid { grid-template-columns: 1fr; }

    .picks__grid { grid-template-columns: 1fr; }
    .picks__center { order: 0; }

    .topic__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cards--3, .cards--4 { --cols: 2; }

    .listing { grid-template-columns: minmax(0, 1fr); gap: var(--s-9); padding-block: 56px; }
    .listing__aside { position: static; top: auto; }

    .article-hero { min-height: 460px; }
    .article-hero__inner { padding-block: var(--s-11) var(--s-8); }

    .banner { height: 340px; }
    .banner__content { padding: var(--s-6); }

    .filter-panel {
        position: fixed;
        inset: auto 0 0 0;
        width: 100%;
        max-width: none;
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        border-bottom: 0;
        max-height: 88vh;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform var(--t-base) var(--e-out);
        display: block;
        z-index: var(--z-drawer);
        padding-bottom: calc(var(--s-7) + env(safe-area-inset-bottom));
    }
    .filter-panel.is-open { transform: translateY(0); }
    .filter-panel__handle { display: block; }
    .filter-panel__foot {
        position: sticky;
        bottom: 0;
        background: var(--c-white);
        margin-top: var(--s-6);
    }

    .prevnext { grid-template-columns: 1fr; gap: var(--s-5); }
    .prevnext__rule { display: none; }
    .prevnext__next { text-align: left; }

    .comment__replies { margin-left: 0; padding-left: var(--s-4); }

    .footer { padding-top: var(--s-11); }
    .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------
   ≤767 (xs)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    :root {
        --container: 100%;
        --gutter: 20px;
        --grid-gap: 20px;
        --section-pad: 56px;
    }

    /* Two to a row, three rows — still a whole group of six per slide. */
    .top-stories__slide { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .card--horizontal { flex-direction: column; padding: 8px 8px 16px; }
    .card--horizontal .card__media { flex: none; width: 100%; height: auto; aspect-ratio: 16 / 10; }
    .card--horizontal .card__body { padding: var(--s-3) var(--s-3) 0; }

    .card--standard { min-height: 0; }
    .card--overlay, .picks__center .card--overlay { min-height: 380px; }
    .card--overlay .card__body { padding: var(--s-5); }

    .banner { height: 280px; border-radius: var(--r-lg); }

    .article-hero { min-height: 420px; }
    .article-hero__top { flex-direction: column; }
    .article-shell { padding-block: var(--s-9); }

    .author-card { padding: var(--s-5); }
    .author-card__follow { position: static; margin-top: var(--s-3); }

    .comments__composer { flex-direction: column; }

    .search-card { padding: var(--s-5); margin-top: -40px; }
    .search-band { min-height: 240px; }

    .page-head { padding: 56px 0 40px; }
    .page-head__controls { flex-direction: column; align-items: stretch; }

    .subscribe__pill {
        flex-direction: column;
        height: auto;
        background: transparent;
        padding: 0;
        gap: var(--s-3);
    }
    .subscribe__pill .input {
        height: 56px;
        background: var(--c-white);
        border-radius: var(--r-pill);
        padding-inline: 24px;
        width: 100%;
    }
    .subscribe__pill .btn { width: 100%; height: 52px; }

    .toast-stack { left: var(--s-4); right: var(--s-4); align-items: center; }
    .back-to-top { right: var(--s-4); bottom: var(--s-4); width: 44px; height: 44px; }

    /* Two of the topic sections become swipeable rails so the page stays short. */
    .topic__grid.is-rail {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: min(84vw, 320px);
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
    }
    .topic__grid.is-rail::-webkit-scrollbar { display: none; }
    .topic__grid.is-rail > * { scroll-snap-align: start; }

    .footer__top { grid-template-columns: 1fr; gap: 0; }
    .footer__brand { margin-bottom: var(--s-7); }
    .footer__col { border-bottom: 1px solid var(--c-border); }
    .footer__col-title {
        height: 52px;
        margin-bottom: 0;
        cursor: pointer;
    }
    .footer__col-title .icon { display: inline-flex; transition: transform var(--t-base) var(--e-out); }
    .footer__col-title[aria-expanded="true"] .icon { transform: rotate(180deg); }
    .footer__links {
        display: none;
        padding-bottom: var(--s-5);
    }
    .footer__links.is-open { display: flex; }
    .footer__bottom { height: auto; flex-direction: column; text-align: center; gap: var(--s-3); padding-block: var(--s-5); }
}

/* ------------------------------------------------------------
   ≤600
   ------------------------------------------------------------ */
@media (max-width: 600px) {
    :root { --section-pad: 48px; }

    .topic__grid { grid-template-columns: 1fr; }
    .cards--2, .cards--3, .cards--4 { --cols: 1; }
    .results { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------
   ≤575 (xxs)
   ------------------------------------------------------------ */
@media (max-width: 575px) {
    :root {
        --gutter: 16px;
        --grid-gap: 16px;
    }

    .top-stories { padding: var(--s-6) 0 var(--s-7); }
    .drawer { width: 100%; }
    .brand__word { font-size: 22px; }
    .search-field .input { height: 56px; padding-left: 48px; padding-right: 16px; }
    .search-field__submit { display: none; }
    .search-field__icon { left: 18px; }
}

/* ------------------------------------------------------------
   Touch: no hover transforms, bigger targets
   ------------------------------------------------------------ */
@media (hover: none) {
    .card:hover { transform: none; box-shadow: none; }
    /* Nothing on a touch screen should be stuck in a hover state. */
    .photo, .card:hover .photo, .card:focus-within .photo { transform: none; }
}

/* ------------------------------------------------------------
   Reduced motion: no hover zoom at all

   Lives here rather than in base.css because base.css is loaded before
   components.css, and these selectors have to be able to out-order
   .card:hover .photo to switch the zoom off.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .photo,
    .card:hover .photo,
    .card:focus-within .photo,
}