/**
 * upcomer/featured-news-hero
 *
 * Mobile-first dark hero. Featured + 3-item side stack + optional strip.
 *
 * - Mobile (<768px): featured stacks above side stack (single column).
 *   Strip is a horizontally-scrollable touch rail (no dots, no JS).
 * - Tablet (≥768px): side stack becomes two columns alongside featured (still 1 row).
 * - Desktop (≥1024px): featured ~65% / side-stack ~35% with three stacked side cards.
 *   Strip becomes a CSS-grid carousel sized by --strip-visible (2-4 items at once).
 *
 * Local tokens mirror upcomer/page-hero-intro's dark-canvas palette so multiple
 * dark-canvas blocks read as one continuous surface when stacked on a page.
 */

.upcomer-block--featured-news-hero {
	--hero-bg: #0a0a0a;
	--hero-fg: #ffffff;
	--hero-fg-muted: rgba(255, 255, 255, 0.72);
	--hero-rule: rgba(255, 255, 255, 0.18);
	--hero-accent: #ffd84d;
	--hero-card-bg: rgba(255, 255, 255, 0.04);
	--hero-card-bg-hover: rgba(255, 255, 255, 0.08);
	--hero-radius: 0;
	--hero-gap: clamp(1rem, 2.4vw, 1.75rem);
	--hero-pad-x: clamp(1.25rem, 4vw, 2.5rem);
	--hero-pad-y: clamp(2rem, 4vw, 3rem);
	--strip-visible: 3;

	background: var(--hero-bg);
	color: var(--hero-fg);
	padding-block: var(--hero-pad-y);
}

/* Inner content alignment ─────
   Match `gamurs/header-nav` exactly so the hero lines up with the nav above
   it. Tokens come from theme.json → `top-nav.primary-container-spacing.*`
   (the same custom-property tokens the nav block reads). Background stays
   100vw via .alignfull; only `.hero__inner` is constrained.

     Desktop (≥1248px): max 1200, padding-inline 0
     Laptop  (944–1247): max 1200, padding-inline 24
     Mobile  (<944):     max none, padding-inline 16
*/
.upcomer-block--featured-news-hero .hero__inner {
	max-width: calc(1px * var(--wp--custom--top-nav--primary-container-spacing--desktop--max-width, 1200));
	margin-inline: auto;
	padding-inline: calc(1px * var(--wp--custom--top-nav--primary-container-spacing--desktop--padding-left, 0));
}
@media (max-width: 1247px) {
	.upcomer-block--featured-news-hero .hero__inner {
		max-width: calc(1px * var(--wp--custom--top-nav--primary-container-spacing--laptop--max-width, 1200));
		padding-inline: calc(1px * var(--wp--custom--top-nav--primary-container-spacing--laptop--padding-left, 24));
	}
}
@media (max-width: 943px) {
	.upcomer-block--featured-news-hero .hero__inner {
		max-width: unset;
		padding-inline: calc(1px * var(--wp--custom--top-nav--primary-container-spacing--mobile--padding-left, 16));
	}
}

/* ───── Section eyebrow ───── */
.upcomer-block--featured-news-hero .hero__header {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.upcomer-block--featured-news-hero .section-eyebrow {
	position: relative;
	margin: 0;
	padding-inline-end: clamp(0.75rem, 2vw, 1.5rem);
	font-family: "Barlow Condensed", "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-size: clamp(0.75rem, 1.4vw, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hero-fg);
	white-space: nowrap;
}
.upcomer-block--featured-news-hero .hero__header::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--hero-rule);
	min-width: 2rem;
}

/* ───── Main layout (featured + side) ───── */
.upcomer-block--featured-news-hero .hero__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--hero-gap);
}
@media (min-width: 768px) {
	.upcomer-block--featured-news-hero .hero__main {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		grid-template-rows: auto;
	}
}
@media (min-width: 1024px) {
	.upcomer-block--featured-news-hero .hero__main {
		grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
		gap: clamp(1.25rem, 2.5vw, 2rem);
	}
}

.upcomer-block--featured-news-hero .hero__side {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--hero-gap);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) and (max-width: 1023.98px) {
	.upcomer-block--featured-news-hero .hero__side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.upcomer-block--featured-news-hero .hero__side > li:nth-child(3) {
		grid-column: span 2;
	}
}

.upcomer-block--featured-news-hero .hero__featured--empty {
	padding: 2rem;
	border: 1px dashed var(--hero-rule);
	color: var(--hero-fg-muted);
	text-align: center;
}

/* ───── Article-card primitive — variant styling lives with the block ───── */
.upcomer-block--featured-news-hero .article-card {
	background: var(--hero-card-bg);
	border-radius: var(--hero-radius);
	transition: background 200ms ease, transform 200ms ease;
	overflow: hidden;
	height: 100%;
}
.upcomer-block--featured-news-hero .article-card:hover {
	background: var(--hero-card-bg-hover);
}
.upcomer-block--featured-news-hero .article-card__link {
	display: grid;
	gap: 0.75rem;
	color: inherit;
	text-decoration: none;
	height: 100%;
	/* Pack media + body at the top of the card. Without this, a grid container
	   stretched by its taller sibling (e.g. the featured card matching the
	   3-card side stack height) distributes the auto rows with `stretch`,
	   inflating the media wrapper past its 16/9 aspect and spacing the body
	   items across the full height. `start` keeps each row at content size
	   and parks the extra space at the card's bottom. */
	align-content: start;
}
.upcomer-block--featured-news-hero .article-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
}
.upcomer-block--featured-news-hero .article-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.upcomer-block--featured-news-hero .article-card__link:hover .article-card__image {
	transform: scale(1.03);
}
.upcomer-block--featured-news-hero .article-card__body {
	display: grid;
	gap: 0.35rem;
	padding: 0.5rem 0.875rem 0.875rem;
}
.upcomer-block--featured-news-hero .article-card__eyebrow {
	font-family: "Barlow Condensed", "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hero-accent);
}
.upcomer-block--featured-news-hero .article-card__title {
	font-family: "Barlow Condensed", "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-weight: 700;
	line-height: 1.1;
	color: var(--hero-fg);
	text-wrap: balance;
}
.upcomer-block--featured-news-hero .article-card__byline {
	font-size: 0.8125rem;
	color: var(--hero-fg-muted);
}

/* — Featured variant: larger image, larger headline */
.upcomer-block--featured-news-hero .article-card--hero-featured .article-card__link {
	/* Image keeps its natural 16/9 size at the top; the body row eats any
	   slack so when the featured card is stretched to match the side stack,
	   the body's grey area extends to the bottom of the card. */
	grid-template-rows: auto 1fr;
}
.upcomer-block--featured-news-hero .article-card--hero-featured .article-card__title {
	font-size: clamp(1.75rem, 3.2vw, 2.625rem);
}
.upcomer-block--featured-news-hero .article-card--hero-featured .article-card__body {
	padding: 0.875rem 1.125rem 1.25rem;
	/* Vertically center the eyebrow + title + byline within the body's tall
	   grey area (the space below the image). Without this the three lines
	   would sit at the top of the body and leave the bottom half blank. */
	align-content: center;
}

/* — Side variant: medium image, two-line title */
.upcomer-block--featured-news-hero .article-card--hero-side .article-card__media {
	/* Shorter thumb than the default 16/9 so the stacked side cards stay
	   at a combined height close to the featured card's natural image+body
	   height. Stops the featured column from being stretched by a taller
	   side stack (which used to distribute its internal grid). */
	aspect-ratio: 21 / 9;
}
.upcomer-block--featured-news-hero .article-card--hero-side .article-card__title {
	font-size: clamp(1.125rem, 1.8vw, 1.375rem);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* — Strip variant: compact, no eyebrow, no byline */
.upcomer-block--featured-news-hero .article-card--hero-strip .article-card__title {
	font-size: 0.9375rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.2;
}
.upcomer-block--featured-news-hero .article-card--hero-strip .article-card__body {
	padding: 0.5rem 0.625rem 0.75rem;
}

/* ───── Strip wrapper ───── */
.upcomer-block--featured-news-hero .hero__strip {
	--strip-gap: clamp(0.875rem, 1.6vw, 1.25rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* Mobile: native horizontal scroll on the viewport. No JS, no dots. */
.upcomer-block--featured-news-hero .hero__strip-viewport {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.5rem;
}
.upcomer-block--featured-news-hero .hero__strip-track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 72%;
	gap: var(--strip-gap);
}
.upcomer-block--featured-news-hero .hero__strip-track > li {
	scroll-snap-align: start;
}
.upcomer-block--featured-news-hero .hero__strip-dots {
	display: none;
}

/* Desktop: carousel viewport clips. Track lays out all items in a single row,
   each item sized to 1/strip-visible of the viewport width. translateX uses
   cqw (container query width) so paging moves by exactly one viewport. */
@media (min-width: 1024px) {
	.upcomer-block--featured-news-hero .hero__strip-viewport {
		container-type: inline-size;
		overflow: hidden;
		scroll-snap-type: none;
		padding-bottom: 0;
	}
	.upcomer-block--featured-news-hero .hero__strip-track {
		grid-auto-columns: calc(
			(100cqw - (var(--strip-visible) - 1) * var(--strip-gap))
			/ var(--strip-visible)
		);
	}
	.upcomer-block--featured-news-hero .hero__strip--carousel .hero__strip-track {
		/* One page = viewport-width + one gap (so the next page's first item
		   lands flush at x=0 instead of being offset by accumulated gaps). */
		transform: translateX(calc(var(--strip-offset, 0) * (-100cqw - var(--strip-gap))));
		transition: transform 480ms cubic-bezier(0.2, 0.6, 0.2, 1);
		user-select: none;
		-webkit-user-select: none;
	}
	/* Suppress the transition while the pointer is dragging so the track
	   tracks the finger / cursor in real time. JS toggles .is-dragging. */
	.upcomer-block--featured-news-hero .hero__strip--carousel .hero__strip-track.is-dragging {
		transition: none;
	}
	.upcomer-block--featured-news-hero .hero__strip--carousel .hero__strip-viewport {
		cursor: grab;
		touch-action: pan-y;
	}
	.upcomer-block--featured-news-hero .hero__strip--carousel .hero__strip-track.is-dragging,
	.upcomer-block--featured-news-hero .hero__strip--carousel .hero__strip-viewport:active {
		cursor: grabbing;
	}

	.upcomer-block--featured-news-hero .hero__strip-dots {
		display: flex;
		gap: 0.5rem;
		justify-content: center;
		margin-top: 1.25rem;
	}
	.upcomer-block--featured-news-hero .hero__strip-dot {
		appearance: none;
		min-width: 2.25rem;
		height: 2.25rem;
		padding: 0 0.75rem;
		border: 1px solid var(--hero-rule);
		background: transparent;
		color: var(--hero-fg-muted);
		font-family: "Barlow Condensed", "Barlow", "Helvetica Neue", system-ui, sans-serif;
		font-weight: 700;
		letter-spacing: 0.1em;
		cursor: pointer;
		transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
	}
	.upcomer-block--featured-news-hero .hero__strip-dot:hover,
	.upcomer-block--featured-news-hero .hero__strip-dot:focus-visible {
		color: var(--hero-fg);
		border-color: var(--hero-fg);
		outline: 0;
	}
	.upcomer-block--featured-news-hero .hero__strip-dot[aria-current="true"] {
		color: var(--hero-bg);
		background: var(--hero-accent);
		border-color: var(--hero-accent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.upcomer-block--featured-news-hero .hero__strip--carousel .hero__strip-track,
	.upcomer-block--featured-news-hero .article-card__image {
		transition: none;
	}
}

/* ───── Background themes ─────
   Default: dark canvas (tokens defined at the block root above).
   Light: invert foreground tokens for white-on-light readability.
   Custom: editor supplies --hero-bg + (optional) --hero-fg via inline style. */
.upcomer-block--featured-news-hero[data-theme="light"] {
	--hero-bg: #ffffff;
	--hero-fg: #0f0f0f;
	--hero-fg-muted: rgba(15, 15, 15, 0.7);
	--hero-rule: rgba(15, 15, 15, 0.18);
	--hero-card-bg: rgba(15, 15, 15, 0.04);
	--hero-card-bg-hover: rgba(15, 15, 15, 0.08);
}
.upcomer-block--featured-news-hero[data-theme="custom"] {
	/* Custom background comes via inline --hero-bg. Foreground stays light by
	   default — editor can opt into dark text via data-text-color="dark". */
}
.upcomer-block--featured-news-hero[data-theme="custom"][data-text-color="dark"] {
	--hero-fg: #0f0f0f;
	--hero-fg-muted: rgba(15, 15, 15, 0.7);
	--hero-rule: rgba(15, 15, 15, 0.18);
	--hero-card-bg: rgba(15, 15, 15, 0.04);
	--hero-card-bg-hover: rgba(15, 15, 15, 0.08);
}