/* Jersey Bulls FC — HighlightsFeature band ("Match Highlights" → YouTube).
 * Media-led, dark band: looping muted preview clip + "Watch full highlights" CTA.
 * Tokens only; mirrors the LastMatches / ShopPromo band conventions. */

.bulls-highlights {
	background: var(--c-ink-900);
	color: var(--c-text-inverse);
	/* top trimmed 13 Jun — the space-12 top read as a dead gap under the matches band */
	padding: var(--space-8) var(--space-5) var(--space-12);
}

.bulls-highlights__inner {
	max-width: var(--container, 1280px);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--space-8);
	align-items: center;
}

/* ---- Media ---- */
.bulls-highlights__media {
	position: relative;
}

.bulls-highlights__player {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-base);
	background: var(--c-black);
	box-shadow: var(--shadow-4);
	isolation: isolate;
}

/* The YouTube link now wraps just the play-button overlay (not the whole player),
   so the hover/focus scale moves to the player wrapper + play-link target. */
.bulls-highlights__play-link {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.bulls-highlights__play-link:focus-visible {
	outline: 2px solid var(--c-focus-ring);
	outline-offset: 3px;
}

.bulls-highlights__video,
.bulls-highlights__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--ease-emphasis);
}

/* Hover scale: parent div hover reaches all children. */
.bulls-highlights__player:hover .bulls-highlights__video,
.bulls-highlights__player:hover .bulls-highlights__poster {
	transform: scale(1.04);
}

.bulls-highlights__scrim {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%);
	z-index: 1;
}

.bulls-highlights__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 84px;
	height: 84px;
	display: grid;
	place-items: center;
	color: var(--c-white);
	background: var(--c-bulls-red);
	border-radius: var(--radius-pill);
	box-shadow: 0 10px 30px rgba(220, 15, 23, 0.45);
	z-index: 2;
	transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.bulls-highlights__play svg {
	margin-left: 3px; /* optically centre the triangle */
}

.bulls-highlights__player:hover .bulls-highlights__play {
	transform: scale(1.08);
	box-shadow: 0 14px 38px rgba(220, 15, 23, 0.6);
}

.bulls-highlights__badge {
	position: absolute;
	bottom: var(--space-4);
	right: var(--space-4);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: var(--c-bulls-red);
	color: var(--c-white);
	font-size: var(--fs-25);
	letter-spacing: 0.12em;   /* between --ls-wide (0.04em) and --ls-wider (0.08em) — intentional micro-caps density */
	text-transform: uppercase;
	font-weight: var(--fw-bold);
}

.bulls-highlights__badge b {
	font-variant-numeric: tabular-nums;
	opacity: 0.85;
}

/* ---- Intro / text ---- */
.bulls-highlights__kicker {
	margin: 0 0 var(--space-3);
	color: var(--c-bulls-red-400);
	font-size: var(--fs-50);
	letter-spacing: 0.16em;   /* wider than --ls-wider (0.08em) — intentional wide-cap spacing for the section kicker */
	text-transform: uppercase;
	font-weight: var(--fw-bold);
}

.bulls-highlights__title {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-600);
	line-height: 1.05;
	color: var(--c-white);
}

.bulls-highlights__meta {
	margin: 0 0 var(--space-6);
	color: var(--c-white-82);
	font-size: var(--fs-100);
}

.bulls-highlights__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-5);
}

/* .bulls-highlights__cta uses canonical .bulls-cta-button --primary (css/components/buttons.css). */

.bulls-highlights__channel {
	color: var(--c-white-82);
	/* 24px tap target (WCAG 2.2) without layout shift */
	padding-block: var(--space-2);
	margin-block: calc(-1 * var(--space-2));
	font-size: var(--fs-75);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	transition: color 0.2s var(--ease-out);
}

.bulls-highlights__channel:hover {
	color: var(--c-white);
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
	.bulls-highlights {
		padding: var(--space-7) var(--space-4) var(--space-10);
	}
	.bulls-highlights__inner {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}
	.bulls-highlights__play {
		width: 64px;
		height: 64px;
	}
	.bulls-highlights__title {
		font-size: var(--fs-500);
	}
}

/* ---- A11Y-02 — Pause/play toggle (WCAG 2.2.2) ---- */

/* Sits top-right of the player; revealed (hidden → visible) by highlights-video.js
   once the video is loaded and playing. Stays out of the DOM visibility until then
   so non-JS / poster-only states are unaffected. */
.bulls-highlights__playpause {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: var(--c-white-18);
	border: 1px solid var(--c-white-50);
	border-radius: var(--radius-pill);
	color: var(--c-white);
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

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

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

/* Icon swap — pause icon visible when playing (aria-pressed="false" means "press to pause");
   play icon visible when paused (aria-pressed="true" means "press to play"). */
.bulls-highlights__pp-play  { display: none; }
.bulls-highlights__pp-pause { display: block; }

.bulls-highlights__playpause[aria-pressed="true"] .bulls-highlights__pp-pause { display: none; }
.bulls-highlights__playpause[aria-pressed="true"] .bulls-highlights__pp-play  { display: block; }

@media (prefers-reduced-motion: reduce) {
	.bulls-highlights__video,
	.bulls-highlights__poster,
	.bulls-highlights__play,
	.bulls-highlights__playpause {
		transition: none;
	}
}