/* ============================================================
   TOPIC HUB, /topics/{slug}/

   COMPOSITION ONLY. Every card, chip, section head and list row on this page is
   an existing component drawn by an existing stylesheet; what is here is where
   those blocks sit and the three small pieces the page invents: the hero's two
   columns, the counter row and the one-line empty note.

   BLOCK SPACING IS NOT HERE. Every section on the page carries `.rfi-section`,
   which base.css already spaces with --rfi-block-gap. A second rhythm defined
   here would be a value to keep in step with that one for ever, and the first
   time they disagreed the topic page would sit on a rhythm no other page uses.

   NOTHING FOR THE PARTNER LAYER. The sponsor row, the engineer's comment and
   the request form are behind holod_topic_partner_layer(), which is off, and
   they are deliberately unstyled: styling a commercial block nobody has sold
   would make an unfinished surface photograph like a finished one. When that
   layer is built it brings its own rules.
   ============================================================ */

/* ---------- 1. The hero ---------- */

/*
   TWO COLUMNS AT 2fr 1fr, matching components/hero.css so the first screen of
   this page and the first screen of the home page sit on the same rhythm. The
   right column is a rule-separated aside rather than a card: it carries two
   sentences, and a second white surface beside the first would read as a second
   block of equal weight.

   It sets `display: grid` over `.rfi-section`'s `display: flex`, which is why
   the two-class selector is used: a single `.rfi-topic__hero` would lose to
   nothing today and would be a specificity accident waiting to happen.
*/
.rfi-section.rfi-topic__hero {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--rfi-gap);
	align-items: start;
	background: var(--rfi-surface);
	border-radius: var(--rfi-radius);
	box-shadow: var(--rfi-shadow);
	padding: 28px;
}

@media (max-width: 900px) {
	.rfi-section.rfi-topic__hero { grid-template-columns: 1fr; padding: 20px; }
}

.rfi-topic__intro {
	max-width: var(--rfi-measure);
	margin: 12px 0 0;
	color: var(--rfi-text);
}

/*
   The pulse column. `border-left` on wide viewports only: below 900px the grid
   is one column and a left rule would sit under the intro pointing at nothing.
*/
.rfi-topic__pulse {
	color: var(--rfi-text-2);
	font-size: 13.5px;
	line-height: 1.6;
}

@media (min-width: 901px) {
	.rfi-topic__pulse { border-left: 1px solid var(--rfi-border); padding-left: 24px; }
}

@media (max-width: 900px) {
	.rfi-topic__pulse { border-top: 1px solid var(--rfi-border); padding-top: 16px; }
}

.rfi-topic__pulse p { margin: 0 0 8px; }
.rfi-topic__pulse p:last-child { margin-bottom: 0; }

/* ---------- The counter row ---------- */

/*
   A LIST, NOT A ROW OF DIVS, because it is a list: four labelled figures with
   no order dependency between them. `list-style: none` and no padding, so it
   reads as a row and is announced as a list.

   The figures wrap rather than shrink. Four counters at 22px is about 300px on
   one line; at narrow widths they take two lines, which is legible, where a
   flex shrink would take the numbers below the label size and stop them looking
   like figures at all.
*/
.rfi-topic__counters {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	list-style: none;
	margin: 18px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--rfi-border);
}

.rfi-topic__counters li { display: block; }
.rfi-topic__counters b { display: block; font-size: 22px; font-weight: 600; line-height: 1.2; }
.rfi-topic__counters span { color: var(--rfi-text-2); font-size: 12.5px; }

/* ---------- The one-line empty states ---------- */

/*
   DELIBERATELY NOT `.rfi-empty`. That component draws a bordered plate with a
   call to action, which is right for a filter combination a reader chose and
   wrong here: the reader did nothing and has nothing to undo. A large empty
   plate in the middle of an otherwise full page reads as a fault rather than
   as an honest «not yet».
*/
.rfi-topic__note {
	color: var(--rfi-text-2);
	font-size: 14px;
	max-width: var(--rfi-measure);
	margin: 0;
}

/* ---------- The news list under the two cards ---------- */

/*
   The panel-list component draws its own white panel, which would put a second
   surface immediately under two cards that already have one. Flattened for this
   page only, so the cards and the list read as one block.
*/
.rfi-topic__block .rfi-panel {
	background: none;
	box-shadow: none;
	border-radius: 0;
}