/* ==========================================================================
   Ovation — News & Articles
   Figma node 154:233 (Articles — 1920w). Three bands: the pale-blue title band
   with its filter pills, the Editor's Pick, and the list with its sidebar.

   The comp draws two near-identical hairlines (#e0e8f0 on the rows, #d9e5ed in
   the sidebar); both are --o-rule-cool, which sits between them. Its muted rank
   numerals (#b8c9d6) are --o-mist. Neither pair can be told apart on screen,
   and one token each keeps the palette from growing a shade per page.
   ========================================================================== */

.o-articles {
	background-color: var(--o-white);
	color: var(--o-ink);
}

/* --------------------------------------------------------------------------
   Title band
   The comp pads it 96 over and 88 under, with 32 between the heading and the
   pills.
   -------------------------------------------------------------------------- */
.o-articles__band {
	position: relative;
	padding-block: clamp(3.5rem, 2rem + 4vw, 6rem) clamp(3rem, 2rem + 3.5vw, 5.5rem);
	overflow: hidden;
}

.o-articles__band > .o-container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--o-space-lg);
}

.o-articles__heading {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 48rem;
}

/* The full-size label voice, with the comp's wider 2.5px tracking. */
.o-articles__eyebrow {
	font-size: var(--o-label-size);
	letter-spacing: 0.139em;
}

.o-articles__band-title {
	margin: 0;
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-bold);
	font-size: clamp(2rem, 1.2rem + 2.6vw, 3.375rem); /* 32 -> 54, per the comp */
	line-height: 1.04; /* 56 on 54 */
	text-transform: uppercase;
}

.o-articles__lede {
	margin: 0;
	color: var(--o-ink-mist);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body-lg);
	line-height: 1.5;
}

/*
 * The wave pattern: the shared .o-pattern (components.css) fading in from
 * the right, at the simple hero's 35%, so the two title bands match.
 */
.o-articles__pattern {
	opacity: 0.35;
}

/* --------------------------------------------------------------------------
   Filter pills
   The comp's pill is the events pill exactly: 2px navy outline, 12 / 24
   padding, 16px Inter uppercase at 0.8px, solid navy when active.
   -------------------------------------------------------------------------- */
.o-articles__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--o-space-xs) 1rem;
}

.o-articles__main > .o-articles__filters {
	margin-bottom: var(--o-space-lg);
}

.o-articles__pill {
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 1.5rem;
	border: 2px solid var(--o-navy);
	border-radius: var(--o-radius-pill);
	background-color: var(--o-white);
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-body);
	letter-spacing: 0.05em;
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--o-transition),
		color var(--o-transition);
}

.o-articles__pill:hover,
.o-articles__pill:focus-visible,
.o-articles__pill.is-active {
	background-color: var(--o-navy);
	color: var(--o-white);
}

/* --------------------------------------------------------------------------
   Meta line — "Sarah Chen | 8 min read | May 20, 2026"
   The hairline sits before every item, the first included, and the line is
   pulled left by one hairline-and-gaps and clipped by the same amount. So the
   first item on each line - however the line wraps - has its hairline cut
   away, and no line ever starts with a stranded rule.
   -------------------------------------------------------------------------- */
.o-articles__meta {
	--o-articles-meta-gap: 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 0.25rem;
	margin: 0 0 0 calc(-2 * var(--o-articles-meta-gap) - 1px);
	clip-path: inset(0 0 0 calc(2 * var(--o-articles-meta-gap) + 1px));
	color: var(--o-ink-mist);
	font-family: var(--o-font-body);
	font-size: 0.9375rem; /* 15 */
	line-height: 1.2;
}

.o-articles__meta > span {
	display: inline-flex;
	align-items: center;
}

.o-articles__meta > span::before {
	content: "";
	flex: none;
	width: 1px;
	height: 1.1em;
	margin-inline: var(--o-articles-meta-gap);
	background-color: var(--o-rule-cool);
}

.o-articles__byline {
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
}

/* --------------------------------------------------------------------------
   Editor's Pick
   Photo and copy share the row half and half: 700 + 64 + 676 on the 1440 grid,
   against the comp's 700 + 64 + 690 on its 1454. The photo takes the
   ovation-card crop's own 700 x 470 rather than the comp's 480, so the
   rendition the theme already generates fills it without a second crop.
   -------------------------------------------------------------------------- */
.o-articles__pick {
	padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}

.o-articles__pick-inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: clamp(2rem, 1rem + 3vw, 4rem);
}

.o-articles__pick-media-link {
	display: block;
}

.o-articles__pick-media {
	aspect-ratio: 70 / 47;
	overflow: hidden;
	background-color: var(--o-ice);
}

.o-articles__pick-media-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--o-transition-slow);
}

.o-articles__pick-inner:hover .o-articles__pick-media-img {
	transform: scale(1.03);
}

.o-articles__pick-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	min-width: 0;
}

.o-articles__badge {
	display: inline-block;
	margin: 0;
	padding: 0.5625rem 1rem;
	background-color: var(--o-ice);
	color: var(--o-teal);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: 0.8125rem; /* 13 */
	letter-spacing: 0.154em; /* 2px at 13px */
	line-height: 1;
	text-transform: uppercase;
}

.o-articles__pick-title {
	margin: 0;
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-semibold);
	font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); /* 26 -> 40 */
	line-height: 1.15; /* 46 on 40 */
	text-transform: uppercase;
}

.o-articles__pick-title a {
	color: inherit;
	text-decoration: none;
}

.o-articles__pick-title a:hover,
.o-articles__pick-title a:focus-visible {
	color: var(--o-orange);
}

.o-articles__pick-summary {
	margin: 0;
	color: var(--o-ink-mist);
	font-family: var(--o-font-body);
	font-size: 1.0625rem; /* 17 */
	line-height: 1.59; /* 27 on 17 */
}

.o-articles__pick .o-articles__meta {
	--o-articles-meta-gap: 1.25rem;
	padding-top: 0.5rem;
}

.o-articles__pick-link {
	color: var(--o-orange);
	font-size: var(--o-fs-body);
}

.o-articles__pick-link:hover,
.o-articles__pick-link:focus-visible {
	color: var(--o-navy);
}

/* --------------------------------------------------------------------------
   List + sidebar
   -------------------------------------------------------------------------- */
.o-articles__body {
	padding-block: var(--o-space-md) var(--o-section-y);
}

/* With no pick between them, the list needs the gap the pick would have left. */
.o-articles__band + .o-articles__body {
	padding-top: clamp(3rem, 2rem + 4vw, 6rem);
}

.o-articles__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 440px;
	align-items: start;
	gap: clamp(2rem, 1rem + 3vw, 4rem);
}

/* No sidebar: hold the list to the width it has beside one, centred. */
.o-articles__layout--solo {
	grid-template-columns: minmax(0, 60rem);
	justify-content: center;
}

.o-articles__list {
	display: flex;
	flex-direction: column;
	gap: var(--o-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * One row. The title link's ::after stretches over the whole row, so the row
 * is the click target without nesting a block inside a link or doubling the
 * tab stops with a second link on the image.
 */
.o-articles__item {
	position: relative;
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	align-items: center;
	gap: 1.75rem;
	padding: 1.5rem 2rem 1.5rem 1.5rem;
	border: 1.5px solid var(--o-rule-cool);
	background-color: var(--o-white);
	transition: border-color var(--o-transition);
}

.o-articles__item:hover,
.o-articles__item:focus-within {
	border-color: var(--o-navy);
}

.o-articles__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 180px;
	overflow: hidden;
	background-color: var(--o-ice);
}

.o-articles__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--o-transition-slow);
}

.o-articles__item:hover .o-articles__thumb-img {
	transform: scale(1.04);
}

/*
 * Screenshots the press CMS marks "not cover", and outlet logos standing in
 * for a missing screenshot, are shown whole rather than cropped - the legacy
 * site's treatment. Logos sit on white because they are drawn for white.
 */
.o-articles__thumb--contain .o-articles__thumb-img,
.o-articles__thumb--logo .o-articles__thumb-img {
	width: 76%;
	height: 76%;
	object-fit: contain;
}

.o-articles__thumb--logo {
	border: 1px solid var(--o-rule-cool);
	background-color: var(--o-white);
}

.o-articles__item:hover .o-articles__thumb--contain .o-articles__thumb-img,
.o-articles__item:hover .o-articles__thumb--logo .o-articles__thumb-img {
	transform: none;
}

/* No image at all: the Ovation mark, its wordmark white and its arc orange. */
.o-articles__thumb--placeholder,
.o-articles__pick-media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--o-navy);
	color: var(--o-white);
}

.o-articles__thumb-logo {
	width: 62%;
	height: auto;
}

.o-articles__pick-media-logo {
	width: 40%;
	height: auto;
}

.o-articles__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	min-width: 0;
}

.o-articles__kicker {
	margin: 0;
	color: var(--o-teal);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: 0.8125rem; /* 13 */
	letter-spacing: 0.154em; /* 2px at 13px */
	line-height: 1.2;
	text-transform: uppercase;
}

.o-articles__title {
	margin: 0;
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: clamp(1.125rem, 1rem + 0.55vw, 1.5rem); /* 18 -> 24 */
	line-height: 1.25; /* 30 on 24 */
	text-transform: uppercase;
	overflow-wrap: break-word;
	/*
	 * The base layer balances headings, which here breaks a two-line title in
	 * the middle and leaves the row's right side empty. The comp fills the
	 * first line; `pretty` does that and still keeps a lone word off the last.
	 */
	text-wrap: pretty;
}

.o-articles__link {
	color: inherit;
	text-decoration: none;
	transition: color var(--o-transition);
}

.o-articles__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.o-articles__item:hover .o-articles__link {
	color: var(--o-orange);
}

/* The ring belongs round the row the link stretches over, not the text. */
.o-articles__link:focus-visible {
	outline: none;
}

.o-articles__link:focus-visible::after {
	outline: 2px solid var(--o-focus);
	outline-offset: 3px;
}

/* The arrow on a link out, turned to point up and away. */
.o-articles__external {
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-inline-start: 0.35em;
	vertical-align: -0.05em;
	color: var(--o-orange);
	transform: rotate(-45deg);
}

.o-articles__summary {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--o-ink-mist);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body);
	line-height: 1.5625; /* 25 on 16 */
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}

.o-articles__copy .o-articles__meta {
	padding-top: 0.25rem;
}

.o-articles__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 var(--o-space-md);
	color: var(--o-ink-soft);
	font-family: var(--o-font-body);
}

.o-articles__status a {
	color: var(--o-orange);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-small);
	text-transform: uppercase;
}

.o-articles__empty {
	margin: 0;
	padding: var(--o-space-xl) var(--o-space-lg);
	border: 1.5px solid var(--o-rule-cool);
	color: var(--o-ink-soft);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body-lg);
	text-align: center;
}

/* 32 of list gap plus the comp's 16 of padding above the link. */
.o-articles__more {
	margin: var(--o-space-xl) 0 0;
	text-align: center;
}

.o-articles__more-link {
	color: var(--o-navy);
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.o-articles__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--o-space-lg);
}

.o-articles__panel {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: var(--o-space-lg);
	background-color: var(--o-ice);
}

.o-articles__panel-title {
	margin: 0;
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-h4); /* 22 */
	line-height: 1.27; /* 28 on 22 */
	text-transform: uppercase;
}

.o-articles__popular {
	margin: 0;
	padding: 0;
	list-style: none;
}

.o-articles__popular-item {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 1.125rem;
}

.o-articles__popular-item + .o-articles__popular-item {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--o-rule-cool);
}

.o-articles__popular-rank {
	color: var(--o-mist);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: 2rem;
	line-height: 1.0625; /* 34 on 32 */
	font-variant-numeric: tabular-nums;
}

.o-articles__popular-copy {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	min-width: 0;
}

.o-articles__popular-link {
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-body);
	line-height: 1.375; /* 22 on 16 */
	text-decoration: none;
}

.o-articles__popular-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.o-articles__popular-item:hover .o-articles__popular-link,
.o-articles__popular-link:focus-visible {
	color: var(--o-orange);
}

.o-articles__popular-time {
	color: var(--o-ink-mist);
	font-family: var(--o-font-body);
	font-size: 0.8125rem; /* 13 */
}

.o-articles__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.o-articles__tag {
	display: inline-flex;
	padding: 0.625rem 1.125rem;
	border: 1.5px solid var(--o-rule-cool);
	border-radius: var(--o-radius-pill);
	background-color: var(--o-white);
	color: var(--o-navy);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-small);
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color var(--o-transition),
		border-color var(--o-transition),
		color var(--o-transition);
}

.o-articles__tag:hover,
.o-articles__tag:focus-visible {
	border-color: var(--o-navy);
	color: var(--o-navy);
}

.o-articles__tag.is-active {
	border-color: var(--o-navy);
	background-color: var(--o-navy);
	color: var(--o-white);
}

.o-articles__panel--cta {
	gap: 1rem;
	background-color: var(--o-navy);
	color: var(--o-white);
}

.o-articles__panel--cta .o-articles__panel-title {
	color: var(--o-white);
}

.o-articles__cta-text {
	margin: 0;
	font-family: var(--o-font-body);
	font-size: 0.9375rem; /* 15 */
	line-height: 1.53; /* 23 on 15 */
}

.o-articles__cta-btn {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Narrower screens
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	.o-articles__layout {
		grid-template-columns: minmax(0, 1fr) 340px;
	}
}

/* The sidebar drops under the list and lays its panels side by side. */
@media (max-width: 1000px) {
	.o-articles__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.o-articles__sidebar {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		align-items: start;
	}
}

@media (max-width: 900px) {
	.o-articles__pick-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The copy runs across the pattern here, so the lines are knocked back. */
	.o-articles__pattern::before {
		opacity: 0.55;
	}
}

/*
 * Phones. Beside a 112px image the copy column is ~175px wide, which broke a
 * three-item meta line onto three lines. So the image shares the top of the
 * row with the kicker and title only, and the summary and meta run the full
 * width beneath. display: contents lets the copy's children join the row's
 * grid without changing the markup the wider layouts use.
 */
@media (max-width: 720px) {
	.o-articles__item {
		grid-template-columns: 112px minmax(0, 1fr);
		align-items: start;
		gap: 0.5rem 1rem;
		padding: 1rem;
	}

	.o-articles__copy {
		display: contents;
	}

	.o-articles__thumb {
		grid-row: span 2;
		height: 112px;
	}

	.o-articles__kicker {
		grid-column: 2;
		align-self: end;
	}

	.o-articles__title {
		grid-column: 2;
	}

	.o-articles__summary,
	.o-articles__copy .o-articles__meta {
		grid-column: 1 / -1;
	}

	.o-articles__summary {
		margin-top: 0.5rem;
	}

	/*
	 * Seven pills would wrap to four rows of the first screen. They scroll
	 * sideways instead, running out to the screen edges so the cut-off pill
	 * shows there is more. The vertical padding keeps focus rings unclipped.
	 */
	.o-articles__filters {
		flex-wrap: nowrap;
		align-self: stretch;
		margin-inline: calc(var(--o-gutter) * -1);
		padding: 4px var(--o-gutter);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.o-articles__filters::-webkit-scrollbar {
		display: none;
	}

	.o-articles__meta {
		--o-articles-meta-gap: 0.75rem;
		font-size: var(--o-fs-small);
	}

	.o-articles__panel {
		padding: var(--o-space-md);
	}
}

/* Motion is decoration here; respect a request to do without it. */
@media (prefers-reduced-motion: reduce) {
	.o-articles__thumb-img,
	.o-articles__pick-media-img {
		transition: none;
	}

	.o-articles__item:hover .o-articles__thumb-img,
	.o-articles__pick-inner:hover .o-articles__pick-media-img {
		transform: none;
	}
}