/*
  shr-brands-page-v3.css — Brands index (/brands/), native s2u template
  (landing-pages/template-brands-2026.php). Scoped under .shr-brands;
  depends on shr-sections.css for section/kicker/blueprint/lift primitives.
*/

/* ═══════════ Breadcrumb ═══════════ */
.shr-brands-crumbs { background: #fff; border-bottom: 1px solid var(--s2u-divider); }
.shr-brands-crumbs .s2u-container {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px clamp(16px, 4vw, 48px);
	font-size: 13px;
}
.s2u-page .shr-brands-crumbs a { color: var(--s2u-neutral-600); text-decoration: none; }
.s2u-page .shr-brands-crumbs a:hover { color: var(--s2u-red); }
.shr-brands-crumbs__sep { color: var(--s2u-neutral-500); }
.shr-brands-crumbs__here { font-weight: 600; color: var(--s2u-text); }

/* ═══════════ Hero ═══════════ */
.shr-brands-hero { padding-top: clamp(28px, 4vw, 48px); padding-bottom: 0; }
.shr-brands-hero .s2u-kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; margin-bottom: 14px; }
.shr-brands-hero__title {
	font-family: var(--s2u-font-heading);
	font-weight: 600;
	font-size: clamp(34px, 4.4vw, 54px);
	line-height: 1;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--s2u-text);
	margin: 0 0 18px;
}
.shr-brands-hero__lead { font-size: 15px; line-height: 1.65; color: var(--s2u-neutral-700); max-width: 72ch; margin: 0; }

/* ═══════════ Brand grid ═══════════ */
.shr-brands-grid-section { padding-top: clamp(28px, 4vw, 44px); }
.shr-brands-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
	gap: 26px;
}

.shr-brands-card { background: #fff; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
/* Taller cards on desktop: extra breathing room top and bottom. */
@media (min-width: 769px) {
	.shr-brands-card { padding-top: 34px; padding-bottom: 34px; }
}

.shr-brands-card__top { display: flex; align-items: center; gap: 16px; }
.shr-brands-card__logo {
	flex: 0 0 88px;
	width: 88px;
	height: 88px;
	border: 1px solid var(--s2u-divider);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
}
.shr-brands-card__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.shr-brands-card__logo-fallback {
	font-family: var(--s2u-font-heading);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--s2u-neutral-600);
	text-align: center;
}
.shr-brands-card__h { margin: 0; line-height: 1.1; }
/* .s2u-page a (element+class) would recolour these links — outweigh it.
   Weight 700 Barlow Condensed is loaded for this (inc/enqueue.php fonts URL). */
.s2u-page .shr-brands-card__name {
	font-family: var(--s2u-font-heading);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--s2u-text);
	text-decoration: none;
}
/* The name's ::after stretches over the card, so the whole card is the link;
   the logo and "N models" links sit above it on their own z layer. */
.s2u-page .shr-brands-card__name::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.shr-brands-card__logo, .s2u-page .shr-brands-card__more { position: relative; z-index: 2; }
.s2u-page .shr-brands-card__name:hover,
.shr-brands-card:hover .shr-brands-card__name { color: var(--s2u-red); }
.shr-brands-card__origin {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--s2u-neutral-600);
	margin-top: 3px;
}

.shr-brands-card__desc { font-size: 13.5px; line-height: 1.6; color: var(--s2u-neutral-700); margin: 0; flex: 1; }

.shr-brands-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.shr-brands-tag {
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1;
	padding: 5px 8px;
	border: 1px solid var(--s2u-accent-400);
	color: var(--s2u-accent-700);
	white-space: nowrap;
}

.s2u-page .shr-brands-card__more {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid var(--s2u-divider);
	padding-top: 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	font-feature-settings: 'tnum' 1;
	color: var(--s2u-accent-700);
	text-decoration: none;
}
.s2u-page .shr-brands-card__more:hover { color: var(--s2u-red); }

/* ═══════════ Brand-agnostic advice CTA ═══════════ */
.shr-brands-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.shr-brands-cta__copy p { margin: 14px 0 0; max-width: 60ch; font-size: 15px; line-height: 1.65; }