/* ==========================================================================
   Thai Go Reviews / Press carousel (Swiper-powered)
   ========================================================================== */

.tg-reviews {
	--tg-navy: #0a2a66;
	width: 100%;
	box-sizing: border-box;
	background: #ffffff;
	font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.tg-reviews *,
.tg-reviews *::before,
.tg-reviews *::after { box-sizing: border-box; }

.tg-reviews__carousel {
	position: relative;
	height: 640px;
	display: flex;
	align-items: center;
	/* Container background — the slides move over it. Colour + image are
	   overridable from the Elementor "Carousel Background" controls. */
	background-color: #0c1b33;
	background-image: var(--tg-reviews-bg, url('../images/review-bg.webp'));
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}
/* Vignette: darker on the left/right edges (and a touch overall) so the
   centred slide stays legible and the peeking sides recede. */
.tg-reviews__carousel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(6, 14, 28, .55) 0%, rgba(6, 14, 28, .12) 30%, rgba(6, 14, 28, .12) 70%, rgba(6, 14, 28, .55) 100%),
		linear-gradient(180deg, rgba(6, 14, 28, .1) 0%, rgba(6, 14, 28, .25) 100%);
}

/* Swiper container / slides --------------------------------------------- */
.tg-reviews__swiper {
	position: relative;
	z-index: 2;
	width: 100%;
	overflow: visible; /* let neighbours peek beyond the active slide */
}
.tg-reviews__swiper .swiper-wrapper {
	align-items: center;
}
.tg-reviews__swiper .swiper-slide {
	width: 64%;
	max-width: 860px;
	opacity: .4;
	transition: opacity .6s ease !important;
}
.tg-reviews__swiper .swiper-slide-active {
	opacity: 1;
}

/* Card (transparent — content sits over the shared sticky background) ----- */
.tg-review {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tg-review__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 9%;
	color: #fff;
}
.tg-review__quote {
	font-family: "Instrument Sans", sans-serif;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.35;
	max-width: 680px;
	margin: 0 0 28px;
	/* !important so the active-slide size change animates even under the site's
	   prefers-reduced-motion rule (Elementor zeroes all transitions there). */
	transition: font-size .5s ease !important;
}
.tg-review__logo {
	display: block;
	width: auto;
	/* Uniform visual height so small assets (e.g. NBC) scale UP to match the
	   others instead of rendering tiny; max-width caps very wide logos. */
	height: 56px;
	max-width: 260px;
	margin-top: 40px;
	object-fit: contain;
	transition: height .5s ease, max-width .5s ease !important;
}
/* Active slide: larger quote + logo */
.swiper-slide-active .tg-review__quote {
	font-size: 40px;
}
.swiper-slide-active .tg-review__logo {
	height: 84px;
	max-width: 360px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
	/* Full-bleed on mobile: the bg image fills the section and each slide is
	   full-width (no contained card, no white gutters) — like desktop. */
	.tg-reviews__carousel {
		height: 280px;
	}
	.tg-reviews__swiper .swiper-slide {
		width: 100%;
		opacity: 1;
	}
	.tg-review__content {
		padding: 0 7%;
	}
	.tg-review__quote,
	.swiper-slide-active .tg-review__quote {
		font-size: 18px;
	}
	.tg-review__logo,
	.swiper-slide-active .tg-review__logo {
		height: 52px !important;
		max-width: 200px !important;
		margin-top: 28px;
	}
}

/* Tablet (768px = iPad portrait counts as tablet). Placed after the mobile
   block so these win at exactly 768px too. */
@media (min-width: 768px) and (max-width: 1024px) {
	.tg-reviews__carousel { height: 350px; }
	.tg-review__quote,
	.swiper-slide-active .tg-review__quote {
		font-size: 28px;
	}
}