/* ==========================================================================
   VS Schedule Display – Hero Slider
   ========================================================================== */

/*
 * Transition duration CSS custom property.
 * Read by the JS controller via getComputedStyle to keep timing in sync.
 */
:root {
	--vssd-hs-duration: 0.6s;
	--vssd-hs-title-color: #F5E030; /* Overridden per-instance via inline style on .vssd-hs-hero */
}

/* ─── Hero container ─────────────────────────────────────────────────────── */

.vssd-hs-hero {
	position: relative;
	overflow: hidden;
	/* Full-bleed: break out of BB/theme column padding. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	box-sizing: border-box;
	/*
	 * Fallback height reserves space before the inline min-height is applied,
	 * preventing a layout shift (CLS) on first paint. The shortcode always
	 * outputs style="min-height:Xpx;" which overrides this value immediately.
	 */
	min-height: 400px;
	/* Black background shows while the first image loads — avoids a white flash. */
	background-color: #000;
}

/* ─── Slides ─────────────────────────────────────────────────────────────── */

.vssd-hs-slide {
	position: absolute;
	inset: 0;
	/* Default hidden state for fade mode. */
	opacity: 0;
	transition: opacity var(--vssd-hs-duration, 0.6s) ease,
	            transform var(--vssd-hs-duration, 0.6s) ease;
	/*
	 * Each slide on its own GPU layer — opacity/transform animate without
	 * triggering layout or paint.
	 */
	will-change: transform, opacity;
}

.vssd-hs-slide.is-active {
	opacity: 1;
	z-index: 1;
}

/* ─── Image ──────────────────────────────────────────────────────────────── */

.vssd-hs-image-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.vssd-hs-hero-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* ─── Transition: Slide ──────────────────────────────────────────────────── */

.vssd-hs-hero[data-transition="slide"] .vssd-hs-slide {
	opacity: 1;
	transform: translateX(100%);
}

.vssd-hs-hero[data-transition="slide"] .vssd-hs-slide.is-active {
	transform: translateX(0);
}

/* Declared after .is-active so exit classes win the specificity tie-break. */
.vssd-hs-hero[data-transition="slide"] .vssd-hs-slide.is-exit-left {
	transform: translateX(-100%);
	z-index: 2;
}

.vssd-hs-hero[data-transition="slide"] .vssd-hs-slide.is-exit-right {
	transform: translateX(100%);
	z-index: 2;
}

/* ─── Mobile tap link ────────────────────────────────────────────────────── */
/*
 * An invisible full-slide <a> that makes the entire slide tappable on mobile.
 * Sits at z-index 1 — below the text block (z-index 2) so text is still
 * selectable, but above the image. Removed from the tab order (tabindex="-1"
 * in the PHP template) so keyboard users reach the desktop button instead.
 * Hidden entirely on desktop — display:none removes it from the a11y tree.
 */

.vssd-hs-tap-link {
	display: none;
}

@media (max-width: 768px) {
	.vssd-hs-tap-link {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 1;
	}
}

/* ─── Bottom text block ──────────────────────────────────────────────────── */
/*
 * Full-width, bottom-anchored panel with a CSS gradient scrim.
 * The gradient runs from near-opaque black at the bottom to fully transparent
 * at the top, so the image bleeds through above the text while remaining
 * legible below. No extra images or requests — pure CSS.
 *
 * z-index 2 keeps the text above the tap link (z-index 1) and the image (z-index 0).
 */

.vssd-hs-text-block {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	/*
	 * Horizontal padding must clear the prev/next arrow buttons:
	 * arrows sit at left/right: 28px and are 44px wide, so their inner edges
	 * land at 72px from each side. 6.5rem (104px) gives a comfortable 32px gap.
	 */
	padding: 7rem 6.5rem 3.5rem; /* generous top padding = gradient breathing room */
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.90) 0%,
		rgba(0, 0, 0, 0.78) 25%,
		rgba(0, 0, 0, 0.45) 55%,
		transparent 100%
	);
	/* Prevent the text block from accidentally becoming the LCP element. */
	pointer-events: none; /* children opt back in individually below */
}

/* All direct children of the text block receive pointer events. */
.vssd-hs-text-block > * {
	pointer-events: auto;
}

/* ─── Text hierarchy ─────────────────────────────────────────────────────── */

/* "Wednesdays." / "Sunday." */
.vssd-hs-day {
	margin: 0 0 0.1em;
	color: #fff;
	font-size: clamp(1.05rem, 1.8vw, 1.3rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

/* "April 15th – May 20th, 2026" */
.vssd-hs-dates {
	margin: 0 0 0.5em;
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(0.95rem, 1.5vw, 1.15rem);
	font-weight: 300;
	line-height: 1.4;
}

/* Class title — the dominant visual element */
.vssd-hs-title {
	margin: 0 0 0.3em;
	color: var(--vssd-hs-title-color, #F5E030);
	font-size: clamp(1.5rem, 5vw, 2.75rem);
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* "with David Jamieson" */
.vssd-hs-instructor {
	margin: 0 0 0.25em;
	color: #fff;
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	font-weight: 400;
	line-height: 1.4;
}

/* Promotional notice — inline color from type_color set by PHP */
.vssd-hs-notice {
	margin: 0.4em 0 0.25em;
	font-size: clamp(1.1rem, 1.2vw, 1.5rem);
	font-style: italic;
	line-height: 1.4;
}

/* ─── Desktop CTA button ─────────────────────────────────────────────────── */
/*
 * Shown on desktop only. On mobile the entire slide is a tap link, so the
 * button is redundant and visually clutters the limited space.
 */

.vssd-hs-btn-wrap {
	margin-top: 1.1rem;
}

.vssd-hs-btn {
	display: inline-block;
	box-sizing: border-box;
	padding: 0.6em 1.5em;
	background-color: #fff;
	border-radius: 25px;
	color: #111;
	text-decoration: none;
	font-size: clamp(0.8rem, 1.1vw, 0.9rem);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease,
	            color 0.2s ease,
	            transform 0.15s ease,
	            opacity 0.2s ease;
}

.vssd-hs-btn:hover,
.vssd-hs-btn:focus-visible {
	background-color: var(--vssd-hs-title-color, #F5E030);
	color: #111;
	transform: translateY(-1px);
	opacity: 1;
	text-decoration: none;
}

/* Hide the button on mobile — the tap link covers the whole slide instead. */
@media (max-width: 768px) {
	.vssd-hs-btn-wrap {
		display: none;
	}
}

/* ─── Arrow navigation ───────────────────────────────────────────────────── */
/*
 * Arrows sit at the vertical midpoint of the image area — above the text
 * block — where they don't compete with the text hierarchy.
 */

.vssd-hs-arrow {
	position: absolute;
	z-index: 10;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.vssd-hs-arrow:hover,
.vssd-hs-arrow:focus-visible {
	background: rgba(0, 0, 0, 0.65);
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.vssd-hs-arrow-prev { left: 28px; }
.vssd-hs-arrow-next { right: 28px; }

.vssd-hs-arrow svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
	pointer-events: none;
}

/* ─── Dot navigation ─────────────────────────────────────────────────────── */
/*
 * Positioned top-right so they don't overlap the bottom text block.
 * Hidden by default (show_dots="no") — enable via shortcode attribute.
 */

.vssd-hs-dots {
	position: absolute;
	z-index: 10;
	top: 16px;
	right: 16px;
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	justify-content: flex-end;
	padding: 0;
	margin: 0;
	list-style: none;
}

.vssd-hs-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.65);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.vssd-hs-dot.is-active {
	background: #fff;
	border-color: #fff;
}

.vssd-hs-dot:hover {
	background: rgba(255, 255, 255, 0.5);
	border-color: #fff;
}

.vssd-hs-dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ─── Desktop: constrain text content to left two-thirds ────────────────── */
/*
 * The gradient scrim stays full-width so it fades cleanly across the entire
 * hero. Only the text content is constrained to the left ⅔ — achieved with
 * a large padding-right that pushes children away from the right third of
 * the hero, leaving that area unobscured by text (though still behind the
 * gradient wash).
 */

@media (min-width: 769px) {
	.vssd-hs-text-block {
		padding-right: calc(33.333% + 3rem);
	}
}

/* ─── "NEW CLASS!" badge ─────────────────────────────────────────────────── */
/*
 * Shown above the day-of-week label when the class has _vs_is_new_class set.
 * Round-rect (not pill) — border-radius matches typical UI badge convention.
 */

.vssd-hs-badge {
	display: inline-block;
	padding: 0.2em 0.65em;
	margin-bottom:1em;
	background-color: #C0392B;
	color: #fff;
	font-size: clamp(0.6rem, 0.9vw, 0.7rem);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.5;
	border: 1px solid rgb(162, 161, 161);
	border-radius: 4px;
	/* Keep the badge sharp against the gradient — no blur or shadow needed. */
}

/* ─── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	/*
	 * Reset the full-bleed technique on mobile.
	 * BuddyBoss (and similar themes) set overflow-x: hidden on <html>, which
	 * clips the negative margin-left used for desktop full-bleed. On mobile,
	 * BB columns are already full-viewport-width with no horizontal padding,
	 * so width:100% / margin-left:0 fills the screen edge-to-edge.
	 * !important is required to reliably override the desktop rule regardless
	 * of stylesheet load order or specificity from third-party CSS.
	 */
	.vssd-hs-hero {
		width: 100% !important;
		margin-left: 0 !important;
	}

	.vssd-hs-text-block {
		padding: 5rem 1.75rem 2.25rem;
	}

	/* Arrows are too large on small portrait screens — hide them.
	   Users swipe to navigate on touch devices. */
	.vssd-hs-arrow {
		display: none;
	}
}

/* ─── Beaver Builder integration ─────────────────────────────────────────── */
/*
 * BB adds top padding/margin to rows, columns, and module-content divs.
 * The hero breaks out horizontally (100vw full-bleed) but NOT vertically,
 * so that padding creates a gap between the site header and the slide image.
 *
 * Zero it out on any BB structural element that directly contains the hero.
 * :has() is supported in all evergreen browsers (Chrome 105+, Safari 15.4+,
 * Firefox 121+). Browsers without :has() support get the BB layout gap;
 * that's an acceptable progressive-enhancement trade-off.
 *
 * Also collapse any empty <p> tags wpautop injects around block-level
 * shortcode output inside a BB rich-text module.
 */
.fl-row:has(.vssd-hs-hero),
.fl-row:has(.vssd-hs-hero) > .fl-row-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
.fl-col:has(.vssd-hs-hero) > .fl-col-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
.fl-module:has(.vssd-hs-hero),
.fl-module:has(.vssd-hs-hero) > .fl-module-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
/* Collapse empty paragraphs wpautop inserts adjacent to the hero */
.fl-module-rich-text:has(.vssd-hs-hero) p:empty,
.fl-rich-text:has(.vssd-hs-hero) p:empty {
	display: none;
	margin: 0;
	padding: 0;
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.vssd-hs-slide,
	.vssd-hs-btn,
	.vssd-hs-arrow,
	.vssd-hs-dot {
		transition: none !important;
	}
}