/* ============================================================
   templates/listing.css
   Composition only: what sits where on a section listing. Reads
   components; owns none. Same file serves /news/ and
   /news/topics/{slug}/, which is the same page pre-filtered.
   ============================================================ */

/* Quiet H1: it exists for search and screen readers, and it carries the topic
   name on a topic archive, but it is never louder than the headlines below it. */
.rfi-listing__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.rfi-listing__sub { font-size: 13.5px; color: var(--rfi-text-3); }
.rfi-listing__intro { font-size: 14px; line-height: 1.6; color: var(--rfi-text-2); margin-bottom: 16px; max-width: 780px; }
/* The intro as wide as the cards under it, in the two places where the 780px cap left it visibly
   short of them (owner, 2026-09-26). /cases/ keeps the cap on purpose: its cards run the full
   1200px with no rail, a line that wide reads badly, and a narrower intro above a railless grid
   reads as an introduction rather than a misalignment.
   - Inside the column (an activated topic page): the column IS the cards' width, so no cap.
   - Above the grid (/magazine/, --col): exactly one grid4 column span, computed from the grid's
     own tokens so it tracks the column at every width the grid is a grid. 100% here is the page
     wrap's content box, which is also the grid's width. mobile.css lifts it at <=768px, where
     the grid collapses and the column is the full width. */
.rfi-span3 .rfi-listing__intro { max-width: none; }
.rfi-listing__intro--col { max-width: calc((100% - 3 * var(--rfi-gap)) * 3 / 4 + 2 * var(--rfi-gap)); }
/* Links in the /cases/ intro (option rfi_cases_intro) take the ordinary in-text link style, the
   one .rfi-article__body a uses; base.css otherwise leaves them in the grey paragraph colour with no
   underline. Scoped to the cases modifier: the other archives' intros are untouched (owner, 2026-10-20). */
.rfi-listing__intro--cases a { color: var(--rfi-navy); text-decoration: underline; text-underline-offset: 2px; }
.rfi-listing__intro--cases a:hover { color: var(--rfi-teal); }

.rfi-listing__filter { margin-bottom: 22px; }
/* The Companies filter wrapper: same spacing, but NOT the generic whole-panel toggle
   target (its search stays visible while the filters collapse; see filter.php
   `collapsible`), so it keeps its own class the mobile hide rule does not touch. */
.rfi-listing__cfilter { margin-bottom: 22px; }

/* The head (H1 + count + intro) is lifted OUT of the grid, above it, by the listing
   templates, so the grid's first item is the filter panel or the first card and the rail
   aligns with it structurally, the same way the rail meets the first card on single-*
   pages. No margin hack on the rail: the old calc offset only held while a single-line
   title was the sole thing above the filter, and broke on the topic intros and /magazine/.

   ONE EXCEPTION, since 2026-08-15: an ACTIVATED TOPIC PAGE keeps its whole top matter inside
   the column instead, header, intro and cases together, so the page reads down one column and
   the heading shares the left edge of the cards. The rail there starts level with the hub
   header, deliberately: it used to stand empty for the height of the entire hub layer. */

/* The feed's own grid, and with it EVERY card row of the hub layer above it (.rfi-hub-row: the
   cases, the insights). ONE rule for all of them, not several that agree: since 2026-08-15 the
   hub sits inside the same main.rfi-span3 as the feed, so "a hub card is as wide as a news card"
   has to hold at every width, and the intermediate step below is the reason it would not
   otherwise. .rfi-grid3 (base.css) drops straight from three columns to one at 768px, while this
   column needs two columns from 1000px down, because it is three quarters of the page and not
   the page. Anything that shares this column shares these breakpoints. */
.rfi-feed, .rfi-hub-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rfi-gap); }
@media (max-width: 1000px) { .rfi-feed, .rfi-hub-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rfi-feed, .rfi-hub-row { grid-template-columns: 1fr; } }

.rfi-loadmore { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 11px; }
.rfi-loadmore button {
  font-family: var(--rfi-font-ui); font-size: 14px; font-weight: 500; color: var(--rfi-navy);
  background: var(--rfi-surface); border: 0; box-shadow: var(--rfi-shadow);
  border-radius: var(--rfi-radius); padding: 13px 32px;
}
.rfi-loadmore button:hover { box-shadow: var(--rfi-shadow-up); color: var(--rfi-teal); }
.rfi-loadmore button[hidden] { display: none; }
/* No-JS pagination: paginate_links output, the same plate language as the button. */
.rfi-loadmore .page-numbers { display: inline-block; font-family: var(--rfi-font-ui); font-size: 14px; color: var(--rfi-navy); background: var(--rfi-surface); box-shadow: var(--rfi-shadow); border-radius: var(--rfi-radius); padding: 8px 14px; margin: 0 3px; }
.rfi-loadmore .page-numbers.current { background: var(--rfi-navy); color: var(--rfi-inverse); }

.rfi-listing__empty { margin-top: 22px; }

/* Mobile-only chrome, inert on desktop (mobile.css turns them on at <=768px):
   the "Filters" toggle button and the in-flow feed banners. On desktop the filter
   panel just shows and the banners live in the rail, so both are hidden here. */
.rfi-mfilter-toggle,
.rfi-feed-banner { display: none; }