/**
 * Pattern: Hero — Home  (patterns/hero-home.php)
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php). Every rule —
 * including responsive media queries — stays in this file so parallel pattern
 * builds never touch a shared stylesheet.
 *
 * Figma source: node 6:18 (Home page hero). Full-bleed Deep Petrol cover, left-
 * aligned Display headline + subline + two CTAs. Background is the page Featured
 * Image (photo pending — Nathan Q8); the cover's dim/overlay renders a solid
 * Deep Petrol band when no image is set, matching the current placeholder state.
 */

.kd-hero-home.wp-block-cover {
	/* Figma content column starts at the same edge gutter as the header logo/
	   footer content — see --blg-edge-pad in tokens.css. The cover's own
	   inner-container already applies WP's global padding (has-global-padding),
	   which resolves to the theme's root padding and is NOT guaranteed to equal
	   --blg-edge-pad on very wide screens, so we reassert it here to keep the
	   hero text flush with every other band on the page. */
	padding-block: clamp(4rem, 7vw, var(--blg-space-xxl));
}

/* Guaranteed solid Deep Petrol band when the page has no Featured Image yet
   (real photo pending — Nathan Q8). The cover's own dim/overlay only tints an
   actual image; with none set it lets the page background (white) show
   through at (100 - dimRatio)%, which washes the text out. Figma 6:18 is a
   flat, full-width Deep Petrol field with a subtle darker-teal diagonal wedge
   in the upper right (measured from the comp: a ~20%-opacity secondary-token
   triangle running from ~76% width at the top edge to the right edge,
   tapering out by ~77% of the band's height) — not a left-to-right fade.
   Scoped with :not(:has(...)) to the no-image state only, so once a real
   Featured Image is set this stops matching and WP's own dim/overlay
   (has-contrast-background-color has-background-dim-50, already in the
   pattern markup) takes back over — tinting the photo instead of replacing
   it, keeping the white heading/subtitle legible. */
.kd-hero-home:not(:has(.wp-block-cover__image-background)) > .wp-block-cover__background {
	background-color: var(--blg-color-contrast) !important;
	opacity: 1 !important;
}

.kd-hero-home:not(:has(.wp-block-cover__image-background)) > .wp-block-cover__background::after {
	content: "";
	position: absolute;
	inset: 0;
	clip-path: polygon(76% 0, 100% 0, 100% 77%);
	background-color: color-mix(in srgb, var(--blg-color-secondary) 20%, transparent);
}

.kd-hero-home .wp-block-cover__inner-container {
	padding-inline: var(--blg-edge-pad);
}

/* Content column — left-aligned, capped so the two-line Display headline wraps
   the same way as the Figma comp ("A force for good," / "Georgia grown."). */
.kd-hero-home .kd-hero-content {
	max-width: 640px;
	align-items: flex-start;
	text-align: left;
}

.kd-hero-heading {
	color: var(--blg-color-base);
	margin: 0;
}

.kd-hero-subtitle {
	color: var(--blg-color-base);
	max-width: 34rem; /* ~544px — matches the Figma two-line wrap */
	margin: 0;
	line-height: 1.6;
}

.kd-hero-buttons {
	margin-top: var(--blg-space-sm);
}

/* Primary CTA — "Join the Movement": Sky Cyan fill, Deep Petrol text (Figma
   6:18). This is the one place the hero deviates from the site's default
   primary-blue button, so the override is scoped to this pattern only.
   global.css's default-button rule is `.wp-block-button:not(...):not(...)
   .wp-block-button__link` (4 class-selectors of specificity) — matching that
   weight here (.kd-hero-home + .wp-block-button + .kd-hero-cta--primary +
   .wp-block-button__link) so this override actually wins instead of tying and
   losing to source order. */
.kd-hero-home .wp-block-button.kd-hero-cta--primary .wp-block-button__link {
	background-color: var(--blg-color-accent);
	border-color: var(--blg-color-accent);
	color: var(--blg-color-contrast);
}

.kd-hero-home .wp-block-button.kd-hero-cta--primary .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--blg-color-accent) 85%, black);
	border-color: color-mix(in srgb, var(--blg-color-accent) 85%, black);
	color: var(--blg-color-contrast);
}

/* Secondary CTA — "See Our Members": white outline on the dark hero. */
.kd-hero-home .wp-block-button.kd-hero-cta--secondary .wp-block-button__link {
	background-color: transparent;
	color: var(--blg-color-base);
	border-color: var(--blg-color-base);
}

.kd-hero-home .wp-block-button.kd-hero-cta--secondary .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.15);
	color: var(--blg-color-base);
	border-color: var(--blg-color-base);
}

/* Tablet (≤1024px) — trim the min-height a touch so the band doesn't dominate
   the fold before any real photo is in place. */
@media (max-width: 1024px) {
	.kd-hero-home.wp-block-cover {
		min-height: 560px !important;
	}
}

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