/**
 * HFM Customer Photos block — minimal horizontal scroller.
 *
 * Pure CSS, no JS. Native overflow-x: auto + scroll-snap for snappy
 * touch swiping and desktop scroll-wheel/trackpad. Card width and
 * aspect ratio come from CSS custom properties set inline on the
 * wrapper, so multiple blocks on the same page can vary independently.
 */

.hfm-customer-photos {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hfm-customer-photos__heading {
	margin: 0 0 4px;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 700;
}

.hfm-customer-photos__scroller {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	/* Thin scrollbar where supported; visually understated. */
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, #000 25%, transparent) transparent;
	/* Edge fade so cards near the viewport edges feel like they're
	   emerging rather than being abruptly clipped. */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	mask-image:         linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	padding: 4px 4px 12px;
}
.hfm-customer-photos__scroller::-webkit-scrollbar {
	height: 6px;
}
.hfm-customer-photos__scroller::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, #000 22%, transparent);
	border-radius: 6px;
}

.hfm-customer-photos__item {
	flex: 0 0 auto;
	width: var(--hfm-cp-width, 240px);
	scroll-snap-align: start;
	margin: 0;
}

.hfm-customer-photos__item img {
	width: 100%;
	height: auto;
	/* var --hfm-cp-ratio is set inline (e.g. "6/9"); CSS treats it as
	   the literal aspect-ratio value. Fallback covers older browsers
	   if the var doesn't resolve. */
	aspect-ratio: var(--hfm-cp-ratio, 6/9);
	/* !important matches the same defence used on product cards — the
	   theme has an unscoped .size-woocommerce_thumbnail{object-fit:contain!important}
	   that could otherwise leak in if these images carry that class. */
	object-fit: cover !important;
	object-position: center !important;
	border-radius: 16px;
	display: block;
	background: color-mix(in srgb, #000 4%, transparent);
}

/* Reduced motion: turn off the smooth scroll-snap so users who've
   asked for less motion don't get sudden snap jumps when scrolling. */
@media (prefers-reduced-motion: reduce) {
	.hfm-customer-photos__scroller {
		scroll-snap-type: none;
	}
}