/**
 * Newsroom — /news/ archive, single release, /videos/.
 *
 * Built on the NLTC landing page's mechanics, not just its palette: inset rounded
 * panels alternating light and dark, very large display type, a headline/lead split
 * at each section head, images that break the measure, and a full-bleed image band
 * as punctuation. Janine's brief: full-width, big fonts, let things breathe,
 * nothing blocky.
 *
 * Headings use the theme's own scale via data-size + data-variant="heading"
 * (xxl 90-160px, xl 60-130, lg 50-90, md 40-60, sm 30-50, xs 24-40, xxs 20-30).
 * The theme sizes bare headings with `h2:not([data-size]):not(.wp-admin ...)`,
 * specificity (0,4,1), and stands down when data-size is present.
 *
 * Hand-written rather than compiled — the theme's gulp pipeline isn't in this checkout.
 */

/* Several cav block stylesheets declare the `lcswma-icons-updated` family against
   gutenberg/build/fonts/<hash> files that do not exist — on production either, so
   this is a pre-existing theme packaging gap, not a local one. The real files sit
   in assets/dist/svgs/. Redeclaring here (newsroom.css loads last) points the
   family at them, which fixes the slider arrows and silences three 404s. */
@font-face {
	font-family: lcswma-icons-updated;
	font-display: block;
	src: url(../svgs/lcswma-icons-updated.woff2) format("woff2"),
		url(../svgs/lcswma-icons-updated.woff) format("woff"),
		url(../svgs/lcswma-icons-updated.ttf) format("truetype");
}

.newsroom {
	--nr-paper: #F5F6F1;
	--nr-ink: #0F222A;
	--nr-muted: #55625D;
	--nr-line: #DDE2D6;
	--nr-lime: #62A503;
	--nr-radius: 28px;
	--nr-radius-sm: 18px;
	--nr-inset: clamp(8px, 0.8vw, 14px);
	--nr-gutter: clamp(22px, 4.5vw, 80px);
	--nr-pad: clamp(64px, 8vw, 140px);
	--nr-measure: 68ch;
	--nr-shadow: 0 24px 60px -28px rgba(8, 27, 35, 0.45);

	/* One ground for the newsroom — the site's own charcoal, matching <body>.
	   Rounded panels float on it; a full-bleed band is simply the ground showing,
	   not a separate colour. */
	background: var(--nr-ink);
	display: block;
}

/* ------------------------------------------------------------ panel system */

.newsroom-panel {
	position: relative;
	margin: var(--nr-inset);
	padding: var(--nr-pad) var(--nr-gutter);
	border-radius: var(--nr-radius);
	overflow: hidden;
	background: #fff;
	color: var(--nr-ink);
}

.newsroom-panel--paper {
	background: var(--nr-paper);
}

.newsroom-panel--dark {
	background: var(--nr-ink);
}


.newsroom-panel--flush {
	padding-inline: 0;
}

/* Muted greys are tuned for paper; on a dark panel they fail contrast badly
   (the hero caption measured 2.57:1). Give the dark ground its own muted tone. */
.newsroom .newsroom-panel--dark .newsroom-sechead__aside,
.newsroom .newsroom-panel--dark .newsroom__kicker,
.newsroom .newsroom-panel--dark .newsroom-release__hero-caption,
.newsroom .newsroom-panel--dark .newsroom-contactband__role {
	color: rgba(255, 255, 255, 0.72);
}

/* Full-bleed: no inset, no radius. The contact band read as sandwiched when it
   was another floating rounded card between two others. */
.newsroom-panel--bleed {
	margin: 0;
	border-radius: 0;
}

/* Dials the WTE rounding back for pages that shouldn't lean on it. */
.newsroom--square {
	--nr-radius: 10px;
	--nr-radius-sm: 8px;
	--nr-inset: 0px;
}

/* Opens a page beneath the absolutely positioned site header. It shares the
   ground colour, so rounding it would be invisible — it runs full-bleed and the
   white body panel below is the thing that floats. */
.newsroom-panel--top {
	padding-top: clamp(180px, 16vw, 260px);
	margin: 0;
	border-radius: 0;
}

/* One class plus the universal selector is only (0,1,0), which loses to
   `.newsroom h2` at (0,1,1). Scope it so dark grounds actually win. */
.newsroom .newsroom-panel--dark,
.newsroom .newsroom-panel--dark * {
	color: #fff;
}

.newsroom-inner {
	max-width: 1320px;
	margin-inline: auto;
}

/* The white cav-group rule `.cav-group[data-color="white"] *` is (0,2,0) and the
   theme forces anchors to `color: currentColor` at (0,3,1). Everything below is
   scoped under .newsroom to clear the first; the second is handled by setting the
   inherited colour so currentColor resolves correctly. */
.newsroom,
.newsroom p,
.newsroom li,
.newsroom h1,
.newsroom h2,
.newsroom h3 {
	color: var(--nr-ink);
}

.newsroom h1,
.newsroom h2,
.newsroom h3 {
	margin: 0;
}

/* --------------------------------------------------------- shared elements */

.newsroom .newsroom__kicker {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7em;
	margin: 0 0 1rem;
	font-family: 'Sofia Sans Condensed', 'DM Sans', sans-serif;
	font-weight: 800;
	font-size: 0.85rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	/* lime on white is 3.04:1, under AA at this size — lime lives in the pill,
	   the arrows and the swash instead */
	color: var(--nr-muted);
}

.newsroom .newsroom__tag {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	background: var(--nr-lime);
	color: var(--nr-ink);           /* charcoal on lime is ~5.4:1 */
	letter-spacing: 0.12em;
}

.newsroom .newsroom__go {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	font-weight: 700;
	color: inherit;
}

.newsroom .newsroom__go::after {
	content: "";
	width: 1.5rem;
	height: 2px;
	background: var(--nr-lime);
	transition: width 0.25s ease;
}

.newsroom a:hover .newsroom__go::after,
.newsroom a:focus-visible .newsroom__go::after {
	width: 2.75rem;
}

/* headline left, supporting line right, baselines aligned — the NLTC section head */
.newsroom-sechead {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: end;
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

@media only screen and (min-width: 860px) {
	.newsroom-sechead {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	}

	.newsroom-sechead__aside {
		justify-self: end;
		text-align: right;
	}
}

.newsroom .newsroom-sechead__aside {
	max-width: 42ch;
	color: var(--nr-muted);
	font-size: clamp(1rem, 1.15vw, 1.15rem);
	line-height: 1.5;
	margin: 0;
}

/* ------------------------------------------------------------- media hero */

/* A page-opening hero carried by an image. The site header floats over the top
   with a white logo, so the top of any newsroom page has to be dark. */
.newsroom-mediahero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(420px, 56vh, 620px);
	padding-top: 180px;
	overflow: hidden;
	background: var(--nr-ink);
}

.newsroom-mediahero__media {
	position: absolute;
	inset: 0;
	margin: 0;
}

.newsroom-mediahero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.newsroom-mediahero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgba(8, 27, 35, 0.95) 0%, rgba(8, 27, 35, 0.7) 40%, rgba(8, 27, 35, 0.35) 100%),
		linear-gradient(90deg, rgba(8, 27, 35, 0.85) 0%, rgba(8, 27, 35, 0.25) 70%);
}

.newsroom-mediahero__body {
	position: relative;
	width: 100%;
	padding: 0 var(--nr-gutter) clamp(2.5rem, 5vw, 4rem);
}

.newsroom .newsroom-mediahero__body,
.newsroom .newsroom-mediahero__body * {
	color: #fff;
}

/* The intro sits under the headline, close to it — the site pairs a heading with
   its supporting line, it doesn't push them to opposite ends of the row. */
.newsroom .newsroom-mediahero__intro {
	margin: 1rem 0 0;
	max-width: 56ch;
	font-size: clamp(1.05rem, 1.2vw, 1.25rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.86);
}

/* ------------------------------------------------- featured release (hero) */

.newsroom-feature {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(520px, 78vh, 820px);
	/* the site header is absolutely positioned over the top of the page */
	padding-top: 180px;
	margin: var(--nr-inset);
	border-radius: var(--nr-radius);
	overflow: hidden;
	background: var(--nr-ink);
	text-decoration: none;
}

.newsroom-feature__media {
	position: absolute;
	inset: 0;
	margin: 0;
}

.newsroom-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.newsroom-feature:hover .newsroom-feature__media img {
	transform: scale(1.04);
}

/* Two layered washes: one up from the base so the type always has ground, one
   from the left so the headline holds on wide screens. */
.newsroom-feature__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgba(8, 27, 35, 0.96) 0%, rgba(8, 27, 35, 0.78) 38%, rgba(8, 27, 35, 0.3) 70%, rgba(8, 27, 35, 0.45) 100%),
		linear-gradient(90deg, rgba(8, 27, 35, 0.9) 0%, rgba(8, 27, 35, 0.35) 62%, rgba(8, 27, 35, 0.1) 100%);
}

.newsroom-feature__body {
	position: relative;
	width: 100%;
	padding: clamp(2rem, 5vw, 4.5rem);
	max-width: 60rem;
}

.newsroom .newsroom-feature__body,
.newsroom .newsroom-feature__body * {
	color: #fff;
}

.newsroom .newsroom-feature__title {
	margin: 0 0 1.25rem;
}

.newsroom .newsroom-feature__excerpt {
	margin: 0 0 1.75rem;
	max-width: 48ch;
	font-size: clamp(1.05rem, 1.25vw, 1.3rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.86);
}

/* ------------------------------------------------------------ archive rows */

.newsroom-year {
	display: grid;
	gap: clamp(1rem, 2vw, 2rem);
	align-items: baseline;
	padding-top: clamp(2.5rem, 4vw, 4rem);
	margin-top: clamp(2.5rem, 4vw, 4rem);
	border-top: 2px solid var(--nr-ink);
}

.newsroom-rows:first-of-type .newsroom-year:first-child,
.newsroom-year:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.newsroom .newsroom-year__label {
	font-family: 'Sofia Sans Condensed', 'DM Sans', sans-serif;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--nr-muted);
}

.newsroom-rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.newsroom-row + .newsroom-row {
	border-top: 1px solid var(--nr-line);
}

.newsroom-row__link {
	display: grid;
	gap: clamp(1.25rem, 3vw, 3rem);
	align-items: center;
	padding: clamp(1.75rem, 3.5vw, 3.25rem) 0;
	text-decoration: none;
	color: inherit;
}

@media only screen and (min-width: 860px) {
	.newsroom-row__link {
		grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
	}

	/* alternate the image side, the way the NLTC 01/02/03 rows do */
	.newsroom-row:nth-child(even) .newsroom-row__link {
		grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
	}

	.newsroom-row:nth-child(even) .newsroom-row__media {
		order: 2;
	}
}

.newsroom-row__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--nr-radius-sm);
	aspect-ratio: 16 / 10;
	background: #e7e9e2;
}

.newsroom-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.newsroom-row:hover .newsroom-row__media img {
	transform: scale(1.04);
}

.newsroom .newsroom-row__title {
	margin: 0 0 0.85rem;
}

.newsroom .newsroom-row__excerpt {
	margin: 0 0 1.25rem;
	color: var(--nr-muted);
	max-width: 58ch;
	line-height: 1.6;
}

.newsroom-archive__pagination {
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.newsroom-archive__pagination .nav-links {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	align-items: center;
}

.newsroom .newsroom-archive__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3rem;
	height: 3rem;
	padding: 0 0.9rem;
	border: 1px solid var(--nr-line);
	border-radius: 999px;
	text-decoration: none;
	color: var(--nr-ink);
}

.newsroom .newsroom-archive__pagination .page-numbers.current,
.newsroom .newsroom-archive__pagination .page-numbers:hover {
	background: var(--nr-lime);
	border-color: var(--nr-lime);
	color: var(--nr-ink);
}

/* ------------------------------------------- media contact panel (dark) */

.newsroom-contactband {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
}

@media only screen and (min-width: 860px) {
	.newsroom-contactband {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	}
}

.newsroom-contactband__col > * + * {
	margin-top: 1.25rem;
}

/* The labels used to be 13.6px kickers sitting above 16px copy, which read as a
   mistake rather than a hierarchy. They are headings now. */
.newsroom .newsroom-contactband__heading {
	margin: 0 0 1.25rem;
}

.newsroom-contactband__person {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.75rem);
}

.newsroom-contactband__avatar {
	flex: 0 0 auto;
	width: clamp(84px, 9vw, 124px);
	height: clamp(84px, 9vw, 124px);
	border-radius: 50%;
	overflow: hidden;
	margin: 0;
	background: rgba(255, 255, 255, 0.1);
}

.newsroom-contactband__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.newsroom .newsroom-contactband__name {
	margin: 0 0 0.25rem;
	font-family: 'Special Gothic', 'Sofia Sans Condensed', sans-serif;
	font-size: clamp(1.25rem, 1.6vw, 1.6rem);
	line-height: 1.15;
}

.newsroom .newsroom-contactband__role {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
}

.newsroom-contactband__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.newsroom .newsroom-contactband__links a {
	color: #fff;
	text-decoration-color: var(--nr-lime);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

/* ----------------------------------------------------------------- single */

.newsroom-release__head {
	max-width: min(100%, 68rem);
}

.newsroom .newsroom-release__title {
	margin: 0;
}

.newsroom-release__hero {
	position: relative;
	margin: 0;
	border-radius: var(--nr-radius);
	overflow: hidden;
}

.newsroom-release__hero img {
	width: 100%;
	height: auto;
	display: block;
}

.newsroom .newsroom-release__hero-caption {
	margin: 0.9rem 0 0;
	font-size: 0.95rem;
	color: var(--nr-muted);
}

.newsroom-release__body {
	max-width: var(--nr-measure);
	font-size: clamp(18px, 1.1vw, 21px);
	line-height: 1.62;
}

.newsroom-release__body > * {
	margin-block: 0 1.35em;
}

/* the deck line Prowly stores as a `lead` element */
.newsroom .newsroom-release__body p[data-size="sm"]:first-of-type {
	font-size: clamp(1.25rem, 1.6vw, 1.6rem);
	line-height: 1.42;
	margin-bottom: 1.6em;
}

.newsroom .newsroom-release__body h2[data-type="cav/text"] {
	margin-top: 2.2em;
}

.newsroom .newsroom-release__body a {
	color: var(--nr-ink);
	text-decoration-color: var(--nr-lime);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

/* Quoted paragraphs become pull quotes — every release has one, and it is the
   only moment of voice in an otherwise formal document. */
.newsroom .newsroom-release__body p[data-pullquote] {
	margin: clamp(2.5rem, 4vw, 3.5rem) 0;
	padding-left: clamp(1.25rem, 2vw, 2rem);
	border-left: 4px solid var(--nr-lime);
	font-size: clamp(1.3rem, 1.8vw, 1.85rem);
	line-height: 1.35;
	font-weight: 500;
}

/* in-body images break past the reading measure */
.newsroom-release__body .wp-block-image {
	margin: clamp(2.5rem, 4vw, 3.5rem) 0;
	width: min(100vw - (2 * var(--nr-gutter)), 56rem);
}

.newsroom-release__body .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--nr-radius-sm);
}

.newsroom .newsroom-release__body .wp-block-image figcaption {
	margin-top: 0.8rem;
	font-size: 0.95rem;
	color: var(--nr-muted);
}

.newsroom-release__body .wp-block-separator {
	margin: clamp(2.5rem, 4vw, 4rem) 0;
	border: 0;
	border-top: 1px solid var(--nr-line);
}

.newsroom-boilerplate {
	max-width: 62ch;
}

.newsroom .newsroom-boilerplate > p {
	margin-top: 0;
}

.newsroom .newsroom-boilerplate p {
	color: rgba(255, 255, 255, 0.78);
	line-height: 1.6;
	margin: 0;
}

/* -------------------------------------------------- related releases slider */

/* Uses the theme's own cav/card-display in Slider mode — the component on the
   disposal-rates page — rather than a truncated copy of the index. */
/* cav/card-display's `posts` variant is built to run full-bleed on charcoal
   (`width: 100vw` at specificity (0,5,0)); match the section to it rather than
   fight it, and give the contact band below a different ground instead. */
.newsroom-related {
	padding: var(--nr-pad) 0 0;
	background: var(--wp--preset--color--charcoal, #0F222A);
}

.newsroom-related__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding-inline: var(--nr-gutter);
	margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.newsroom .newsroom-related__head h2,
.newsroom .newsroom-related__all,
.newsroom .newsroom-related__all * {
	color: #fff;
}

.newsroom .newsroom-related__all {
	text-decoration: none;
}

.newsroom-related {
	padding-bottom: var(--nr-pad);
}

.newsroom .newsroom-related .cav-card-display {
	padding-top: 0;
}

/* `.cav-card[data-variant=posts] .cav-card__content { color: #fff }` is (0,2,1)
   and loses to `.newsroom h3` at (0,1,1) only on source order — scope ours above
   it so the cards stay legible on ash. */
.newsroom .cav-card[data-variant="posts"] .cav-card__content,
.newsroom .cav-card[data-variant="posts"] .cav-card__content *,
.newsroom .cav-card[data-variant="video-cards"] .cav-card__content,
.newsroom .cav-card[data-variant="video-cards"] .cav-card__content * {
	color: #fff;
}

.newsroom .cav-card[data-variant="posts"] [data-type="cav/text/kicker"] {
	color: rgba(255, 255, 255, 0.72);
}

/* video-cards scales on hover the same way posts does */
.newsroom .cav-card[data-variant="video-cards"]:has(> a):hover,
.newsroom .cav-card[data-variant="video-cards"]:has(> a):focus-within {
	transform: none;
}

.newsroom .cav-card[data-variant="video-cards"] .cav-card__media {
	position: relative;
	overflow: hidden;
}

.newsroom .cav-card[data-variant="video-cards"] .cav-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.newsroom .cav-card[data-variant="video-cards"] > a:hover .cav-card__media::after,
.newsroom .cav-card[data-variant="video-cards"] > a:focus-visible .cav-card__media::after {
	opacity: 1;
}

/* The posts variant scales the whole card to 1.1 on hover, which blows it up and
   clips it against the scroll container. The rest of the site shades the image
   instead — cav/card's cross-links variant fades an rgba(0,0,0,.4) overlay in
   over .2s with a slight zoom. Match that. Theme rule is (0,3,1), so this has to
   clear it. */
.newsroom .cav-card[data-variant="posts"]:has(> a):hover,
.newsroom .cav-card[data-variant="posts"]:has(> a):focus-within {
	transform: none;
}


/* ------------------------------------------------------------ card hover */

/* One hover language across the newsroom, matching the rest of the site: a shade
   over the image, not a transform on the card. */
.newsroom .newsroom-row__media,
.newsroom .cav-card[data-variant="posts"] .cav-card__media {
	position: relative;
	overflow: hidden;
}

.newsroom .newsroom-row__media::after,
.newsroom .cav-card[data-variant="posts"] .cav-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.newsroom .newsroom-row__link:hover .newsroom-row__media::after,
.newsroom .newsroom-row__link:focus-visible .newsroom-row__media::after,
.newsroom .cav-card[data-variant="posts"] > a:hover .cav-card__media::after,
.newsroom .cav-card[data-variant="posts"] > a:focus-visible .cav-card__media::after {
	opacity: 1;
}

.newsroom .cav-card[data-variant="posts"] .cav-card__media img {
	transition: transform 0.25s ease;
}

.newsroom .cav-card[data-variant="posts"] > a:hover .cav-card__media img {
	transform: scale(1.04);
}

/* ---------------------------------------------------------------- videos */

/* The page was one unbroken dark run from hero to footer. The video sections sit
   on light grounds and alternate, which breaks it up without a different colour
   per row. */
.newsroom-videos__content {
	background: var(--nr-paper);
}

.newsroom-videos .newsroom-vsection {
	padding: clamp(3rem, 6vw, 5.5rem) 0;
	background: var(--nr-paper);
}

.newsroom-videos .newsroom-vsection:nth-child(even) {
	background: #fff;
}

.newsroom .newsroom-vsection > [data-type="cav/text"][data-variant="heading"] {
	max-width: 1320px;
	margin: 0 auto clamp(1.25rem, 2.5vw, 2rem);
	padding-inline: var(--nr-gutter);
	color: var(--nr-ink);
}

/* The slider paints its own charcoal at (0,5,0) and runs full-bleed. Keep the
   full bleed, drop the ground so the section colour shows. */
.newsroom.newsroom-videos .newsroom-vsection .cav-card-display[data-variant="video-cards"] {
	background-color: transparent;
}

/* The slider arrows are left exactly as the theme draws them everywhere else:
   big bare chevrons, 32px glyph in a 48px button, no circle. An earlier pass put
   a tinted circle behind them, which made them read smaller and unlike the rest
   of the site. The only thing set here is the row height — a slider with nothing
   to scroll hides its buttons, which collapsed the row and left the first
   section's heading sitting closer to its cards than the others. */
.newsroom-videos .cav-card-display__buttons {
	min-height: 48px;
}

/* The posts and video-cards variants pull their track up 64px
   (`.cav-card-display[data-variant=video-cards]:not(…) .cav-card-display__container
   { top: -64px }`, specificity (0,6,0)), so the cards ride up over the arrows and
   hide them. The cross-links sliders used elsewhere on the site are not targeted
   by that rule, which is why their arrows sit clear. Put the track back. */
.newsroom.newsroom-videos .newsroom-videos__content .newsroom-vsection .cav-card-display[data-variant="video-cards"] .cav-card-display__container,
.newsroom.newsroom-release .newsroom-related .cav-card-display[data-variant="posts"] .cav-card-display__container {
	top: 0;
}

/* ------------------------------------------------- video cards, full photo */

/* Picks up the cross-links language: the photograph fills the card and the title
   sits over it. The theme's video-cards crop the image to 71/37, which slices the
   top and bottom off a 16:9 video still — these run the full frame instead. */
.newsroom-videos .cav-card[data-variant="video-cards"] > a {
	position: relative;
	display: block;
	height: 100%;
	text-decoration: none;
}

.newsroom-videos .cav-card[data-variant="video-cards"] .cav-card__media {
	margin: 0;
	border-radius: inherit;
	overflow: hidden;
}

.newsroom-videos .cav-card[data-variant="video-cards"] .cav-card__media img {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	object-position: center;
}

.newsroom-videos .cav-card[data-variant="video-cards"] .cav-card__content {
	position: absolute;
	inset: 0;
	display: flex;
	/* the theme sets flex-direction: column here, so vertical alignment is
	   justify-content — align-items would push the text sideways */
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	min-height: 0;
	padding: clamp(1.25rem, 2.5vw, 2rem);
	background: linear-gradient(0deg, rgba(8, 27, 35, 0.92) 0%, rgba(8, 27, 35, 0.65) 45%, rgba(8, 27, 35, 0) 100%);
	pointer-events: none;
}

.newsroom-videos .cav-card[data-variant="video-cards"] .cav-card__content [data-type="cav/text"] {
	margin: 0;
	text-align: left;
}

/* a play affordance, so a still reads as a video */
.newsroom-videos .cav-card[data-variant="video-cards"] > a::after {
	content: "";
	position: absolute;
	/* sits above centre so a three-line title underneath still clears it */
	top: 40%;
	left: 50%;
	width: clamp(50px, 4.4vw, 64px);
	height: clamp(50px, 4.4vw, 64px);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230F222A'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/42% no-repeat;
	transition: transform 0.25s ease, background-color 0.2s ease;
	pointer-events: none;
}

.newsroom-videos .cav-card[data-variant="video-cards"] > a:hover::after,
.newsroom-videos .cav-card[data-variant="video-cards"] > a:focus-visible::after {
	transform: translate(-50%, -50%) scale(1.08);
	background-color: #fff;
}

.newsroom-videos__grid {
	display: grid;
	gap: clamp(1.5rem, 2.5vw, 2.5rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr));
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.newsroom-videos__grid figure,
.newsroom-videos__grid .wp-block-embed {
	margin: 0;
	width: 100%;
}

/* Pin the frame to 16:9 so a video that fails to load (Vimeo domain rules, an
   unpublished clip) leaves a correctly sized placeholder instead of collapsing. */
.newsroom-videos__grid .wp-block-embed__wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #e7e9e2;
	border-radius: var(--nr-radius-sm);
	overflow: hidden;
}

.newsroom-videos__grid .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.newsroom .newsroom-videos__grid figcaption {
	margin-top: 0.85rem;
	font-size: 1rem;
	color: var(--nr-muted);
}

/* ----------------------------------------------------------- reveal on scroll */

.newsroom [data-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.newsroom [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.newsroom [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.newsroom-feature__media img,
	.newsroom-row__media img {
		transition: none;
	}
}