/**
 * Pattern: Hero — Home  (patterns/hero-home.php)
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php). Keep every
 * rule for this pattern — including its responsive media queries — in this file
 * so parallel pattern builds never touch a shared stylesheet.
 *
 * Background = the page Featured Image (via the cover block). The overlay span is
 * restyled into a LEFT-to-right scrim (dark left → clear right) so the left-aligned
 * text stays legible while the photo shows through on the right — matching the
 * Figma home hero (node 258:2687).
 */

/* Left-to-right scrim over the featured image (brand ink, not flat black). */
.kd-hero-home > .wp-block-cover__background {
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--kd-color-contrast) 92%, transparent) 0%,
		color-mix(in srgb, var(--kd-color-contrast) 55%, transparent) 34%,
		color-mix(in srgb, var(--kd-color-contrast) 12%, transparent) 56%,
		transparent 72%
	) !important;
	opacity: 1 !important;
}

/* Roomy hero padding — the header badge overlaps the top-left, and the theme's
   fluid spacing token resolves too small here, so set explicit clearance. With
   the content vertically centered (cover content-position center-left), this keeps
   even a full-height hero clear of the overlapping logo. */
.kd-hero-home.wp-block-cover {
	/* Symmetric padding so the content (cover content-position center-left) sits
	   vertically centred, while the tall min-height + centring keep it clear of the
	   top-left logo badge. */
	padding-top: clamp(5.5rem, 7vw, 7rem) !important;
	padding-bottom: clamp(5.5rem, 7vw, 7rem) !important;
	/* Zero the cover's own inline padding: the inner-container's --kd-edge-pad (above)
	   is the single source of the horizontal gutter, so the hero content aligns
	   exactly with the header logo at every width (not 16px off at narrow widths). */
	padding-inline: 0 !important;
	min-height: 700px !important;
}

/* Wide-screen alignment (finding #1). The cover's inner-container uses
   has-global-padding (root gutter → 144px max), so the hero content anchors to
   the gutter — on monitors wider than the 1512 band it drifts left of the header
   logo and every body section below (~160px vs ~517px at 2560). --kd-edge-pad =
   max(gutter, (100%−1512)/2): equals the gutter on narrow screens but tracks the
   centred band on wide ones, landing the content flush under the logo. Scoped
   (0,2,0) beats has-global-padding's :root :where() (0,1,0). */
.kd-hero-home .wp-block-cover__inner-container {
	padding-inline: var(--kd-edge-pad);
}

/* Content column — left-aligned; wider cap so the XL title can run long. */
.kd-hero-home .kd-hero-content {
	max-width: 820px;
	align-items: flex-start;
	text-align: left;
}

/* XL banner heading (size comes from the `gigantic` preset clamp in theme.json). */
.kd-hero-heading {
	color: var(--kd-color-base);
	margin: 0;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.kd-hero-subtitle {
	/* 18px per the design. The shared `.kd-hero-subtitle` (interior hero) + the
	   theme's fluid `large` preset both resolve large here, so pin it. */
	font-size: 1.125rem !important;
	line-height: 1.6;
	color: var(--kd-color-base);
	max-width: 540px;
	margin: 0;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* CTAs (per Figma 258:2603/258:2609): primary = brand PURPLE fill (the global
   button default — no override needed), secondary = WHITE outline so it reads on
   the dark hero. Only the secondary is overridden; selector mirrors global.css
   specificity (0,4,0 scoped under .kd-hero-home) to win the cascade. */
.kd-hero-buttons {
	margin-top: var(--kd-space-md) !important;
}
.kd-hero-home .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--kd-color-base);
	border-color: var(--kd-color-base);
}
.kd-hero-home .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.15);
	color: var(--kd-color-base);
	border-color: var(--kd-color-base);
	transform: translateY(-2px);
}

/* Mobile (≤768px) — stack the buttons full-width. */
@media (max-width: 768px) {
	.kd-hero-home .kd-hero-buttons {
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
	}
	.kd-hero-home .kd-hero-buttons .wp-block-button {
		width: 100% !important;
	}
	.kd-hero-home .kd-hero-buttons .wp-block-button__link {
		width: 100% !important;
		justify-content: center !important;
		text-align: center !important;
	}
}