/**
 * Plugin Product Hero -- TSC Rack 2 product page (first pass, hero only).
 *
 * Markup/ownership: astra-child/inc/plugin-product-hero.php prints
 * `.tsc-plugin-hero` on `astra_header_after`, for the TSC Rack product only,
 * and adds `body.tsc-has-plugin-hero`. Every selector here is either a
 * `.tsc-plugin-hero*` class (only ever printed by that file) or scoped to
 * `body.tsc-has-plugin-hero` -- NAM product pages cannot match any rule below.
 *
 * Enqueued on is_product() after tsc-single-product (functions.php).
 *
 * VISUAL SYSTEM: warm black / brown / amber from the existing tokens
 * (--tsc-bg, --tsc-surface, --tsc-accent #C19A83), Inter / Inter Display,
 * flat square buttons like the homepage hero and the purchase-summary CTA.
 * No page-builder dependency, no JS.
 *
 * BACKGROUND: assets/img/tsc-rack-2-hero-bg.{webp,jpg} (the approved
 * background_1.png, re-encoded for the web; 1672x941). Three readability
 * layers on top of it, all pseudo-elements/gradients, nothing baked into
 * the image:
 *   ::before  -- left-anchored readability panel behind the copy (opaque
 *                near the left edge, fading out under the UI) plus a light
 *                whole-frame wash so the photo never reads as pure black
 *                but its lamps/console stay visible on the right.
 *   ::after   -- a soft warm glow behind the UI (subtle depth, keeps the
 *                amber restrained) and a bottom fade into the page surface
 *                so the section hands over cleanly to the content below.
 *
 * The `!important` on the two native WooCommerce elements at the bottom
 * follows single-product.css's documented policy for overriding Astra's
 * higher-specificity native rules; nothing else in this file needs it.
 */

/* ============================================================
 * 1. SHELL + BACKGROUND
 * ============================================================ */
.tsc-plugin-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: clamp(560px, 82vh, 900px);
	padding-block: clamp(40px, 6vh, 72px) clamp(32px, 5vh, 56px);
	color: var(--tsc-text);
	background-color: var(--tsc-bg);
	background-image: url('../img/tsc-rack-2-hero-bg.jpg');
	background-image: image-set(
		url('../img/tsc-rack-2-hero-bg.webp') type('image/webp'),
		url('../img/tsc-rack-2-hero-bg.jpg') type('image/jpeg')
	);
	background-size: cover;
	background-position: 62% 48%;
	background-repeat: no-repeat;
}

.tsc-plugin-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			96deg,
			color-mix(in srgb, var(--tsc-bg) 94%, var(--tsc-accent) 6%) 0%,
			color-mix(in srgb, var(--tsc-bg) 90%, var(--tsc-accent) 10%) 26%,
			color-mix(in srgb, var(--tsc-bg) 62%, transparent) 46%,
			color-mix(in srgb, var(--tsc-bg) 30%, transparent) 70%,
			color-mix(in srgb, var(--tsc-bg) 48%, transparent) 100%
		),
		color-mix(in srgb, var(--tsc-bg) 34%, transparent);
}

.tsc-plugin-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(
			55% 62% at 74% 46%,
			color-mix(in srgb, var(--tsc-accent) 16%, transparent) 0%,
			transparent 72%
		),
		linear-gradient(
			180deg,
			transparent 0%,
			transparent 72%,
			color-mix(in srgb, var(--tsc-bg) 78%, transparent) 100%
		);
}

/* ============================================================
 * 2. LAYOUT
 * ============================================================
 * `.ast-container` (Astra's responsive content-width utility, same class
 * the catalog hero reuses) supplies max-width + side padding at every
 * breakpoint. Desktop: copy ~38% / UI ~62%, features spanning both.
 */
.tsc-plugin-hero .tsc-plugin-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	/* Hero-specific side padding (overrides Astra's flat 20px .ast-container
	   inset; the two-class selector out-specifies it regardless of load
	   order) so the copy and UI never sit against the viewport edge at
	   laptop widths; max-width stays Astra's own. */
	padding-inline: clamp(24px, 4vw, 56px);
	display: grid;
	grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
	grid-template-areas:
		"copy media"
		"features features";
	column-gap: clamp(32px, 4vw, 64px);
	row-gap: clamp(28px, 4vh, 48px);
	align-items: center;
}

.tsc-plugin-hero__copy {
	grid-area: copy;
	max-width: 540px;
}

.tsc-plugin-hero__media {
	grid-area: media;
	justify-self: end;
	width: 100%;
	max-width: 880px;
	/* The UI floats slightly past the copy column's grid edge into the
	   photograph's negative space -- translate only, no rotation/skew. */
	transform: translateX(3%);
}

.tsc-plugin-hero__media picture,
.tsc-plugin-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.tsc-plugin-hero__media img {
	border-radius: 10px;
	box-shadow:
		0 1px 0 color-mix(in srgb, var(--tsc-text) 10%, transparent),
		0 30px 70px -20px color-mix(in srgb, #000 78%, transparent),
		0 0 0 1px color-mix(in srgb, var(--tsc-text) 8%, transparent),
		0 0 120px -10px color-mix(in srgb, var(--tsc-accent) 22%, transparent);
}

.tsc-plugin-hero__features {
	grid-area: features;
}

/* ============================================================
 * 3. TYPOGRAPHY
 * ============================================================ */
.tsc-plugin-hero__eyebrow {
	margin: 0 0 var(--tsc-space-4);
	font-family: var(--tsc-font-body);
	font-size: var(--tsc-fs-caption);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tsc-accent);
}

.tsc-plugin-hero__title {
	margin: 0 0 var(--tsc-space-2);
	font-family: var(--tsc-font-display);
	font-size: clamp(2.75rem, 5.2vw, 4.75rem);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tsc-text);
}

.tsc-plugin-hero__subtitle {
	margin: 0 0 var(--tsc-space-6);
	font-family: var(--tsc-font-body);
	font-size: clamp(0.8125rem, 1vw, 0.9375rem);
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--tsc-text-muted);
}

.tsc-plugin-hero__headline {
	margin: 0 0 var(--tsc-space-3);
	font-family: var(--tsc-font-display);
	font-size: clamp(1.375rem, 1.9vw, 1.75rem);
	font-weight: 600;
	line-height: var(--tsc-lh-heading);
	letter-spacing: normal;
	text-transform: none;
	color: var(--tsc-text);
}

.tsc-plugin-hero__supporting {
	margin: 0 0 var(--tsc-space-6);
	max-width: 34em;
	font-family: var(--tsc-font-body);
	font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
	font-weight: 400;
	line-height: var(--tsc-lh-body);
	color: var(--tsc-text-muted);
}

/* ============================================================
 * 4. PRICE + CTAs
 * ============================================================
 * The add-to-cart form is WooCommerce's own (`form.cart` > quantity +
 * `button.single_add_to_cart_button`); it is restyled here in place, not
 * replaced. The quantity control is hidden visually for this single-license
 * product -- WooCommerce still posts quantity=1 from the hidden input.
 */
.tsc-plugin-hero__purchase {
	display: flex;
	flex-direction: column;
	gap: var(--tsc-space-4);
}

.tsc-plugin-hero__price,
.tsc-plugin-hero__price .price {
	font-family: var(--tsc-font-display);
	font-size: clamp(1.375rem, 1.8vw, 1.625rem);
	font-weight: 600;
	color: var(--tsc-text);
}

.tsc-plugin-hero__price del {
	margin-right: var(--tsc-space-2);
	font-weight: 400;
	font-size: 0.75em;
	color: var(--tsc-text-muted);
	opacity: 1;
}

.tsc-plugin-hero__price ins {
	text-decoration: none;
	color: var(--tsc-text);
}

.tsc-plugin-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tsc-space-3) var(--tsc-space-3);
}

.tsc-plugin-hero__cart form.cart {
	margin: 0 !important;
	display: flex;
	align-items: center;
}

.tsc-plugin-hero__cart .quantity {
	display: none !important;
}

.tsc-plugin-hero__cart .single_add_to_cart_button,
.tsc-plugin-hero__btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 172px;
	min-height: 50px;
	box-sizing: border-box;
	margin: 0 !important;
	padding: var(--tsc-space-3) var(--tsc-space-5) !important;
	border-radius: 0 !important;
	font-family: var(--tsc-font-body) !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.07em !important;
	white-space: nowrap;
	text-transform: uppercase !important;
	text-decoration: none;
	line-height: 1.2 !important;
	cursor: pointer;
}

.tsc-plugin-hero__cart .single_add_to_cart_button {
	border: 1px solid var(--tsc-accent) !important;
	background-color: var(--tsc-accent) !important;
	color: var(--tsc-text-on-accent) !important;
}

.tsc-plugin-hero__cart .single_add_to_cart_button:hover,
.tsc-plugin-hero__cart .single_add_to_cart_button:focus-visible {
	border-color: var(--tsc-text) !important;
	background-color: var(--tsc-text) !important;
	color: var(--tsc-bg) !important;
}

/*
 * Secondary CTA -- every link state is set explicitly. LIVE-TRACED CAUSE of
 * the "text goes dark after clicking" report: Astra's Customizer-generated
 * inline CSS carries `a:hover, a:focus { color: var(--ast-global-color-1); }`
 * (specificity 0,1,1). The original single-class rule here (0,1,0) lost to
 * it in the plain :focus state -- which a mouse click leaves behind on the
 * link, and which persists after returning from the manual's new tab -- so
 * the label took Astra's dark global colour 1 on the dark hero. (Not
 * :visited: no author stylesheet on the page styles a:visited for generic
 * links, and the author colour below already beats the UA :visited
 * default.) The states below are all two-class + pseudo (0,3,0) and carry
 * !important per this file's policy, scoped to this one button only.
 */
.tsc-plugin-hero .tsc-plugin-hero__btn--secondary,
.tsc-plugin-hero .tsc-plugin-hero__btn--secondary:link,
.tsc-plugin-hero .tsc-plugin-hero__btn--secondary:visited,
.tsc-plugin-hero .tsc-plugin-hero__btn--secondary:focus {
	border: 1px solid color-mix(in srgb, var(--tsc-text) 32%, transparent) !important;
	background-color: color-mix(in srgb, var(--tsc-bg) 35%, transparent) !important;
	color: var(--tsc-text) !important;
	text-decoration: none !important;
}

.tsc-plugin-hero .tsc-plugin-hero__btn--secondary:hover,
.tsc-plugin-hero .tsc-plugin-hero__btn--secondary:visited:hover,
.tsc-plugin-hero .tsc-plugin-hero__btn--secondary:focus-visible {
	border-color: var(--tsc-accent) !important;
	color: var(--tsc-accent) !important;
	text-decoration: none !important;
}

.tsc-plugin-hero .tsc-plugin-hero__btn--secondary:active,
.tsc-plugin-hero .tsc-plugin-hero__btn--secondary:visited:active {
	border-color: var(--tsc-accent) !important;
	background-color: color-mix(in srgb, var(--tsc-accent) 18%, transparent) !important;
	color: var(--tsc-text) !important;
}

.tsc-plugin-hero .tsc-plugin-hero__cart .single_add_to_cart_button:focus-visible,
.tsc-plugin-hero .tsc-plugin-hero__btn:focus-visible {
	outline: 2px solid var(--tsc-accent) !important; /* beats Astra's generic `a:focus-visible { outline: dotted thin }` */
	outline-offset: 3px !important;
}

@media (prefers-reduced-motion: no-preference) {
	.tsc-plugin-hero__cart .single_add_to_cart_button,
	.tsc-plugin-hero__btn {
		transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
	}
}

/* ============================================================
 * 5. FEATURE STRIP
 * ============================================================
 * Lightweight chips; the marker is a pure-CSS accent diamond (no icon font,
 * no library). Row spans both columns beneath copy + UI.
 */
.tsc-plugin-hero__features {
	list-style: none;
	margin: 0;
	padding: clamp(20px, 3vh, 28px) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--tsc-space-2) var(--tsc-space-3);
	border-top: 1px solid color-mix(in srgb, var(--tsc-text) 12%, transparent);
}

.tsc-plugin-hero__feature {
	display: inline-flex;
	align-items: center;
	gap: var(--tsc-space-2);
	margin: 0;
	padding: 8px 13px 8px 11px;
	border: 1px solid color-mix(in srgb, var(--tsc-text) 14%, transparent);
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--tsc-surface) 62%, transparent);
	font-family: var(--tsc-font-body);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.2;
	color: var(--tsc-text);
	white-space: nowrap;
}

.tsc-plugin-hero__feature::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	background-color: var(--tsc-accent);
	transform: rotate(45deg);
}

/* Laptop band (1025-1200px): keep the two CTAs on one line by trimming
   their inset slightly; the copy column is at its narrowest here. */
@media (min-width: 1025px) and (max-width: 1200px) {
	.tsc-plugin-hero__actions {
		gap: var(--tsc-space-3) 10px;
	}

	.tsc-plugin-hero__cart .single_add_to_cart_button,
	.tsc-plugin-hero__btn {
		min-width: 156px;
		padding-inline: 18px !important;
	}
}

/* Desktop: six chips as an intentional 3 x 2 grid (aligned columns) rather
   than a free wrap that strands the sixth chip on its own row. */
@media (min-width: 1025px) {
	.tsc-plugin-hero__features {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, max-content));
		column-gap: var(--tsc-space-5);
		row-gap: var(--tsc-space-2);
	}

	.tsc-plugin-hero__feature {
		justify-self: start;
	}
}

/* ============================================================
 * 6. NATIVE PRODUCT AREA -- hero product only
 * ============================================================
 * The summary structure is emptied in PHP (nothing prints inside
 * `.summary`) and the gallery is unhooked, but Astra/single-product.css
 * still float `.summary` at 44% with a bottom margin; collapse it so the
 * long-form Description starts right after the hero. Scoped to the body
 * class the hero adds, so no other product page is affected.
 */
body.tsc-has-plugin-hero .summary.entry-summary {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	min-height: 0 !important;
}

body.tsc-has-plugin-hero .woocommerce-product-gallery {
	display: none !important;
}

/* ============================================================
 * 7. RESPONSIVE
 * ============================================================
 * Breakpoints match the site's live Elementor/Astra values used elsewhere
 * in this theme (tablet max 1024, mobile max 767).
 */
@media (max-width: 1024px) {
	.tsc-plugin-hero {
		min-height: 0;
		padding-block: clamp(40px, 6vh, 56px) 40px;
		background-position: 55% 50%;
	}

	/* Stack: copy first, UI second, features last. */
	.tsc-plugin-hero .tsc-plugin-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"copy"
			"media"
			"features";
		row-gap: 36px;
	}

	.tsc-plugin-hero__copy {
		max-width: 620px;
	}

	.tsc-plugin-hero__media {
		justify-self: center;
		max-width: 760px;
		transform: none;
	}

	/* On the stacked layout the readability panel must cover the copy at
	   the top rather than the left; the wash carries more of the contrast. */
	.tsc-plugin-hero::before {
		background:
			linear-gradient(
				180deg,
				color-mix(in srgb, var(--tsc-bg) 92%, var(--tsc-accent) 8%) 0%,
				color-mix(in srgb, var(--tsc-bg) 84%, transparent) 42%,
				color-mix(in srgb, var(--tsc-bg) 58%, transparent) 100%
			),
			color-mix(in srgb, var(--tsc-bg) 30%, transparent);
	}

	.tsc-plugin-hero::after {
		background:
			radial-gradient(
				70% 45% at 50% 62%,
				color-mix(in srgb, var(--tsc-accent) 12%, transparent) 0%,
				transparent 72%
			),
			linear-gradient(180deg, transparent 80%, color-mix(in srgb, var(--tsc-bg) 78%, transparent) 100%);
	}
}

@media (max-width: 767px) {
	.tsc-plugin-hero {
		padding-block: 32px 28px;
		background-position: 42% 50%;
	}

	.tsc-plugin-hero .tsc-plugin-hero__inner {
		row-gap: 28px;
	}

	.tsc-plugin-hero__title {
		font-size: clamp(2.5rem, 13vw, 3.25rem);
	}

	.tsc-plugin-hero__subtitle {
		letter-spacing: 0.2em;
		margin-bottom: var(--tsc-space-5);
	}

	.tsc-plugin-hero__supporting {
		margin-bottom: var(--tsc-space-5);
	}

	/* CTA stack: full-width, primary first. */
	.tsc-plugin-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.tsc-plugin-hero__cart,
	.tsc-plugin-hero__cart form.cart,
	.tsc-plugin-hero__cart .single_add_to_cart_button,
	.tsc-plugin-hero__btn {
		width: 100%;
		min-width: 0;
	}

	/* UI full-width; the box-shadow glow is trimmed so it cannot widen the
	   scrollable area. */
	.tsc-plugin-hero__media {
		max-width: none;
	}

	.tsc-plugin-hero__media img {
		border-radius: 6px;
		box-shadow:
			0 16px 40px -16px color-mix(in srgb, #000 80%, transparent),
			0 0 0 1px color-mix(in srgb, var(--tsc-text) 8%, transparent);
	}

	/* Feature strip: compact 2-column x 3-row grid -- all six features
	   visible, no horizontal scrolling, chips allowed to wrap onto two
	   lines so the grid stays short. */
	.tsc-plugin-hero__features {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--tsc-space-2);
		padding-top: 18px;
	}

	.tsc-plugin-hero__feature {
		align-items: flex-start;
		padding: 8px 10px 8px 10px;
		border-radius: 8px;
		font-size: 0.75rem;
		line-height: 1.3;
		white-space: normal;
	}

	.tsc-plugin-hero__feature::before {
		margin-top: 5px;
	}
}