/* =============================================================
   CATEGORY ARCHIVE HEROES — css/category-heroes.css
   -------------------------------------------------------------
   PORTING-MAP D4 (eight categories) and E8 (Services).

   Nine product_cat archives get a full-width photo hero carrying
   their own H1. The markup comes from inc/archive.php:
   `.services-hero` for Services and `.cat-hero` for the other
   eight — two class names, one component, because both names are
   v1's and renaming them buys nothing.

   -------------------------------------------------------------
   WHY THIS FILE EXISTS RATHER THAN LIVING IN services.css
   -------------------------------------------------------------
   Session 8 put the Services hero in css/services.css, which is
   only enqueued on term 395. D4 needs the same hero on eight more
   archives, so the rules moved here and services.css now holds
   only what is genuinely Services-specific: its term-description
   panel and CTA row. One hero, one stylesheet, nine users —
   rather than the same 60 lines in two files drifting apart.

   -------------------------------------------------------------
   THE PALETTE IS v2's, THE COPY IS v1's
   -------------------------------------------------------------
   v1's category-heroes.css centred white text over a navy/teal
   scrim built on #001e3c / #0073aa / #00838f, in Poppins. All
   three colours are retired by the mockup palette and Poppins is
   retired by the type decision (INSTRUCTIONS.md §5 — the mockup
   wins on anything visual). So the hero is not ported pixel for
   pixel: it uses the same light left-ramp pattern as the homepage
   hero, the four §E page heroes and the Services hero, which is
   what every other full-width hero in this theme already does.

   The *content* — H1 text, subtitle, photo — is v1's verbatim,
   because content comes from v1 (§5 again). That is the split.

   No raw hex below except inside the white ramp gradients, where
   rgba() steps of --wows-white are the whole mechanism; the same
   exception css/contact-us.css takes.
   ============================================================= */


/* ==============================================
   1. THE HERO
   ----------------------------------------------
   The photo arrives as an inline background-image
   from inc/archive.php, so these rules use
   background longhands and never the shorthand —
   the shorthand would reset the inline image.
   ============================================== */

.services-hero,
.cat-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--wows-hero-min);
	overflow: hidden;
	background-color: var(--wows-tint-1);
	background-size: cover;
	background-position: 70% 50%;
	background-repeat: no-repeat;
}

/*
 * px ramp, not % — see css/contact-us.css §1 for why.
 *
 * Stops are offset by --wows-scrim-x (style.css §1) because the copy sits in a
 * centred container: measured from the viewport alone, the ramp stays put while
 * the copy slides right, and this lede measured 1.00:1 at 1920px. Do not
 * "simplify" these back to bare px. → style.css §1
 */
.services-hero::before,
.cat-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg,
			var(--wows-white) 0px,
			rgba(255, 255, 255, 0.96) calc(var(--wows-scrim-x) + 420px),
			rgba(255, 255, 255, 0.65) calc(var(--wows-scrim-x) + 620px),
			rgba(255, 255, 255, 0.15) calc(var(--wows-scrim-x) + 800px),
			rgba(255, 255, 255, 0) calc(var(--wows-scrim-x) + 960px));
}

.services-hero-inner,
.cat-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wows-container);
	margin: 0 auto;
	padding: var(--wows-section-xl) var(--wows-gutter);
	animation: wows-rise .6s ease both;
}

.services-hero-inner > *,
.cat-hero-inner > * {
	max-width: 560px;
}

.services-hero-inner h1,
.cat-hero-inner h1 {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-hero);
	font-weight: 700;
	line-height: var(--wows-lh-hero);
	letter-spacing: var(--wows-ls-hero);
	color: var(--wows-ink);
	margin: 0 0 var(--wows-sp-4);
	text-wrap: balance;
}

/*
 * --wows-text-on-photo, not --wows-text: this sits on the photo itself. The
 * ramp holds ~0.96 across the copy, but these hero images are darker and busier
 * than the page heroes' — Note Counter measured 3.98:1 in --wows-text, under
 * AA's 4.5:1, and it failed at every width including 1440 rather than only on
 * wide screens. The heading is fine at ~15:1 (ink, and large).
 */
.services-hero-inner p,
.cat-hero-inner p {
	font-size: var(--wows-fs-lede);
	line-height: var(--wows-lh-lede);
	color: var(--wows-text-on-photo);
	margin: 0;
}


/* ==============================================
   2. RESPONSIVE
   ============================================== */

@media (max-width: 1040px) {
	.services-hero::before,
	.cat-hero::before {
		background: linear-gradient(90deg,
				var(--wows-white) 0px,
				rgba(255, 255, 255, 0.95) 420px,
				rgba(255, 255, 255, 0.55) 600px,
				rgba(255, 255, 255, 0) 820px);
	}
}

@media (max-width: 900px) {
	/* Ramp flips vertical — style.css §17's reasoning. */
	.services-hero,
	.cat-hero {
		align-items: flex-end;
		min-height: 560px;
	}

	.services-hero::before,
	.cat-hero::before {
		background: linear-gradient(180deg,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255, 0.06) 20%,
				rgba(255, 255, 255, 0.72) 32%,
				rgba(255, 255, 255, 0.97) 42%,
				var(--wows-white) 50%);
	}

	.services-hero-inner > *,
	.cat-hero-inner > * {
		max-width: none;
	}
}

/* 380px, down from 480 (design scan, 5 Sep 2026). Measured on a phone the
   hero came to 660px including its padding — most of a 844px screen spent
   before the archive begins, and the description and facts still follow
   before the first product. The H1, the lede and enough photo to read as a
   hero all fit in 380; the vertical ramp is unchanged, so the contrast
   measured at the 900px flip still holds. */
@media (max-width: 680px) {
	.services-hero,
	.cat-hero {
		min-height: 380px;
	}

	.services-hero-inner,
	.cat-hero-inner {
		padding-top: var(--wows-section-sm);
		padding-bottom: var(--wows-section-sm);
	}
}