/*
 * Alodia Basketball Programs - home page hero.
 *
 * Loaded in the head on any page whose content or Beaver Builder layout
 * holds [abp_hero], because the hero is the first paint on the page.
 *
 * COLOUR NOTES, measured rather than chosen by eye.
 *
 * Text sits on navy scrim over moving footage, so contrast was measured
 * against real frames rather than against flat navy; see the scrim rules
 * below. The main button is the accent with NAVY text (7.9:1); white on the
 * accent would fail at 2.4:1, which is why the listing never puts text on
 * it.
 *
 * BEAVER BUILDER
 *
 * Beaver Builder styles every bare <button> and the theme styles every <a>
 * inside builder content, at a specificity a single class cannot beat. The
 * !important flags on the buttons and the pause control are the same
 * structural override the listing's stylesheet already carries, for the
 * same reason, and nowhere else.
 */

.abp-hero {
	--abp-hero-navy: #000e29;
	--abp-hero-navy-mid: #13294c;
	--abp-hero-accent: #78acd2;
	--abp-hero-white: #ffffff;

	/* The theme's own faces, loaded by its Adobe Fonts kit. */
	--abp-hero-display: scale-variable, "Archivo", "Arial Narrow", sans-serif;
	--abp-hero-label: area-normal, "Archivo", sans-serif;
	--abp-hero-body: inherit;

	--abp-hero-height: clamp(560px, 86vh, 880px);
	--abp-hero-height-phone: calc(100svh - 88px);
	--abp-hero-gutter: 12px;
	--abp-hero-max: 1360px;
	--abp-hero-pad-x: 40px;
	--abp-hero-pad-b: 56px;

	/* The grade: contrast up, colour down, shadows pulled to navy. */
	--abp-hero-grade: contrast(1.15) saturate(0.55) brightness(1);
	--abp-hero-tint: #13294c;
	--abp-hero-tint-opacity: 0.45;
	--abp-hero-grain-opacity: 0.55;

	position: relative;
	overflow: hidden;
	isolation: isolate;
	height: var(--abp-hero-height);
	min-height: 560px;
	background: var(--abp-hero-navy);
	color: var(--abp-hero-white);
	font-family: var(--abp-hero-body);
}

/* Parts left empty are written out hidden in the settings preview so they
   can be filled in live. Several of them are flex containers, which would
   otherwise beat the browser's own [hidden] rule. */
.abp-hero [hidden] {
	display: none !important;
}

.abp-hero:not(.abp-hero--graded) .abp-hero__tint,
.abp-hero:not(.abp-hero--graded) .abp-hero__grain {
	display: none;
}

/* --- Media: still image, then the panels on top of it ------------------- */

.abp-hero .abp-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.abp-hero--graded .abp-hero__media {
	filter: var(--abp-hero-grade);
}

.abp-hero .abp-hero__poster,
.abp-hero .abp-hero__poster-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	transition: opacity 0.4s ease;
}

/* Once every panel is playing the still steps aside, and the navy behind
   it shows in the gaps between panels. */
.abp-hero.is-playing .abp-hero__poster {
	opacity: 0;
}

.abp-hero .abp-hero__stage {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--abp-hero-gutter);
}

.abp-hero .abp-hero__stage[data-panels="1"] {
	grid-template-columns: minmax(0, 1fr);
}

.abp-hero .abp-hero__stage[data-panels="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.abp-hero .abp-hero__panel {
	position: relative;
	overflow: hidden;
	min-width: 0;
}

.abp-hero .abp-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
}

/* A hard cut, not a fade: the edit lives in the cuts. */
.abp-hero .abp-hero__video.is-on {
	opacity: 1;
}

/* --- Grade layers ------------------------------------------------------- */

.abp-hero .abp-hero__tint,
.abp-hero .abp-hero__grain,
.abp-hero .abp-hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.abp-hero .abp-hero__tint {
	z-index: 1;
	background: var(--abp-hero-tint);
	mix-blend-mode: soft-light;
	opacity: var(--abp-hero-tint-opacity);
}

.abp-hero .abp-hero__grain {
	z-index: 2;
	background-image: url("../img/abp-hero-grain.png");
	background-size: 180px 180px;
	mix-blend-mode: overlay;
	opacity: var(--abp-hero-grain-opacity);
}

.abp-hero .abp-hero__scrim {
	z-index: 3;
	background:
		linear-gradient(to bottom, rgba(0, 14, 41, 0.45) 0%, rgba(0, 14, 41, 0) 18%),
		linear-gradient(to top, rgba(0, 14, 41, 0.9) 0%, rgba(0, 14, 41, 0.6) 26%, rgba(0, 14, 41, 0.25) 44%, rgba(0, 14, 41, 0) 60%);
}

/* --- Copy --------------------------------------------------------------- */

.abp-hero .abp-hero__inner {
	position: absolute;
	z-index: 4;
	left: 0;
	right: 0;
	bottom: 0;
	box-sizing: border-box;
	max-width: var(--abp-hero-max);
	margin: 0 auto;
	padding: 0 var(--abp-hero-pad-x) var(--abp-hero-pad-b);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}

/* A second layer of scrim that follows the copy rather than the hero. The
   hero's own gradient is measured in percentages of its height, so on a
   short screen the top of a tall headline climbs out of it. This one starts
   120px above the copy whatever the height, is strongest behind the copy on
   the left and fades out toward the right, so the right hand panel keeps its
   action visible. Every text line was measured at 4.5:1 or better against
   the brightest 5% of the pixels behind it, over twelve frames of the
   starter clips, at 1920, 1440, 1366, 1280, 1024 and 390 wide. Brighter
   footage than that lowers it, which is one more reason the grade stays
   on. */
.abp-hero .abp-hero__inner::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -120px;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background: linear-gradient(to right, rgba(0, 14, 41, 0.74) 0, rgba(0, 14, 41, 0.74) calc(50vw - 50% + 920px), rgba(0, 14, 41, 0.3) calc(50vw - 50% + 1180px), rgba(0, 14, 41, 0.3) 100%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 120px);
	mask-image: linear-gradient(to bottom, transparent 0, #000 120px);
	pointer-events: none;
}

.abp-hero .abp-hero__copy {
	min-width: 0;
	max-width: 980px;
}

.abp-hero .abp-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 20px;
	padding: 0;
	font-family: var(--abp-hero-label);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	/* White, with the blue in the rule beside it. Small blue text over
	   moving footage measured as low as 3.9:1 on short screens; white over
	   the same frames stays above 9:1. */
	color: var(--abp-hero-white);
}

.abp-hero .abp-hero__rule {
	display: block;
	flex: 0 0 auto;
	width: 40px;
	height: 2px;
	background: var(--abp-hero-accent);
}

.abp-hero .abp-hero__title {
	margin: 0;
	padding: 0;
	font-family: var(--abp-hero-display);
	font-size: 76px;
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.012em;
	text-transform: none;
	color: var(--abp-hero-white);
	text-wrap: balance;
}

.abp-hero .abp-hero__line {
	display: block;
}

.abp-hero .abp-hero__line--accent {
	color: var(--abp-hero-accent);
}

.abp-hero .abp-hero__sub {
	margin: 22px 0 0;
	padding: 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--abp-hero-white);
}

.abp-hero .abp-hero__dot {
	margin: 0 0.45em;
	color: var(--abp-hero-accent);
}

.abp-hero .abp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 30px;
}

.abp-hero a.abp-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	box-sizing: border-box;
	min-height: 54px;
	padding: 0 28px !important;
	border-radius: 0;
	font-family: var(--abp-hero-label) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none !important;
	text-transform: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.abp-hero a.abp-hero__btn--primary {
	background: var(--abp-hero-accent) !important;
	border: 2px solid var(--abp-hero-accent) !important;
	color: var(--abp-hero-navy) !important;
}

.abp-hero a.abp-hero__btn--ghost {
	background: transparent !important;
	border: 2px solid var(--abp-hero-white) !important;
	color: var(--abp-hero-white) !important;
}

.abp-hero a.abp-hero__btn:hover,
.abp-hero a.abp-hero__btn:focus-visible {
	background: var(--abp-hero-white) !important;
	border-color: var(--abp-hero-white) !important;
	color: var(--abp-hero-navy) !important;
}

.abp-hero .abp-hero__arrow {
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}

.abp-hero a.abp-hero__btn:hover .abp-hero__arrow {
	transform: translateX(3px);
}

/* --- Hashtag and pause control ------------------------------------------ */

/* The tag lines up with the buttons; the pause control sits to its right,
   positioned against the hero itself so it can move to the top corner on
   phones. */
.abp-hero .abp-hero__meta {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	min-height: 54px;
	padding-right: 62px;
}

.abp-hero .abp-hero__tag {
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--abp-hero-white);
}

.abp-hero button.abp-hero__toggle {
	position: absolute;
	z-index: 5;
	right: max(var(--abp-hero-pad-x), calc((100% - var(--abp-hero-max)) / 2 + var(--abp-hero-pad-x)));
	bottom: calc(var(--abp-hero-pad-b) + 5px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 999px !important;
	border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
	background: rgba(0, 14, 41, 0.55) !important;
	color: var(--abp-hero-white) !important;
	box-shadow: none !important;
	cursor: pointer;
	line-height: 0;
}

.abp-hero button.abp-hero__toggle[hidden] {
	display: none;
}

.abp-hero button.abp-hero__toggle:hover {
	background: rgba(0, 14, 41, 0.85) !important;
	border-color: var(--abp-hero-white) !important;
}

.abp-hero .abp-hero__icon--play,
.abp-hero.is-paused .abp-hero__icon--pause {
	display: none;
}

.abp-hero.is-paused .abp-hero__icon--play {
	display: block;
}

.abp-hero a.abp-hero__btn:focus-visible,
.abp-hero button.abp-hero__toggle:focus-visible {
	outline: 3px solid var(--abp-hero-white) !important;
	outline-offset: 3px;
}

/* --- Smaller screens ---------------------------------------------------- */

@media (max-width: 1100px) {
	.abp-hero {
		--abp-hero-height: clamp(560px, 80vh, 760px);
	}
	.abp-hero .abp-hero__title {
		font-size: 60px;
	}
}

@media (max-width: 767px) {
	.abp-hero {
		--abp-hero-pad-x: 20px;
		--abp-hero-pad-b: 28px;
		height: calc(100vh - 88px);
		height: var(--abp-hero-height-phone);
	}
	.abp-hero .abp-hero__scrim {
		background:
			linear-gradient(to bottom, rgba(0, 14, 41, 0.4) 0%, rgba(0, 14, 41, 0) 14%),
			linear-gradient(to top, rgba(0, 14, 41, 0.9) 0%, rgba(0, 14, 41, 0.6) 40%, rgba(0, 14, 41, 0) 66%);
	}
	.abp-hero .abp-hero__inner::before {
		background: rgba(0, 14, 41, 0.74);
	}
	.abp-hero .abp-hero__inner {
		display: block;
	}
	.abp-hero .abp-hero__eyebrow {
		font-size: 12px;
		margin-bottom: 14px;
	}
	.abp-hero .abp-hero__rule {
		width: 32px;
	}
	.abp-hero .abp-hero__title {
		font-size: clamp(32px, 10vw, 42px);
		line-height: 1;
	}
	.abp-hero .abp-hero__sub {
		margin-top: 16px;
		font-size: 15px;
	}
	.abp-hero .abp-hero__actions {
		flex-direction: column;
		gap: 10px;
		margin-top: 22px;
	}
	.abp-hero a.abp-hero__btn {
		width: 100%;
		min-height: 52px;
	}
	.abp-hero .abp-hero__meta {
		display: none;
	}
	/* On phones the control moves to the top corner, clear of the copy. */
	.abp-hero button.abp-hero__toggle {
		top: 14px;
		right: 14px;
		bottom: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.abp-hero .abp-hero__poster,
	.abp-hero .abp-hero__poster-img,
	.abp-hero a.abp-hero__btn,
	.abp-hero .abp-hero__arrow {
		transition: none;
	}
}