/**
 * Hero Time Backgrounds — front-end styles.
 *
 * Visibility model: every background/content layer for every time
 * slot is present in the DOM. Only the layer carrying the
 * `.htb-layer-active` class is visible; hero-scheduler.js (and the
 * per-instance inline boot script) toggle that class to switch slots.
 * Background layers are permanently absolutely-positioned (cheap,
 * fixed aspect box). The content layer is normally in-flow (so its
 * height follows whichever slot is active) and is only switched to
 * temporary absolute positioning by hero-scheduler.js for the brief
 * duration of a cross-fade — see `.htb-content-transitioning` below.
 */

.htb-hero {
	position: relative;
	overflow: hidden;
	min-height: 480px;
	width: 100%;
	box-sizing: border-box;
}

.htb-hero * {
	box-sizing: border-box;
}

/* --- Backgrounds --- */

.htb-hero-backgrounds {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: #0d0d0f;
}

.htb-hero-bg-layer {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var( --htb-duration, 800ms ) ease, transform var( --htb-duration, 800ms ) ease;
	will-change: opacity;
}

.htb-hero-bg-layer.htb-layer-active {
	opacity: 1;
	z-index: 1;
}

.htb-hero .htb-hero-bg-media,
.htb-hero-bg-media {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
	border: 0;
	margin: 0;
}

.htb-hero .htb-hero-bg-media.htb-fit-contain,
.htb-hero-bg-media.htb-fit-contain {
	object-fit: contain;
}

.htb-hero-bg-overlay {
	position: absolute;
	inset: 0;
}

.htb-hero-bg-gradient {
	width: 100%;
	height: 100%;
}

/* The iframe itself is sized/positioned via inline styles computed
   by hero-scheduler.js (sizeYoutubeIframe) to replicate object-fit:
   cover, since iframes don't support object-fit. This wrapper just
   clips any overflow from that oversized iframe. */
.htb-hero-bg-youtube-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	background: #0d0d0f;
}

/* Baseline fallback: fills the box at 100%/100% (may slightly
   stretch a mismatched aspect ratio) so the video is never left at
   its default unstyled 300x150px size pinned to the corner if, for
   any reason, the JS cover-fit sizing in hero-scheduler.js hasn't
   run yet. JS overrides these via inline style once it successfully
   measures the container, replacing this with a precise, undistorted
   object-fit:cover-equivalent crop. */
.htb-hero .htb-hero-bg-youtube-wrap iframe,
.htb-hero-bg-youtube-wrap iframe {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	border: 0;
	margin: 0;
}

/* --- Content --- */

/* A single content area: the admin's own Elementor Saved Template
   controls whatever internal layout it wants (including its own
   columns via Elementor's native Container widget, which handles
   responsive stacking correctly on its own). We just center it
   vertically within the hero and let it size naturally. */
.htb-hero-content {
	position: relative;
	z-index: 2;
	width: 100%;
	min-height: inherit;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Content layers: normally in-flow; only the active one is displayed. */
.htb-hero-template-layer {
	display: none;
	opacity: 0;
	transition: opacity var( --htb-duration, 800ms ) ease, transform var( --htb-duration, 800ms ) ease;
}

.htb-hero-template-layer.htb-layer-active {
	display: block;
	opacity: 1;
}

/* While the content area is actively cross-fading, hero-scheduler.js
   adds this class and gives both the outgoing and incoming layers
   `display:block` + absolute positioning so they can overlap and
   fade smoothly instead of the layout jumping when one is removed
   from flow. The wrapper's height is frozen (inline style, set by
   JS) for the duration. */
.htb-hero-content.htb-content-transitioning {
	position: relative;
	overflow: hidden;
}

.htb-hero-content.htb-content-transitioning .htb-hero-template-layer {
	display: block;
	position: absolute;
	inset: 0;
	overflow: auto;
}

/* --- "Fade + Slide" transition variant --- */

.htb-transition-fade-slide .htb-hero-bg-layer:not( .htb-layer-active ),
.htb-transition-fade-slide .htb-hero-template-layer:not( .htb-layer-active ) {
	transform: translateY( 14px );
}

.htb-transition-fade-slide .htb-hero-bg-layer.htb-layer-active,
.htb-transition-fade-slide .htb-hero-template-layer.htb-layer-active {
	transform: translateY( 0 );
}

/* Responsive behavior for the content itself is now entirely up to
   the admin's own Elementor template (built with Elementor's native
   Container/Column widgets, which handle stacking correctly on their
   own) — .htb-hero-content is a single full-width area at every
   breakpoint, so there's nothing left for us to override here. */

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

@media ( prefers-reduced-motion: reduce ) {
	.htb-hero-bg-layer,
	.htb-hero-template-layer {
		transition-duration: 1ms !important;
		transform: none !important;
	}
}

/* --- Preview mode banner (standalone preview route) --- */

.htb-preview-body {
	margin: 0;
}