/*
 * Product Archive — `/products/`, site-wide component (not front-page-only).
 *
 * Every value traces to Swiftheat Products.dc.html, measured with Chrome
 * DevTools. Reuses tokens.css wherever a matching token exists; one-off
 * values are commented with their measured source rather than forced into
 * a mismatched token.
 *
 * This file only ever loads on the Product Archive (see inc/enqueue.php's
 * is_post_type_archive('product') condition) — home.css never loads here,
 * so this file is free to define its own `.product-card` presentation
 * (image tray height, body padding/gap) without any specificity conflict
 * with Home Product Range's own values in home.css. The `.archive-grid__products`
 * container prefix is still used throughout for clarity and defensiveness,
 * matching the same scoping convention Home's own `.product-range__grid`
 * uses for the same shared card markup.
 */

/* ---- Page Intro ---- */

.archive-intro {
	background: var(--color-indigo-hero);
	color: var(--text-on-dark);
	position: relative;
	overflow: hidden;
}

.archive-intro::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Design's own faint grid-line texture — distinct rgba/base-color from
	   Why Swiftheat's/Contact's own ::before (0.07 vs 0.06, different base
	   color), not a substitute for either. */
	background-image: linear-gradient(rgba(150, 156, 230, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(150, 156, 230, 0.07) 1px, transparent 1px);
	background-size: 56px 56px;
	pointer-events: none;
}

.archive-intro__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--gap-split-2col);
	align-items: center;
	/* Top padding measured at 88px on this exact section — does not match
	   --space-section-compact-top (72px, sourced from a different
	   interior-page hero elsewhere in the design folder); kept as this
	   section's own literal rather than force-fit to that token. Bottom
	   padding (96px) does match --space-section-compact-bottom. */
	padding: 88px var(--gutter-desktop) var(--space-section-compact-bottom);
	box-sizing: border-box;
	position: relative;
}

.archive-intro__text {
	min-width: 0;
}

.archive-intro__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-red);
	margin-bottom: 26px;
}

.archive-intro .archive-intro__heading {
	font-family: var(--font-primary);
	font-size: var(--fs-h1-catalogue);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--text-on-dark);
	margin: 0 0 26px;
}

.archive-intro__dot {
	color: var(--color-red);
}

.archive-intro__sub {
	font-family: var(--font-primary);
	/* 18.5px is this element's own exact measured size — close to but
	   distinct from --fs-body-large (19px), not a substitute for it. */
	font-size: 18.5px;
	line-height: var(--lh-body);
	color: var(--text-on-dark-body-alt);
	max-width: 540px;
	margin: 0;
}

.archive-intro__collage {
	position: relative;
	min-width: 0;
	aspect-ratio: 10 / 7;
	max-height: 440px;
}

.archive-intro__collage::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 120%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(190, 205, 255, 0.12) 0%, rgba(190, 205, 255, 0.045) 40%, transparent 65%);
	pointer-events: none;
}

.archive-intro__collage-img {
	position: absolute;
	width: 100%;
	display: block;
}

.archive-intro__collage-img--band {
	top: 6%;
	left: 8%;
	width: 30%;
	transform: rotate(-4deg);
	z-index: 3;
	filter: drop-shadow(0 24px 22px rgba(2, 3, 20, 0.55));
}

.archive-intro__collage-img--coil {
	top: 4%;
	right: 8%;
	left: auto;
	width: 36%;
	transform: rotate(3deg);
	z-index: 2;
	filter: drop-shadow(0 22px 22px rgba(2, 3, 20, 0.52));
}

.archive-intro__collage-img--cartridge {
	bottom: 8%;
	left: 22%;
	width: 54%;
	transform: rotate(-4deg);
	z-index: 5;
	filter: drop-shadow(0 30px 26px rgba(2, 3, 20, 0.62));
}

/* ---- Filter / Search / Grid ---- */

.archive-grid {
	background: var(--color-bg-neutral);
	background-image: radial-gradient(rgba(20, 40, 90, 0.05) 1px, transparent 1px);
	background-size: 28px 28px;
	border-top: 1px solid var(--border-light);
}

.archive-grid__inner {
	/* Top padding (72px) matches --space-section-compact-top. Bottom
	   (130px) shares the same number as --space-section-lg-top but that
	   token's own documented role is a section's TOP padding elsewhere —
	   using it here for a BOTTOM padding would misrepresent its role to a
	   future reader, so this stays its own literal. */
	padding: var(--space-section-compact-top) var(--gutter-desktop) 130px;
	box-sizing: border-box;
}

.archive-grid__controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
	margin-bottom: 56px;
}

.archive-grid__pills {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.archive-grid .archive-grid__pill {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	padding: 11px 22px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-warm);
	background: var(--color-bg-white);
	color: var(--text-nav);
	font-family: var(--font-primary);
	font-size: var(--fs-body-small);
	font-weight: var(--fw-bold);
	transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.archive-grid .archive-grid__pill.is-active {
	background: var(--color-navy);
	color: var(--text-on-dark);
	border-color: var(--color-navy);
}

.archive-grid__search {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--color-bg-white);
	border: 1.5px solid var(--border-warm);
	border-radius: var(--radius-pill);
	padding: 12px 22px;
	min-width: 320px;
	box-sizing: border-box;
}

.archive-grid__search-icon {
	color: var(--text-faint-label);
	font-size: 16px;
	line-height: 1;
}

.archive-grid .archive-grid__search-input {
	all: unset;
	font-family: var(--font-primary);
	/* 15px is this element's own exact measured size — distinct from
	   --fs-body-small (14px), not a substitute for it. */
	font-size: 15px;
	color: var(--text-base);
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
}

.archive-grid__products {
	/* 3/2/1 responsive grid, intentionally not the 4/2/1 the original
	   design showed — a client requirement. --gap-grid-3col is this
	   project's own existing 3-column gap token, matching Home Product
	   Range's own grid, reused here rather than inventing a new value.
	   The grid itself now doubles as the dark "frame" the cards sit on —
	   background/radius/texture below — rather than adding an extra
	   wrapper element, keeping this a CSS-only change, matching the same
	   treatment applied to Home Product Range's own grid in home.css.
	   --color-navy-deep and --radius-frame are both existing tokens
	   already used the same way elsewhere (Quality's panel bg; Hero's own
	   image frame radius). */
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap-grid-3col);
	background: var(--color-navy-deep);
	border-radius: var(--radius-frame);
	/* 48px is this frame's own literal — generous breathing room around
	   the grid, matching Home Product Range's own frame padding. */
	padding: 48px;
	position: relative;
	overflow: hidden;
}

.archive-grid__products::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Same grid-line texture literal already established on this page's
	   own Archive intro section (`.archive-intro::before` above) — reused
	   here rather than inventing a new one. */
	background-image: linear-gradient(rgba(150, 156, 230, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(150, 156, 230, 0.07) 1px, transparent 1px);
	background-size: 56px 56px;
	pointer-events: none;
}

/* ---- Product Card (Archive variant) ----
 * Base card look (background/border/radius/shadow/hover) matches Home
 * Product Range's own card exactly (same design system, same component) —
 * reproduced here rather than imported since this file never loads
 * alongside home.css. Only the image-tray height and body padding/gap
 * differ from Home's own values, per the approved Archive design's own
 * measurements. */

.archive-grid__products .product-card {
	/* No background of its own — the image zone and info zone below each
	   paint their own full-height background, so the card's box is fully
	   covered by its two children. */
	border: 1px solid var(--color-navy-raised);
	border-radius: var(--radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-card-rest);
	transition: box-shadow var(--transition-standard), transform var(--transition-standard);
	color: inherit;
	text-decoration: none;
	position: relative;
	z-index: 1;
}

.archive-grid__products .product-card:hover,
.archive-grid__products .product-card:focus-visible {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(var(--translate-card-hover));
	color: inherit;
}

.archive-grid__products .product-card:hover .product-card__title,
.archive-grid__products .product-card:focus-visible .product-card__title {
	color: var(--color-red);
}

.archive-grid__products .product-card:hover .product-card__img,
.archive-grid__products .product-card:focus-visible .product-card__img {
	transform: scale(1.03);
}

.archive-grid__products .product-card__image {
	/* Light image zone — unchanged from before. */
	background: var(--color-bg-tray);
	/* 270px tray height — the Archive design's own exact measured value,
	   distinct from Home Product Range's 290px (home.css). */
	height: 270px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 36px;
	box-sizing: border-box;
}

.archive-grid__products .product-card__img {
	max-width: 100%;
	max-height: 100%;
	display: block;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform var(--transition-standard);
}

.archive-grid__products .product-card__body {
	/* Dark navy info zone — --color-navy is deliberately a shade lighter
	   than the frame's own --color-navy-deep background above, so the
	   card reads as a distinct surface rather than blending into it. */
	background: var(--color-navy);
	/* 26px 28px 28px / 12px gap — the Archive design's own exact measured
	   values, distinct from Home Product Range's 28px 30px 30px / 10px
	   (home.css). */
	padding: 26px 28px 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

.archive-grid__products .product-card .product-card__title {
	font-family: var(--font-primary);
	font-size: var(--fs-card-title);
	font-weight: var(--fw-extrabold);
	color: var(--text-on-dark);
	margin: 0;
	transition: color var(--transition-standard);
}

.archive-grid__products .product-card__desc {
	font-family: var(--font-primary);
	font-size: var(--fs-body-small);
	line-height: 1.6;
	color: var(--text-on-dark-body);
	flex: 1;
	margin: 0;
	text-wrap: pretty;
}

.archive-grid__products .product-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2px;
}

.archive-grid__products .product-card__tag {
	font-family: var(--font-mono);
	/* 10.5px is this element's own exact measured size — distinct from
	   --fs-micro (11px), not a substitute for it. */
	font-size: 10.5px;
	letter-spacing: var(--ls-micro);
	color: var(--text-on-dark-muted);
	border: 1px solid var(--color-navy-raised);
	border-radius: var(--radius-pill);
	padding: 5px 12px;
}

.archive-grid__products .product-card__link {
	font-family: var(--font-primary);
	font-size: var(--fs-body-small);
	font-weight: var(--fw-bold);
	/* Swiftheat red accent — already an established color on this exact
	   dark-navy family of backgrounds elsewhere (this page's own Archive
	   intro eyebrow). */
	color: var(--color-red);
	margin-top: 6px;
}

.archive-grid .archive-grid__empty {
	text-align: center;
	padding: 80px 0 20px;
	color: var(--text-secondary);
	/* 16px is this element's own exact measured size — distinct from
	   --fs-body (17px), not a substitute for it. */
	font-size: 16px;
}

.archive-grid .archive-grid__empty a {
	color: var(--color-blue-link-dark);
}

.archive-grid .archive-grid__empty a:hover {
	color: var(--color-red);
}

/* ---- Comparison Overview ----
 * Fixed, static reference table — see archive-product.php's own docblock
 * for why this is a plain PHP array, not CPT/taxonomy data. White
 * background + top border gives clear separation from `.archive-grid`'s
 * own neutral background above, the same alternating-section convention
 * used throughout this project (e.g. Home's own section rhythm).
 *
 * The table itself reuses the exact pattern already established for the
 * Ceramic IR product page's own IR-vs-Convection comparison
 * (single-product.css's `.ceramic-ir-comparison__table`) — real `<table>`
 * markup (genuinely tabular data, unlike this project's other label/value
 * "fake table" sections built from CSS grid divs), contained in its own
 * horizontally-scrolling wrapper so a narrow viewport scrolls the table,
 * never the page. The one addition here beyond that precedent:
 * `position: sticky` on the Product Type column (both header and body),
 * so that column stays identifiable while the rest scrolls underneath it
 * on narrow screens — plain CSS, no JS, per the brief's own instruction. */

.archive-comparison {
	background: var(--color-bg-white);
	border-top: 1px solid var(--border-light);
}

.archive-comparison__inner {
	padding: var(--space-section-standard) var(--gutter-desktop);
	box-sizing: border-box;
	text-align: center;
}

.archive-comparison .archive-comparison__heading {
	font-family: var(--font-primary);
	font-size: var(--fs-h2-sub);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-heading);
	line-height: var(--lh-heading);
	color: var(--color-navy);
	margin: 0 auto 20px;
}

.archive-comparison__intro {
	font-family: var(--font-primary);
	font-size: 18px;
	line-height: var(--lh-body);
	color: var(--text-body-muted);
	max-width: 620px;
	margin: 0 auto 48px;
}

.archive-comparison__table-wrap {
	/* Horizontal scroll lives here, not on the page — the brief's own
	   explicit fallback for a 6-column table on narrow screens. */
	overflow-x: auto;
	text-align: left;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	background: var(--color-bg-white);
	box-shadow: var(--shadow-card-rest);
}

.archive-comparison__table {
	width: 100%;
	border-collapse: collapse;
	/* Keeps every column readable instead of compressing to nothing above
	   the point the wrapper's own overflow-x:auto takes over. */
	min-width: 960px;
}

.archive-comparison__table th,
.archive-comparison__table td {
	padding: 16px 20px;
	border-bottom: 1px solid var(--border-subtle);
	font-family: var(--font-primary);
	font-size: var(--fs-body-small);
	line-height: 1.5;
	vertical-align: top;
}

.archive-comparison__table tbody tr:last-child th,
.archive-comparison__table tbody tr:last-child td {
	border-bottom: 0;
}

.archive-comparison__table thead th {
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-meta);
	color: var(--color-red);
	background: var(--color-bg-neutral);
	/* The site's own established accent — same red used for every other
	   section's eyebrow/CTA color — marks this table's one primary
	   divider, under the header row. */
	border-bottom: 2px solid var(--color-red);
	vertical-align: middle;
}

.archive-comparison__table tbody th {
	font-weight: var(--fw-extrabold);
	color: var(--color-navy);
	white-space: nowrap;
}

.archive-comparison__table tbody td {
	color: var(--text-body-muted);
}

.archive-comparison__table thead th:first-child,
.archive-comparison__table tbody th {
	/* Product Type stays visible while the rest of the table scrolls
	   underneath it — plain CSS position:sticky, no JS. Needs its own
	   opaque background (matching the cell's own normal background)
	   since sticky elements are otherwise transparent to whatever
	   scrolls past behind them. */
	position: sticky;
	left: 0;
}

.archive-comparison__table thead th:first-child {
	background: var(--color-bg-neutral);
	z-index: 1;
}

.archive-comparison__table tbody th {
	background: var(--color-bg-white);
}

/* ---- CTA: "Need a custom heating solution?" ---- */

.archive-cta {
	background: var(--color-navy);
	color: var(--text-on-dark);
	position: relative;
	overflow: hidden;
}

.archive-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(143, 166, 201, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(143, 166, 201, 0.06) 1px, transparent 1px);
	background-size: 56px 56px;
	pointer-events: none;
}

.archive-cta__inner {
	/* max-width/margin intentionally not declared here — this element
	   already carries the `site-container` HTML class in
	   archive-product.php, which provides these two declarations from the
	   one canonical `.site-container` rule (header.css); redeclaring the
	   identical values here would be dead-weight duplication. */
	padding: var(--space-section-standard) var(--gutter-desktop);
	box-sizing: border-box;
	text-align: center;
	position: relative;
}

.archive-cta__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-pink-accent);
	margin-bottom: 24px;
}

.archive-cta .archive-cta__heading {
	font-family: var(--font-primary);
	font-size: var(--fs-h2-feature);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-heading);
	line-height: var(--lh-heading);
	color: var(--text-on-dark);
	max-width: 720px;
	margin: 0 auto 24px;
}

.archive-cta__sub {
	font-family: var(--font-primary);
	/* 18px is this element's own exact measured size — distinct from
	   --fs-body (17px), not a substitute for it. */
	font-size: 18px;
	line-height: var(--lh-body);
	color: var(--text-on-dark-body);
	max-width: 600px;
	margin: 0 auto 44px;
}

.archive-cta__actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

.archive-cta .archive-cta__button {
	display: inline-block;
	padding: var(--pad-button-primary);
	/* 15.5px is this element's own exact measured size — distinct from
	   both --fs-body-small (14px) and --fs-nav (14.5px), not a substitute
	   for either. */
	font-family: var(--font-primary);
	font-size: 15.5px;
	font-weight: var(--fw-extrabold);
	text-decoration: none;
	transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.archive-cta .archive-cta__button--primary {
	background: var(--color-red);
	color: var(--text-on-dark);
	border: 1px solid var(--color-red);
}

.archive-cta .archive-cta__button--primary:hover,
.archive-cta .archive-cta__button--primary:focus-visible {
	background: var(--text-on-dark);
	color: var(--color-navy);
	border-color: var(--text-on-dark);
}

.archive-cta .archive-cta__button--secondary {
	color: var(--text-on-dark);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.archive-cta .archive-cta__button--secondary:hover,
.archive-cta .archive-cta__button--secondary:focus-visible {
	border-color: var(--text-on-dark);
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-on-dark);
}

/* ---- Responsive ----
 * The approved design has zero @media queries anywhere in the design
 * folder (confirmed by grep, same check repeated every section this
 * project has built). The collapses below reuse the same patterns already
 * established for every other section on this site. */

@media (max-width: 1024px) {
	.archive-intro__inner {
		grid-template-columns: 1fr;
		gap: 48px;
		padding-bottom: 64px;
	}

	.archive-intro__collage {
		max-height: 360px;
	}

	.archive-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.archive-intro__inner {
		padding: 64px var(--gutter-mobile) 48px;
	}

	.archive-intro .archive-intro__heading {
		font-size: 44px;
	}

	.archive-intro__collage {
		max-height: 280px;
	}

	.archive-grid__inner {
		padding: 48px var(--gutter-mobile) 80px;
	}

	.archive-grid__controls {
		flex-direction: column;
		align-items: stretch;
	}

	.archive-grid__search {
		min-width: 0;
	}

	/* Grid stays at 2 columns through this breakpoint — see the
	   @media (max-width: 480px) block at the end of this file for the
	   1-column collapse, which uses this site's existing small-phone
	   breakpoint (already established in 404.css/hero.css) rather than
	   collapsing to 1 column this early. */

	.archive-grid__products {
		/* Reduced frame padding at mobile gutter widths — the desktop 48px
		   would eat too much of the available card width on narrow
		   screens. */
		padding: 24px;
	}

	.archive-comparison__inner {
		padding: 48px var(--gutter-mobile) 64px;
	}

	.archive-comparison .archive-comparison__heading {
		font-size: 32px;
	}

	.archive-cta__inner {
		padding: 64px var(--gutter-mobile);
	}

	.archive-cta .archive-cta__heading {
		font-size: 36px;
	}

	.archive-cta__actions {
		flex-direction: column;
	}
}

@media (max-width: 480px) {
	/* Product Grid Responsive Refinement: 2 columns are still usable down
	   to 480px (this site's existing small-phone breakpoint — see
	   404.css/hero.css), so the Archive grid only drops to 1 column here,
	   not at 768px. */
	.archive-grid__products {
		grid-template-columns: 1fr;
	}
}