/* ============================================================
   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; }

.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 every listing
   template, 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/. */

.rfi-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rfi-gap); }
@media (max-width: 1000px) { .rfi-feed { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rfi-feed { 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; }