/* All breakpoint behaviour lives here. Breakpoints: 1080, 900, 720, 400. */

/* ---------- Desktop-down: 1080px (tablet landscape) ---------- */
@media (max-width: 1080px) {
  :root { --ct-gutter: 24px; }

  .ct-nav__list { gap: 20px; }
  .ct-nav__link { font-size: 14px; }

  .ct-layout { grid-template-columns: minmax(0, 1fr); }
  .ct-sidebar { position: static; top: auto; }

  .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ct-hero__title { max-width: 26ch; }

  .ct-lead__story { grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); }
  .ct-topics { grid-template-columns: repeat(2, 1fr); }
  .ct-recs { grid-template-columns: repeat(2, 1fr); }

  .ct-prompt { grid-template-columns: 1fr; }
  .ct-prompt__links { justify-content: flex-start; }

  .ct-archive__head { grid-template-columns: 1fr; gap: var(--ct-space-24); align-items: start; }
  .ct-archive__facts { padding-left: 0; border-left: 0; border-top: 1px solid var(--ct-divider); padding-top: var(--ct-space-16); }

  .ct-article__layout,
  .ct-article--compare .ct-article__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ct-space-32);
    justify-content: stretch;
  }

  .ct-404 { grid-template-columns: 1fr; gap: var(--ct-space-32); padding-top: var(--ct-space-48); }
  .ct-noresults { grid-template-columns: 1fr; gap: var(--ct-space-32); }

  /* Popular Reads becomes a horizontal card row once it leaves the sidebar */
  .ct-popular__list {
    flex-direction: row;
    gap: var(--ct-space-12);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--ct-space-4);
  }

  .ct-popular__list::-webkit-scrollbar { display: none; }

  .ct-popular__item {
    flex: none;
    width: 190px;
    border-top: 0;
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-lg);
    overflow: hidden;
  }

  .ct-popular__link { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }

  .ct-popular__media {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 0;
    overflow: hidden;
  }

  .ct-popular__media img,
  .ct-popular__media .ct-media__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .ct-popular__rank { top: 8px; left: 8px; border: none; z-index: 1; }
  .ct-popular__body { padding: 12px 12px 14px; }

  .ct-newsletter {
    text-align: left;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon text" "form form" "note note";
    gap: var(--ct-space-12) var(--ct-space-16);
    align-items: center;
  }

  .ct-newsletter__icon { grid-area: icon; margin: 0; width: 40px; height: 40px; }
  .ct-newsletter__text { grid-area: text; }
  .ct-newsletter__form { grid-area: form; margin-top: 0; }
  .ct-newsletter__note { grid-area: note; margin-top: 0; }
}

/* ---------- 900px: collapse desktop nav into the mobile bar ---------- */
@media (max-width: 900px) {
  .ct-header__inner { height: var(--ct-header-height-mobile); }
  .ct-nav { display: none; }
  .ct-header__mobile-btn { display: grid; }

  .ct-header__inner { justify-content: space-between; gap: var(--ct-space-12); }
  .ct-logo { margin: 0 auto; }
  .ct-logo img { height: 17px; }

  .ct-mobilenav { display: none; }
  .ct-mobilenav.is-open { display: block; }
}

/* ---------- 720px: mobile ---------- */
@media (max-width: 720px) {
  :root { --ct-gutter: 16px; }

  .ct-section { padding-top: var(--ct-space-48); }
  .ct-band { margin-top: var(--ct-space-48); padding: var(--ct-space-32) 0; }

  .ct-hero { padding-top: var(--ct-space-40); padding-bottom: var(--ct-space-32); }
  .ct-hero__actions { gap: var(--ct-space-8); }

  /* Card grids become compact scannable rows */
  .ct-grid { display: flex; flex-direction: column; gap: 0; }

  .ct-grid .ct-card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--ct-divider);
    border-radius: 0;
  }

  .ct-grid .ct-card:hover { box-shadow: none; transform: none; border-color: var(--ct-divider); }

  .ct-grid .ct-card__media {
    flex: none;
    width: 104px;
    aspect-ratio: 4 / 3;
    border-radius: var(--ct-radius-md);
  }

  .ct-grid .ct-card__body { gap: 5px; padding: 0; }
  .ct-grid .ct-card__title { font-size: 16px; line-height: 1.3; letter-spacing: -0.015em; }
  .ct-grid .ct-card__excerpt { display: none; }
  .ct-grid .ct-card__meta { margin: 0; padding-top: 0; font-size: 12.5px; }

  /* Featured story stacks */
  .ct-feature { grid-template-columns: 1fr; }
  .ct-feature__media { min-height: 0; aspect-ratio: 16 / 10; height: auto; }
  .ct-feature__body { padding: 18px; gap: 10px; min-height: 0; }

  .ct-lead__body { margin-top: var(--ct-space-16); }
  .ct-secondary .ct-row__media { width: 96px; }

  /* Category chip rows scroll instead of wrapping */
  .ct-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--ct-gutter) * -1);
    padding: 0 var(--ct-gutter) var(--ct-space-4);
  }

  .ct-chips::-webkit-scrollbar { display: none; }
  .ct-chip { padding: 10px 16px; }

  .ct-topics,
  .ct-recs { grid-template-columns: 1fr; }
  .ct-topic { padding: 18px 16px 20px; }

  .ct-hero__actions .ct-btn,
  .ct-404__actions .ct-btn { width: 100%; }

  .ct-prompt { padding: 24px 20px; }

  /* Article */
  .ct-prose p,
  .ct-prose ul,
  .ct-prose ol { font-size: 18px; line-height: 1.75; }
  .ct-prose > * + * { margin-top: 18px; }
  .ct-prose h2 { margin-top: var(--ct-space-32); }
  .ct-callout { padding: 16px 18px; }
  .ct-callout__text { font-size: 16px; }
  .ct-faq__q { font-size: 17px; }
  .ct-faq__a { font-size: 16px; }

  .ct-toc--desktop { display: none; }
  .ct-toc--mobile { display: block; margin-top: 18px; }

  .ct-byline { gap: var(--ct-space-12); }
  .ct-byline__avatar { width: 36px; height: 36px; }
  .ct-byline .ct-textlink { display: none; }

  /* Comparison: grouped attribute cards replace the table */
  .ct-cardpair,
  .ct-diffs,
  .ct-bestfor,
  .ct-proscons__cols { grid-template-columns: 1fr; }

  .ct-compare-table { display: none; }
  .ct-stackcompare { display: flex; }

  .ct-rec__head { flex-direction: column; }
  .ct-rec__art { width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .ct-rec__facts { grid-template-columns: 1fr; }
  .ct-rec__fact + .ct-rec__fact { border-left: 0; border-top: 1px solid var(--ct-divider); }
  .ct-rec__foot { flex-direction: column; align-items: stretch; }
  .ct-rec__foot .ct-btn { width: 100%; }

  /* Search results */
  .ct-result { align-items: center; gap: 14px; padding: 16px 0; }
  .ct-result__media { width: 96px; }
  .ct-result__title { font-size: 16px; line-height: 1.3; letter-spacing: -0.015em; }
  .ct-result__excerpt { display: none; }
  .ct-search__summary { flex-direction: column; align-items: flex-start; gap: var(--ct-space-8); font-size: 15px; }
  .ct-searchbar { padding: 8px 8px 8px 14px; flex-wrap: wrap; }
  .ct-searchbar__input { font-size: 16px; padding: 8px 0; }
  .ct-searchbar .ct-btn { width: 100%; }

  .ct-catgrid { grid-template-columns: 1fr; }

  .ct-pagination { padding-top: var(--ct-space-16); }
  .ct-pagination .ct-btn { flex: 1; }

  /* Footer becomes an accordion */
  .ct-footer { margin-top: var(--ct-space-48); }
  .ct-footer__top { grid-template-columns: 1fr; gap: 0; padding: 26px 0 var(--ct-space-16); }
  .ct-footer__brand { padding-bottom: var(--ct-space-16); }
  .ct-footer__about { margin-top: var(--ct-space-12); max-width: none; font-size: 14px; }
  .ct-footer__social { margin-top: var(--ct-space-16); }

  .ct-footer__group { border-top: 1px solid var(--ct-divider); }

  .ct-footer__group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 14px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--ct-font-head);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ct-text-primary);
  }

  .ct-footer__group > summary::-webkit-details-marker { display: none; }
  .ct-footer__group > summary::after { content: "+"; font-family: var(--ct-font-body); font-weight: 400; font-size: 15px; letter-spacing: 0; color: var(--ct-text-muted); }
  .ct-footer__group[open] > summary::after { content: "\2212"; }
  .ct-footer__group .ct-footer__heading { display: none; }
  .ct-footer__group .ct-footer__links { padding-bottom: var(--ct-space-16); }

  .ct-footer__bottom { flex-direction: column; gap: var(--ct-space-8); padding: var(--ct-space-16) 0 26px; font-size: 12.5px; }
}

/* ---------- 400px: small phones (375px, 390px) ---------- */
@media (max-width: 400px) {
  .ct-grid .ct-card__media { width: 92px; }
  .ct-result__media { width: 88px; }
  .ct-popular__item { width: 172px; }
  .ct-h1 { font-size: 30px; }
  .ct-display { font-size: 32px; }
  .ct-feature__title { font-size: 23px; }
}

/* 1.0.4 launch cleanup */
@media (max-width: 900px) {
  .ct-lead__story { grid-template-columns: 1fr; }
  .ct-lead__media { min-height: 0; aspect-ratio: 16 / 9; }
  .ct-lead__body { padding: 28px 28px 30px; }
  .ct-secondary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
  .ct-secondary .ct-row { border: 1px solid var(--ct-border); border-radius: var(--ct-radius-lg); padding: 14px; }
  .ct-secondary .ct-row__media { width: 88px; }
}

@media (max-width: 720px) {
  .ct-homeintro { padding-top: 24px; padding-bottom: 20px; }
  .ct-homeintro__title { font-size: 30px; }
  .ct-homeintro__text { font-size: 16px; }
  .ct-lead { padding-top: 28px; }
  .ct-lead__story { border-radius: var(--ct-radius-md); }
  .ct-lead__media { aspect-ratio: 16 / 10; }
  .ct-lead__body { padding: 22px 20px 24px; }
  .ct-lead__title { font-size: 27px; max-width: 20ch; }
  .ct-lead__excerpt { font-size: 16px; }
  .ct-secondary { display: flex; flex-direction: column; gap: 0; }
  .ct-secondary .ct-row { border: 0; border-bottom: 1px solid var(--ct-divider); border-radius: 0; padding: 16px 0; }
  .ct-topics { grid-template-columns: 1fr; }
  .ct-topic { min-height: 0; padding: 18px 16px; }
  .ct-trustline { margin-top: 48px; }

  .ct-prose .ct-summary { grid-template-columns: 1fr; gap: 12px; }
  .ct-prose .ct-pick { padding: 18px 16px; }
  .ct-prose .ct-intro { padding-left: 16px; }
  .ct-prose .ct-table { margin-right: calc(var(--ct-gutter) * -1); border-radius: var(--ct-radius-lg) 0 0 var(--ct-radius-lg); }
  .ct-prose .ct-table::before {
    content: "Scroll to compare →";
    display: block;
    position: sticky;
    left: 0;
    width: max-content;
    padding: 9px 12px;
    background: var(--ct-surface-alt);
    border-bottom: 1px solid var(--ct-divider);
    font-size: 12px;
    color: var(--ct-text-muted);
  }
  .ct-prose .ct-cardsec,
  .ct-prose .ct-chooser { margin-top: 38px; padding-top: 24px; }
  .ct-prose .ct-method { padding: 18px 16px; }
}