/**
 * Catalog Hero -- shared shop/category branded Hero, Phase 2C.6, generalized
 * Phase 2C.7 (Hero System Extension).
 *
 * RENAMED this phase from assets/css/all-products-hero.css (see
 * inc/catalog-hero.php's header comment for the full rationale): every rule
 * below was already content-agnostic -- nothing in this file hard-codes
 * "All Products" copy or structure -- so the rename is a pure selector
 * rename (`.tsc-all-products-hero*` -> `.tsc-catalog-hero*`), not a rewrite.
 * One shared visual system serves the shop archive AND every product-
 * category archive; the PHP markup (inc/catalog-hero.php) supplies
 * context-sensitive copy into the exact same classes.
 *
 * Ownership: astra-child/inc/catalog-hero.php, hooked to `astra_header_after`
 * and scoped there to `is_shop() || is_product_category()`, always excluding
 * `is_search()`. This file owns every visual rule for that markup: the
 * background image reference, the overlay, typography, and spacing. No
 * selector here needs a body-class guard of its own -- `.tsc-catalog-hero`
 * only ever prints on an active context to begin with.
 *
 * BACKGROUND IMAGE (Phase: dedicated Catalog Hero artwork): the temporary
 * placeholder (reusing the homepage Hero's own live media-library URL) has
 * been replaced with dedicated artwork uploaded to the WordPress Media
 * Library at `wp-content/uploads/2026/09/header-hero-2.webp` (attachment
 * id 4881, live-confirmed via the WP REST API -- 1672x941, image/webp,
 * 211406 bytes; matches `assets/img/header-hero-2.webp` in this repo
 * byte-for-byte, the same optimized asset the user uploaded manually).
 * Referenced by its absolute production Media Library URL, NOT a
 * theme-relative path: unlike the self-hosted font files in tokens.css,
 * this asset's canonical copy lives in the WordPress uploads directory
 * (versioned/manageable by the client through the Media Library), not in
 * this theme's own assets folder -- the theme-folder copy is a source
 * artifact for optimization/version-control only, not what's served.
 *
 * CROP: background-position-Y retuned for this image's own composition
 * (the previous 38%/30% values were tuned for a completely different
 * source image). At the desktop hero's own box ratio (very wide relative
 * to its height -- e.g. 1440x490 at a 1440px viewport), `cover` crops
 * significantly on the Y axis; 38% left too much ceiling/monitor headroom
 * and cropped the mixing console (the requested visual anchor) uncomfortably
 * close at the top. Tested candidate positions from 0-100% by precisely
 * replicating the CSS `cover` algorithm in Python/PIL (not eyeballed) --
 * 60% keeps the console clearly dominant while still showing the monitor
 * screens above it for studio context, and leaves the frame's left portion
 * (behind the text overlay) relatively calm/dark. At the MOBILE hero's own
 * box ratio (much closer to the image's native aspect ratio -- confirmed
 * via the same replicated-algorithm test that `cover`'s scale factor is
 * driven by height there, not width), the scaled image's height already
 * matches the box almost exactly, so background-position-Y has virtually
 * no visible effect on mobile regardless of value -- kept at the same 60%
 * for consistency, not because it changes anything there.
 *
 * TEMPORARY (still applies): swap this one url() again if further Hero
 * artwork iterations are approved; nothing else in this file depends on
 * the image's specific content. The exact same crop/overlay treatment is
 * intentionally identical across every context (shop and every category)
 * -- the brief approved this treatment once and asked category Heroes to
 * "clearly belong to the same design system," not for a per-category
 * visual variant.
 *
 * Enqueued after tsc-tokens only (functions.php) -- same reasoning as
 * hero.css/audio-software.css: every rule below is self-contained and
 * doesn't need typography.css's broader ruleset.
 */

/* ============================================================
 * 1. SHELL + BACKGROUND
 * ============================================================
 * Desktop target 420-520px tall (clamp mid-point tracks viewport width, not
 * height, since this Hero -- unlike the homepage's -- has no absolutely-
 * positioned transparent header to clear; astra_header_after prints it as a
 * normal-flow sibling immediately after the header, live-confirmed zero
 * overlap risk on both the shop archive and category archives, which share
 * identical `#primary > main#main > .ast-woocommerce-container` markup).
 */
.tsc-catalog-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(420px, 34vw, 520px);
	overflow: hidden;
	isolation: isolate; /* keeps the overlay pseudo-elements' z-index local to this section */
	background-image: url('https://tokyostudiocapture.com/wp-content/uploads/2026/09/header-hero-2.webp');
	background-size: cover;
	background-position: center 60%;
	background-repeat: no-repeat;
}

@media (max-width: 767px) {
	.tsc-catalog-hero {
		min-height: clamp(320px, 78vw, 400px);
		background-position: center 60%;
	}
}

/*
 * Overlay, two layers:
 *
 * ::before -- the primary treatment. An angled (not purely vertical, so it
 * reads as a soft editorial wipe rather than a hard PA-style slit/panel)
 * espresso-brown gradient, opaque enough behind the text column to
 * guarantee contrast on its own (not dependent on the photo's own tones),
 * fading out before the frame's right two-fifths so the studio photograph
 * stays genuinely visible there -- "glimpses of the studio," not a clean
 * full photograph, not a flat tint over the whole frame either.
 *
 * ::after -- a light whole-frame wash on top of ::before, for cohesion and
 * depth only (kept deliberately subtle so it doesn't become the uniform
 * brown-transparency layer the brief warns against).
 */
.tsc-catalog-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		color-mix(in srgb, var(--tsc-bg) 82%, var(--tsc-accent) 18%) 0%,
		color-mix(in srgb, var(--tsc-bg) 82%, var(--tsc-accent) 18%) 38%,
		color-mix(in srgb, var(--tsc-bg) 82%, var(--tsc-accent) 18%) 55%,
		transparent 86%
	);
}

.tsc-catalog-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: color-mix(in srgb, var(--tsc-bg) 22%, transparent);
}

@media (max-width: 767px) {
	/* Narrower frame: the same soft-edged panel needs to reach further right
	   to keep the text column fully legible, and the wash needs to carry
	   more of the contrast job since there's less width for the gradient to
	   work with. */
	.tsc-catalog-hero::before {
		background: linear-gradient(
			100deg,
			color-mix(in srgb, var(--tsc-bg) 86%, var(--tsc-accent) 14%) 0%,
			color-mix(in srgb, var(--tsc-bg) 86%, var(--tsc-accent) 14%) 62%,
			transparent 100%
		);
	}

	.tsc-catalog-hero::after {
		background: color-mix(in srgb, var(--tsc-bg) 32%, transparent);
	}
}

/* ============================================================
 * 2. LAYOUT
 * ============================================================
 * `.ast-container` (Astra's own responsive content-width utility class,
 * added alongside this BEM class in the markup) supplies max-width/padding
 * at every breakpoint -- live-confirmed identical to the padding
 * `.woocommerce-breadcrumb`/`.woocommerce-products-header`/the product grid
 * already use on BOTH the shop archive and category archives, so this
 * Hero's text column lines up exactly with the catalog beneath it, on
 * either context, at every viewport, without duplicating Astra's own
 * breakpoint values here.
 */
.tsc-catalog-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

.tsc-catalog-hero__content {
	max-width: 560px;
}

/* ============================================================
 * 3. TYPOGRAPHY
 * ============================================================
 * Inter / Inter Display only, per the Phase 2C.6 brief -- no Oswald. Scale
 * kept restrained: the headline sits close to the sitewide --tsc-fs-h2 step
 * (section-heading scale), not the homepage hero's own larger
 * --tsc-fs-display step, since this Hero introduces a catalog rather than
 * carrying the site's primary first-impression statement.
 */
.tsc-catalog-hero__eyebrow {
	margin: 0 0 var(--tsc-space-3);
	font-family: var(--tsc-font-body);
	font-size: var(--tsc-fs-caption);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tsc-text-muted);
}

/*
 * `overflow-wrap: break-word` -- Phase 2C.7 addition. This heading's text is
 * dynamic on category archives (the queried term's own name, see
 * inc/catalog-hero.php), so unlike the Phase 2C.6 static "The TSC
 * Collection" copy this file can no longer assume every possible headline
 * is short. Word-boundary wrapping already works for any multi-word name
 * (e.g. "Saturation & Tape") with no extra CSS; this only guards the edge
 * case of a single future category name too long to fit `max-width: 560px`
 * at any font-size in the clamp() below, so it wraps rather than overflows
 * the Hero's content column.
 */
.tsc-catalog-hero__heading {
	margin: 0 0 var(--tsc-space-4);
	font-family: var(--tsc-font-display);
	font-size: clamp(1.75rem, 3.4vw, 3.25rem);
	font-weight: 700;
	line-height: var(--tsc-lh-tight);
	letter-spacing: normal;
	text-transform: uppercase;
	overflow-wrap: break-word;
	color: var(--tsc-text);
}

.tsc-catalog-hero__supporting {
	margin: 0;
	max-width: 460px;
	font-family: var(--tsc-font-body);
	font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
	font-weight: 400;
	line-height: var(--tsc-lh-body);
	color: var(--tsc-text-muted);
}