/**
 * Flexible Full-Width Hero
 *
 * Shared by the ALB module (ep_hero_flex) and the Gutenberg block
 * (reverselogix/hero-flex). Hand-authored — this component has no SCSS source.
 *
 * Design source: ReverseLogix Homepage Hero Concept (Figma), 1920px frames.
 * Type/spacing values below are the Figma numbers rounded to whole pixels.
 */

#top .ep-hero-flex,
.editor-styles-wrapper .ep-hero-flex {
	--hf-bg: #0c002f;
	--hf-heading: #f9f9f9;
	--hf-text: #ffffff;
	--hf-stat-bg: rgba(15, 19, 74, 0.55);
	--hf-accent-from: #ec2d23;
	--hf-accent-to: #ed9237;
	--hf-track: rgba(255, 255, 255, 0.32);
	--hf-track-active: #3e345a;
	--hf-radius: 9px;

	/* Horizontal gutter, matched to the 1920px frame's 76px inset. */
	--hf-gutter: clamp(24px, 4vw, 76px);

	position: relative;
	background-color: var(--hf-bg);
	color: var(--hf-text);
	overflow: hidden;
}

/*
 * The Gutenberg block renders inside Enfold's padded `.container`, so
 * `alignfull` alone doesn't reach the viewport edge — break it out manually.
 * The ALB module never carries this class ( it gets full-bleed from
 * `[av_section custom_container='fwd']` instead ), so this only ever matches
 * the block context, and only on the front end — the editor canvas has its
 * own width, not the real viewport, so this is deliberately left out of the
 * `.editor-styles-wrapper` companion rules above.
 */
#top .ep-hero-flex.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* -------------------------------------------------------------------------
 * Viewport + slides
 *
 * Every slide occupies the same single grid cell, so the hero is always as
 * tall as its tallest slide and crossfading never shifts the page.
 * ---------------------------------------------------------------------- */

#top .ep-hero-flex__viewport,
.editor-styles-wrapper .ep-hero-flex__viewport {
	display: grid;
	grid-template-areas: "slide";
}

#top .ep-hero-flex__slide,
.editor-styles-wrapper .ep-hero-flex__slide {
	grid-area: slide;
	min-width: 0;
}

/* Only the slider stacks + fades; single-media mode is a plain static block. */
#top .ep-hero-flex--has-slider .ep-hero-flex__slide,
.editor-styles-wrapper .ep-hero-flex--has-slider .ep-hero-flex__slide {
	opacity: 0;
	visibility: hidden;
	transition: opacity 600ms ease, visibility 600ms ease;
}

#top .ep-hero-flex--has-slider .ep-hero-flex__slide.is-active,
.editor-styles-wrapper .ep-hero-flex--has-slider .ep-hero-flex__slide.is-active {
	opacity: 1;
	visibility: visible;
}

/*
 * `hidden` is on inactive panels for assistive tech. Grid would collapse them
 * out of the stack, which breaks the shared-height trick, so re-display them
 * and rely on visibility/opacity above to hide them visually.
 */
#top .ep-hero-flex--has-slider .ep-hero-flex__slide[hidden],
.editor-styles-wrapper .ep-hero-flex--has-slider .ep-hero-flex__slide[hidden] {
	display: block;
}

#top .ep-hero-flex__inner,
.editor-styles-wrapper .ep-hero-flex__inner {
	display: grid;
	grid-template-columns: minmax(0, 711fr) minmax(0, 1029fr);
	align-items: center;
	gap: var(--hf-gutter);
	min-height: 640px;
}

/* No media chosen yet — let the copy use the full width instead of a void. */
#top .ep-hero-flex__slide--no-media .ep-hero-flex__inner,
.editor-styles-wrapper .ep-hero-flex__slide--no-media .ep-hero-flex__inner {
	grid-template-columns: minmax(0, 1fr);
	min-height: 0;
}

/* -------------------------------------------------------------------------
 * Text column
 * ---------------------------------------------------------------------- */

#top .ep-hero-flex__text,
.editor-styles-wrapper .ep-hero-flex__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 44px;
	padding: 80px 0 80px var(--hf-gutter);
	max-width: 711px;
}

#top .ep-hero-flex__headline,
.editor-styles-wrapper .ep-hero-flex__headline {
	margin: 0;
	color: var(--hf-heading);
	font-size: clamp(32px, 2.9vw, 55px);
	line-height: 1.24;
	letter-spacing: -0.033em;
	font-weight: 600;
	text-transform: none;
}

#top .ep-hero-flex__body,
.editor-styles-wrapper .ep-hero-flex__body {
	margin: -20px 0 0;
	font-size: clamp(16px, 0.95vw, 18px);
	line-height: 1.56;
	color: var(--hf-text);
}

#top .ep-hero-flex__body p,
.editor-styles-wrapper .ep-hero-flex__body p {
	margin: 0 0 0.75em;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

#top .ep-hero-flex__body p:last-child,
.editor-styles-wrapper .ep-hero-flex__body p:last-child {
	margin-bottom: 0;
}

/* Statistic callout ---------------------------------------------------- */

#top .ep-hero-flex__stat,
.editor-styles-wrapper .ep-hero-flex__stat {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 27px;
	border-radius: var(--hf-radius);
	background-color: var(--hf-stat-bg);
	align-self: stretch;
	max-width: 689px;
}

#top .ep-hero-flex__stat-value,
.editor-styles-wrapper .ep-hero-flex__stat-value {
	flex: 0 0 auto;
	font-size: clamp(30px, 2.3vw, 44px);
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;

	/* Gradient text, with a solid fallback for clients that ignore clipping. */
	color: var(--hf-accent-from);
	background-image: linear-gradient(90deg, var(--hf-accent-from), var(--hf-accent-to));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

#top .ep-hero-flex__stat-text,
.editor-styles-wrapper .ep-hero-flex__stat-text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: clamp(14px, 0.95vw, 18px);
	line-height: 1.6;
}

#top .ep-hero-flex__stat-text p,
.editor-styles-wrapper .ep-hero-flex__stat-text p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* Buttons -------------------------------------------------------------- */

#top .ep-hero-flex__buttons,
.editor-styles-wrapper .ep-hero-flex__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

#top .ep-hero-flex__button,
.editor-styles-wrapper .ep-hero-flex__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 21px 43px;
	border: 1px solid transparent;
	border-radius: var(--hf-radius);
	font-size: clamp(14px, 1vw, 20px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.012em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	color: #fff;
	transition: opacity 200ms ease, background-color 200ms ease, color 200ms ease;
}

#top .ep-hero-flex__button--primary,
.editor-styles-wrapper .ep-hero-flex__button--primary {
	background-image: linear-gradient(90deg, var(--hf-accent-from), var(--hf-accent-to));
}

#top .ep-hero-flex__button--secondary,
.editor-styles-wrapper .ep-hero-flex__button--secondary {
	border-color: #fff;
	background-color: transparent;
}

#top .ep-hero-flex__button:hover,
.editor-styles-wrapper .ep-hero-flex__button:hover,
#top .ep-hero-flex__button:focus,
.editor-styles-wrapper .ep-hero-flex__button:focus {
	color: #fff;
	opacity: 0.88;
}

#top .ep-hero-flex__button--secondary:hover,
.editor-styles-wrapper .ep-hero-flex__button--secondary:hover,
#top .ep-hero-flex__button--secondary:focus,
.editor-styles-wrapper .ep-hero-flex__button--secondary:focus {
	background-color: rgba(255, 255, 255, 0.12);
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Media column
 *
 * Bleeds to the right edge of the viewport and fades into the background at
 * the bottom, per the Figma frames.
 * ---------------------------------------------------------------------- */

#top .ep-hero-flex__media,
.editor-styles-wrapper .ep-hero-flex__media {
	position: relative;
	align-self: stretch;
	min-height: 100%;
	overflow: hidden;
}

#top .ep-hero-flex__media::after,
.editor-styles-wrapper .ep-hero-flex__media::after {
	/* Bottom scrim: 281px of 931px in the Figma frame ≈ 30%. */
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 30%;
	background-image: linear-gradient(to bottom, rgba(12, 0, 47, 0), var(--hf-bg));
	pointer-events: none;
}

#top .ep-hero-flex__media > img,
.editor-styles-wrapper .ep-hero-flex__media > img,
#top .ep-hero-flex__media > video,
.editor-styles-wrapper .ep-hero-flex__media > video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#top .ep-hero-flex__lottie,
.editor-styles-wrapper .ep-hero-flex__lottie {
	width: 100%;
	height: 100%;
}

/* -------------------------------------------------------------------------
 * Text pagination
 *
 * Per the Figma dev note this spans the full module width by default, below
 * the whole hero. `--pagination-text` keeps it aligned to the text column
 * instead, which is how the static comps drew it.
 * ---------------------------------------------------------------------- */

#top .ep-hero-flex__pagination-wrap,
.editor-styles-wrapper .ep-hero-flex__pagination-wrap {
	position: relative;
	padding: 32px var(--hf-gutter) 48px;
}

#top .ep-hero-flex__pagination,
.editor-styles-wrapper .ep-hero-flex__pagination {
	display: flex;
	align-items: flex-end;
	gap: 32px;

	/* Single row, never wraps; scrolls horizontally when it overflows. */
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
}

#top .ep-hero-flex__pagination::-webkit-scrollbar,
.editor-styles-wrapper .ep-hero-flex__pagination::-webkit-scrollbar {
	display: none;
}

#top .ep-hero-flex--pagination-text .ep-hero-flex__pagination,
.editor-styles-wrapper .ep-hero-flex--pagination-text .ep-hero-flex__pagination {
	max-width: 711px;
}

#top .ep-hero-flex__tab,
.editor-styles-wrapper .ep-hero-flex__tab {
	position: relative;
	flex: 0 0 auto;
	width: 199px;
	max-width: 45vw;
	margin: 0;
	padding: 0 0 20px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--hf-text);
	font-size: clamp(14px, 1vw, 20px);
	font-weight: 500;
	line-height: 1.2;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	opacity: 0.64;
	scroll-snap-align: start;
	transition: opacity 200ms ease;
}

#top .ep-hero-flex__tab:hover,
.editor-styles-wrapper .ep-hero-flex__tab:hover,
#top .ep-hero-flex__tab:focus-visible,
.editor-styles-wrapper .ep-hero-flex__tab:focus-visible {
	opacity: 1;
	background: none;
	color: var(--hf-text);
}

#top .ep-hero-flex__tab.is-active,
.editor-styles-wrapper .ep-hero-flex__tab.is-active {
	opacity: 1;
	color: var(--hf-heading);
}

#top .ep-hero-flex__tab-label,
.editor-styles-wrapper .ep-hero-flex__tab-label {
	display: block;
}

#top .ep-hero-flex__tab-track,
.editor-styles-wrapper .ep-hero-flex__tab-track {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background-color: var(--hf-track);
}

#top .ep-hero-flex__tab.is-active .ep-hero-flex__tab-track,
.editor-styles-wrapper .ep-hero-flex__tab.is-active .ep-hero-flex__tab-track {
	background-color: var(--hf-track-active);
}

#top .ep-hero-flex__tab-progress,
.editor-styles-wrapper .ep-hero-flex__tab-progress {
	display: block;
	width: 0;
	height: 100%;
	background-image: linear-gradient(90deg, var(--hf-accent-from), var(--hf-accent-to));
}

/*
 * The active tab's underline fills over the slide's duration. JS sets
 * --hf-progress-duration and toggles .is-running, so the bar restarts cleanly
 * on every slide change and freezes in place when autoplay is paused.
 */
#top .ep-hero-flex__tab.is-active .ep-hero-flex__tab-progress,
.editor-styles-wrapper .ep-hero-flex__tab.is-active .ep-hero-flex__tab-progress {
	width: 28%; /* Resting state matches the 56px-of-199px comp. */
}

#top .ep-hero-flex__tab.is-active .ep-hero-flex__tab-progress.is-running,
.editor-styles-wrapper .ep-hero-flex__tab.is-active .ep-hero-flex__tab-progress.is-running {
	animation: ep-hero-flex-progress var(--hf-progress-duration, 6000ms) linear forwards;
}

#top .ep-hero-flex__tab.is-active .ep-hero-flex__tab-progress.is-paused,
.editor-styles-wrapper .ep-hero-flex__tab.is-active .ep-hero-flex__tab-progress.is-paused {
	animation-play-state: paused;
}

@keyframes ep-hero-flex-progress {
	from {
		width: 0;
	}

	to {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * Responsive
 *
 * Mobile order per the Figma note: text + CTAs, then media, then pagination.
 * ---------------------------------------------------------------------- */

@media only screen and (max-width: 989px) {

	#top .ep-hero-flex__inner {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
		gap: 0;
	}

	#top .ep-hero-flex__text {
		gap: 32px;
		padding: 48px var(--hf-gutter);
		max-width: none;
	}

	#top .ep-hero-flex__stat {
		max-width: none;
	}

	#top .ep-hero-flex__media {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	#top .ep-hero-flex__pagination-wrap {
		padding: 24px var(--hf-gutter) 32px;
	}

	#top .ep-hero-flex__pagination {
		gap: 24px;
	}
}

@media only screen and (max-width: 767px) {

	#top .ep-hero-flex__buttons {
		align-self: stretch;
		flex-direction: column;
		align-items: stretch;
	}

	#top .ep-hero-flex__button {
		width: 100%;
		padding: 16px 24px;
	}

	#top .ep-hero-flex__stat {
		gap: 20px;
		padding: 20px;
	}

	#top .ep-hero-flex__tab {
		width: 160px;
	}
}

/* -------------------------------------------------------------------------
 * Reduced motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	#top .ep-hero-flex--has-slider .ep-hero-flex__slide {
		transition: none;
	}

	#top .ep-hero-flex__tab.is-active .ep-hero-flex__tab-progress.is-running {
		animation: none;
		width: 28%;
	}

	#top .ep-hero-flex__button,
	#top .ep-hero-flex__tab {
		transition: none;
	}
}