/* Small Group Journeys: Traveller Testimonials (Figma 244:818, mobile 229:508;
 * sliders TestimonialSlider 274:226 and TestimonialSliderMobile 274:2058).
 *
 * Reuses the live .g--testimonials pattern: the rounded card with the
 * background video and 30% overlay, white copy, the Swiper slider and its
 * circle arrow buttons all come from assets/css/live/sections.css. The design
 * adds dots and sets the spacing. assets/js/sgj/testimonials.js runs the
 * slider. Port this file to astra-child with the section markup. */

.ot-section.g--testimonials .ot-section__custom {
	margin-top: 47px;
}

.g--testimonials .testimonial {
	max-width: 860px;
}

.g--testimonials .testimonial__author {
	line-height: 1.65;
}

.g--testimonials .testimonial__rating {
	margin-top: 0;
}

/* Swiper's own one-at-a-time layout, repeated so only the first testimonial
 * shows before swiper-bundle.min.css (loaded without blocking) arrives. */
.g--testimonials .swiper {
	overflow: hidden;
}

.g--testimonials .swiper-wrapper {
	display: flex;
}

/* Slides share the tallest testimonial's height, so the card does not jump;
 * each one is centred in it. */
.g--testimonials .swiper-slide {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	width: 100%;
	height: auto;
}

.g--testimonials .swiper-autoheight .swiper-slide {
	align-items: flex-start;
}

/* Arrow buttons: the live circle arrows, as real buttons. */
.g--testimonials .swiper-button-prev,
.g--testimonials .swiper-button-next,
.g--testimonials .swiper-button-prev:hover,
.g--testimonials .swiper-button-next:hover,
.g--testimonials .swiper-button-prev:focus,
.g--testimonials .swiper-button-next:focus {
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	box-shadow: none;
}

.g--testimonials .swiper-button-prev:focus-visible,
.g--testimonials .swiper-button-next:focus-visible {
	outline: 2px solid var(--ast-global-color-0);
	outline-offset: 2px;
}

.g--testimonials .swiper-navigation-icon {
	display: none;
}

/* Dots: white, the current one gold and larger. */
.g--testimonials .swiper-pagination {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto;
	margin-top: 30px;
	line-height: 0;
}

.g--testimonials .swiper-pagination-bullet,
.g--testimonials .swiper-pagination-bullet:hover,
.g--testimonials .swiper-pagination-bullet:focus {
	width: 8px;
	height: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--ast-global-color-4);
	box-shadow: none;
	opacity: 1;
}

.g--testimonials .swiper-pagination-bullet-active,
.g--testimonials .swiper-pagination-bullet-active:hover,
.g--testimonials .swiper-pagination-bullet-active:focus {
	width: 10px;
	height: 10px;
	background-color: var(--ast-global-color-0);
}

.g--testimonials .swiper-pagination-bullet:focus-visible {
	outline: 2px solid var(--ast-global-color-0);
	outline-offset: 2px;
}

/* From 1440px, as on the live site: 50px arrows at the sides, centred on the
 * slider; the dots sit under the quote. */
@media (min-width: 1440px) {
	.g--testimonials .swiper {
		--swiper-navigation-top-offset: 50%;
	}

	.g--testimonials .testimonials__controls {
		display: contents;
	}
}

/* Below 1440px (the live pattern moves its arrows under the quote here): a
 * row of 40px arrows either side of the dots, 32px under the quote. */
@media (max-width: 1439px) {
	.g--testimonials .testimonials__controls {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px;
		margin-top: 32px;
	}

	.g--testimonials .swiper-button-prev,
	.g--testimonials .swiper-button-next {
		position: static;
		flex-shrink: 0;
		margin: 0;
	}

	.g--testimonials .swiper-pagination {
		gap: 8px;
		margin-top: 0;
	}
}

/* Mobile: tighter card padding and type, smaller dots. */
@media (max-width: 767px) {
	.g--testimonials > .ot-section__container {
		padding: 48px 24px;
	}

	.ot-section.g--testimonials .ot-section__custom {
		margin-top: 20px;
	}

	.g--testimonials .testimonial__quote {
		margin-bottom: 20px;
	}

	.g--testimonials .testimonial__author {
		gap: 6px;
		line-height: 22px;
	}

	.g--testimonials .testimonial__author b {
		font-size: 16px;
		line-height: 24px;
	}

	.g--testimonials .swiper-pagination-bullet,
	.g--testimonials .swiper-pagination-bullet:hover,
	.g--testimonials .swiper-pagination-bullet:focus {
		width: 7px;
		height: 7px;
	}

	.g--testimonials .swiper-pagination-bullet-active,
	.g--testimonials .swiper-pagination-bullet-active:hover,
	.g--testimonials .swiper-pagination-bullet-active:focus {
		width: 9px;
		height: 9px;
	}
}

/* The narrowest phones: the arrows move in so the row fits the card. */
@media (max-width: 374px) {
	.g--testimonials .testimonials__controls {
		gap: 12px;
	}
}