/*
 * EC Exhibits — full rental catalog for /trade-show-displays-rentals/.
 *
 * The 158-unit grid restored from the legacy WooCommerce catalog (the client
 * asked for all products back). WooCommerce is NOT installed and isn't needed:
 * the legacy shop sold nothing, so this is a catalog, not a store. No prices
 * anywhere — the legacy data had none and none may be invented.
 *
 * Filtering is CSS-only. One radio per category sits BEFORE .ec-rcat-grid in
 * the DOM, so `:checked ~ .ec-rcat-grid .ec-rcat-card` sibling rules can hide
 * non-matching cards with no JS at all.
 *
 * Scoped under .ec-rcat so nothing leaks into the /our-projects/ band
 * (.ec-rentals) or the service-detail sections (.ec-sd-*).
 */

/* The hero above this band is also --ec-navy, so an identical background made
   the two read as ONE 19,000px slab of black with no seam (client, 2026-07-21).
   Three things fix it without lightening the band — the dark field is what makes
   the white product renders pop:
     1. a DEEPER field (--ec-navy-dark) so the boundary is a real tonal step
     2. a gold hairline + soft gradient lip at the top edge, so the seam is
        deliberate rather than accidental
     3. a subtle radial wash so 19,000px of flat colour has some depth */
.ec-rcat {
	position: relative;
	background: var(--ec-navy-dark);
	background-image:
		radial-gradient(120% 55% at 50% 0%, rgba(57, 219, 176, 0.07) 0%, rgba(57, 219, 176, 0) 60%),
		linear-gradient(180deg, rgba(4, 23, 26, 0.85) 0%, rgba(4, 23, 26, 0) 320px);
	color: #fff;
	padding: 82px 32px 88px;
	border-top: 1px solid rgba(249, 190, 23, 0.28);
}
/* Gold accent tick centred on the seam — the same device the hero uses at its
   own bottom edge, so the two bands read as intentionally separated. */
.ec-rcat::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 50%;
	transform: translateX(-50%);
	width: 96px;
	height: 3px;
	background: var(--ec-gold);
	border-radius: 0 0 2px 2px;
}

/* ---------- head ---------- */

.ec-rcat-head {
	max-width: 1216px;
	margin: 0 auto 30px;
}
.ec-rcat-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ec-gold);
	margin-bottom: 13px;
}
/* OneUp forces every theme h2 to 50px and navy #04171A. Navy on this navy band
   would render the heading INVISIBLE, so font-size and color both need
   !important here — see the ec-oneup-h2-h3-50px-override memory note. A local
   preview will not reproduce this; only the real page cascade does. */
.ec-rcat-title {
	font-family: var(--ec-font-display) !important;
	font-size: clamp(28px, 3.4vw, 40px) !important;
	line-height: 1.12 !important;
	font-weight: 800;
	letter-spacing: -0.024em;
	margin: 0 0 10px !important;
	color: #fff !important;
	text-transform: none !important;
}
.ec-rcat-title em {
	font-style: italic;
	color: var(--ec-green) !important;
	font-size: inherit !important;
}
.ec-rcat-sub {
	margin: 0;
	color: rgba(255, 255, 255, 0.68);
	font-size: 15px;
	line-height: 1.6;
	max-width: 68ch;
}

/* ---------- category filter ---------- */

.ec-rcat-filter {
	max-width: 1216px;
	margin: 0 auto;
}
/* Visually hidden but focusable + in the a11y tree. display:none would remove
   the radio group entirely; opacity:0 alone leaves the inputs in flow and
   stretches the page horizontally. */
.ec-rcat-filter > input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.ec-rcat-filter > label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px; /* WCAG 2.5.5 touch target */
	padding: 9px 15px;
	margin: 0 8px 10px 0;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.86);
	background: rgba(255, 255, 255, 0.04);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ec-rcat-filter > label span {
	font-size: 11px;
	font-weight: 800;
	color: var(--ec-gold);
	font-variant-numeric: tabular-nums;
}
.ec-rcat-filter > label:hover {
	border-color: var(--ec-gold);
	background: rgba(249, 190, 23, 0.08);
}
.ec-rcat-filter > input[type="radio"]:checked + label {
	background: var(--ec-gold);
	border-color: var(--ec-gold);
	color: var(--ec-navy);
}
.ec-rcat-filter > input[type="radio"]:checked + label span {
	color: var(--ec-navy);
}
.ec-rcat-filter > input[type="radio"]:focus-visible + label {
	outline: 3px solid var(--ec-gold);
	outline-offset: 3px;
}

/* ---------- grid ---------- */

.ec-rcat-grid {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.ec-rcat-grid li::before {
	content: none; /* OneUp adds bullets via ::before on some templates */
}

.ec-rcat-card {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
}
.ec-rcat-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: #fff;
	/* Lifted slightly vs. the 12-frame band: this grid sits on --ec-navy-dark,
	   so the cards need a touch more separation from the field. */
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 3px;
	overflow: hidden;
	transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.ec-rcat-link:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--ec-gold);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.7);
}
.ec-rcat-link:focus-visible {
	outline: 3px solid var(--ec-gold);
	outline-offset: 3px;
}

/* Product renders are on white backgrounds — keep the tile white so they don't
   float on a dark card with a hard edge. */
.ec-rcat-photo {
	display: block;
	background: #fff;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.ec-rcat-photo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	padding: 10px;
	transition: transform 0.35s ease;
}
.ec-rcat-link:hover .ec-rcat-photo img {
	transform: scale(1.04);
}

.ec-rcat-meta {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 15px 16px 16px;
	gap: 6px;
}
.ec-rcat-stamp {
	display: flex;
	align-items: flex-end;
	gap: 9px;
	min-height: 26px;
	margin-bottom: 2px;
}
.ec-rcat-size {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.ec-rcat-size small {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-left: 2px;
	color: rgba(255, 255, 255, 0.5);
}
.ec-rcat-size--acc {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ec-green);
}
/* To-scale footprint glyph — the width/height come from the renderer so every
   card is drawn on ONE shared scale. */
.ec-rcat-glyph {
	display: block;
	border: 1.5px solid var(--ec-gold);
	background: rgba(249, 190, 23, 0.12);
	border-radius: 1px;
	flex: none;
}
.ec-rcat-name {
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.35;
	color: #fff;
}
.ec-rcat-cat {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.45);
}
.ec-rcat-blurb {
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
	/* Specs run long and vary in length; clamp so the grid stays even. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ec-rcat-cta {
	margin-top: auto;
	padding-top: 10px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ec-gold);
}

/* ---------- CSS-only filtering ----------
   The per-category rules are NOT here. ec_rentals_render_catalog() generates
   them from rentals-catalog.json into an inline <style id="ec-rcat-filter-css">,
   because they key off sanitize_title($category): a hardcoded list here goes
   stale the moment a category is renamed, and the failure is SILENT — the chip
   still renders and is clickable but matches nothing. (That happened when the
   "Curved Frame (Declined)" rename broke 8 of 18 filters.) Each radio precedes
   .ec-rcat-grid so the generated `:checked ~ .ec-rcat-grid` sibling rules work;
   #ec-rcat-all has no rule, so everything shows. */

/* Closing lip — the FAQ band below is white, so ease the bottom edge instead of
   cutting from near-black to white in one pixel. */
.ec-rcat::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 90px;
	background: linear-gradient(180deg, rgba(4, 23, 26, 0) 0%, rgba(4, 23, 26, 0.55) 100%);
	pointer-events: none;
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
	.ec-rcat-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 820px) {
	.ec-rcat {
		padding: 60px 20px 68px;
	}
	.ec-rcat-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
	.ec-rcat-blurb {
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
}
@media (max-width: 480px) {
	.ec-rcat-grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ec-rcat * {
		transition-duration: 0.001ms !important;
	}
	.ec-rcat-link:hover {
		transform: none;
	}
	.ec-rcat-link:hover .ec-rcat-photo img {
		transform: none;
	}
}