/* =============================================================
   BRANDS — css/brands.css
   -------------------------------------------------------------
   Styles page-brands.php, which rebuilds /brands/ from
   `_mockup/WOW Supplies Brands.dc.html`. Data comes from the
   `pwb-brand` taxonomy — see inc/brands.php.

   THREE DIVERGENCES FROM THE MOCKUP, ALL FOR THE SAME REASON

   The mockup was drawn with invented brand copy. The real
   taxonomy has logos, counts and categories for every brand but a
   description for only 16 of 54, so:

   - **Cards carry no blurb.** The mockup's card is a paragraph
     with a logo on top; ours is a logo, a name and a footer of
     real facts. That makes the card shorter and the grid denser
     (4 columns at full width, not 3), which is why the grid
     rules below are not the mockup's.
   - **No "Flagship" / "Best value" badges.** Nothing in the
     database ranks brands, and inventing the ranking would be
     inventing a claim (INSTRUCTIONS §7).
   - **The spotlight keeps its blurb**, because it only ever
     features brands that have a real description.

   THE LOGO WELL

   Brand logos are supplier-supplied JPEGs and PNGs with baked-in
   white backgrounds, the same problem PORTING-MAP records for
   product imagery. Same fix: `mix-blend-mode: multiply` over a
   near-white well. Keep --wows-surface near white or the logos
   go grey — see §3.

   1. Page + head    2. Spotlight    3. Brand grid
   4. Filter pills   5. Buttons      6. Responsive
   ============================================================= */


/* ==============================================
   1. PAGE + HEAD
   ============================================== */

.wows-brands {
	padding-bottom: var(--wows-section-xl);
}

/* The PWB shortcode fallback, shown only when the taxonomy is
   gone. Unstyled by design — it is the plugin's own markup and
   this theme should not pretend to own it. */
.wows-brands__fallback {
	padding-top: var(--wows-section-sm);
}

.wows-brands__head {
	padding-top: var(--wows-sp-9);
}

.wows-brands__crumbs {
	font-size: var(--wows-fs-sm);
	color: var(--wows-text-faint);
	margin-bottom: var(--wows-sp-5);
}

.wows-brands__crumbs a {
	color: var(--wows-text-faint);
	text-decoration: none;
}

.wows-brands__crumbs a:hover {
	color: var(--wows-accent);
}

.wows-brands__crumbs span[aria-hidden] {
	margin: 0 var(--wows-sp-1);
}

.wows-brands__crumb-current {
	color: var(--wows-ink);
	font-weight: 600;
}

.wows-brands__head-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: var(--wows-sp-10);
	align-items: end;
}

.wows-brands__title {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-section);
	font-weight: 700;
	letter-spacing: var(--wows-ls-hero);
	line-height: var(--wows-lh-hero);
	margin: 0 0 var(--wows-sp-3);
}

.wows-brands__lede {
	font-size: var(--wows-fs-lede);
	line-height: var(--wows-lh-body);
	color: var(--wows-text);
	margin: 0;
	max-width: 560px;
}

.wows-brands__stats {
	display: flex;
	gap: var(--wows-sp-8);
	margin: 0;
}

/* The markup is a <dl>, so the label precedes the value in source
   order — a screen reader reads "brands carried, 52". The mockup
   shows the number first, hence the column-reverse. */
.wows-brands__stat {
	display: flex;
	flex-direction: column-reverse;
}

.wows-brands__stat + .wows-brands__stat {
	padding-left: var(--wows-sp-8);
	border-left: 1px solid var(--wows-border);
}

.wows-brands__stat-value {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-stat);
	font-weight: 700;
	letter-spacing: var(--wows-ls-h2);
	margin: 0;
}

.wows-brands__stat-label {
	font-size: var(--wows-fs-sm);
	color: var(--wows-text-muted);
}


/* ==============================================
   2. SPOTLIGHT
   ----------------------------------------------
   Every panel renders visible; js/brands.js hides
   all but one. Nothing here may depend on that
   script having run — see the file header of
   js/brands.js and CLAUDE.md's rule on JS that
   hides content.
   ============================================== */

.wows-brands__spotlight {
	padding-top: var(--wows-sp-9);
}

.wows-spot {
	display: grid;
	grid-template-columns: 1fr 0.9fr;
	background: var(--wows-ink);
	color: var(--wows-white);
	border-radius: var(--wows-r-2xl);
	overflow: hidden;
}

/* Only relevant in the no-JS / failed-JS case, where the panels
   stack. Keeps them from fusing into one dark slab. */
.wows-spot + .wows-spot {
	margin-top: var(--wows-sp-4);
}

.wows-spot[hidden] {
	display: none;
}

.wows-spot__copy {
	padding: var(--wows-sp-9) var(--wows-gutter-panel);
}

.wows-spot__eyebrow {
	font-size: var(--wows-fs-xs);
	font-weight: 700;
	letter-spacing: var(--wows-ls-eyebrow);
	text-transform: uppercase;
	color: var(--wows-spot-eyebrow);
	margin: 0 0 var(--wows-sp-5);
}

/* The colour is not redundant. style.css §3 sets `h1, h2, h3, h4 { color:
   var(--wows-ink) }`, and a matching rule always beats the white this element
   would otherwise inherit from .wows-spot — so without this line the brand
   name renders near-black on the near-black panel at a contrast ratio of
   1.00, i.e. completely invisible. It shipped that way on 17 Aug 2026 and no
   structural check could see it; every other dark panel in the theme sets its
   heading colour explicitly for the same reason. */
.wows-spot__name {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-band);
	font-weight: 700;
	letter-spacing: var(--wows-ls-h1);
	color: var(--wows-white);
	margin: 0 0 var(--wows-sp-3);
}

.wows-spot__blurb {
	font-size: var(--wows-fs-md);
	line-height: var(--wows-lh-lede);
	color: var(--wows-on-dark-body);
	margin: 0 0 var(--wows-sp-7);
	max-width: 460px;
}

.wows-spot__cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wows-sp-1);
	list-style: none;
	margin: 0 0 var(--wows-sp-8);
	padding: 0;
}

.wows-spot__cat {
	font-size: var(--wows-fs-sm);
	font-weight: 600;
	color: var(--wows-spot-chip-text);
	background: var(--wows-spot-chip-bg);
	border-radius: var(--wows-r-pill);
	padding: 7px 14px;
}

.wows-spot__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wows-sp-2);
}

.wows-spot__shot {
	background: var(--wows-gradient-spot);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wows-sp-9);
}

/* The product shot is a studio JPEG on white — the same baked-in
   backdrop the product cards deal with. Here the panel is dark,
   so multiply would turn the photo black; the image sits in its
   own light well instead. */
.wows-spot__shot-img {
	width: 100%;
	max-width: 340px;
	aspect-ratio: 1.1;
	object-fit: contain;
	background: var(--wows-white);
	border: 1px solid var(--wows-border-on-dark);
	border-radius: var(--wows-r-panel);
	padding: var(--wows-sp-6);
}

.wows-spot__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wows-sp-1);
	margin-top: var(--wows-sp-4);
}

.wows-spot__tab {
	font-size: var(--wows-fs-sm);
	font-weight: 600;
	color: var(--wows-text);
	background: var(--wows-white);
	border: 1px solid var(--wows-border-strong);
	border-radius: var(--wows-r-pill);
	padding: 9px 15px;
	text-decoration: none;
	transition: background var(--wows-t-fast), color var(--wows-t-fast), border-color var(--wows-t-fast);
}

.wows-spot__tab:hover {
	border-color: var(--wows-border-hover);
	color: var(--wows-ink);
}

.wows-spot__tab.is-active {
	background: var(--wows-ink);
	border-color: var(--wows-ink);
	color: var(--wows-white);
}


/* ==============================================
   3. BRAND GRID
   ============================================== */

.wows-brands__all {
	padding-top: var(--wows-section);
}

.wows-brands__bar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wows-sp-6);
	margin-bottom: var(--wows-sp-6);
	flex-wrap: wrap;
}

.wows-brands__heading {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-band);
	font-weight: 700;
	letter-spacing: var(--wows-ls-h2);
	margin: 0;
}

/* minmax(0, 1fr), never plain 1fr.
   `1fr` is shorthand for minmax(auto, 1fr), and `auto` floors the track at
   its content's intrinsic width — so a wide logo file (the New Kon lockup)
   pushes its own column open and every other column shrinks to compensate.
   That shipped on 17 Aug 2026 and produced four visibly different card
   widths in one row. minmax(0, …) removes the floor, so the four tracks are
   genuinely equal and the image is what adapts. */
.wows-brands__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wows-sp-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wows-brands__cell[hidden] {
	display: none;
}

.wows-brand {
	display: flex;
	flex-direction: column;
	gap: var(--wows-sp-3);
	height: 100%;
	padding: var(--wows-sp-6);
	background: var(--wows-white);
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-lg);
	text-decoration: none;
	color: inherit;
	transition: transform var(--wows-t-slow), box-shadow var(--wows-t-slow), border-color var(--wows-t-slow);
}

.wows-brand:hover {
	transform: translateY(-4px);
	box-shadow: var(--wows-shadow-card-lg);
	border-color: var(--wows-border-strong);
}

/* The logo well. `isolation: isolate` is required, not
   decorative: it confines the multiply below to this element, so
   a logo cannot blend with the card or the page behind it. */
/* Square, not the wide strip this was first built as (Eddy, 17 Aug 2026).
   `aspect-ratio: 1` rather than a fixed height, so the well tracks the
   column width and every card in a row stays identical — the same approach
   .wows-product-card__media takes at 1.05. */
.wows-brand__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1;
	padding: var(--wows-sp-6);
	background: var(--wows-surface);
	border-radius: var(--wows-r-md);
	isolation: isolate;
}

/* Fill the padded well and let object-fit do the scaling, rather than
   sizing on the file's own dimensions. Same as .wows-product-card__media img,
   and for the same reason: an intrinsically-sized image participates in
   layout, which is what skewed the grid above. */
.wows-brand__logo-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* Four brands have no logo image — OEM, TimeCop, Ronald Jack and
   WireMac. (Mystar was the fifth until 19 Aug 2026, when it got a
   theme-shipped file; see wows_brand_theme_logo().) The plate is
   what they get — the mockup's own placeholder treatment, kept
   because it reads as intentional rather than as a missing asset. */
.wows-brand__plate {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-md);
	font-weight: 700;
	letter-spacing: var(--wows-ls-wide);
	color: var(--wows-text);
	text-align: center;
}

.wows-brand__name {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-lg);
	font-weight: 700;
	letter-spacing: var(--wows-ls-tight);
	color: var(--wows-ink);
}

.wows-brand__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wows-sp-2);
	margin-top: auto;
	padding-top: var(--wows-sp-2);
	border-top: 1px solid var(--wows-border-soft);
	font-size: var(--wows-fs-sm);
}

.wows-brand__cats {
	color: var(--wows-text-faint);
	/* A flex item will not shrink below its content width without this, so
	   the ellipsis below would never trigger — the text would push the
	   product count out of the card instead. */
	min-width: 0;
	/* Two category names can run long ("Time Attendance Machine").
	   Truncate rather than wrap, so every card foot is one line and
	   the grid rows stay even. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wows-brand__count {
	font-weight: 700;
	color: var(--wows-accent);
	white-space: nowrap;
}

.wows-brands__empty {
	margin: var(--wows-sp-9) 0 0;
	text-align: center;
	color: var(--wows-text-muted);
}

.wows-brands__empty[hidden] {
	display: none;
}


/* ==============================================
   4. FILTER PILLS
   ============================================== */

.wows-brands__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wows-sp-1);
}

.wows-brands__pill {
	font-family: inherit;
	font-size: var(--wows-fs-sm);
	font-weight: 600;
	color: var(--wows-text);
	background: var(--wows-white);
	border: 1px solid var(--wows-border-strong);
	border-radius: var(--wows-r-pill);
	padding: 9px 15px;
	cursor: pointer;
	transition: background var(--wows-t-fast), color var(--wows-t-fast), border-color var(--wows-t-fast);
}

.wows-brands__pill:hover {
	border-color: var(--wows-border-hover);
	color: var(--wows-ink);
}

.wows-brands__pill.is-active {
	background: var(--wows-ink);
	border-color: var(--wows-ink);
	color: var(--wows-white);
}


/* ==============================================
   5. BUTTONS
   ============================================== */

.wows-brands__btn {
	display: inline-flex;
	align-items: center;
	font-size: var(--wows-fs-base);
	font-weight: 700;
	border-radius: var(--wows-r-chip);
	padding: 13px 22px;
	text-decoration: none;
	transition: background var(--wows-t-fast), color var(--wows-t-fast), border-color var(--wows-t-fast);
}

.wows-brands__btn--light {
	background: var(--wows-white);
	color: var(--wows-ink);
	border: 1px solid var(--wows-white);
}

.wows-brands__btn--light:hover {
	background: var(--wows-on-dark);
	border-color: var(--wows-on-dark);
	color: var(--wows-ink);
}

.wows-brands__btn--ghost {
	font-weight: 600;
	background: transparent;
	color: var(--wows-white);
	border: 1px solid var(--wows-btn-ghost-border);
}

.wows-brands__btn--ghost:hover {
	background: var(--wows-spot-chip-bg);
	color: var(--wows-white);
}


/* ==============================================
   6. RESPONSIVE
   ----------------------------------------------
   Breakpoints match the rest of the theme. The
   FAQ two-column bug in session 10 was a missing
   phone breakpoint on a two-column grid, so every
   grid in this file collapses explicitly.
   ============================================== */

@media (max-width: 1100px) {
	.wows-brands__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.wows-brands__head-grid {
		grid-template-columns: 1fr;
		gap: var(--wows-sp-7);
		align-items: start;
	}

	.wows-spot {
		grid-template-columns: 1fr;
	}

	/* Photo above copy reads better than a full-width band of dark
	   text with an image hanging off the bottom. */
	.wows-spot__shot {
		order: -1;
		padding: var(--wows-sp-7);
	}

	.wows-spot__shot-img {
		max-width: 260px;
	}

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

	.wows-brands__bar {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (max-width: 560px) {
	/* TWO COLUMNS, NOT ONE (design scan, 5 Sep 2026).
	   /brands/ measured 21,092px at 390px, of which the 52-tile grid was
	   18,421px — one tile per row, each with a square logo well. Two columns
	   with a fixed-height well is roughly a third of that, and the desktop
	   four-column grid is untouched.

	   This REPLACES the single-column rules that were here, including the
	   `max-width: 200px` cap on the well. That cap existed only to stop a
	   full-width square filling the phone; keep it alongside two columns and
	   it caps the well inside a ~150px track, which does nothing. */
	.wows-brands__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wows-sp-3);
	}

	.wows-brand {
		gap: var(--wows-sp-2);
		padding: var(--wows-sp-4);
	}

	/* Fixed height rather than the square: at ~150px of column a square well
	   is most of the tile again. `aspect-ratio: auto` has to be stated for the
	   same reason the product card's does — a bare `height` against a live
	   aspect-ratio loses. */
	.wows-brand__logo {
		aspect-ratio: auto;
		height: 116px;
		padding: var(--wows-sp-3);
	}

	.wows-brand__name {
		font-size: var(--wows-fs-base);
	}

	/* The foot is a truncated category list beside a count, and the two will
	   not share 150px — the ellipsis would eat the category to nothing.
	   Stacked, the count keeps its accent and the categories keep a readable
	   width. */
	.wows-brand__foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		font-size: var(--wows-fs-xs);
	}

	.wows-brand__cats {
		max-width: 100%;
	}

	.wows-brands__stats {
		gap: var(--wows-sp-5);
	}

	.wows-brands__stat + .wows-brands__stat {
		padding-left: var(--wows-sp-5);
	}

	.wows-spot__copy {
		padding: var(--wows-sp-7) var(--wows-sp-6);
	}

	/* The pill row is the one thing here that can overflow a narrow
	   screen. Scrolling it sideways keeps every filter reachable
	   without stacking eight pills into a wall. */
	.wows-brands__filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		width: 100%;
		padding-bottom: var(--wows-sp-1);
		-webkit-overflow-scrolling: touch;
	}

	.wows-brands__pill {
		flex: 0 0 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wows-brand {
		transition: none;
	}

	.wows-brand:hover {
		transform: none;
	}
}