/* Brands page. Auto-enqueued for templates/page-brands/page-brands.php. */

/* Dark navy background + diagonal hairline gradient. Shared by the hero and CTA sections. */
.te-brands-bg {
	background: #0d1f3c;
	background-image: repeating-linear-gradient(160deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 32px);
}

/* Disclaimer citations: underlined by default, underline removed on hover. */
.te-disclaimer a {
	color: inherit;
	text-decoration: underline;
}
.te-disclaimer a:hover {
	text-decoration: none;
}

/* Disclaimer footnote paragraphs. */
.te-disclaimer p {
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	font-style: italic;
	line-height: 16px;
	color: #6a7282;
}

/* Hero title — 64px on desktop (was inline). */
.te-brands-hero__title {
	font-size: 64px;
	font-family: "DM Serif Display", serif;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
}

/* Orange period after the hero headline. */
.te-brands-hero__dot { color: #FF6900; }

/* CTA heading. */
.te-brands-cta__title {
	font-family: "DM Serif Display", serif;
	font-size: 36px;
	font-weight: 400;
	line-height: 1.1;
}

/* SVG wave wrappers collapse the inline-svg baseline gap. */
.te-brands-wave { line-height: 0; }

/* Crescent divider wrapper (white → dark CTA): solid navy, no gradient. */
.te-brands-divider {
	background: #0d1f3c;
	line-height: 0;
}

/* Hero wave svg. */
.te-brands-wave__svg {
	width: 100%;
	height: 90px;
	display: block;
}

/* Crescent divider svg (taller than the hero wave). */
.te-brands-divider__svg {
	width: 100%;
	height: 100px;
	display: block;
}

/* PICA's horizontal wordmark is shorter than the other marks (matches Figma). */
.te-brand-logo--pica { height: 52px; }

/* Logos with baked white backgrounds (JPG / white pill) show as white boxes
   over the row's hover tint — multiply blending makes white read as
   transparent over any light backdrop, so they melt into the row. */
.te-brand-row__logo img { mix-blend-mode: multiply; }

/* "Discover <brand> →" text link under each category — mobile only (the
   standalone arrow column takes over from 768px up). */
.te-brand-row__cta { display: none; }

/* Ghost button outline matches the homepage "Explore All Brands". */
.te-brands-model-btn { border-width: 2px; border-color: rgba(255, 255, 255, 0.3); }

/* Mobile (< md / 768px) tweaks. */
@media (max-width: 767.98px) {
	/* The 64px title overwhelms the phone hero — shrink it. */
	.te-brands-hero__title { font-size: 36px; }

	/* The [logo | text | arrow] grid is cramped at phone width. Stack the logo
	   above a centered [headline → arrow] line (arrow beside the text).
	   Row gap is slim (label hugs its Discover link); the logo adds its own
	   margin so it keeps more air above the label. */
	.te-brand-row {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 8px 10px;
		text-align: center;
	}
	.te-brand-row__logo { flex-basis: 100%; display: flex; justify-content: center; margin-bottom: 16px; }
	.te-brand-row__logo img { object-position: center; }
	.te-brand-row__arrow { justify-content: center; }
}

/* ── WCAG AA orange pass ── */
.te-brand-row .text-orange-400 { color: #EF6200; } /* arrow icons on white/gray-50, 3.27:1 */
.te-brands-bg .bg-orange-500 { background: #BF4E00; } /* Get in Touch: white label 4.88:1 */
.te-brands-bg .bg-orange-500:hover { background: #A84600; }

/* Decorative waves/dividers never intercept clicks or text selection. */
.te-brands-wave,
.te-brands-divider { pointer-events: none; }

/* Mobile: stacked CTA buttons shrink-wrap to the widest so both match. */
@media (max-width: 767.98px) {
	.te-brands-cta__actions { display: inline-flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
}

/* Mobile: CTA button labels match the homepage CTA pair's 18px (site-wide);
   stretched (stacked) buttons keep their labels centered. */
@media (max-width: 767.98px) {
	.te-brands-cta__actions a { font-size: 18px; justify-content: center; }
}

/* Mobile: disclaimers step from 12px to 13px (site-wide legibility floor;
   the ~1.3 tightened leading ratio is preserved). */
@media (max-width: 767.98px) {
	.te-disclaimer p { font-size: 13px; line-height: 17px; }
}

/* Mobile: CTA H2 matches the homepage section headings' 30px/1.15 (site-wide pass). */
@media (max-width: 767.98px) {
	.te-brands-cta__title { font-size: 30px; line-height: 1.15; }
}

/* Mobile: tighten the brand-rows section — no top rule and a slim gap under
   the hero, more air between the list's bottom rule and the disclaimers,
   less below the disclaimers. The orphaned arrow row is replaced by an
   inline arrow hugging the category's last word. */
@media (max-width: 767.98px) {
	.te-brands-rows { padding-top: 0; padding-bottom: 32px; }
	.te-brand-rows-list { border-top: 0; }
	.te-disclaimer { margin-top: 24px; }
	.te-brand-row__arrow { display: none; }
	.te-brand-row__cta {
		flex-basis: 100%;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
		font-family: Inter, system-ui, sans-serif;
		font-weight: 600;
		font-size: 16px;
		color: #BF4E00; /* AA on white/gray-50 hover tint (4.88:1) */
	}
	.te-brand-row__cta svg { width: 28px; height: 28px; }
	/* Row hover already tints the background gray-50; deepen the link too. */
	.te-brand-row:hover .te-brand-row__cta { color: #A84600; }
}