/* ==========================================================================
   RESPONSIVE — loads last; only layout collapses live here. Type sizes are
   fluid (clamp) in the base sheets, so no font-size overrides are needed
   except where hierarchy would invert.
   ========================================================================== */

/* The masthead wordmark is fluid — clamp(2.5rem, 1.5rem + 5vw, 5rem) — and is
   centred, while the search pill is pinned left, so the two converge as the
   viewport narrows. Measured in the browser rather than estimated: "TRILL NEWS"
   in Permanent Marker runs 6.26x its font size, putting its left edge at
   (100vw / 2) - 3.13 * font-size. That crosses the pill's right edge (244px)
   plus a 16px gap at a viewport of 975px. The breakpoint is 1024px, which
   clears it by ~50px. Below it the text field goes and the magnifier stays —
   it still submits, and an empty q lands on /search and its own full form. */
@media (max-width: 1024px) {
  .head-search input { display: none; }
  .head-search { padding-right: 0; }
}

@media (max-width: 950px) {
  .article-layout { grid-template-columns: 1fr; }
  .sidebar-column { position: static; }
  .featured-grid, .amazon-grid { grid-template-columns: repeat(2, 1fr); }

  .subhead { flex-wrap: wrap; white-space: normal; padding: 4px 0; }

  .sitemap-grid { grid-template-columns: 1fr; gap: 40px; }

  .fold { grid-template-columns: 1fr 1.4fr; }
  .curated-rail { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); padding-top: 14px; margin-top: 14px; }
  .band-grid { grid-template-columns: 1fr 1fr; }
  .band-feature { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .newspaper-columns { grid-template-columns: 1fr; }
  /* Release the explicit row/column placement from index.css, or the three
     children stay pinned to a column-2 grid that no longer exists and overlap.
     Selectors match that file's specificity (0,3,0) — a bare `.category-rail`
     here would lose regardless of cascade order. The rail leads the stack, which
     is also its DOM order, so no `order` override is needed. */
  .newspaper-columns.has-rail .category-rail,
  .newspaper-columns.has-rail .col-primary,
  .newspaper-columns.has-rail .col-secondary { grid-column: 1; grid-row: auto; }
  .col-primary { border-right: none; padding-right: 0; }
  .col-primary::after {
    content: "";
    display: block;
    border-bottom: 2px solid var(--hairline);
    margin: 14px 0;
  }
}

@media (max-width: 768px) {
  .subhead b { display: none; } /* date hidden on small screens, as before */
  .subhead a { padding: 10px 3vw; }

  .theme-toggle { top: 8px; right: 8px; padding: 8px 12px; }

  .hero-card.has-figure { grid-template-columns: 1fr; }
  .hero-figure { order: -1; } /* image above text when stacked */

  .feed-header { flex-direction: column; align-items: flex-start; gap: 4px; }

  .footer-nav {
    flex-wrap: wrap;
    white-space: normal;
    gap: 6px 0;
    justify-content: center;
  }

  /* Lead first, then briefs, then the curated rail — DOM order in index.html.erb
     already matches this, so no `order` is set here; it collapses to one column and
     stacks top to bottom exactly as written in the markup. */
  .fold { grid-template-columns: 1fr; gap: 0; }
  .fold-briefs { border-right: 0; padding-right: 0; border-top: 1px solid var(--hairline); padding-top: 14px; margin-top: 14px; }

  .fold-extra { grid-template-columns: 1fr; }
  .band-grid { grid-template-columns: 1fr; }
  .band-feature { grid-template-columns: 96px 1fr; }
  .band-thumb img { width: 96px; height: 96px; }

  /* Archive: two columns of headlines is unreadable at tablet width. */
  .archive-list { columns: 1; }
  .archive-section-head { flex-direction: column; align-items: flex-start; gap: 2px; }
}

@media (max-width: 480px) {
  .head { padding-top: 12px; }

  /* Both utility controls come off absolute positioning here and sit as one
     centred row above the wordmark. At this width the wordmark is ~211px wide
     and centred, so a pinned control on either side would overlap it. They are
     inline-flex siblings inside a text-align:center parent, which is what
     centres the pair — the auto margins below resolve to 0 on an inline box. */
  .theme-toggle,
  .head-search {
    position: static;
    display: inline-flex;
    vertical-align: middle;
    margin: 0 4px 8px;
  }

  /* The wordmark is inline-block inside an inline <a>, so it flowed onto the
     same line as the controls — already true of the lone theme toggle before
     search joined it, and worse with two. Blocking the link puts the controls on
     their own centred row with the masthead beneath, as on every wider screen. */
  .main-logo-link { display: block; }

  .magazine-layout, .feed-section, .featured-section, .amazon-section,
  .category-header, .homepage-featured-label,
  .archive-jump, .archive-section,
  .notfound-actions { padding-left: 14px; padding-right: 14px; }


  .featured-grid, .amazon-grid { grid-template-columns: 1fr; }

  .quote-band { margin-left: 14px; margin-right: 14px; }

  .article-layout { padding: 0 14px; }

  /* Hierarchy floor: the hero headline must never shrink below 24px
     (the old design collapsed it to 16px — smaller than its excerpt). */
  .hero-content h2 { font-size: 1.5rem; }

  .fold, .band-stack { padding-left: 14px; padding-right: 14px; }
  .band-link .story-excerpt { display: none; }
  .lead-headline { font-size: 1.5rem; }
}