/**
 * Trust bar — template-parts/trust-bar.php, front-page.php only,
 * directly below the hero.
 *
 * Reused as-is, nothing redefined: color/spacing/type/radius tokens,
 * .container, .star-rating (main.css component 11 — moved there while
 * building template-parts/final-cta.php, which needed the identical
 * visual a second time), get_icon(), .visually-hidden. A slim, quiet
 * band on purpose — no card/shadow/badge component here, sharp-edged
 * surface shift only (thin border, not a soft shadow), matching this
 * brand's general avoidance of blur/glow even in a "quiet" section.
 */

.trust-bar {
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	padding-block: var(--space-7);
}

/* =========================================================
   Mobile (< --bp-desktop / 1024px): horizontal scroll-snap carousel, not
   a 2-column grid — 5 items don't tile evenly into 2 columns (an
   orphaned 5th item on its own row reads unfinished), and a swipeable
   row matches this brand's snappier motion character. No JS: native
   `scroll-snap-type` handles the snapping.
   ========================================================= */

.trust-bar__row {
	display: flex;
	gap: var(--space-6);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.trust-bar__row::-webkit-scrollbar {
	display: none;
}

.trust-bar__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
	min-width: 15rem;
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

@media (min-width: 1024px) {
	.trust-bar__row {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: var(--space-4);
		overflow-x: visible;
		scroll-snap-type: none;
	}

	.trust-bar__item {
		min-width: 0;
	}

	.trust-bar__item:not(:first-child) {
		padding-left: var(--space-4);
		border-left: 1px solid var(--color-border);
	}
}

.trust-bar__item .icon {
	flex-shrink: 0;
	color: var(--color-accent);
}

.trust-bar__item-text {
	min-width: 0;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	line-height: var(--lh-sm);
}

.trust-bar__item-text strong {
	color: var(--color-text);
	font-weight: var(--fw-semibold);
}

/* =========================================================
   Counter (subscriber count) — deliberately smaller than the hero's big
   display-font stat numerals: this band signals confidence quietly, it
   doesn't repeat the hero's headline moment.
   ========================================================= */

.trust-bar__counter,
.trust-bar__suffix {
	font-weight: var(--fw-semibold);
	color: var(--color-text);
}