/**
 * Homepage "Shop by Category" refinement -- Phase 2B.1.
 *
 * Scope: ONLY the existing WooCommerce [product_categories] shortcode
 * instance inside the homepage's "Shop by category" Elementor block, plus
 * that block's own eyebrow/heading widgets. Nothing else on the homepage,
 * and nothing on any other page, is touched.
 *
 * Scoping mechanism: `.elementor-element-51a5d23` is Elementor's own
 * auto-generated class for this specific widget instance (live-verified,
 * not guessed), combined with `body.home` as a second, redundant guard --
 * same convention as header.css/hero.css. The shortcode's markup carries no
 * IDs and no inline styles (live-verified), so this is a clean CSS-only
 * override with no specificity fights beyond Astra's own WooCommerce
 * integration stylesheet, which this reliably outranks the same way every
 * prior phase's `body.home`/ID-scoped rules have.
 *
 * Explicitly preserved, unchanged:
 *   - The WooCommerce [product_categories] shortcode itself (dynamic image/
 *     count/link data -- nothing here touches PHP or the shortcode config).
 *   - The four-tile, one-row desktop concept and the bottom-inset overlay
 *     concept (refined below, not replaced with a detached card footer).
 *   - Section copy ("Analog Tone Collection" / "Shop by category").
 *
 * Enqueued after tsc-tokens only (same reasoning as hero.css: typography.css
 * explicitly excludes the homepage, so this file supplies its own
 * font-family declarations rather than depending on it).
 */

/* ---- Section eyebrow / heading ----
 * Oswald -> Inter system. Per tokens.css's own documented convention,
 * Inter Display's 600 weight is reserved for section headings (700 is for
 * hero/display only) -- used here exactly as specified, not improvised.
 * Copy is untouched, only the typography.
 */
body.home .elementor-element-e0855c2 .elementor-heading-title {
	font-family: var(--tsc-font-body);
	font-weight: 600;
	font-size: var(--tsc-fs-caption);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tsc-text-muted-light);
}

body.home .elementor-element-b11b466 .elementor-heading-title {
	font-family: var(--tsc-font-display);
	font-weight: 600;
	font-size: var(--tsc-fs-h2);
	line-height: var(--tsc-lh-heading);
	letter-spacing: normal;
	text-transform: uppercase;
	color: var(--tsc-text-light);
}

/* ---- Grid ----
 * Astra's own grid already reflows correctly (4-up desktop, 2x2 mobile) --
 * NOT rebuilt. Only two things are made deliberate instead of left to
 * Astra's fixed-px tracks: fractional columns (so a gap change can never
 * cause overflow) and a token-driven gap for genuinely "generous" spacing
 * instead of Astra's ad hoc default.
 *
 * REAL-DEVICE FIX: a bare `1fr` track still carries an implicit
 * `min-width: auto`, which resolves to the track's content's min-content
 * size -- normally harmless, but live-measured each tile's <img> at
 * naturalWidth 300px (the source files, confirmed via the image-geometry
 * comment below). Chromium correctly treats replaced elements (<img>) as
 * min-width:0 by default per the CSS Sizing spec (computed min-width: 0px
 * confirmed live), so `1fr` alone never overflowed there -- but this exact
 * "auto min-size on a replaced element inside grid/flex" spec detail has a
 * long history of inconsistent implementation across WebKit/Safari
 * versions, which is the documented cause of this class of bug reproducing
 * on real iPhone Safari while never showing up under Chromium's device
 * emulation (still the Blink engine, not real WebKit). `minmax(0, 1fr)`
 * forces the track's minimum to 0 explicitly, regardless of any engine's
 * handling of the implicit default -- mathematically guarantees the two
 * tracks can never be forced wider than 50% each by any child's
 * min-content, on any engine. `min-width: 0` is also set explicitly on the
 * grid item and its link (belt-and-braces against the same failure mode
 * one level up the tree) and on the image itself (reinforces the spec
 * default explicitly rather than relying on it being implemented
 * correctly).
 */
body.home .elementor-element-51a5d23 ul.products.columns-4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--tsc-space-5);
}

body.home .elementor-element-51a5d23 li.product-category,
body.home .elementor-element-51a5d23 li.product-category > a {
	min-width: 0;
}

@media (max-width: 767px) {
	body.home .elementor-element-51a5d23 ul.products.columns-4 {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--tsc-space-4);
	}
}

/* ---- Image geometry ----
 * CSS-only normalization: the four source images currently have
 * inconsistent aspect ratios/formats (live-verified: three ~300x300 PNG,
 * one 300x169 PNG, one JPG). A single aspect-ratio here makes every tile
 * read consistently without touching a single Media Library file.
 * object-fit/object-position were already correctly set by Astra --
 * restated explicitly here rather than left implicit, per the brief.
 */
body.home .elementor-element-51a5d23 li.product-category {
	aspect-ratio: 1 / 1;
	height: auto;
}

body.home .elementor-element-51a5d23 li.product-category > a {
	display: block;
	position: relative;
	height: 100%;
	overflow: hidden; /* was `visible` -- needed to contain the hover zoom below */
}

body.home .elementor-element-51a5d23 li.product-category img {
	width: 100%;
	height: 100%;
	min-width: 0;
	object-fit: cover;
	object-position: 50% 50%;
}

/* ---- Category overlay (name + count) -- Variant B (corrected) ----
 * Phase 2B.1B: replaces the translucent white label panel (kept as
 * "Variant A" -- not deleted, saved outside the repo for reference) with a
 * photo-first treatment: no visible panel, a restrained bottom gradient for
 * contrast only, white/light text left-aligned near the lower-left corner.
 *
 * CORRECTION 1: the first pass of this gradient was live-verified too weak
 * -- its darkest stop was only 70% opaque, further reduced to an effective
 * ~63% by a redundant `opacity: 0.9` on the whole layer (the two compound
 * multiplicatively), leaving several of the four tile photos too bright
 * behind white text. The `opacity` property was removed entirely, and the
 * stops raised to 92%/70%/30%.
 *
 * CORRECTION 2 (this pass): 92%/70%/30% then read as too strong -- visually
 * a separate black band rather than a readability gradient. Reduced to
 * 80%/55%/20% per direction, at the same stop positions (0%/25%/45%/65%)
 * -- still dark enough right where the text sits (bottom ~0-25% height) to
 * keep the category name and count clearly readable against all four tile
 * photos, but lets noticeably more of the photograph read through above
 * and around the text than the previous pass.
 *
 * The gradient is a ::after pseudo-element on the tile's own <a> (already
 * position:relative + overflow:hidden from the image-geometry rules above)
 * -- no new DOM element, same technique used for the hero's overlay.
 * Explicit z-index on both the gradient and the title is required: without
 * it, generated ::after content paints after the title in source order and
 * would sit on top of the text.
 */
body.home .elementor-element-51a5d23 li.product-category > a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--tsc-bg) 80%, transparent) 0%,
		color-mix(in srgb, var(--tsc-bg) 55%, transparent) 25%,
		color-mix(in srgb, var(--tsc-bg) 20%, transparent) 45%,
		transparent 65%
	);
}

/*
 * SPECIFICITY FIX (with !important, evidenced): live-verified via
 * matched-rule tracing that the panel's background comes from Astra's own
 * rule (woocommerce-grid.min.css):
 *   .woocommerce-page ul.products li.product .woocommerce-loop-category__title
 *   { background-color: rgba(255, 255, 255, 0.88); }
 * (specificity 0,4,2 by the browser's own count).
 *
 * The previous fix chained real ancestor classes/elements to reach 0,6,3 --
 * comfortably higher on paper, and NOT reaching for !important on that
 * assumption. Live-tested (fresh page load, 1000ms settle to rule out the
 * unrelated `transition: background 0.3s` Astra also sets on this element,
 * which was fooling faster synchronous tests into looking like a cascade
 * failure): that 0,6,3 selector still lost. A deliberately extreme
 * selector (repeating classes far beyond 0,6,3) DID win, confirming this
 * is a genuine, larger-than-expected specificity gap, not a bug in the
 * selector itself or a testing artifact -- `!important` here is the
 * evidenced, not assumed, fix. Scoped narrowly to just the two background
 * properties (not the whole rule) to keep everything else normal-cascade.
 */
body.home .elementor-element-51a5d23 ul.products.columns-4 li.product-category .woocommerce-loop-category__title {
	position: absolute;
	z-index: 2;
	left: var(--tsc-space-3);
	right: var(--tsc-space-3);
	bottom: var(--tsc-space-3);
	padding: 0;
	background-color: transparent !important;
	background-image: none !important;
	text-align: left;
	font-family: var(--tsc-font-body);
	font-size: var(--tsc-fs-caption);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	line-height: var(--tsc-lh-heading);
	color: var(--tsc-text);
}

body.home .elementor-element-51a5d23 ul.products.columns-4 li.product-category .woocommerce-loop-category__title .count {
	display: block;
	margin-top: var(--tsc-space-1);
	font-family: var(--tsc-font-body);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tsc-text-muted);
}

/* ---- Hover / focus ----
 * Extremely subtle image scale only (1.02, down from Variant A's 1.03) --
 * the gradient no longer has a hover-response (removed along with the base
 * `opacity` property above: with the gradient's own stops now carrying
 * real contrast, a hover-only opacity bump was both unnecessary and, as
 * the compounding bug showed, an easy place to accidentally weaken
 * contrast again). A real focus-visible outline remains for keyboard
 * users. No shadows, no translate/slide, no color inversion. Motion
 * guarded for prefers-reduced-motion.
 */
@media (prefers-reduced-motion: no-preference) {
	body.home .elementor-element-51a5d23 li.product-category img {
		transition: transform 400ms ease;
	}
}

body.home .elementor-element-51a5d23 li.product-category > a:hover img,
body.home .elementor-element-51a5d23 li.product-category > a:focus-visible img {
	transform: scale(1.02);
}

body.home .elementor-element-51a5d23 li.product-category > a:focus-visible {
	outline: 2px solid var(--tsc-accent);
	outline-offset: 2px;
}