/**
 * Design Sprint 1 — Hero Revolution.
 *
 * A premium, light-luxury restyle of the homepage hero
 * (template-parts/home/home-hero.php). Loaded on the front page only, as
 * the LAST stylesheet in the chain (inc/class-assets.php) so it refines
 * home.css and radha-premium.css without either file being rewritten.
 *
 * Design language: warm ivory canvas, deep-teal ink, a single amber
 * accent. Every value is a design token — no raw colours, no new palette.
 *
 * Performance / CWV notes, because this is the LCP region of the site:
 *   - Zero JavaScript. The entrance animation is a pure CSS keyframe that
 *     starts at first paint, not an IntersectionObserver reveal. The hero
 *     no longer carries the `.u-fade-up` / `.u-scale-in` classes, which
 *     set `opacity: 0` under `.js` until a script runs — that was hiding
 *     the LCP text until animations.js executed.
 *   - The entrance animates `transform` only, never `opacity`, so the
 *     headline is painted (and LCP is recorded) on the very first frame.
 *   - No filter/blur on any large above-the-fold surface; the decorative
 *     glow is a static radial-gradient, which does not trigger a
 *     compositing pass on scroll.
 *   - No layout-affecting property is animated anywhere in this file.
 *
 * Mobile-first: the base rules are the phone layout and every media query
 * is `min-width`. (home.css is desktop-first; this module loads after it
 * and re-states the properties it needs at each breakpoint, so the two
 * conventions never leave a gap.)
 */

/* ==================================================================
   0. Local tokens — scoped to the hero, derived from the global set
   ================================================================== */

.home-hero--premium {
	--hero-ink: var(--color-heading);
	--hero-ink-muted: var(--color-gray-600);
	--hero-accent: var(--color-accent-400);
	--hero-rule: rgba(20, 33, 31, 0.1);
	--hero-card-bg: rgba(255, 255, 255, 0.82);
	--hero-card-border: rgba(255, 255, 255, 0.7);
	--hero-glow: radial-gradient(
			circle at 78% 22%,
			rgba(31, 111, 99, 0.16),
			transparent 58%
		),
		radial-gradient(circle at 12% 88%, rgba(232, 163, 61, 0.14), transparent 55%);
	--hero-rise-distance: 14px;
	--hero-rise-duration: 640ms;
}

/* ==================================================================
   1. Section shell
   ================================================================== */

.home-hero--premium {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--space-12) var(--space-16);
	background-color: var(--color-page, var(--color-background));
	color: var(--hero-ink);
}

/* The decorative light. A static gradient on a pseudo-element rather than
   the animated `.u-gradient-mesh` background on the section itself — an
   18s infinite background-position animation across the full viewport is
   the single most expensive thing the old hero did on low-end phones. */
.home-hero--premium::before {
	content: '';
	position: absolute;
	inset: -20% -10% auto;
	block-size: 130%;
	background-image: var(--hero-glow);
	pointer-events: none;
	z-index: -1;
}

/* A hairline that ties the hero to the trust bar below it. */
.home-hero--premium::after {
	content: '';
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	block-size: 1px;
	background-image: linear-gradient(
		90deg,
		transparent,
		var(--hero-rule) 18%,
		var(--hero-rule) 82%,
		transparent
	);
	pointer-events: none;
}

.home-hero--premium .home-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: var(--space-10);
}

/* ==================================================================
   2. Typography hierarchy
   ------------------------------------------------------------------
   Four deliberate steps: eyebrow (0.75rem, tracked) → headline (clamped
   display serif) → lead (1.125–1.25rem) → supporting copy (1rem muted).
   Nothing between the steps competes for the same weight.
   ================================================================== */

.home-hero--premium .home-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--hero-rule);
	border-radius: var(--radius-full);
	background-color: rgba(255, 255, 255, 0.7);
	color: var(--color-primary-700);
	font-family: var(--font-family-body);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* The status dot. Decorative, so it is drawn rather than marked up. */
.home-hero--premium .home-hero__eyebrow::before {
	content: '';
	inline-size: 0.4rem;
	block-size: 0.4rem;
	flex: 0 0 auto;
	border-radius: var(--radius-full);
	background-color: var(--color-primary-500);
}

.home-hero--premium .home-hero__title {
	margin: 0 0 var(--space-5);
	max-inline-size: 18ch;
	color: var(--hero-ink);
	font-family: var(--font-family-heading);
	font-size: clamp(2.25rem, 1.15rem + 4.4vw, 4rem);
	font-weight: var(--font-weight-medium);
	line-height: 1.05;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.home-hero--premium .home-hero__subtitle {
	max-inline-size: 44ch;
	margin: 0 0 var(--space-5);
	color: var(--hero-ink-muted);
	font-size: var(--font-size-md);
	line-height: var(--line-height-relaxed);
	text-wrap: pretty;
}

.home-hero--premium .home-hero__description {
	max-inline-size: 46ch;
	margin: 0 0 var(--space-8);
	color: var(--hero-ink-muted);
	font-size: var(--font-size-base);
	line-height: var(--line-height-relaxed);
}

/* ==================================================================
   3. Dual CTA
   ------------------------------------------------------------------
   Full-width stacked on phones (thumb-reachable, no side-by-side
   squeeze), inline from 30rem up. Both buttons share one optical height
   so the pair reads as a single control group.
   ================================================================== */

.home-hero--premium .home-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-3);
	margin-block-end: var(--space-6);
}

.home-hero--premium .home-hero__actions .btn {
	justify-content: center;
	gap: var(--space-2);
	min-block-size: 3.25rem;
	padding-inline: var(--space-8);
	font-size: var(--font-size-base);
	letter-spacing: 0.01em;
}

.home-hero--premium .home-hero__actions .btn--primary {
	background-image: linear-gradient(
		135deg,
		var(--color-primary-500),
		var(--color-primary-700)
	);
	box-shadow: 0 14px 30px rgba(31, 111, 99, 0.28);
}

.home-hero--premium .home-hero__actions .btn--primary:hover {
	box-shadow: 0 18px 38px rgba(31, 111, 99, 0.34);
}

/* Secondary reads as a quiet, well-made surface — not a second primary. */
.home-hero--premium .home-hero__actions .btn--outline {
	background-color: rgba(255, 255, 255, 0.78);
	border: 1px solid var(--color-border-strong);
	color: var(--color-primary-700);
	box-shadow: var(--shadow-sm);
}

.home-hero--premium .home-hero__actions .btn--outline:hover {
	background-color: var(--color-background);
	border-color: var(--color-primary-300);
	color: var(--color-primary-700);
}

.home-hero--premium .home-hero__actions .btn svg {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	flex: 0 0 auto;
}

/* The arrow leads the eye forward on hover. Transform only — no reflow. */
.home-hero--premium .home-hero__actions .btn__icon {
	display: inline-flex;
	transition: transform var(--transition-fast) var(--ease-out);
}

.home-hero--premium .home-hero__actions .btn:hover .btn__icon {
	transform: translateX(3px);
}

.home-hero--premium .quick-contact-buttons {
	margin-block-start: var(--space-2);
}

/* ==================================================================
   4. Visual column + floating trust cards
   ------------------------------------------------------------------
   On phones the cards are a static row *below* the visual: overlapping
   absolute cards on a 360px screen either cover the image or collide
   with each other, and they cannot be read at that size. They only
   start floating once there is room for them (64rem).
   ================================================================== */

.home-hero--premium .home-hero__visual {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: var(--space-4);
	min-block-size: 0;
}

.home-hero--premium .home-hero__visual-panel,
.home-hero--premium .home-hero__visual-image {
	inline-size: 100%;
	block-size: auto;
	min-block-size: 0;
	max-block-size: none;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-xl);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.6) inset,
		0 30px 60px rgba(20, 50, 44, 0.18);
}

.home-hero--premium .home-hero__visual-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: linear-gradient(
		155deg,
		var(--color-primary-50),
		var(--color-primary-100) 55%,
		var(--color-accent-100)
	);
}

.home-hero--premium .home-hero__visual-icon svg {
	inline-size: 5rem;
	block-size: 5rem;
	color: var(--color-primary-500);
	opacity: 0.5;
}

.home-hero--premium .home-hero__visual-card {
	position: static;
	inset: auto;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	max-inline-size: none;
	padding: var(--space-4);
	border: 1px solid var(--hero-card-border);
	border-radius: var(--radius-lg);
	background-color: var(--hero-card-bg);
	box-shadow: 0 10px 30px rgba(20, 50, 44, 0.12);
	/* radha-premium.css blurs these cards site-wide. In the stacked mobile
	   layout they sit on a flat ivory canvas, so the blur buys nothing and
	   costs a compositing layer on exactly the devices least able to
	   afford one. It comes back at 64rem, where the cards genuinely
	   overlap the visual. */
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.home-hero--premium .home-hero__visual-card-icon {
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: var(--radius-md);
	background-color: var(--color-primary-50);
	color: var(--color-primary-600);
}

.home-hero--premium .home-hero__visual-card-number {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.01em;
}

.home-hero--premium .home-hero__visual-card-label,
.home-hero--premium .home-hero__visual-card-title {
	font-size: var(--font-size-xs);
	line-height: 1.35;
}

.home-hero--premium .home-hero__visual-card-title {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--hero-ink);
}

/* The stacked-card row on phones/tablets. */
.home-hero--premium .home-hero__visual-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--space-3);
}

/* home.css hides the trust card below 30rem, because in the old layout it
   overlapped the stat card on a narrow screen. These cards no longer
   overlap at any width, so the content comes back. */
.home-hero--premium .home-hero__visual-cards .home-hero__visual-card {
	display: flex;
}

/* ==================================================================
   5. Trust bar — the full-width row closing the hero
   ================================================================== */

.home-hero--premium .home-hero__trustbar {
	grid-column: 1 / -1;
	margin-block-start: var(--space-4);
	padding-block-start: var(--space-8);
	border-block-start: 1px solid var(--hero-rule);
}

.home-hero--premium .home-hero__badges {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Overrides the pill `.badge--primary` look — inside the trust bar these
   are statements of fact, not tags. */
.home-hero--premium .home-hero__badges > li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--hero-ink);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.01em;
	text-transform: none;
}

.home-hero--premium .home-hero__badges > li svg {
	inline-size: 1.05rem;
	block-size: 1.05rem;
	flex: 0 0 auto;
	padding: 0.2rem;
	border-radius: var(--radius-full);
	background-color: var(--color-primary-50);
	color: var(--color-primary-600);
	box-sizing: content-box;
}

/* ==================================================================
   6. Entrance animation — CSS only, transform only
   ------------------------------------------------------------------
   Not gated on `.js`: if this file loads, the animation runs; if it
   somehow does not, the content is already in its final position. The
   element is opaque from frame one, so LCP is unaffected.
   ================================================================== */

@keyframes hero-rise {
	from {
		transform: translate3d(0, var(--hero-rise-distance), 0);
	}

	to {
		transform: none;
	}
}

.home-hero--premium .hero-rise {
	animation: hero-rise var(--hero-rise-duration) var(--ease-out) both;
	animation-delay: calc(var(--rise-order, 0) * 70ms);
}

/* accessibility.css already collapses every duration under reduced
   motion; this states the intent locally so the hero is correct even if
   this module is ever used without it. */
@media (prefers-reduced-motion: reduce) {
	.home-hero--premium .hero-rise {
		animation: none;
	}
}

/* ==================================================================
   7. Scroll indicator
   ================================================================== */

.home-hero--premium .home-hero__scroll-indicator {
	color: var(--hero-ink-muted);
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
}

.home-hero--premium .home-hero__scroll-indicator-icon {
	border-color: var(--hero-rule);
}

/* ==================================================================
   8. Breakpoints
   ================================================================== */

/* ---- 30rem: CTAs sit side by side, badges pair up ---- */
@media (min-width: 30rem) {
	.home-hero--premium .home-hero__actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.home-hero--premium .home-hero__actions .btn {
		flex: 0 1 auto;
	}

	.home-hero--premium .home-hero__badges {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-4);
	}
}

/* ---- 48rem: more air, larger visual ---- */
@media (min-width: 48rem) {
	.home-hero--premium {
		padding-block: var(--space-16) var(--space-20);
	}

	.home-hero--premium .home-hero__subtitle {
		font-size: var(--font-size-lg);
	}

	.home-hero--premium .home-hero__visual-panel,
	.home-hero--premium .home-hero__visual-image {
		aspect-ratio: 5 / 4;
	}
}

/* ---- 64rem: the luxury two-column layout + floating cards ---- */
@media (min-width: 64rem) {
	.home-hero--premium {
		padding-block: var(--space-20) var(--space-24);
	}

	.home-hero--premium .home-hero__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: var(--space-16);
	}

	.home-hero--premium .home-hero__title {
		font-size: clamp(3rem, 1.6rem + 3.1vw, 4.25rem);
	}

	.home-hero--premium .home-hero__visual {
		display: block;
		padding-inline: var(--space-6);
	}

	.home-hero--premium .home-hero__visual-panel,
	.home-hero--premium .home-hero__visual-image {
		aspect-ratio: 4 / 5;
		max-block-size: 34rem;
	}

	/* The cards leave the flow and float over the visual's edges. */
	.home-hero--premium .home-hero__visual-cards {
		display: contents;
	}

	.home-hero--premium .home-hero__visual-card {
		position: absolute;
		z-index: 2;
		max-inline-size: 15rem;
		padding: var(--space-4) var(--space-5);
		-webkit-backdrop-filter: blur(var(--blur-md));
		backdrop-filter: blur(var(--blur-md));
		box-shadow: 0 18px 40px rgba(20, 50, 44, 0.18);
	}

	.home-hero--premium .home-hero__visual-card--stat {
		inset-block-end: var(--space-10);
		inset-inline-start: 0;
	}

	.home-hero--premium .home-hero__visual-card--trust {
		inset-block-start: var(--space-8);
		inset-inline-end: 0;
		max-inline-size: 13rem;
	}

	.home-hero--premium .home-hero__visual-card--secondary {
		inset-block-end: 38%;
		inset-inline-end: 0;
		max-inline-size: 13rem;
	}

	.home-hero--premium .home-hero__trustbar {
		margin-block-start: var(--space-10);
		padding-block-start: var(--space-10);
	}

	.home-hero--premium .home-hero__badges {
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
		gap: var(--space-6);
	}

	.home-hero--premium .home-hero__badges > li {
		font-size: var(--font-size-base);
	}
}

/* Backdrop-filter fallback — an opaque card beats an unreadable one. */
@supports not (
	(backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
	.home-hero--premium .home-hero__visual-card {
		background-color: var(--color-background);
	}
}

/* ==================================================================
   9. Transparent header pairing
   ------------------------------------------------------------------
   When the Global Layout "transparent header" option is on, the header
   is taken out of flow and sits over this section — so the hero owns the
   space the header needs. See header.css for the header side.
   ================================================================== */

.has-transparent-header .home-hero--premium {
	padding-block-start: calc(var(--header-height) + var(--space-10));
}

@media (min-width: 64rem) {
	.has-transparent-header .home-hero--premium {
		padding-block-start: calc(var(--header-height) + var(--space-16));
	}
}

/* ==================================================================
   10. Forced colours (Windows high-contrast)
   ================================================================== */

@media (forced-colors: active) {
	.home-hero--premium .home-hero__visual-card,
	.home-hero--premium .home-hero__eyebrow {
		border: 1px solid CanvasText;
	}

	.home-hero--premium::before,
	.home-hero--premium::after {
		display: none;
	}
}