/**
 * Shared ranked story list + section heading (Register homepage Top Stories look).
 *
 * Used by the Top Stories Band (homepage) and the Article End "Trending now"
 * list (single posts) so both render identically. Selectors are prefixed with
 * .iola-gazette to beat the theme's `.single-content ol / h3:last-child` rules.
 */

/* —— Section heading: uppercase with brand underline —— */
.iola-gazette h2.iola-story-heading {
	display: inline-block;
	margin: 0 0 var(--iola-space-2_5, 0.625rem);
	padding: 0;
	border-bottom: 4px solid var(--iola-brand);
	color: var(--global-palette3, var(--iola-text-list));
	font-family: "Source Sans 3", var(--iola-font-ui);
	font-size: var(--global-kb-font-size-md, 1.25rem);
	font-weight: var(--iola-weight-bold);
	letter-spacing: normal;
	line-height: 1.5;
	text-transform: uppercase;
}

/* —— Ranked list: vertical, white circle numerals —— */
.iola-gazette .iola-story-list {
	--iola-story-list-numeral: 1.75rem;
	--iola-story-list-gap: 0.65rem;

	display: flex;
	flex-direction: column;
	gap: var(--iola-story-list-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: iola-story-list;
}

.iola-gazette .iola-story-list > .iola-story-list__item {
	display: grid;
	grid-template-columns: var(--iola-story-list-numeral) minmax(0, 1fr);
	column-gap: var(--iola-story-list-gap);
	align-items: start;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	counter-increment: iola-story-list;
}

.iola-gazette .iola-story-list > .iola-story-list__item::before {
	content: counter(iola-story-list);
	box-sizing: border-box;
	width: var(--iola-story-list-numeral);
	height: var(--iola-story-list-numeral);
	border: 1px solid color-mix(in srgb, var(--iola-text) 18%, var(--iola-bg) 82%);
	border-radius: 50%;
	background: var(--iola-bg);
	color: var(--iola-text);
	font-family: var(--iola-font-numeral);
	font-size: 0.8125rem;
	font-weight: var(--iola-weight-semibold);
	line-height: var(--iola-story-list-numeral);
	text-align: center;
}

.iola-gazette .iola-story-list > .iola-story-list__item > .iola-story-list__title {
	margin: 0 0 var(--iola-space-5);
	color: var(--global-palette3, var(--iola-text-list));
	font-family: var(--iola-font-display);
	font-size: var(--global-kb-font-size-md, 1.25rem);
	font-weight: var(--iola-weight-medium);
	letter-spacing: normal;
	line-height: 1.35;
	text-transform: none;
}

.iola-gazette .iola-story-list__title a {
	color: inherit;
	text-decoration: none;
}

.iola-gazette .iola-story-list__title a:hover,
.iola-gazette .iola-story-list__title a:focus-visible {
	text-decoration: underline;
}