/**
 * Yodha Fuel — homepage-only styles.
 *
 * WHY THIS FILE EXISTS: hero(-slider).php, shop-goals.php, why-yodha.php,
 * brand-banner.php, trust.php and final-cta.php introduce several one-off
 * compositions (a full-bleed hero slider, icon+text goal/value/trust card
 * grids, a full-bleed statement banner) that exist nowhere else in the
 * theme. Adding them to components.css would mix homepage-only rules into
 * a file every other page also loads. Keeping them here means every other
 * page's CSS payload is unaffected, and inc/enqueue.php only loads this
 * file when is_front_page() is true.
 *
 * Design-system tokens (var() references into variables.css) are used
 * wherever practical for color, spacing, radius, shadow and font values.
 * A few kinds of intentional exceptions exist and are called out inline
 * where they occur: fluid typography via clamp() (.yf-hero-slide__title,
 * .yf-brand-banner__statement), which needs literal min/preferred/max
 * values clamp() itself requires rather than a fixed token; and one-off
 * visual-effect values built FROM the brand tokens at a partial opacity
 * that variables.css doesn't pre-mix — the brand banner's diagonal accent
 * (rgba(245, 83, 1, 0.18), i.e. --yodha-orange at partial opacity) and the
 * hero slider's dark readability overlay (rgba(39, 47, 50, …), i.e.
 * --warrior-dark at partial opacity). These are deliberate, not
 * oversights.
 *
 * Mobile-first: base rules are the 375px default, breakpoints layer up
 * at 480 / 768 / 1024 / 1280px, matching layout.css.
 */

/* ============================================================
   VERTICAL-SPACING FIX — .yf-section + .yf-container
   ============================================================
   Five homepage sections (Shop by Goal, Featured Products, Why Yodha
   Fuel, Best Sellers, Trust) nest a plain <div class="yf-container">
   directly inside <section class="yf-section">. Both classes carry
   their own top/bottom padding in layout.css (.yf-section for the
   section's vertical rhythm, .yf-container for every page's default
   content padding) — as two DIFFERENT nested elements, those paddings
   add together instead of overriding one another, doubling the visible
   gap above/below each of those five sections.
   The rule below zeroes .yf-container's OWN vertical padding only when
   it is a direct child of .yf-section, leaving .yf-container's
   horizontal padding (left/right) and its use on every other page
   (page.php, single.php — neither of which wraps it in .yf-section)
   completely untouched. It's scoped to this homepage-only file rather
   than layout.css so it can never affect a future non-homepage use of
   .yf-section.
   The hero slider, Brand Banner and Final CTA are NOT affected by this
   rule (none of them use the .yf-section class) and keep their own
   padding as defined below — combining .yf-container with a component-
   specific class (.yf-hero-slide__content, .yf-brand-banner__inner,
   .yf-final-cta__inner) on the SAME element is a single cascade, not two
   nested paddings, so no doubling occurs there in the first place.
   ============================================================ */
.yf-section > .yf-container {
	padding-top: 0;
	padding-bottom: 0;
}

/* ============================================================
   HERO SLIDER
   Full-bleed (no .yf-container on the outer element — same full-width
   pattern already used by Brand Banner below). Fixed height per
   breakpoint (see the BREAKPOINTS section) so image loading, slide
   changes and missing images never shift page layout.
   ============================================================ */
.yf-hero-slider {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 520px;
	background-color: var(--warrior-dark);
}

.yf-hero-slider__track {
	position: relative;
	height: 100%;
}

/* Each slide is stacked full-bleed inside the track. background-color +
   background-image (a radial gradient built from the existing Warrior
   Dark tokens) are the graceful fallback used whenever a slide has no
   photography yet; a real photo is added purely via an inline
   background-image style from PHP (yodha_fuel_hero_slide_image()) when
   the file exists, which overrides only that one property — the
   fallback gradient never has to be removed or duplicated. */
.yf-hero-slide {
	position: absolute;
	inset: 0;
	background-color: var(--warrior-dark);
	background-image: radial-gradient(circle at 30% 35%, var(--warrior-dark-soft), var(--warrior-dark) 70%);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-slow), visibility 0s linear var(--transition-slow);
}

/* visibility (in addition to opacity) is what keeps an inactive slide's
   CTA links out of the keyboard tab order and out of the accessibility
   tree, without any JS tabindex bookkeeping — see the note in
   template-parts/home/hero.php. */
.yf-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transition: opacity var(--transition-slow), visibility 0s linear 0s;
}

/* Dark gradient overlay for text readability over a photo, plus a subtle
   orange accent gradient from the left (where the text column sits).
   Opacity is deliberately uneven (heavier top/bottom, lighter middle) so
   a bright background photo can still show through rather than being
   permanently blacked out, whatever image is dropped in later. */
.yf-hero-slide__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(39, 47, 50, 0.78) 0%, rgba(39, 47, 50, 0.38) 45%, rgba(39, 47, 50, 0.8) 100%),
		linear-gradient(110deg, rgba(245, 83, 1, 0.22) 0%, rgba(245, 83, 1, 0) 42%);
	pointer-events: none;
}

.yf-hero-slide__content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	align-items: center;
}

.yf-hero-slide__copy {
	color: var(--color-text-inverse);
	max-width: 100%;
}

.yf-hero-slide__eyebrow {
	color: var(--yodha-orange);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	font-size: var(--fs-label);
	margin: 0 0 var(--space-sm);
}

.yf-hero-slide__title {
	color: var(--color-text-inverse);
	font-size: clamp(2.25rem, 6vw, 3.75rem);
	line-height: var(--lh-heading);
	margin: 0 0 var(--space-md);
	/* Subtle legibility shadow only (not decorative) — keeps the headline
	   readable over brighter areas of a background photo. */
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.yf-hero-slide__subtitle {
	color: var(--color-text-inverse-muted);
	font-size: var(--fs-body);
	max-width: 42ch;
	margin: 0 0 var(--space-lg);
}

.yf-hero-slide__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
}

/* --- Bottom control bar: pagination dots (left) + prev/next arrows
   (right). Deliberately kept out of the vertically-centered text column
   entirely — sitting in its own row at the bottom of the hero — so
   controls never overlap the headline/CTA at any viewport width. --- */
.yf-hero-slider__controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--space-lg);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: 0 var(--container-padding-mobile);
}

.yf-hero-slider__dots {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.yf-hero-slider__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border-radius: var(--radius-full);
	border: var(--border-width) solid rgba(255, 255, 255, 0.6);
	background-color: transparent;
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.yf-hero-slider__dot:hover,
.yf-hero-slider__dot:focus-visible {
	border-color: var(--yodha-orange);
}

.yf-hero-slider__dot.is-active {
	background-color: var(--yodha-orange);
	border-color: var(--yodha-orange);
	transform: scale(1.2);
}

.yf-hero-slider__arrows {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.yf-hero-slider__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	border: var(--border-width) solid rgba(255, 255, 255, 0.4);
	background-color: rgba(39, 47, 50, 0.35);
	color: var(--white);
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

/* Belt-and-suspenders: the chevron already inherits white via currentColor
   from .yf-hero-slider__arrow's own `color`, but this targets the icon
   directly so the arrows are explicitly white regardless of inheritance —
   matching "the color should be white" exactly, not just implicitly. */
.yf-hero-slider__arrow .yf-icon {
	width: 18px;
	height: 18px;
	color: var(--white);
}

.yf-hero-slider__arrow:hover .yf-icon,
.yf-hero-slider__arrow:focus-visible .yf-icon {
	color: var(--white);
}

.yf-hero-slider__arrow:hover,
.yf-hero-slider__arrow:focus-visible {
	background-color: var(--yodha-orange);
	border-color: var(--yodha-orange);
}

/* ============================================================
   SECTION HEADING ROW — heading + "View All" link, side by side
   (Featured Products, Best Sellers)
   ============================================================ */
.yf-section-heading-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.yf-section-heading-row .yf-section-heading {
	margin-bottom: 0;
}

/* ============================================================
   SHOP BY GOAL
   ============================================================ */
.yf-goal-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
}

.yf-goal-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs);
	padding: var(--space-lg);
	background-color: var(--color-bg);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--card-radius);
	color: var(--color-text);
	transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.yf-goal-card:hover,
.yf-goal-card:focus {
	border-color: var(--yodha-orange);
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
	color: var(--color-text);
}

.yf-goal-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full);
	background-color: var(--color-bg-alt);
	color: var(--yodha-orange);
}

.yf-goal-card__title {
	font-weight: var(--fw-bold);
	font-size: var(--fs-body);
	color: var(--color-heading);
}

.yf-goal-card__desc {
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

/* ============================================================
   WHY YODHA FUEL — value cards
   ============================================================ */
.yf-value-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

.yf-value-card {
	padding: var(--space-lg);
	border: var(--border-width) solid var(--color-border);
	border-left: var(--border-width-thick) solid var(--yodha-orange);
	border-radius: var(--radius-sm);
	background-color: var(--color-bg);
	box-shadow: var(--shadow-card);
	transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

/* Why Yodha Fuel now sits on a plain white section background (see the
   corrected alternation note on .yf-section--alt in layout.css) — these
   cards previously leaned on that section's old off-white backdrop for
   their only visual separation, with just the left accent bar. The
   border + shadow above make each card read as a distinct surface on
   ANY background, white included, rather than depending on its
   neighbor's color. */
.yf-value-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.yf-value-card__title {
	font-size: var(--fs-h3);
	margin: 0 0 var(--space-xs);
}

.yf-value-card__desc {
	color: var(--color-text-muted);
	margin: 0;
}

/* ============================================================
   BRAND BANNER
   ============================================================ */
.yf-brand-banner {
	position: relative;
	background-color: var(--warrior-dark-soft);
	color: var(--color-text-inverse);
	overflow: hidden;
}

/* Large diagonal accent shape — pure CSS, no image request. */
.yf-brand-banner::before {
	content: "";
	position: absolute;
	inset: -20% -10%;
	background: linear-gradient(115deg, transparent 55%, rgba(245, 83, 1, 0.18) 55%, rgba(245, 83, 1, 0.18) 62%, transparent 62%);
	pointer-events: none;
}

.yf-brand-banner__inner {
	position: relative;
	text-align: center;
	/* !important on both: confirmed live that a plain padding-top/
	   padding-bottom here was being zeroed out entirely (computed 0px on
	   both, not just falling back to a smaller value) — some other rule
	   this element also matches wins the cascade on this property.
	   Verified the fix by injecting this exact !important pair into the
	   live page and re-measuring before shipping it. Bottom padding is
	   deliberately larger than top: with the CTA button as the last flex
	   child, equal top/bottom padding still reads as the button sitting
	   cramped right against the section edge, since the button's own
	   visual weight makes the same gap look smaller below it than above
	   the heading. */
	padding-top: var(--space-2xl) !important;
	padding-bottom: var(--space-3xl) !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
}

.yf-brand-banner__statement {
	color: var(--color-text-inverse);
	font-size: clamp(1.75rem, 5vw, 2.5rem);
	max-width: 24ch;
	margin: 0;
}

.yf-brand-banner__subtext {
	color: var(--color-text-inverse-muted);
	max-width: 48ch;
	margin: 0;
}

/* ============================================================
   TRUST SECTION
   ============================================================ */
.yf-trust-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

.yf-trust-item {
	text-align: center;
	padding: var(--space-md);
}

.yf-trust-item__title {
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	margin: 0 0 var(--space-2xs);
}

.yf-trust-item__desc {
	font-size: var(--fs-small);
	color: var(--color-text-muted);
	margin: 0;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.yf-final-cta {
	background-color: var(--color-bg-dark);
	color: var(--color-text-inverse);
}

.yf-final-cta__inner {
	text-align: center;
	/* Same !important fix as .yf-brand-banner__inner above, and for the
	   same reason: confirmed live that a plain declaration here was also
	   being zeroed out entirely, and verified the !important fix the same
	   way before shipping it. */
	padding-top: var(--space-2xl) !important;
	padding-bottom: var(--space-3xl) !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
}

.yf-final-cta__title {
	color: var(--color-text-inverse);
	margin: 0;
}

.yf-final-cta__subtext {
	color: var(--color-text-inverse-muted);
	max-width: 48ch;
	margin: 0;
}

/* ============================================================
   BREAKPOINTS — 480 / 768 / 1024 / 1280px
   ============================================================ */

@media (min-width: 480px) {
	.yf-hero-slider {
		height: 560px;
	}

	.yf-goal-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.yf-hero-slider {
		height: 620px;
	}

	.yf-hero-slider__controls {
		padding: 0 var(--container-padding-tablet);
		bottom: var(--space-xl);
	}

	.yf-hero-slider__arrow {
		width: 44px;
		height: 44px;
	}

	.yf-goal-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.yf-value-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.yf-trust-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.yf-hero-slider {
		height: 680px;
	}

	.yf-hero-slider__controls {
		padding: 0 var(--container-padding-desktop);
	}

	.yf-hero-slide__copy {
		max-width: 50%;
	}

	.yf-goal-grid {
		grid-template-columns: repeat(5, 1fr);
	}

	.yf-value-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.yf-trust-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Brand Banner and Final CTA are full-bleed dark "statement" sections,
	   not .yf-section, so they don't pick up that class's breakpoint
	   padding increases above — given their own matching bump here so
	   they keep feeling proportionate to the more spacious rhythm around
	   them at desktop sizes rather than staying pinned to their mobile
	   padding. */
	.yf-brand-banner__inner,
	.yf-final-cta__inner {
		/* !important for the same reason as the base rule above. */
		padding-top: var(--space-3xl) !important;
		padding-bottom: var(--space-4xl) !important;
	}
}

@media (min-width: 1280px) {
	.yf-hero-slider {
		height: 720px;
	}

	.yf-brand-banner__inner,
	.yf-final-cta__inner {
		/* !important for the same reason as the base rule above.
		   --space-5xl (96px) is already defined in variables.css but
		   unused elsewhere in this file until now. */
		padding-top: var(--space-4xl) !important;
		padding-bottom: var(--space-5xl) !important;
	}
}

/* Respect reduced-motion: the hero slide crossfade above, and every other
   transition in this file, are already covered globally by base.css's
   prefers-reduced-motion block (it targets every element's
   transition-duration, not just specific components), so no separate
   override is needed here. assets/js/hero-slider.js additionally stops
   autoplay entirely (not just speeding up the fade) when
   prefers-reduced-motion is set — see that file. */