/* Homepage banner: video behind the red headline panel and dark bar.
   Base 1025px+ (ramps on vw), tablet 768–1024px, mobile 767px and down. */

.homepage-banner,
.homepage-banner *,
.homepage-banner *::before,
.homepage-banner *::after {
	box-sizing: border-box;
}

.homepage-banner {
	--banner-height: 49.5vw;
	/* Type ramps from laptop 1280 to desktop 1920; the floors hold below that. */
	--banner-headline-size: clamp(36px, calc(1.875vw + 12px), 48px);
	--banner-art-width: 23%;
	/* Pulls the wings back over their artwork's inset leading edge. */
	--banner-art-pull: calc(var(--banner-headline-size) * 1.1);
	--banner-wings-width: 28%;
	--banner-pad: clamp(24px, 2.3vw, 44px);
	/* The wings' ~16° lean. CSS can't derive tan(16°) × height, so each slant
	   is an em of the type that sets that height. */
	--banner-slant: 1.45em;
	--banner-bar-slant: 2.75em;
	/* Share of the slant added to the bar's start padding. Under 1 because the
	   text sits lower, where the diagonal has already cut back in. */
	--banner-bar-inset: .8;
	--banner-bar-width: 49%;
	/* Shared by the bar's cut and the hatching, so they stay parallel. */
	--banner-angle: 106deg;
	--banner-stripe-gap: 14px;
	--banner-stripe-color: rgb(0 0 0 / .55);
	--banner-lede-size: clamp(20px, calc(.625vw + 12px), 24px);
	--banner-action-size: 15px;

	position: relative;
	display: flex;
	/* Rows pinned to the bottom. Not grid: the absolute video takes no cell,
	   so the headline would land in the spacer row and stretch. */
	flex-direction: column;
	justify-content: flex-end;
	min-height: var(--banner-height);
	margin-block: 0 !important; /* Same blockGap override as the card grid. */
	color: var(--white);
	font-family: forma-djr-micro, sans-serif;
	overflow: hidden;
}

.homepage-banner__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Both rows sit above the video and stretch their children to full height. */
.homepage-banner__headline-row,
.homepage-banner__bar-row {
	position: relative;
	display: flex;
	align-items: stretch;
}

.homepage-banner__headline {
	width: fit-content;
	max-width: 100%;
	margin: 0;
	/* End padding carries the slant, so the diagonal cuts space, not type. */
	padding: var(--banner-pad);
	padding-inline-end: calc(var(--banner-pad) + var(--banner-slant));
	background: var(--red-1);
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--banner-slant)) 100%, 0 100%);
	font-family: guildhall-wide, sans-serif;
	font-size: var(--banner-headline-size);
	font-weight: 500;
	font-style: italic;
	line-height: 1.15;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* One stat per line, never reflowed: the longest line sets the panel width. */
.homepage-banner__line {
	display: block;
	white-space: nowrap;
}

/* Masked so theme tokens set the colour. url() resolves against this file,
   so the path works in the editor and on the front end. */
.homepage-banner__art,
.homepage-banner__wings,
.homepage-banner__action-icon {
	mask-size: contain;
	mask-repeat: no-repeat;
}

/* Filled wings trailing off the panel's right edge. */
.homepage-banner__art {
	/* Sized by the panel's height, not the box width, so short laptops don't
	   shrink it; it grows into the free row and the banner clips the overflow. */
	flex: 1 0 var(--banner-art-width);
	margin-inline-start: calc(var(--banner-art-pull) * -1);
	background-color: var(--red-1);
	mask-image: url('wings-filled.svg');
	mask-size: auto 100%;
	mask-position: left center;
}

/* Gold wireframe, anchored to the panel's top edge so it stays on the panel
   however tall the video gets. */
.homepage-banner__wings {
	position: absolute;
	inset-block-end: 100%;
	inset-inline-start: 0;
	width: var(--banner-wings-width);
	aspect-ratio: 629 / 409;
	background-color: var(--gold-1);
	mask-image: url('wings-outlined.svg');
	mask-position: left top;
}

/* Hatching beside the bar. It runs on under the bar's diagonal (negative
   margin), and the mask stops it exactly on that cut. */
.homepage-banner__stripes {
	flex: 1;
	margin-inline-end: calc(var(--banner-bar-slant) * -1);
	background: repeating-linear-gradient(
		var(--banner-angle),
		transparent 0 var(--banner-stripe-gap),
		var(--banner-stripe-color) var(--banner-stripe-gap) calc(var(--banner-stripe-gap) + 1px)
	);
	/* Layer 1 covers the overlap, which shares the bar's top-left corner, so the
	   bar's own hard stop traces the same line. Layer 2 keeps the rest. */
	mask:
		linear-gradient(var(--banner-angle), #000 var(--banner-bar-slant), transparent var(--banner-bar-slant)) right top / var(--banner-bar-slant) 100% no-repeat,
		linear-gradient(#000, #000) left top / calc(100% - var(--banner-bar-slant)) 100% no-repeat;
}

/* A gradient hard stop, not clip-path, so the angle holds at any bar height.
   Start padding keeps the text off the diagonal. */
.homepage-banner__bar {
	flex: 0 0 var(--banner-bar-width);
	padding: var(--banner-pad);
	padding-inline-start: calc(var(--banner-pad) + var(--banner-bar-slant) * var(--banner-bar-inset));
	background: linear-gradient(
		var(--banner-angle),
		transparent 0 var(--banner-bar-slant),
		/* 75% so the video shows through; the text stays fully opaque. */
		color-mix(in srgb, var(--gray-8) 75%, transparent) var(--banner-bar-slant)
	);
	/* The nav bar's frost. The mask repeats the background's hard stop so the
	   blur stops on the diagonal instead of filling the box's corner. */
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	mask: linear-gradient(var(--banner-angle), transparent var(--banner-bar-slant), #000 var(--banner-bar-slant));
}

.homepage-banner__lede {
	margin: 0 0 .9em;
	font-size: var(--banner-lede-size);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.homepage-banner__actions {
	display: flex;
	justify-content: flex-end;
	padding-block-start: .9em;
	border-block-start: 1px solid var(--gold-1);
}

.homepage-banner__action {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: var(--banner-action-size);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .15s ease;
}

/* Takes the text colour, so it turns gold on hover with the label. */
.homepage-banner__action-icon {
	flex: none;
	background-color: currentColor;
}

.homepage-banner__action-icon--scroll {
	width: 10px;
	height: 12px;
	mask-image: url('icon-scroll.svg');
}

.homepage-banner__action:is(:hover, :focus-visible) {
	color: var(--gold-1);
}

/* Intro: five 200ms steps, each starting as the last ends. The row slides,
   not the panel, so the red wing tail travels with it. */
@media (prefers-reduced-motion: no-preference) {
	.homepage-banner { --banner-step: 200ms; }
	.homepage-banner__headline-row {
		animation: homepage-banner-from-left var(--banner-step) ease-out both;
	}
	.homepage-banner__line {
		animation: homepage-banner-fade var(--banner-step) var(--banner-step) both;
	}
	.homepage-banner__bar {
		animation: homepage-banner-from-right var(--banner-step) calc(var(--banner-step) * 2) ease-out both;
	}
	.homepage-banner__lede,
	.homepage-banner__actions {
		animation: homepage-banner-fade var(--banner-step) calc(var(--banner-step) * 3) both;
	}
	.homepage-banner__wings,
	.homepage-banner__stripes {
		animation: homepage-banner-fade var(--banner-step) calc(var(--banner-step) * 4) both;
	}
}

@keyframes homepage-banner-from-left { from { transform: translateX(-100%); } }
@keyframes homepage-banner-from-right { from { transform: translateX(100%); } }
@keyframes homepage-banner-fade { from { opacity: 0; } }

/* TABLET: taller frame, and the red wing tail goes. */
@media (max-width: 1024px) {
	.homepage-banner {
		--banner-height: 112vw;
		--banner-headline-size: 32px;
		--banner-bar-width: 66%;
		--banner-bar-slant: 2em;
		--banner-wings-width: 37%;
		--banner-lede-size: 20px;
	}
	.homepage-banner__art { display: none; }
}

/* MOBILE: nearly a full viewport tall. */
@media (max-width: 767px) {
	.homepage-banner {
		--banner-height: 195vw;
		/* 20px on the 430px comp; scales below so its line breaks hold on narrower phones. */
		--banner-headline-size: min(20px, 4.65vw);
		--banner-pad: 16px;
		--banner-bar-width: 85%;
		/* Slants must clear tan(angle) × height or the corner notches. The
		   stacked actions make the bar tall, hence the big number. */
		--banner-slant: 2.5em;
		--banner-bar-slant: 3.6em;
		/* Past the slant: at .8 the heading crowds the diagonal. */
		--banner-bar-inset: 1.1;
		--banner-wings-width: 51%;
		--banner-lede-size: 18px;
	}
	/* Too narrow for one line per stat, so they wrap and the panel goes full width. */
	.homepage-banner__headline {
		width: 100%;
		letter-spacing: .05em;
	}
	.homepage-banner__line { white-space: normal; }
	/* One blank line between stats, so the three still read as three. */
	.homepage-banner__line + .homepage-banner__line { margin-block-start: 1.3em; }
	/* No hatching here — the strip beside the bar is plain video. */
	.homepage-banner__stripes { background: none; }
}