/* News: cards, heroes, filters, the News Cards band and the article body.
   ---------------------------------------------------------------------------
   One stylesheet for acf/news, acf/news-feed and acf/news-header (each block
   lists the lwh-news handle), so it loads wherever news appears: the News
   page and its filters, every article, and pages carrying the band.

   Figma "RDV Updates" (file RWjLEG7T1UnDmKKZmKmnxY), all at 1728:
     Frame 6 (1:467)  News page   hero 1597 x 895 inset 63, chamfered 20px on
                                  all corners; filters 52 tall; cards 512 x
                                  674, 30px apart, rows 38px apart
     Frame 7 (1:577)  article     the same hero with a 48px Roboto title;
                                  body 24/34 Roboto in a 1258px column
     Frame 9 (1:187)  the band    heading centred, See All News at the right
     iPhone 2:1090    the band    heading left, cards stacked, button below
   The vw values below are the Figma's px / 1728, so the layout scales down
   with the viewport and stops growing at the frame's width.
   --------------------------------------------------------------------------- */

.news--wrap {
	--news-gutter: max(var(--theme-content-padding, 15px), 3.65vw); /* 63 at 1728 */
	width: min(100% - 2 * var(--news-gutter), 1600px);
	margin-inline: auto;
}

/* ---- Card surface. Dark cards (D9D9D9 at 10%) are the design; a light
   palette background turns them into the Frame 6 cards (F7F6F2 on cream).
   Same idea as the button ink in css/buttons.css: the nearest surface wins,
   and a custom color, which has no slug class, keeps the surface around it. */
:is(.has-white-background-color, .has-off-white-background-color, .has-cream-background-color,
    .has-gray-background-color, .has-gold-background-color) {
	--news-card-bg: #f7f6f2;
	--news-card-shadow: rgba(0, 0, 0, 0.1);
	--news-card-ink: #000;
	--news-card-title: #000;
}

:is(.has-black-background-color, .has-charcoal-background-color, .has-brick-background-color,
    .has-background-image, .has-background-video, [class*="-gradient-background"]) {
	--news-card-bg: rgba(217, 217, 217, 0.1);
	--news-card-shadow: rgba(0, 0, 0, 0.44);
	--news-card-ink: #fff;
	--news-card-title: rgba(255, 255, 255, 0.7);
}

/* ------------------------------------------------------------------ cards */

.news--grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.news--grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(24px, 2.2vw, 38px) clamp(16px, 1.74vw, 30px);
	}

	/* reveal.js docks each card on its own, and staggers the cards of a row
	   as they enter together. */
}

/* The Figma's shadow (0 4px, 17.9 blur). The card's own clip-path would cut
   a box-shadow, so the list item casts one from the clipped result. */
.news--item {
	filter: drop-shadow(0 4px 18px var(--news-card-shadow, rgba(0, 0, 0, 0.44)));
}

.news--card {
	--news-card-pad: clamp(18px, 1.45vw, 25px);
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--news-card-pad) var(--news-card-pad) clamp(32px, 3.47vw, 60px);
	background: var(--news-card-bg, rgba(217, 217, 217, 0.1));
	color: var(--news-card-ink, #fff);
	/* Top-right corner only (Frame 6/9 "Rectangle 2006–2008 (angle)") */
	clip-path: polygon(0 0, calc(100% - var(--rdv-chamfer)) 0, 100% var(--rdv-chamfer), 100% 100%, 0 100%);
}

/* The photo cuts top-right and bottom-left. 462 x 407 in a 512 card. */
.news--card-media {
	aspect-ratio: 462 / 407;
	overflow: hidden;
	background: rgba(128, 128, 128, 0.15); /* the slot still reads as a photo when a post has none */
	clip-path: polygon(0 0, calc(100% - var(--rdv-chamfer)) 0, 100% var(--rdv-chamfer),
		100% 100%, var(--rdv-chamfer) 100%, 0 calc(100% - var(--rdv-chamfer)));
}

.news--card-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.news--card:hover .news--card-image {
	transform: scale(1.03);
}

.news--eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--roboto, "Roboto", sans-serif);
	font-size: clamp(13.5px, 1.04vw, 18px);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.083em; /* 1.5px at 18 */
	text-transform: uppercase;
}

.news--card .news--eyebrow {
	margin-top: clamp(20px, 1.74vw, 30px);
}

/* External posts: a small arrow after the label (the hidden link text says
   "opens in a new tab"). */
.news--external {
	display: inline-block;
	width: 0.67em;
	height: 0.67em;
	margin-left: 0.6em;
	vertical-align: 0.05em;
}

.news--card .news--card-title {
	margin: clamp(14px, 1.5vw, 26px) 0 0;
	font-family: var(--wp--preset--font-family--roboto, "Roboto", sans-serif);
	font-size: clamp(21px, 1.62vw, 28px);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0.019em;
	color: var(--news-card-title, rgba(255, 255, 255, 0.7));
}

/* The title's link is the card's one tab stop; ::after spreads it over the
   whole card so the photo clicks too. The focus ring hugs the title, inside
   the card, where the clip-path cannot cut it. */
.news--card-link {
	color: inherit;
	text-decoration: none;
}

.news--card-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.news--card-link:hover,
.news--card-link:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.news--card-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.news--empty {
	margin: 0;
}

/* Cards that arrive later (a filter or View More, news-feed.js) dock in on
   the theme's reveal move; the first paint's cards use js/reveal.js. */
.news--item.is-news-entering {
	animation:
		news-dock var(--rdv-snap-ms, 500ms) var(--rdv-snap-ease, ease-in) both,
		rdv-rise-fade calc(var(--rdv-snap-ms, 500ms) * 0.85) linear both;
	animation-delay: var(--news-enter-delay, 0ms);
}

@keyframes news-dock {
	from { transform: translateY(24px); }
	to   { transform: none; }
}

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

.news-feed--block,
.news-header--block {
	/* Copy inset inside the hero, shared with the filters and Back to News:
	   130–142px at 1728 */
	--news-hero-pad-x: clamp(20px, 8.2%, 142px);
}

.news--hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: min(125vw, 560px);
	padding: 40px var(--news-hero-pad-x) clamp(32px, 4.6vw, 80px);
	background: #040619; /* behind a post with no featured image */
	color: #fff;
	--rdv-button-ink: var(--wp--preset--color--cream, #efede6);
	clip-path: var(--rdv-chamfer-shape);
}

@media (min-width: 768px) {
	.news--hero {
		min-height: 480px;
		aspect-ratio: 1597 / 895;
	}
}

.news--hero-media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

/* The Figma's photo is pre-darkened; real photos need help under white type. */
.news--hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0) 75%),
		linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 65%);
}

.news--hero-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news--hero-copy {
	max-width: 1080px;
}

.news--hero-eyebrow {
	margin-bottom: 10px;
}

/* Frame 7: Roboto 48/52 */
.news--hero .news--hero-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--roboto, "Roboto", sans-serif);
	font-size: clamp(30px, 2.78vw, 48px);
	font-weight: 400;
	line-height: 1.083;
	letter-spacing: 0.006em;
	color: #fff;
}

/* Frame 6: the featured story, Oxanium Medium 70/74, -2px */
.news--hero-feature .news--hero-title {
	max-width: 13em;
	font-family: var(--wp--preset--font-family--oxanium, "Oxanium", sans-serif);
	font-size: clamp(40px, 4.05vw, 70px);
	font-weight: 500;
	line-height: 1.057;
	letter-spacing: -0.029em;
}

/* A short Featured Headline stacks the way Frame 6 sets it ("Journey Back /
   To The ISS", a 446px box); a full title keeps the wider measure above. */
.news--hero-feature .news--hero-title.is-headline {
	max-width: 6.6em;
}

.news--hero-excerpt {
	max-width: 480px;
	margin: 16px 0 0;
	font-size: clamp(18px, 1.22vw, 21px);
	line-height: 1.24;
	letter-spacing: 0.03em;
}

.news--hero-buttons {
	margin-top: clamp(24px, 2vw, 35px);
}

/* "< Back to News" under the article hero, at the hero copy's left edge */
.news--back {
	margin: clamp(20px, 3.3vw, 58px) 0 0;
	padding-inline: var(--news-hero-pad-x);
	font-size: clamp(15px, 1.04vw, 18px);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.083em;
	text-transform: uppercase;
}

.news--back a {
	color: var(--rdv-red, #bf4042);
	text-decoration: none;
}

.news--back a:hover,
.news--back a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --------------------------------------------- outline buttons (Frame 6/7)
   The filters, View More and More News: the theme's chamfered button
   (css/buttons.css) as a 2px stroke in the ink color, no fill, no arrow.
   The stroke follows --rdv-button-ring, so restyling is just the variables.
   Hover and focus fill red, as every button does; the current filter is
   the Figma's red "All Items". */
.theme-button.news--outline,
.wp-block-button.news--outline .wp-block-button__link {
	--rdv-button-line: 2px;
	--rdv-button-ring: var(--rdv-button-ink, #000);
	background-color: transparent;
	color: var(--rdv-button-ink, #000);
}

.theme-button.news--outline::after,
.wp-block-button.news--outline .wp-block-button__link::after {
	content: none;
}

.wp-block-button.news--outline {
	filter: none;
}

.theme-button.news--outline:is(:hover, :focus-visible),
.wp-block-button.news--outline .wp-block-button__link:is(:hover, :focus-visible),
.theme-button.news--filter[aria-current="page"] {
	--rdv-button-ring: var(--rdv-red, #bf4042);
	background-color: var(--rdv-red, #bf4042);
	color: #fff;
}

.theme-button.news--filter[aria-current="page"] {
	color: var(--wp--preset--color--cream, #efede6);
	cursor: default;
}

/* ---------------------------------------------------------- the band */

.news--band {
	padding-block: var(--wp--preset--spacing--x-large);
	color: var(--news-card-ink, #fff);
}

.news--band-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "head" "cards" "more";
	row-gap: 40px;
}

.news--band .news--band-heading {
	grid-area: head;
	margin: 0;
	font-family: var(--wp--preset--font-family--roboto, "Roboto", sans-serif);
	font-size: clamp(36px, 2.55vw, 44px);
	font-weight: 400;
	line-height: 1.16;
	letter-spacing: 0.023em; /* 1px at 44 */
	color: inherit;
}

.news--band .news--grid {
	grid-area: cards;
}

.news--band-more {
	grid-area: more;
	justify-self: start;
	margin: 0;
}

@media (min-width: 992px) {
	/* Heading centred, the button at the right end of the same row */
	.news--band-inner {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		grid-template-areas: ". head more" "cards cards cards";
		align-items: center;
		row-gap: clamp(40px, 3.76vw, 65px);
	}

	.news--band .news--band-heading {
		text-align: center;
	}

	.news--band-more {
		justify-self: end;
	}
}

/* ---------------------------------------------------------- the News page */

/* The News CTA template part follows <main> in .wp-site-blocks, which spaces
   its children 24px apart (core's `:root :where(.wp-site-blocks) > *`); the
   band meets the page edge to edge, as the footer does (css/footer.css). */
.wp-site-blocks > .news-cta--part {
	margin-block-start: 0;
}

/* The templates' cream <main>: core pads any group with a background
   (`:where(.wp-block-group.has-background)`, 1.25em 2.375em), which would
   push everything 43px in from the Figma's edges. */
.wp-block-group.news-index {
	padding: 0;
}

/* The header overlays the page: clear it, then the Figma's 82px (193 - 111) */
.news-feed--block,
.wp-block-group.news-single {
	padding: calc(var(--theme-menu-height, 105px) + clamp(16px, 4.75vw, 82px)) 0 0;
}

.news-feed--block {
	padding-bottom: clamp(60px, 6.9vw, 120px);
}

.news--feed-inner {
	padding-top: clamp(32px, 7.7vw, 133px);
}

.news--filters {
	margin-bottom: clamp(32px, 5.5vw, 95px);
}

.news--filter-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 992px) {
	/* Frame 6 starts the filters under the hero's copy, not at the card edge */
	.news--filter-list {
		gap: 16px clamp(16px, 1.74vw, 30px);
		padding-inline-start: calc(var(--news-hero-pad-x) - 6px);
	}
}

.theme-button.news--filter {
	--rdv-button-font-size: clamp(16px, 1.16vw, 20px);
	padding: 14px 16px; /* 44px touch target on phones */
	letter-spacing: 0.05em;
}

@media (min-width: 992px) {
	.theme-button.news--filter {
		padding: 16px 22px; /* 52 tall, as in the Figma */
	}
}

.news--more-wrap {
	display: flex;
	justify-content: center;
	margin-top: clamp(40px, 3.65vw, 63px);
}

.theme-button.news--more {
	padding-inline: 46px;
}

.news-feed--block[aria-busy="true"] [data-news-results] {
	opacity: 0.5;
	transition: opacity 0.2s 0.15s; /* only a slow answer dims it */
}

/* ------------------------------------------------------------ the article
   Every rule names the article twice: the post content in single.html, and
   the post editor's canvas (its root container is the post content, on a body
   classed post-type-post), so a post is written in the type it is read in.
   The template's own canvas ("Show template") matches the first form. */

.news-single .news-article {
	padding-top: clamp(24px, 2.6vw, 45px);
}

:is(.news-single .news-article, .post-type-post.editor-styles-wrapper > .wp-block-post-content) {
	color: #000;
}

/* The template sets the 1258px column; phones keep the theme gutter. */
:is(.news-single .news-article, .post-type-post.editor-styles-wrapper > .wp-block-post-content) > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: min(1258px, 100% - 2 * var(--theme-content-padding, 15px));
}

/* Text blocks only, so the theme's modules (Section, Slider, …) placed in an
   article keep their own type. One blank line between paragraphs, as in
   the Figma; a heading sits right on top of its paragraph. */
:is(.news-single .news-article, .post-type-post.editor-styles-wrapper > .wp-block-post-content) > :is(p, ul, ol, .wp-block-list, .wp-block-quote, .wp-block-image, .wp-block-embed, .wp-block-table) {
	margin-block: 0 1.417em;
	font-size: clamp(18px, 1.39vw, 24px);
	line-height: 1.417; /* 34 at 24 */
	letter-spacing: 0.0117em;
}

:is(.news-single .news-article, .post-type-post.editor-styles-wrapper > .wp-block-post-content) > :is(h2, h3, h4, h5, h6) {
	margin-block: 0 0.35em;
	font-family: var(--wp--preset--font-family--roboto, "Roboto", sans-serif);
	font-weight: 400;
	letter-spacing: 0.008em;
	color: inherit;
}

:is(.news-single .news-article, .post-type-post.editor-styles-wrapper > .wp-block-post-content) > h2 {
	font-size: clamp(28px, 2.08vw, 36px);
	line-height: 1.17;
}

:is(.news-single .news-article, .post-type-post.editor-styles-wrapper > .wp-block-post-content) > h3 {
	font-size: clamp(22px, 1.62vw, 28px);
	line-height: 1.25;
}

:is(.news-single .news-article, .post-type-post.editor-styles-wrapper > .wp-block-post-content) > :is(h4, h5, h6) {
	font-size: clamp(18px, 1.39vw, 24px);
	font-weight: 600;
	line-height: 1.417;
}

/* Plain bullets and numbers, as in Frame 7. The theme's own list styles
   (css/lists.css: red hexagon bullets, an editorial 01/02/03 list) are
   for pages; in running article text they read as callouts. */
:is(.news-single .news-article, .post-type-post.editor-styles-wrapper > .wp-block-post-content) > :is(ul, ol) {
	padding-left: 1.5em;
	color: inherit;
}

:is(.news-single .news-article, .post-type-post.editor-styles-wrapper > .wp-block-post-content) > ul {
	list-style: disc;
}

:is(.news-single .news-article, .post-type-post.editor-styles-wrapper > .wp-block-post-content) > ol {
	list-style: decimal;
	counter-reset: none;
}

:is(.news-single .news-article, .post-type-post.editor-styles-wrapper > .wp-block-post-content) > :is(ul, ol) > li {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

:is(.news-single .news-article, .post-type-post.editor-styles-wrapper > .wp-block-post-content) > :is(ul, ol) > li + li {
	margin-top: 0;
}

:is(.news-single .news-article, .post-type-post.editor-styles-wrapper > .wp-block-post-content) > :is(ul, ol) > li::before {
	content: none;
}

:is(.news-single .news-article, .post-type-post.editor-styles-wrapper > .wp-block-post-content) > :is(p, ul, ol, .wp-block-list, .wp-block-quote) a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

:is(.news-single .news-article, .post-type-post.editor-styles-wrapper > .wp-block-post-content) > :is(p, ul, ol, .wp-block-list, .wp-block-quote) a:hover {
	color: var(--rdv-red, #bf4042);
}

:is(.news-single .news-article, .post-type-post.editor-styles-wrapper > .wp-block-post-content) > .wp-block-quote p {
	margin: 0;
}

:is(.news-single .news-article, .post-type-post.editor-styles-wrapper > .wp-block-post-content) > .wp-block-quote p + p {
	margin-top: 1.417em;
}

/* A module in an article (the Behind the Build slider) gets a line's room */
:is(.news-single .news-article, .post-type-post.editor-styles-wrapper > .wp-block-post-content) > [class*="wp-block-acf-"] {
	margin-block: 0 1.417em;
}

/* The post editor's title field, set as the article hero's (Frame 7), not
   as the theme's page h1 */
.post-type-post.editor-styles-wrapper .editor-post-title {
	font-family: var(--wp--preset--font-family--roboto, "Roboto", sans-serif);
	font-size: clamp(30px, 2.78vw, 48px);
	font-weight: 400;
	line-height: 1.083;
	letter-spacing: 0.006em;
}

/* More News, centred under the article */
.news-single .news--more-buttons {
	justify-content: center;
	margin: clamp(32px, 3.7vw, 64px) 0 0;
	padding-bottom: clamp(60px, 9vw, 160px);
}

.news-single .news--more-buttons .wp-block-button__link {
	padding-inline: 46px;
}

@media (prefers-reduced-motion: reduce) {
	.news--card-image {
		transition: none;
	}

	.news--card:hover .news--card-image {
		transform: none;
	}

	.news--item.is-news-entering {
		animation: none;
	}
}