/* components/brands.css
   The brand rail on the products page, and the manufacturer chips on a product.

   There is no brand page any more - a brand is a filter on the catalogue - so the chip's
   count badge and active state went with it.

   Part of assets/css/. The load order lives in
   inc/setup.php - add new files there, not with @import. */

.brand-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 13px;
	border: 1px solid var(--line-2);
	background: #fff;
	color: var(--navy);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	line-height: 1.2;
	transition: background 0.15s, color 0.15s;
}

.brand-chip:hover,
.brand-chip:focus-visible {
	background: var(--navy);
	color: #fff;
}

/* On a product page the brands sit above the system kicker. */
.detail-brands {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.detail-brands .brand-chip { min-height: 32px; padding: 0 11px; font-size: 11px; }

/* ---------- brand rail ----------
   Built on the product carousel (.pcar), so the scroll-snap track, the side arrows and
   their gutters all come from components/carousel.css. Only the tile differs. */
.brand-rail .pcar-track {
	gap: 14px;
	grid-auto-columns: calc((100% - 5 * 14px) / 6);
	scroll-padding-left: 0;
}

.brand-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	color: var(--ink);
	transition:
		box-shadow 0.3s ease,
		transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The same bar the product and system cards use, so a hovered tile belongs to the
   same family. */
.brand-tile::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	height: 3px;
	width: 0;
	background: var(--navy);
	transition: width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.brand-tile:hover,
.brand-tile:focus-visible {
	color: var(--ink);
	transform: translateY(-4px);
}

.brand-tile:hover::before,
.brand-tile:focus-visible::before,
.brand-tile.is-active::before { width: 100%; }

/* The tile whose brand is currently filtering the catalogue. Its bar is already out to
   full width; a shadow keeps it raised, with no ring drawn round it. */
.brand-tile.is-active {
	box-shadow: 0 10px 26px -18px rgba(20, 22, 60, 0.4);
	transform: translateY(-2px);
}

.brand-tile.is-active .brand-tile-origin { color: var(--navy); }

.brand-tile-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 82px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	background: repeating-linear-gradient(135deg, #FAFBFD 0 10px, #F3F5F9 10px 20px);
	font-family: var(--serif);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--navy);
	text-align: center;
	text-wrap: balance;
}

/* With a real mark the plate goes plain, so the hatching does not fight the logo. */
.brand-tile-mark.has-logo { background: #fff; padding: 14px 18px; }

.brand-tile-mark.has-logo img {
	max-width: 100%;
	max-height: 46px;
	width: auto;
	height: auto;
	object-fit: contain;
	/* Marks arrive at wildly different weights; a touch of grey settles the row, and
	   the brand's own colour comes back on hover. */
	filter: saturate(0.88);
	transition: filter 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.brand-tile:hover .brand-tile-mark.has-logo img,
.brand-tile:focus-visible .brand-tile-mark.has-logo img {
	filter: saturate(1);
	transform: scale(1.04);
}

/* A white mark has no background of its own and would vanish on the light plate. */
.brand-tile-mark.on-dark { background: var(--night); border-bottom-color: var(--night); }

.brand-tile-meta { display: flex; flex-direction: column; gap: 5px; padding: 13px 14px 15px; }

.brand-tile-origin {
	font-size: 11px;
	letter-spacing: 0.1em;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--mute);
}

.brand-tile-count { font-size: 11px; font-weight: 300; color: var(--mute); }

@media (prefers-reduced-motion: reduce) {
	.brand-tile,
		.brand-tile::before,
		.brand-tile-mark.has-logo img { transition: none; }

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

	.brand-tile:hover .brand-tile-mark.has-logo img { transform: none; }
}

@media (max-width: 1180px) {
	.brand-rail .pcar-track { grid-auto-columns: calc((100% - 4 * 14px) / 5); }
}

@media (max-width: 980px) {
	.brand-rail .pcar-track { grid-auto-columns: calc((100% - 3 * 14px) / 4); }
}

@media (max-width: 680px) {
	.brand-rail .pcar-track { grid-auto-columns: calc((100% - 14px) / 2); }
}

@media (max-width: 420px) {
	.brand-rail .pcar-track { grid-auto-columns: 100%; }
}