/*
 * Jersey Bulls FC — FeatureHero component
 *
 * Full-bleed, media-led hero (video or photography) for the full-launch
 * home/section headers. Adapted from the Juventus/PSG teardown:
 * darkened media plate + scrim, oversized uppercase display headline,
 * mono kicker, CTA cluster, optional next-fixture chip.
 *
 * Spec: design-research/synthesis-bulls.md (FeatureHero)
 * Markup: template-parts/feature-hero.php · tokens: css/tokens.css
 * CTA buttons reuse .bulls-cta-button variants from css/components/buttons.css.
 */

/* ============================================================
 * Shell — full-bleed dark surface, media behind content
 * ============================================================ */

.bulls-feature-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: clamp(480px, 78vh, 860px);
	background: var(--c-ink-900);
	color: var(--c-white);
	isolation: isolate;
}

.bulls-feature-hero--align-centre {
	align-items: center;
	text-align: center;
}

/* ============================================================
 * Media plate — video / image / gradient fallback + scrim
 * ============================================================ */

.bulls-feature-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
}

.bulls-feature-hero__video,
.bulls-feature-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Background hero video — never interactive; suppress the native media controls that
   some mobile browsers overlay on an autoplaying inline <video>. */
.bulls-feature-hero__video { pointer-events: none; }
.bulls-feature-hero__video::-webkit-media-controls,
.bulls-feature-hero__video::-webkit-media-controls-enclosure,
.bulls-feature-hero__video::-webkit-media-controls-panel,
.bulls-feature-hero__video::-webkit-media-controls-start-playback-button {
	display: none !important;
	-webkit-appearance: none;
}

/* The parent theme wraps the background video in a MediaElement.js player. Make it a
   plain background: hide its controls/overlay (display:none also drops them from the
   focus order, fixing the aria-hidden focus trap) and let the video fill the plate. */
.bulls-feature-hero .mejs-container,
.bulls-feature-hero .mejs-mediaelement,
.bulls-feature-hero .mejs-mediaelement video {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	background: transparent !important;
}
.bulls-feature-hero .mejs-mediaelement video { object-fit: cover; }
.bulls-feature-hero .mejs-container { pointer-events: none; }
.bulls-feature-hero .mejs-controls,
.bulls-feature-hero .mejs-overlay-button,
.bulls-feature-hero .mejs-overlay-play,
.bulls-feature-hero .mejs-overlay-loading,
.bulls-feature-hero .mejs-poster,
.bulls-feature-hero .mejs-time-rail { display: none !important; }

/* Mobile: the hero VIDEO now plays (Nathan, 12 Jun — it's a 3.1MB muted loop
   and the native-controls overlay problem is solved by the suppression rules
   above). Reduced-motion still gets the poster; the mejs wrapper stays dead. */
@media (max-width: 768px) {
	.bulls-feature-hero .mejs-container { display: none !important; }
}

/* No real media supplied (dev/demo, or before assets land) — brand gradient + crest. */
.bulls-feature-hero--no-media .bulls-feature-hero__media {
	background: var(--grad-ink);
}

.bulls-feature-hero__crest {
	position: absolute;
	top: 50%;
	right: -6%;
	transform: translateY(-50%);
	width: 52%;
	max-width: 680px;
	opacity: var(--opacity-watermark);
	pointer-events: none;
}

.bulls-feature-hero__crest img {
	width: 100%;
	height: auto;
	display: block;
}

/* Scrim keeps the headline legible over any media. */
.bulls-feature-hero__scrim {
	position: absolute;
	inset: 0;
	background: var(--scrim-full);
}

.bulls-feature-hero--align-left .bulls-feature-hero__scrim {
	background: var(--scrim-left), var(--scrim-bottom);
}

/* ============================================================
 * Content stack
 * ============================================================ */

.bulls-feature-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--content-full);
	margin: 0 auto;
	padding: var(--space-12) var(--gutter);
	/* no global box-sizing reset: width:100% + gutter padding = content-box
	   overflow, pushing the hero CTAs past the right viewport edge on mobile */
	box-sizing: border-box;
}

.bulls-feature-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	max-width: 760px;
}

.bulls-feature-hero--align-centre .bulls-feature-hero__content {
	margin-inline: auto;
	align-items: center;
}

.bulls-feature-hero__kicker {
	margin: 0;
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-bulls-red-300);
}

.bulls-feature-hero__headline {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp(var(--fs-700), 5.5vw, var(--fs-900));   /* 48 → 96px — dialled back 2026-06-10 (client) */
	line-height: 0.95;
	letter-spacing: var(--ls-tight);
	text-transform: uppercase;
	font-weight: var(--fw-bold);
	color: var(--c-white);
}

.bulls-feature-hero__sub {
	margin: 0;
	font-family: var(--ff-sans);
	font-size: var(--fs-200);
	line-height: var(--lh-base);
	color: var(--c-white-82);
	max-width: 56ch;
}

/* ----- CTA cluster (reuses .bulls-cta-button) ----- */

.bulls-feature-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-2);
}

/* Arrow handled by canonical .bulls-cta-button__arrow (css/components/buttons.css). */

/* ----- Next-fixture chip ----- */

.bulls-feature-hero__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-2);
	padding: var(--space-2) var(--space-4);
	background: var(--c-white-08);
	border: 1px solid var(--c-white-18);
	border-radius: var(--radius-pill);
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-white);
	text-decoration: none;
	backdrop-filter: blur(4px);
	transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

a.bulls-feature-hero__chip:hover,
a.bulls-feature-hero__chip:focus-visible {
	background: var(--c-white-18);
	border-color: var(--c-white-50);
}

.bulls-feature-hero__chip-label {
	color: var(--c-bulls-red-300);
}

.bulls-feature-hero__chip:focus-visible {
	outline: 2px solid var(--c-focus-ring);
	outline-offset: 3px;
}

/* ============================================================
 * Responsive
 * ============================================================ */

@media (max-width: 767px) {
	.bulls-feature-hero {
		min-height: clamp(360px, 64vh, 560px);
	}

	.bulls-feature-hero__inner {
		padding: var(--space-8) var(--gutter-sm);
	}


	.bulls-feature-hero__content {
		gap: var(--space-4);
	}

	.bulls-feature-hero__sub {
		font-size: var(--fs-100);
		max-width: 34ch;   /* wrap the lede within the visible column on small screens */
	}

	.bulls-feature-hero__ctas {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.bulls-feature-hero--align-centre .bulls-feature-hero__ctas {
		align-items: center;
	}

	.bulls-feature-hero .bulls-cta-button {
		justify-content: center;
	}
}

/* ============================================================
 * Reduced motion — show poster, no autoplay motion, static arrow
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.bulls-feature-hero__video {
		display: none;
	}

	/* .bulls-cta-button__arrow transition: none handled by buttons.css prefers-reduced-motion scope. */
}

/* ============================================================
 * Side rails (Juventus-style UI flanking the video) — desktop only
 * ============================================================ */

/* Inset the content column on desktop so it clears the edge rails. */
@media (min-width: 1024px) {
	.bulls-feature-hero__inner { padding-inline: clamp(72px, 7vw, 132px); }
}

/* Left and right rails share the same top line (client: consistent alignment). */
.bulls-feature-hero__social { position: absolute; z-index: 2; top: 148px; }
/* Quicklinks run BENEATH the corner mark — together they form the Juventus
   left column (logo 100px from y=8, rail immediately under it). */
.bulls-feature-hero__quicklinks { position: absolute; z-index: 2; top: 148px; }

/* Shared rail icon-button — sized to the live Juventus rails (left-rail glyphs
   measure 40px, socials 32px boxes, 2026-06-10): generous marks in 48px hit areas,
   with a ring that resolves on hover/focus. */
.bulls-feature-hero__social ul,
.bulls-feature-hero__quicklinks ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
}
/* Top connector hairline (Juventus rail detail). */
.bulls-feature-hero__social ul::before,
.bulls-feature-hero__quicklinks ul::before {
	content: ""; width: 1px; height: var(--space-6);
	margin-bottom: var(--space-1); background: var(--c-white-50);
}
.bulls-feature-hero__social a,
.bulls-feature-hero__quicklinks a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px;
	color: var(--c-white);
	/* lift off busy photography */
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	box-sizing: border-box;
	transition: color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.bulls-feature-hero__social svg { width: 24px; height: 24px; display: block; }
/* Left rail is the reference's primary icon nav — its marks run LARGE (Juve 40px). */
.bulls-feature-hero__quicklinks a { width: 56px; height: 56px; }
.bulls-feature-hero__quicklinks svg { width: 34px; height: 34px; display: block; }
.bulls-feature-hero__social a:hover,
.bulls-feature-hero__social a:focus-visible,
.bulls-feature-hero__quicklinks a:hover,
.bulls-feature-hero__quicklinks a:focus-visible {
	color: var(--c-bulls-red); background: var(--c-white);
	border-color: var(--c-white); transform: translateY(-2px);
}
.bulls-feature-hero__social a:focus-visible,
.bulls-feature-hero__quicklinks a:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 2px; }

/* Socials carry an always-on white circle (Juventus's _circle icon set);
   the quicklink rail stays bare marks, as on the reference. */
.bulls-feature-hero__social a {
	width: 44px; height: 44px;
	border-color: var(--c-white);
}
.bulls-feature-hero__social svg { width: 20px; height: 20px; }

/* Right rail — social. Left rail — quick-links. */
.bulls-feature-hero__social { right: clamp(var(--space-4), 2.5vw, var(--space-6)); }
.bulls-feature-hero__quicklinks { left: calc(clamp(var(--space-4), 2.5vw, var(--space-6)) + 12px); }

/* Quick-link labels fly out beside the icon on hover/focus (Juventus shows the
   section name on its rail); always available to screen readers. */
.bulls-feature-hero__quicklinks a { position: relative; }
.bulls-feature-hero__quicklink-label {
	position: absolute;
	left: calc(100% + var(--space-2));
	top: 50%;
	transform: translateY(-50%) translateX(-6px);
	padding: var(--space-1) var(--space-3);
	font-family: var(--ff-display);
	font-size: var(--fs-50);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--c-white);
	background: rgba(10, 10, 10, 0.78);
	border-radius: var(--radius-md);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.bulls-feature-hero__quicklinks a:hover .bulls-feature-hero__quicklink-label,
.bulls-feature-hero__quicklinks a:focus-visible .bulls-feature-hero__quicklink-label {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}
@media (prefers-reduced-motion: reduce) {
	.bulls-feature-hero__quicklink-label { transition: none; }
}

/* Rails are desktop chrome — hide on tablet/mobile (keeps the hero clean). */
@media (max-width: 1023px) {
	.bulls-feature-hero__social,
	.bulls-feature-hero__quicklinks { display: none; }
}

/* ============================================================
 * News-card row anchored to the hero bottom (Juventus pattern)
 * ============================================================ */

/* With cards present, the hero is block flow (not flex) so a sticky card strip
   gets the hero itself as its containing block. */
.bulls-feature-hero--has-cards {
	display: block;
	overflow: visible;
}
.bulls-feature-hero--has-cards .bulls-feature-hero__inner {
	padding-bottom: var(--space-6);
}
/* Parallax-feel card reveal (desktop, client 2026-06-11): the hero runs taller
   than one screen; the photo plate covers only the first viewport (scrolls
   away), while the card strip sticks near the foot of the screen and rises
   into full view as the background scrolls behind it — then releases. */
@media (min-width: 1024px) {
	/* The parent theme wraps content in .content_wrap_fullscreen with
	   `overflow: clip`, which kills position:sticky. Free it on the homepage so
	   the card strip can pin to the viewport. */
	body.home .content_wrap_fullscreen,
	body.home .page_content_wrap { overflow: visible !important; }

	.bulls-feature-hero--has-cards {
		min-height: 100vh;
	}
	/* Real layout box below the sticky cards = the hold distance (padding-bottom
	   does not extend a sticky child's range; a sibling box does). */
	.bulls-feature-hero--has-cards .bulls-feature-hero__cards-spacer { height: 0; }
	/* Photo plate covers only the first screen, then scrolls away. */
	.bulls-feature-hero--has-cards .bulls-feature-hero__media {
		position: absolute;
		inset: 0 0 auto 0;
		height: 100vh;
	}
	/* Copy block fills most of the first screen (252px down, client reference);
	   the card strip that follows peeks at the fold. */
	.bulls-feature-hero--has-cards .bulls-feature-hero__inner {
		min-height: calc(100vh - 168px);
		box-sizing: border-box;
		padding-top: 252px;
		padding-bottom: 0;
	}
	/* Peek at rest → rise as you scroll → HOLD at the sticky line below the bar
	   while the photo keeps scrolling away behind → release at the hero's foot.
	   The wrapper is the sticky element (a plain block); the inner carousel keeps
	   its own overflow-x scroller. */
	.bulls-feature-hero--has-cards .bulls-feature-hero__cards-sticky {
		position: sticky;
		top: 116px;
	}
	/* rails ride with the photo plate, not the tall section */
	.bulls-feature-hero--has-cards .bulls-feature-hero__social,
	.bulls-feature-hero--has-cards .bulls-feature-hero__quicklinks { position: absolute; }
}

/* Juventus showcase carousel: left edge aligns with the hero content column,
   the strip scrolls horizontally and BLEEDS OFF the right viewport edge — no
   right gutter at any width (a capped centred row left a dark scrimmed band
   to its right on wide screens). */
.bulls-feature-hero__cards {
	position: relative;
	z-index: 1;
	width: 100%;
	box-sizing: border-box;   /* no global reset — width:100% + gutter padding overflowed (content-box) */
	display: flex;
	gap: var(--space-3);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding: 0 0 var(--space-6) var(--gutter);
	scroll-padding-left: var(--gutter);
	/* Scroll affordance is the bleeding card edge (Juventus shows no bar either);
	   wheel/drag/keyboard scrolling and tab-into-view all still work. */
	scrollbar-width: none;
}
.bulls-feature-hero__cards::-webkit-scrollbar { display: none; }
.bulls-feature-hero__cards > * {
	flex: 0 0 clamp(260px, 24.4vw, 360px);   /* ≈351px at 1440 (Juve cards measure 316) */
	scroll-snap-align: start;
}
@media (min-width: 1024px) {
	.bulls-feature-hero__cards {
		/* Align the first card with the hero content column: centring offset of the
		   max-width inner (content-full + 2x132 = 1704) plus its fluid padding. */
		padding-left: calc(max(0px, (100vw - 1704px) / 2) + clamp(72px, 7vw, 132px));
		scroll-padding-left: calc(max(0px, (100vw - 1704px) / 2) + clamp(72px, 7vw, 132px));
	}
}

/* Portrait showcase cards — the Juventus card shape (316x500 measured live
   2026-06-10). The hero is min-height so the row grows it; like the reference,
   the card tops sit near the fold and the rest runs below it. */
.bulls-feature-hero__cards .bulls-news-card { aspect-ratio: var(--ar-portrait); }
.bulls-feature-hero__cards .bulls-news-card--overlay .bulls-news-card__media {
	aspect-ratio: auto;
	height: 100%;
}
.bulls-feature-hero__cards .bulls-news-card__body { padding: var(--space-4); }
.bulls-feature-hero__cards .bulls-news-card__title {
	font-size: var(--fs-500);   /* Juventus card titles measure 32px/700 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* Mobile — same carousel, near-full-width cards, firmer snap. */
@media (max-width: 600px) {
	.bulls-feature-hero__cards {
		scroll-snap-type: x mandatory;
		padding-bottom: var(--space-5);
	}
	.bulls-feature-hero__cards > * { flex-basis: 76%; }
}

/* ============================================================
 * M-1 fix — hero kicker clears the fixed header at ALL widths
 *
 * The hero's base 48px padding-top (--space-8) is not enough to
 * push the kicker below the fixed transparent header. Tiered to
 * the bar's actual heights after the 2026-06-10 header-scale pass:
 * ~88px up to 599px (64px min-height bar), ~102px from 600px
 * (76px min-height bar). Each tier adds breathing room on top.
 * ============================================================ */
@media (max-width: 599px) {
	.bulls-feature-hero__inner {
		padding-top: calc(88px + var(--space-5));   /* header + 24px breathing room */
	}
}
@media (min-width: 600px) {
	.bulls-feature-hero__inner {
		/* Also the floor for desktop short viewports, where the hero content
		   rides up to the padding edge (e.g. 1024x768 measured margin 0). */
		padding-top: calc(102px + var(--space-5));
	}
}
/* Homepage desktop: the corner logo + quicklink rail form a left COLUMN
   (Juventus) — the hero copy keeps its normal height but insets to the right
   of that column instead of running under it. */
@media (min-width: 1024px) {
	body.home .bulls-feature-hero__inner {
		padding-left: max(clamp(72px, 7vw, 132px), 176px);
	}
}