/* Hero — full-bleed photo, text anchored left. Deliberately static (no
   parallax/tilt JS) — same look on desktop and mobile, no motion to get
   wrong. Legibility over the photo comes from a lighter, more localized
   scrim PLUS a text-shadow glow on the copy itself, rather than a heavy
   wash that would hide the dogs on the right side of the photo.
   True depth-separated parallax ("option 2" — mountains/skyline vs. dogs
   moving independently) is the planned future version once separate layer
   assets exist (a background-only plate + huskies isolated on transparent);
   this photo is a single flattened composite, so that's not buildable yet.
   Breakpoints: phone <=599px, tablet 600-899px, medium 900-1199px,
   large 1200-1599px, xl >=1600px. */

.kds-hero-banner {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 460px;
}

.kds-hero-banner__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.kds-hero-banner__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 58% 45%;
	display: block;
}

.kds-hero-banner__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba( 28, 20, 38, 0.7 ) 0%,
		rgba( 28, 20, 38, 0.48 ) 26%,
		rgba( 28, 20, 38, 0.12 ) 46%,
		rgba( 28, 20, 38, 0 ) 58%
	);
}

.kds-hero-banner__content {
	position: relative;
	z-index: 1;
	/* !important is needed here — WordPress's own generated CSS for this
	   block's parent (ecddd43a .alignfull{max-width:none;}) has higher
	   specificity than a plain class selector and would otherwise silently
	   strip this width constraint. This is a targeted override of one
	   specific framework rule, not a general habit. */
	max-width: 560px !important;
	padding: 3rem 1.5rem 3rem clamp( 1.25rem, 4vw, 4rem );
	text-shadow: 0 6px 28px rgba( 20, 12, 28, 0.85 ), 0 2px 10px rgba( 20, 12, 28, 0.9 ), 0 1px 3px rgba( 20, 12, 28, 0.95 );
}

/* Top-anchored, not bottom — the badge used to sit bottom/right, but on
   narrow screens the heading/paragraph wrap onto many more lines and push
   the button row down into that same bottom-right zone — real collision
   confirmed live (Donate button landing under "Come Run With The Pack").
   Anchoring to the top instead sidesteps it at every width, regardless of
   how tall the text content grows, rather than trying to predict/limit that
   height per-breakpoint. */
.kds-hero-banner__badge {
	position: absolute;
	z-index: 1;
	top: 2%;
	right: 6%;
	max-width: 44%;
	background: #ffffff;
	color: #1c1c1e;
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	box-shadow: 0 8px 20px rgba( 28, 28, 30, 0.25 );
	text-align: center;
	text-shadow: none;
}

@media (min-width: 600px) {
	.kds-hero-banner { min-height: 520px; }
}

@media (min-width: 900px) {
	.kds-hero-banner { min-height: 600px; }
}

@media (min-width: 1200px) {
	.kds-hero-banner { min-height: 660px; }
}

@media (min-width: 1600px) {
	.kds-hero-banner { min-height: 720px; }
}

/* ---------------------------------------------------------------------
   STACKED HERO at <= 899px — photo above, words below.

   Why the overlay fails on narrow screens, specifically: this photograph is
   a CENTRED composition. The adult husky sits dead centre with a puppy
   either side, together occupying roughly the middle 54% of the frame.
   On desktop the text is anchored left, in the empty third, and the scrim
   darkens exactly that side. Below ~900px the content is full-width, so
   there is no empty column left to sit in and the headline lands across the
   adult's face. Confirmed at 390px, 2026-08-31.

   This is fixable only because the photo is a real <img> in the DOM rather
   than a CSS background-image — un-absolute it and it flows above the text.
   Had it been a background this would have been a rebuild.

   No background-color is declared below on purpose: body is already
   canvas (#2a0f3d) and the hero's own colours — teal eyebrow, white
   heading, stone-200 paragraph — are all light, so they stay legible
   against it without introducing a new value.
   --------------------------------------------------------------------- */
@media (max-width: 899px) {
	.kds-hero-banner {
		display: block;
		min-height: 0;
	}

	.kds-hero-banner__media {
		position: relative;
		inset: auto;
		/* the photo's own 16:9, so nothing is cropped at tablet width */
		aspect-ratio: 16 / 9;
	}

	/* The scrim exists to keep white text readable over the photograph.
	   With the text moved out from under it, all it does is dim the dogs. */
	.kds-hero-banner__scrim {
		display: none;
	}

	.kds-hero-banner__content {
		/* max-width stays at the desktop 560px ON PURPOSE. Removing it was
		   tried and reverted the same day: at 768px it let the paragraph run
		   to about 88 characters a line, well past comfortable reading. At
		   phone widths 560px never binds anyway, so the override bought
		   nothing and cost line length at tablet. */
		padding: 1.75rem clamp( 1.25rem, 5vw, 2rem ) 2.5rem;
		/* Same reasoning as the scrim: the triple shadow is for legibility
		   over a photo. On the flat page background it only smears the type. */
		text-shadow: none;
	}
}

@media (max-width: 599px) {
	/* 4:3 at phone width crops the SIDES only — with object-fit:cover on a box
	   taller than the source, the image is scaled to the box height and the
	   horizontal edges are trimmed. That keeps the central 75% across, and the
	   dogs sit between roughly 28% and 82%, so all three survive with margin.
	   A 16:9 band at 390px would be only 219px tall and read as a stripe. */
	.kds-hero-banner__media {
		aspect-ratio: 4 / 3;
	}

	.kds-hero-banner__img {
		/* centred rather than the desktop 58%, because the subject is centred
		   and there is no longer any text to keep clear of */
		object-position: 50% 45%;
	}
}

/* ---------------------------------------------------------------------
   Buttons must NOT inherit the hero's text-shadow.

   .kds-hero-banner__content carries a triple dark shadow so white copy
   stays legible over the photograph. text-shadow inherits, so it also
   landed on the buttons — where the text is DARK and sits on its own
   solid fill. The result was a dark halo behind black letters on orange:
   reported as "black text with some kind of blur behind it", confirmed
   via getComputedStyle, 2026-08-21.

   The badge above already carries this same reset for the same reason.
   A button brings its own background; it never needs the shadow.
   --------------------------------------------------------------------- */
.kds-hero-banner__content .wp-block-button__link,
.kds-hero-banner__content .wp-block-button {
	text-shadow: none;
}