/* assets/css/home.css - Home page (pages/PageHome.php) specific styles */

/* ── Client Reviews Carousel ─────────────────────────────────────────── */
/* Warm cream tint (the theme's standard alt-section background) so this
   section reads as visually distinct from the plain-white FAQs section
   right below it, instead of the two blending together. */
.reviews-carousel-section {
	background-color: rgb(175 175 175 / 50%)	;
}

.rvc-carousel {
	position: relative;
	margin-top: 16px;
}

.rvc-carousel__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.rvc-carousel__track::-webkit-scrollbar { display: none; }
.rvc-carousel__track > * { scroll-snap-align: start; }

.rvc-carousel__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, box-shadow .15s;
	color: var(--client-color, #1a3c5e);
}
.rvc-carousel__btn:hover {
	background: var(--client-color, #1a3c5e);
	color: #fff;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
}
.rvc-carousel__btn svg { width: 18px; height: 18px; }
.rvc-carousel__btn--prev { left: -8px; }
.rvc-carousel__btn--next { right: -8px; }
.rvc-carousel__btn[disabled],
.rvc-carousel__btn.rvc-hidden { opacity: 0; pointer-events: none; }

/* Dots are a touch affordance: on desktop the prev/next arrows already show
   there's more to see, so dots are redundant there. JS adds .is-available when
   the track actually overflows; the media query below decides if they render. */
.rvc-carousel__dots {
	display: none;
	justify-content: center;
	gap: 6px;
	margin-top: 14px;
}
.rvc-carousel__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(28, 22, 15, .18);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background .2s, transform .2s;
}
.rvc-carousel__dot--active {
	background: var(--client-color, #1a3c5e);
	transform: scale(1.3);
}

/* Small screens: arrows go (no hover, and they cover the cards), dots come in
   as the swipe position indicator - but only when the track actually scrolls. */
@media (max-width: 782px) {
	.rvc-carousel__btn { display: none; }
	.rvc-carousel__dots.is-available { display: flex; }
}