/* reviews-cta.css — homepage reviews carousel + booking cta panel.
   loads after pages.css. */

/* reviews carousel — no cards, quotes float on the section bg. viewport is
   edge-masked so neighbours fade softly; arrows sit outside the mask */
.rev-carousel {
	position: relative;
	margin-top: 2.6rem;
}
.rev-viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.rev-track {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	transition: transform .7s var(--ease-out);
}
/* instant clone snap (reviews.js adds this for one reflow). the slide's own
   opacity/scale transition is killed too so the real slide takes over from its
   clone already at full opacity — otherwise it re-fades in on every loop wrap */
.rev-track.is-instant,
.rev-track.is-instant .rev-slide { transition: none; }
.rev-slide {
	flex: 0 0 min(640px, 82vw);
	padding: .5rem clamp(1.5rem, 4vw, 3rem);
	text-align: center;
	opacity: .28;
	transform: scale(.92);
	transition: opacity .7s var(--ease-out),
	            transform .7s var(--ease-out);
}
.rev-slide.is-current { opacity: 1; transform: none; }

/* one-time staggered reveal on first scroll into view (reviews.js adds
   .is-revealed once): stars → quote → name. .is-armed gates the hidden state
   to when js is running, so no-js keeps the reviews visible */
.rev-carousel.is-armed .rev-stars,
.rev-carousel.is-armed blockquote,
.rev-carousel.is-armed cite { opacity: 0; }
.rev-carousel.is-revealed .rev-stars { animation: aht-rev-rise 1.1s var(--ease-out) both; animation-delay: .05s; }
.rev-carousel.is-revealed blockquote { animation: aht-rev-rise 1.1s var(--ease-out) both; animation-delay: .3s; }
.rev-carousel.is-revealed cite        { animation: aht-rev-rise 1.1s var(--ease-out) both; animation-delay: .55s; }
@keyframes aht-rev-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.rev-carousel.is-armed .rev-stars,
	.rev-carousel.is-armed blockquote,
	.rev-carousel.is-armed cite { opacity: 1; }
	.rev-carousel.is-revealed .rev-stars,
	.rev-carousel.is-revealed blockquote,
	.rev-carousel.is-revealed cite { animation: none; }
}

.rev-stars {
	color: var(--yellow);
	font-size: .95rem;
	margin-bottom: 1.1rem;
}
.rev-stars i { margin-inline: .14rem; }

.rev-slide blockquote { margin: 0; }
.rev-slide blockquote p {
	color: var(--cream);
	font-size: 1.1rem;
	line-height: 1.75;
}
.rev-slide cite {
	display: block;
	margin-top: 1.3rem;
	font-style: normal;
	font-family: var(--font-sans);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--gold);
}

/* arrows: bare icons, revealed on carousel hover (or keyboard focus) */
.rev-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding: 1rem;
	color: var(--cream);
	font-size: 1.4rem;
	line-height: 1;
	background: transparent;
	opacity: 0;
	transition: opacity .35s var(--ease-out),
	            color .35s var(--ease-out);
}
.rev-arrow--prev { left: clamp(.5rem, 6vw, 5rem); }
.rev-arrow--next { right: clamp(.5rem, 6vw, 5rem); }
.rev-carousel:hover .rev-arrow,
.rev-arrow:focus-visible { opacity: 1; }
.rev-arrow:hover { color: var(--yellow); }

@media (max-width: 640px) {
	.rev-arrow { opacity: 1; }   /* no hover on touch — keep them visible */

	/* uniform-height reviews: cap every quote to the two shorter reviews' height
	   so switching slides doesn't jump. overflowing quotes get an internal scroll
	   + foot fade (scripts.js adds .is-clipped only when text overflows). above
	   640px quotes keep their natural height */
	.rev-slide blockquote {
		height: 12rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.rev-slide blockquote::-webkit-scrollbar { display: none; }
	.rev-slide blockquote.is-clipped {
		-webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
		mask-image: linear-gradient(180deg, #000 78%, transparent);
	}
}

/* booking cta panel */
.cta-panel { text-align: center; }
.cta-panel .flourish { font-size: clamp(3rem, 8vw, 6.2rem); }
.cta-panel h2 { max-width: 22ch; margin-inline: auto; }
.cta-panel p.lead { max-width: 46ch; margin: 1.1rem auto 0; color: var(--sand); }
.cta-panel .btn { margin-top: 2rem; }

/* two-column variant when a client photo is set (cta_image acf field) */
.cta-panel--split {
	display: grid;
	grid-template-columns: 1.1fr auto;
	align-items: center;
	gap: clamp(2.5rem, 6vw, 5rem);
	text-align: left;
}
.cta-panel--split .cta-panel__text { max-width: 46ch; }
.cta-panel--split .flourish { font-size: clamp(2.4rem, 4.2vw, 3.6rem); }
.cta-panel--split h2 { margin-inline: 0; }
.cta-panel--split p.lead { margin-inline: 0; }

.cta-panel__media { position: relative; justify-self: center; }
.cta-panel__photo {
	--photo-size: clamp(220px, 26vw, 340px);
	display: block;
	width: var(--photo-size);
	height: var(--photo-size);
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: var(--shadow);
}
/* circular echo of .split__media::before (pages.css) */
.cta-panel__media::before {
	content: "";
	position: absolute;
	inset: 1rem -1rem -1rem 1rem;
	border: 1px solid var(--gold);
	border-radius: 50%;
	z-index: -1;
}

@media (max-width: 860px) {
	.cta-panel--split {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.cta-panel--split .cta-panel__media { order: -1; }
	.cta-panel--split .cta-panel__text { max-width: none; }
	.cta-panel--split h2,
	.cta-panel--split p.lead { margin-inline: auto; }
}