/*
 * Split from components.css. Selectors unchanged.
 * Film and corridor singles: hero, watch links, meta, overview.
 */

/* ---------- Film hero ---------- */
/*
 * Mirrors production Elementor film singles (template 62966):
 * column 100vh, growing copy column (11% top / 60% right), logo max 293px,
 * footer row (laurels | watch) with 1/1/4/1 % padding, olive bottom fade +
 * left multiply wash.
 */

.wpx-hero--film {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	min-height: 100svh;
	padding: 0;
	color: var(--c-white);
	overflow: hidden;
	background: var(--wpx-grad-from, var(--c-primary));
}

.wpx-hero--film .wpx-eyebrow,
.wpx-hero--film .wpx-hero__credits {
	color: rgb(255 255 255 / 92%);
}

/*
 * A film hero already carries its own gradient; the generic hero scrim on top
 * of it doubles the darkening.
 */
.wpx-hero--film .wpx-hero__media {
	background: transparent;
}

/* Elementor background overlay: radial multiply from center-left. */
.wpx-hero--film .wpx-hero__media::before {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: radial-gradient(at center left, rgb(5 5 5 / 79%) 3%, rgb(0 0 0 / 37%) 62%);
	mix-blend-mode: multiply;
	filter: brightness(0.98) contrast(0.86);
	pointer-events: none;
	content: '';
}

.wpx-hero--film .wpx-hero__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Match production `[film_hero_fade]`: brand wash at the bottom, left
 * readability gradient, light multiply veil.
 */
.wpx-hero--film .wpx-hero__fade {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(180deg, rgb(0 0 0 / 0%) 80%, var(--wpx-grad-from, #868f74) 101%),
		linear-gradient(90deg, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 0%) 50%),
		linear-gradient(180deg, rgb(0 0 0 / 15%) 0%, rgb(0 0 0 / 15%) 100%);
	background-blend-mode: normal, normal, multiply;
	pointer-events: none;
}

.wpx-hero--film .wpx-hero__body {
	position: relative;
	z-index: 3;
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0.85rem;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 11% 60% 0 var(--inset);
	text-align: left;
}

.wpx-hero--film .wpx-hero__logo {
	/* Elementor image widget: margin-top 20% of content width. */
	margin: 20% 0 0;
}

.wpx-hero--film .wpx-hero__logo img {
	display: block;
	width: auto;
	max-width: min(100%, 293px);
	max-height: none;
	height: auto;
	object-fit: contain;
}

.wpx-hero--film .wpx-hero__synopsis {
	margin: 0;
	max-width: 34rem;
	font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
	font-weight: 300;
	line-height: 1.55;
	color: var(--c-white);
}

.wpx-hero--film .wpx-hero__synopsis p {
	margin: 0;
}

.wpx-hero--film .wpx-hero__credits {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.75rem;
	align-items: center;
	margin: 0.35rem 0 0;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.075em;
	line-height: 1.2;
	text-transform: uppercase;
	color: rgb(255 255 255 / 80%);
}

.wpx-hero--film .wpx-hero__credit {
	display: inline-block;
}

.wpx-hero--film .wpx-hero__credit a {
	color: inherit;
	text-decoration: none;
}

.wpx-hero--film .wpx-hero__footer {
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	align-items: flex-end;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 1% var(--inset) 4%;
}

.wpx-hero--film .wpx-watch__list {
	justify-content: flex-end;
	margin: 0;
	gap: 2.5rem;
}

.wpx-hero--film .wpx-watch__card {
	min-width: 7.5rem;
	max-width: 6.25rem;
	padding: 0.625rem;
	gap: 0;
}

.wpx-hero--film .wpx-watch__card:hover,
.wpx-hero--film .wpx-watch__card:focus-visible {
	background: rgb(255 255 255 / 10%);
	backdrop-filter: blur(5px);
	opacity: 1;
}

.wpx-hero--film .wpx-watch__logo {
	width: auto;
	height: 1.875rem;
	max-width: 3.125rem;
	margin-bottom: 0.75rem;
	/* Keep platform brand colour (YouTube red) — do not flatten to white. */
	filter: none;
}

.wpx-hero--film .wpx-watch__eyebrow {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.125em;
	line-height: 1.2;
	text-transform: uppercase;
}

.wpx-hero--film .wpx-watch__label {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.2;
	text-transform: uppercase;
}

.wpx-hero--film .wpx-hero__laurels {
	justify-content: flex-start;
	margin: 0;
	flex: 0 1 45%;
	max-width: 45.5%;
	gap: 0.5rem;
}

.wpx-hero--film .wpx-hero__laurels img {
	max-height: 4.5rem;
	width: auto;
}

.wpx-hero--film .wpx-hero__laurels-spacer {
	flex: 0 1 45%;
}

@media (width <= 48rem) {
	.wpx-hero--film .wpx-hero__body {
		padding: 35% 9% 1% var(--inset);
	}

	.wpx-hero--film .wpx-hero__logo {
		margin-top: 0;
	}

	.wpx-hero--film .wpx-hero__logo img {
		max-width: min(100%, 205px);
	}

	.wpx-hero--film .wpx-hero__footer {
		padding: 0 var(--inset) 4%;
	}

	.wpx-hero--film .wpx-hero__laurels {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

.wpx-hero__logo img {
	width: auto;
	max-width: min(100%, 26rem);
	max-height: 9rem;
	object-fit: contain;
}

.wpx-hero__synopsis {
	margin: 0;
}

.wpx-hero__credits {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: center;
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.wpx-hero__credits a {
	color: inherit;
}

.wpx-hero__laurels {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	align-items: center;
	margin: var(--sp-7) 0 0;
	padding: 0;
	list-style: none;
}

.wpx-hero__laurels img {
	width: auto;
	max-height: 4.5rem;
	object-fit: contain;
}

/* ---------- Corridor gradient hero ---------- */
/*
 * Corridor singles: production Elementor hero is 100vh with a radial multiply
 * wash from bottom-left and the formed-date callout under the synopsis.
 */
.single-corridor-project .wpx-hero--gradient.has-media {
	min-height: 100svh;
	padding-block: var(--sp-10) var(--sp-8);
	overflow: hidden;
	background: var(--wpx-post-2, var(--c-nav));
}

.single-corridor-project .wpx-hero--gradient .wpx-hero__media {
	/* Opaque fallback so any decode gap is night, not the hero olive. */
	background: var(--c-night);
}

.single-corridor-project .wpx-hero--gradient .wpx-hero__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-corridor-project .wpx-hero--gradient .wpx-hero__media::before {
	position: absolute;
	inset: 0;
	z-index: 2;
	background-image: radial-gradient(at bottom left, rgb(5 5 5 / 66%) 15%, rgb(35 40 42 / 1%) 56%);
	mix-blend-mode: multiply;
	opacity: 0.83;
	pointer-events: none;
	content: '';
}

.single-corridor-project .wpx-hero--gradient .wpx-hero__fade {
	z-index: 3;
	background:
		linear-gradient(
			180deg,
			rgb(var(--wpx-grad-from-rgb, 134 143 116) / 0%) 45%,
			rgb(var(--wpx-grad-to-rgb, 54 70 53) / 55%) 100%
		),
		radial-gradient(
			120% 90% at 0% 100%,
			rgb(var(--wpx-grad-to-rgb, 54 70 53) / 45%) 0%,
			rgb(var(--wpx-grad-to-rgb, 54 70 53) / 0%) 62%
		);
}

.single-corridor-project .wpx-hero--gradient .wpx-hero__body {
	z-index: 4;
	/* Same horizontal inset as the meta-band’s wide container below. */
	max-width: var(--w-wide);
}

.single-corridor-project .wpx-hero--gradient .wpx-hero__title {
	max-width: 16ch;
	font-weight: 400;
}

.single-corridor-project .wpx-hero--gradient .wpx-hero__subtitle {
	max-width: 42rem;
	font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.05rem);
	line-height: 1.55;
	font-weight: 300;
}


/* ---------- Watch links ---------- */

.wpx-watch__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-6);
	margin: var(--sp-3) 0 0;
	padding: 0;
	list-style: none;
}

.wpx-watch__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-1);
	min-width: 7rem;
	padding: var(--sp-3);
	color: inherit;
	text-align: center;
	text-decoration: none;
	transition: background var(--dur) var(--ease);
}

.wpx-watch__card:hover,
.wpx-watch__card:focus-visible {
	background: rgb(255 255 255 / 10%);
	backdrop-filter: blur(5px);
}

/*
 * The platform logos are supplied in their brand colours, several of them dark
 * navy or black, which disappear against the hero. Flattening them to white
 * keeps the row legible and consistent.
 */
.wpx-watch__logo {
	width: auto;
	height: 1.875rem;
	max-width: 9rem;
	margin-bottom: var(--sp-2);
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.wpx-watch__eyebrow,
.wpx-watch__label {
	font-size: var(--fs-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.wpx-watch__label {
	font-weight: 600;
}

/* ---------- Metadata band ---------- */

.wpx-meta-band__intro {
	max-width: var(--w-prose);
	margin-bottom: var(--sp-8);
}

.wpx-meta-band__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--sp-7) var(--gutter);
	margin: 0;
}

@media (width >= 48rem) {
	.wpx-meta-band__item.is-wide {
		grid-column: span 2;
	}
}

.wpx-meta-band__item dt {
	margin-bottom: var(--sp-2);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	opacity: 0.7;
}

.wpx-meta-band__item dd {
	margin: 0;
	line-height: var(--lh-body);
}

.wpx-meta-band__item dd p:first-child {
	margin-top: 0;
}

.wpx-meta-band__links {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpx-meta-band__links a {
	color: inherit;
	text-decoration: none;
}

.wpx-meta-band__links a:hover,
.wpx-meta-band__links a:focus-visible {
	opacity: 0.65;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------- Film overview ---------- */
/*
 * Post-hero band on film singles: ACF film_alternative_color →
 * film_alternative_color_2 gradient, dark meta panel, goal/outcome splits,
 * yellow outcome stats.
 */

.wpx-film-overview {
	color: var(--c-white);
	background: linear-gradient(
		180deg,
		var(--wpx-post-1, var(--c-nav)) 0%,
		var(--wpx-post-2, var(--c-pine)) 100%
	);
}

/* Corridor: same layout, page palette (Project Color 1 → 2). */
.wpx-film-overview--corridor {
	color: var(--wpx-post-on-2, var(--c-white));
	background: linear-gradient(
		180deg,
		var(--wpx-post-1, var(--c-nav)) 0%,
		var(--wpx-post-2, var(--c-secondary)) 100%
	);
}

.wpx-film-overview__meta-item.is-wide {
	grid-column: 1 / -1;
}

.wpx-film-overview__meta-item.is-wide dd {
	font-weight: 300;
	line-height: 1.5;
}

.wpx-film-overview__meta-item.is-wide dd p {
	margin: 0 0 0.5em;
}

.wpx-film-overview__meta-item.is-wide dd p:last-child {
	margin-bottom: 0;
}

.wpx-film-overview__top {
	display: grid;
	gap: var(--sp-7);
	align-items: start;
	padding-bottom: var(--sp-8);
	border-bottom: 1px solid rgb(255 255 255 / 22%);
}

@media (width >= 64rem) {
	.wpx-film-overview__top {
		grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.9fr);
		gap: var(--sp-8) var(--sp-7);
	}
}

.wpx-film-overview__title,
.wpx-film-overview__heading {
	margin: 0 0 var(--sp-4);
	color: inherit;
	font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
	font-weight: 400;
	line-height: 1.15;
}

.wpx-film-overview__prose {
	max-width: 42rem;
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: var(--lh-body);
}

.wpx-film-overview__prose p {
	margin: 0 0 1em;
}

.wpx-film-overview__prose p:last-child {
	margin-bottom: 0;
}

.wpx-film-overview__prose a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.wpx-film-overview__meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-5) var(--sp-5);
	margin: 0;
	padding: var(--sp-5) var(--sp-6);
	color: var(--c-white);
	background: rgb(37 42 45 / 72%);
}

.wpx-film-overview__meta-item dt {
	margin: 0 0 0.35rem;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: var(--tracking-wide);
	line-height: 1.3;
	text-transform: uppercase;
	opacity: 0.72;
}

.wpx-film-overview__meta-item dd {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 400;
	line-height: 1.4;
}

.wpx-film-overview__links {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpx-film-overview__links a {
	color: inherit;
	text-decoration: none;
}

.wpx-film-overview__links a:hover,
.wpx-film-overview__links a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.wpx-film-overview__awards {
	padding-block: var(--sp-7);
	border-bottom: 1px solid rgb(255 255 255 / 22%);
}

.wpx-film-overview__eyebrow {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	opacity: 0.72;
}

.wpx-film-overview__awards .wpx-film-overview__prose {
	max-width: 36rem;
}

.wpx-film-overview__awards .wpx-film-overview__prose p {
	margin: 0 0 0.4em;
}

.wpx-film-overview__award-list {
	max-width: 40rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.55;
}

.wpx-film-overview__award-list li + li {
	margin-top: 0.35em;
}

.wpx-film-overview__split {
	display: grid;
	gap: var(--sp-4);
	padding-block: var(--sp-8);
	border-bottom: 1px solid rgb(255 255 255 / 22%);
}

@media (width >= 56rem) {
	.wpx-film-overview__split {
		grid-template-columns: minmax(12rem, 0.35fr) minmax(0, 1fr);
		gap: var(--sp-6) var(--sp-7);
		align-items: start;
	}
}

.wpx-film-overview__outcome {
	padding-top: 0;
}

.wpx-film-overview__outcome > .wpx-film-overview__split {
	border-bottom: 0;
	padding-bottom: var(--sp-6);
}

.wpx-film-overview__stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-6);
	margin: 0;
	padding-top: var(--sp-2);
	padding-bottom: var(--sp-2);
}

@media (width >= 48rem) {
	.wpx-film-overview__stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--sp-6) var(--sp-5);
	}
}

.wpx-film-overview__stat {
	text-align: center;
}

.wpx-film-overview__stat dt {
	margin: 0 0 0.4rem;
	color: var(--c-sunrise);
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
}

.wpx-film-overview__stat dd {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 300;
	line-height: 1.35;
	color: rgb(255 255 255 / 92%);
}

/*
 * Heading-less outcome facts: promote the text into the gold/bold treatment
 * used by the numeric headings.
 */
.wpx-film-overview__stat.is-text-only {
	display: flex;
	align-items: center;
	justify-content: center;
}

.wpx-film-overview__stat.is-text-only dt {
	margin: 0;
	font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.35rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
}