/*
 * Scott Pool 2026 -- homepage hero (Phase 2B).
 *
 * Targets the block markup on the "Home" page (page-no-title template):
 * a full-width Group(.sp-hero) containing the portrait image
 * (.sp-hero__media) and the copy/CTA column (.sp-hero__content).
 *
 * Sizing follows the design spec's own tested anchors (390px mobile /
 * 1440px desktop, "Landing Page.dc.html" section 1b, responsive QA
 * checked at 320/375/390/430/768/1024/1440) via fluid clamp() scaling
 * between those two points, rather than a hard jump at one breakpoint --
 * the spec's own headline/eyebrow/lede/rule sizes don't align to the
 * existing token scale closely enough to reuse it here without visibly
 * drifting from the approved design.
 */

.sp-hero {
	background: var(--wp--preset--color--white);
}

/* ===== Copy column =====
   Phase 20: .sp-hero__media (the standalone Scott cutout portrait) was
   removed from the page entirely -- the new top banner (.sp-donate-banner)
   now carries Scott's photo, the skyline, and the campaign lockup as one
   piece, so a second, separate portrait directly below it was redundant.
   The hero is a single centered copy column at every width now; see the
   removed desktop split rules' history below for what used to sit here. */

.sp-hero__content {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--8) var(--gutter-m) var(--wp--preset--spacing--8);
}

.sp-hero__eyebrow {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(11px, calc(10.26px + 0.19vw), 13px);
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--campaign-red);
	margin: 0 0 var(--wp--preset--spacing--4);
}

.sp-hero__headline {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(42px, calc(28.63px + 3.43vw), 78px);
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--primary-navy);
	margin: 0 0 var(--wp--preset--spacing--5);
}

.sp-hero__rule {
	width: clamp(68px, calc(60.57px + 1.9vw), 88px);
	height: var(--border-width-accent);
	background: var(--wp--preset--color--campaign-red);
	border: 0;
	margin: 0 0 var(--wp--preset--spacing--5);
}

.sp-hero__lede {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 400;
	font-size: clamp(17px, calc(15.89px + 0.29vw), 20px);
	line-height: 1.6;
	color: var(--wp--preset--color--secondary-navy);
	max-width: 30em;
	margin: 0 0 var(--wp--preset--spacing--6);
}
/* Approved copy differs by breakpoint (shorter mobile lede, per the
   campaign's own compliance-audited copy doc) -- both paragraphs are
   real, editable blocks; only one is ever visible, and display:none
   content isn't announced by screen readers, so there's no duplicate
   announcement. */
.sp-hero__lede--desktop {
	display: none;
}
@media (min-width: 1024px) {
	.sp-hero__lede--desktop {
		display: block;
	}
	.sp-hero__lede--mobile {
		display: none;
	}
}

.sp-hero__actions {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}
.sp-hero__actions .wp-block-button__link {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 17px;
}
/* Secondary "Meet Scott" CTA -- a real button (is-style-sp-outline), shown
   at every width alongside Donate. Previously a desktop-only text link
   ("Read Scott's Vision"); replaced per the two-button hero spec. */

/* Donate is the hero's dominant CTA -- sized up from the shared sp-primary
   button style using the design system's existing "lg" scale
   (space-4/space-10 padding, fs-body-lg text, 64px touch target) rather
   than inventing new values, so it reads as clearly primary next to the
   substantial-but-secondary Meet Scott button. Scoped to
   .sp-hero__primary-cta only -- the header's own Donate button
   (is-style-sp-primary, unscoped) is intentionally untouched.

   Selector combines all three classes actually present on the button's
   own div (.wp-block-button.is-style-sp-primary.sp-hero__primary-cta),
   not just .sp-hero__primary-cta as a descendant qualifier -- the shared
   is-style-sp-primary rule in header.css is itself 3 classes deep
   (.wp-block-button.is-style-sp-primary .wp-block-button__link), so a
   plain 2-class override here was silently losing that specificity fight
   and never actually applying (caught by testing, not assumed). */
.wp-block-button.is-style-sp-primary.sp-hero__primary-cta .wp-block-button__link {
	min-height: 64px;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--body-lg);
}
@media (max-width: 767px) {
	/* Mobile: both CTAs full width, stacked (Contribute first). core's Buttons
	   block forces align-items:center on .sp-hero__actions via its own
	   auto-generated .is-layout-flex styles (out-specifying a plain
	   container rule), which otherwise silently caps every button to its
	   own content width -- align-self here overrides that per-button,
	   without touching the shared container rule. */
	.sp-hero__primary-cta,
	.sp-hero__secondary-cta {
		align-self: stretch;
	}
	.wp-block-button.is-style-sp-primary.sp-hero__primary-cta .wp-block-button__link {
		width: 100%;
	}
	.sp-hero__secondary-cta .wp-block-button__link {
		width: 100%;
		min-height: var(--touch-min);
	}
	/* Campaign-team feedback (final revision pass): the large mobile
	   homepage Contribute CTA read as too visually dominant -- scoped
	   strictly to .sp-hero__primary-cta on mobile only (not the header CTA,
	   not the Meet Scott button, not desktop). Full-width/64px/spacing-10
	   padding/body-lg text above is dialed back to a smaller but still
	   fully usable size: campaign red and a >=44px touch target (--touch-min)
	   are both kept.

	   Phase 23.2B: align-self was `center`, which left the CTA visually
	   centred while the H1/rule/lede above it are all flush-left -- read as
	   a mistake. `flex-start` puts it on the same left edge as the hero
	   copy; the reduced size below is unchanged. */
	.sp-hero__primary-cta {
		align-self: flex-start;
	}
	.wp-block-button.is-style-sp-primary.sp-hero__primary-cta .wp-block-button__link {
		width: auto;
		min-height: var(--touch-min);
		padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
		font-size: var(--wp--preset--font-size--body);
	}
}

/* ===== Button block styles (core/button) =====
   sp-outline and sp-text-link are new in this phase; sp-primary and
   sp-outline-on-dark already exist from the header. */

.wp-block-button.is-style-sp-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary-navy);
	border: var(--border-width-rule) solid var(--wp--preset--color--primary-navy);
	border-radius: var(--radius-none);
	transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.wp-block-button.is-style-sp-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-navy);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-sp-text-link {
	display: inline-flex;
}
.wp-block-button.is-style-sp-text-link .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary-navy);
	border: 0;
	border-bottom: var(--border-width-rule) solid var(--wp--preset--color--divider);
	border-radius: var(--radius-none);
	padding: var(--wp--preset--spacing--3) 2px;
	min-height: auto;
	transition: color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.wp-block-button.is-style-sp-text-link .wp-block-button__link:hover {
	color: var(--wp--preset--color--campaign-red);
	border-bottom-color: var(--wp--preset--color--campaign-red);
	transform: translateX(4px);
}

/* ===== Desktop: split layout (>=1024px, matches the header's own
   breakpoint) ===== */

@media (min-width: 1024px) {
	/* Campaign-team feedback (final revision pass): too much dead space
	   between the full-width banner and this hero. Two independent causes,
	   fixed separately below.

	   1. theme.json's global blockGap (var(--wp--preset--spacing--8), 32px)
	   is applied by core as margin-block-start on every top-level block in
	   the post content after the first, via a zero-specificity :where()
	   rule -- so .sp-hero (the second top-level block, right after the
	   banner) gets an unwanted 32px gap above it that no earlier phase ever
	   overrode. A single-class selector trivially beats :where(), so this
	   is a clean, narrowly-scoped override -- it only cancels the gap
	   above THIS section, not blockGap generally.

	   Phase 16: fully zeroing that gap (Phases 12-15) read as slightly too
	   compressed against the banner -- this replaces core's removed 32px
	   with a smaller, deliberate 24px instead of nothing, so the whole
	   hero (copy column and portrait together, since this margin sits on
	   .sp-hero itself, above both columns) sits a little further down with
	   some intentional breathing room, not zero and not the original
	   oversized gap.

	   Phase 23: the homepage restructure audit found the banner->eyebrow
	   gap had grown to ~140px on desktop -- a manual `.sp-hero { padding-top:
	   70px }` had been added in the user Global Styles record on top of this
	   24px margin AND .sp-hero__content's own 48px top padding. The banner->
	   hero seam is governed here, not there, so padding-top:0 neutralises
	   that manual override (this file loads after the global-styles inline
	   CSS, so an equal-specificity rule here wins) and .sp-hero__content's
	   top padding is trimmed to spacing-8 below. Net desktop gap: 24 + 32 =
	   56px -- deliberate, not the old oversize, not cramped. */
	.sp-hero {
		margin-block-start: 24px;
		padding-top: 0;
	}
	/* Phase 20: the two-column split (copy + standalone portrait) is gone
	   now that .sp-hero__media no longer exists -- .sp-hero__content is the
	   section's only child, so it's centered directly on .sp-hero's own
	   white background instead of occupying a grid track. Kept on the same
	   var(--container-max) constraint the base/mobile rule already uses
	   (just re-applied here since nothing overrides it now), with a bit
	   more vertical breathing room than the mobile padding for a proper
	   desktop hero. */
	.sp-hero__content {
		max-width: var(--container-max);
		margin: 0 auto;
		/* Phase 23: top trimmed from spacing-12 (48px) to spacing-8 (32px)
		   as part of the banner->hero gap fix above; bottom stays at
		   spacing-12 so the hand-off into the first content section keeps a
		   clear boundary. */
		padding: var(--wp--preset--spacing--8) var(--gutter-m) var(--wp--preset--spacing--12);
	}
	.sp-hero__actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
	.sp-hero__actions .wp-block-button__link {
		min-height: 0;
	}
	/* Phase 15: divider moved back to the hero's own bottom edge -- Phase
	   14 moved it under the banner instead, but team feedback this round
	   was explicit that it belongs at the bottom of the hero, transitioning
	   into Meet Scott, with the portrait visually sitting on/connecting
	   into it. See .sp-donate-banner in content.css -- its own border-
	   bottom (added Phase 14) is removed so there's a single divider, not
	   two. Slim on purpose (--border-width-hairline, 1px) per this round's
	   explicit "not a heavy thick divider" instruction -- same weight as
	   every earlier attempt, this phase only corrected the position. Since
	   the portrait (640px, above) is now taller than the copy column at
	   typical desktop widths and both are top-aligned, .sp-hero's own
	   rendered height is driven by the portrait -- so this border-bottom
	   lands right at the portrait's own base, not an arbitrary distance
	   below it.

	   Phase 16: the flat 1px hairline read as too thin/unfinished. Kept
	   the same 24px margin-block-start logic above (position untouched --
	   still lands right at the portrait's base) but restyled as a 2px
	   navy accent that fades toward both outer edges via border-image
	   (border-width/style set the box's actual border thickness; the
	   gradient itself is supplied by border-image-source, sliced to 1 so
	   it isn't stretched into a 9-slice frame). Only the bottom edge has
	   any width, so the gradient only ever paints there. No shadow/glow --
	   just a two-stop-fade navy line, restrained on purpose. */
	.sp-hero {
		border-style: solid;
		border-width: 0 0 2px 0;
		border-image-slice: 1;
		border-image-source: linear-gradient(
			to right,
			transparent 0%,
			var(--wp--preset--color--primary-navy) 18%,
			var(--wp--preset--color--primary-navy) 82%,
			transparent 100%
		);
	}
	/* The section immediately after the hero ("Meet Scott") still picks up
	   the usual core blockGap margin-block-start (32px, the same mechanism
	   described for the banner->hero seam elsewhere in this file), stacked
	   on top of .sp-section's own 80px top padding -- kept zeroed so the
	   transition stays clean/tight without needing a heavy line to feel
	   intentional. Scoped via the adjacent-sibling combinator to just this
	   one boundary, not to .sp-section generally. */
	.sp-hero + .sp-section {
		margin-block-start: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button.is-style-sp-outline .wp-block-button__link,
	.wp-block-button.is-style-sp-text-link .wp-block-button__link {
		transition-duration: 1ms;
	}
}