/* ==========================================================================
   Thai Go Hero widget
   ========================================================================== */

.tg-hero {
	--tg-navy: #0a2a66;
	--tg-blue: #1559d6;
	--tg-blue-soft: #2f6bff;
	--tg-text: #1d2b4f;
	--tg-muted: #5b6b80;
	--tg-card-radius: 22px;

	position: relative;
	/* Clip horizontally only (contains the full-bleed skyline/audio-wave) so the
	   stat-card icons that float above the cards are never clipped vertically. */
	overflow-x: clip;
	width: 100%;
	padding: 100px 16px 0;
	box-sizing: border-box;
	background: linear-gradient(180deg, #bcdcff 0%, #d8ecff 26%, #f3f1e6 62%, #fbf8ee 100%);
	font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tg-hero *,
.tg-hero *::before,
.tg-hero *::after {
	box-sizing: border-box;
}

/* Skyline band -------------------------------------------------------------- */
.tg-hero__bg {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 42%;
	z-index: 0;
	background-image: url('../images/skyline.webp');
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	pointer-events: none;
	opacity: 1;
	/* Fade the skyline out at the TOP only; bottom stays fully clear */
	-webkit-mask-image: linear-gradient(to bottom, transparent 18%, #000 40%, #000 100%);
	mask-image: linear-gradient(to bottom, transparent 18%, #000 40%, #000 100%);
}

.tg-hero__inner {
	position: relative;
	z-index: 6;
	max-width: 1456px;
	margin: 0 auto;
}

/* White blur strip at the bottom — fades the hero into the next container.
   z-index sits ABOVE the skyline (0) and phone (3) but BELOW the cards (5)
   and Hanuman (6) so those stay crisp on top of the fade. */
.tg-hero__fade {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	bottom: -50px;
	height: 120px;
	background: #ffffff;
	filter: blur(20px);
	z-index: 4;
	pointer-events: none;
}

/* Header -------------------------------------------------------------------- */
.tg-hero__header {
	text-align: center;
	max-width: 1100px;
	margin: 0 auto;
}

.tg-hero__logo {
	width: 250px;
	height: auto;
	margin: 0 auto 18px;
	display: block;
}

/* .tg-hero prefix raises specificity above the global kit's `.elementor-kit-N h1`
   (0,0,1,1) so our font wins — while staying overridable by Elementor's
   {{WRAPPER}}-scoped typography control (same specificity, printed later). */
.tg-hero .tg-hero__title {
	font-family: "Instrument Sans", sans-serif;
	font-size: 52px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	margin: 0 0 14px;
	/* Navy gradient fill, left -> right (Figma: 002A89 -> 00143F) */
	background: linear-gradient(90deg, #002a89 70%, #00143f 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #002a89; /* fallback for non-supporting browsers */
}

.tg-hero__subtitle {
	color: var(--tg-text);
	font-size: 14px;
	line-height: 1.5;
	font-weight: 400;
	margin: 0 auto 44px;
	max-width: 1040px; /* one line on desktop, like the reference */
	opacity: .85;
}

/* Store badges -------------------------------------------------------------- */
.tg-hero__badges {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 20px;
}

.tg-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 56px;
	padding: 0 22px;
	border-radius: 30px;
	background: #000;
	color: #fff;
	text-decoration: none;
	transition: transform .15s ease;
}
.tg-hero__badge:hover,
.tg-hero__badge:focus {
	color: #fff !important;
}
.tg-hero__badge-logo {
	height: 26px;
	width: auto;
	display: block;
}
.tg-hero__badge--google .tg-hero__badge-logo {
	height: 24px;
}
.tg-hero__badge-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.05;
	text-align: left;
}
.tg-hero__badge-text small {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .3px;
	text-transform: none;
}
.tg-hero__badge--google .tg-hero__badge-text small {
	text-transform: uppercase;
	font-size: 9px;
}
.tg-hero__badge-text strong {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: .2px;
}

/* Stage (phone + cards + mascot) ------------------------------------------- */
.tg-hero__stage {
	position: relative;
	margin-top: 18px;
	min-height: 640px;
}

/* Phone + mascot wrapper. On desktop it's display:contents (no box) so the
   phone/cards/mascot keep their original stage-relative z-index sandwich. On
   tablet/mobile it becomes a real positioned box so the mascot is anchored to
   the phone and never drifts on resize. */
.tg-hero__phonegroup {
	display: contents;
}
.tg-hero__phone {
	position: relative;
	z-index: 3;
	width: 430px;
	max-width: 86vw;
	margin: 0 auto;
}
.tg-hero__phone-img {
	width: 100%;
	height: 660px !important;
	display: block;
	/* Fade the phone out at the bottom so it dissolves into the skyline / bottom
	   fade instead of ending on a hard edge. */
	-webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 98%);
	mask-image: linear-gradient(to bottom, #000 80%, transparent 98%);
	object-fit: cover;
	object-position: top;
}

/* Decorative audio wave */
.tg-hero__audiowave {
	position: absolute;
	z-index: 2;
	width: 200px;
	right: calc(50% - 380px);
	top: 30px;
	opacity: .9;
	pointer-events: none;
}

/* Mascot */
.tg-hero__mascot {
	position: absolute;
	z-index: 10000000; /* float above the phone (3), cards (5) and bottom fade (4) */
	width: 350px;
	/* Anchor to the phone centre so it always overlaps the phone's lower-right */
	left: 53%;
	transform: translateX(calc(-50% + 165px));
	bottom: -15px;
	pointer-events: none;
}

/* Bus-on-hill + boat 3D decorations — live inside the 4000+ card, floating
   above its top edge (card is position:relative) */
.tg-hero__bus,
.tg-hero__boat {
	position: absolute;
	pointer-events: none;
	filter: drop-shadow(0 12px 18px rgba(0,0,0,.16));
}
.tg-hero__bus {
	width: 150px;
	left: -20px;
	top: -100px;
	z-index: 0; /* behind the glass panel (::before, z-index 1) */
}
.tg-hero__boat {
	width: 120px;
	left: 65px;
	top: -66px;
	z-index: 3; /* in front of the glass panel */
}

/* ==========================================================================
   Stat cards
   ========================================================================== */
.tg-hero__cards {
	position: static;
}
.tg-hero__track {
	display: contents;
}

.tg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-radius: var(--tg-card-radius);
	padding: 26px 28px;
	width: 256px;
}
/* Cards with an icon get extra top room; the icon floats out of the top-left */
.tg-card--light {
	padding-top: 46px;
}
.tg-card__icon {
	position: absolute;
	top: -32px;
	left: 22px;
	width: 78px;
	height: 78px;
	object-fit: contain;
}
/* Per-icon overrides — tweak each independently */
.tg-card__icon--hearts {
	width: 160px;
	height: 78px;
	top: -88px;
	left: -77px;
}
.tg-card__icon--map {
	width: 135px;
	height: 78px;
	top: -46px;
	left: 0px;
}
.tg-card__number {
	display: block;
	font-family: "Sora", sans-serif;
	font-size: 36px;
	font-weight: 800;
	line-height: 1;
	margin-bottom: 10px;
}
.tg-card__label {
	display: block;
	font-size: 14px;
	line-height: 1.35;
	font-weight: 500;
}

/* Light card */
.tg-card--light {
	background: linear-gradient(179.27deg, rgba(255, 255, 255, 0.08) 57.61%, rgba(9, 72, 215, 0.08) 99.38%);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid white;
	box-shadow: 0 20px 40px rgba(20, 60, 120, .12);
}
.tg-card--light .tg-card__number { color: var(--tg-navy); }
.tg-card--light .tg-card__label  { color: var(--tg-text); opacity: .8; }

/* Glass card (sits over skyline). The frosted panel is a ::before layer so the
   boat (a child) can sit BEHIND it while still being grouped in the card. */
.tg-card--glass {
	background: transparent;
	width: 330px;
}
.tg-card--glass::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--tg-card-radius);
	background: rgba(60, 70, 70, .28);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, .35);
	box-shadow: 0 24px 50px rgba(0, 0, 0, .22);
	z-index: 1;
}
.tg-card--glass .tg-card__body { position: relative; z-index: 2; }
.tg-card--glass .tg-card__number { color: #fff; font-size: 36px; }
.tg-card--glass .tg-card__label  { color: rgba(255,255,255,.92); font-size: 20px; }

/* Desktop absolute positioning of the three cards ------------------------- */
@media (min-width: 1025px) {
	.tg-hero__track > .tg-card {
		position: absolute;
		z-index: 5;
	}
	/* 1st card: top-left */
	.tg-hero__track > .tg-card:nth-child(1) {
		left: calc(50% - 420px);
		top: 70px;
		text-align: right;
		padding-right: 40px;
		padding-top: 30px;
		width: 210px;
		border-radius: 32px;
	}
	/* 2nd card: bottom-left glass */
	.tg-hero__track > .tg-card:nth-child(2) {
		left: calc(50% - 410px);
		bottom: 130px;
		width: 290px;
		padding: 30px 28px;
	}
	/* 3rd card: middle-right */
	.tg-hero__track > .tg-card:nth-child(3) {
		right: calc(50% - 480px);
		top: 210px;
		text-align: right;
		border-radius: 32px;
	}
	.tg-hero__dots { display: none; }
}

/* ==========================================================================
   Tablet / mobile
   ========================================================================== */
@media (max-width: 1024px) {
	.tg-hero .tg-hero__title { font-size: 38px; line-height: 1.15; white-space: normal; }
	/* Stack: phone group on top, carousel below */
	.tg-hero__stage {
		min-height: 0;
		display: flex;
		flex-direction: column;
	}
	/* Phone + mascot become a real positioned box; the mascot is anchored to the
	   phone group so it never drifts as the viewport width changes. */
	.tg-hero__phonegroup {
		display: block;
		position: relative;
		order: -1;
		z-index: 3;
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}
	.tg-hero__phone { width: 100%; margin: 0; }
	.tg-hero__mascot {
		width: 200px;
		left: auto;
		right: -8px;
		bottom: 40px;
		transform: none;
		opacity: .95;
	}
	.tg-hero__phone-img {
		height: 500px !important;
		max-width: 500px !important;
		margin-left: auto;
		margin-right: auto;
		display: block;
		-webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 88%);
		mask-image: linear-gradient(to bottom, #000 82%, transparent 88%);
	}
	.tg-hero__fade { display: none; }

	/* Cards become a Swiper carousel (swiper classes added by JS on mobile) */
	.tg-hero__cards {
		margin-top: 30px;
		position: relative;
		width: 100%;
		min-width: 0; /* allow shrink below content so Swiper sizes to the stage */
		overflow: visible;
		margin-bottom: 80px;
	}
	.tg-hero .swiper { overflow: visible; }
	.tg-hero__track {
		display: flex;
		align-items: stretch;
		padding: 6px 0 16px;
	}
	.tg-hero__track > .tg-card {
		position: relative;
		width: 78%;
		flex-shrink: 0;
		height: auto;
	}
	.tg-card,
	.tg-card--glass { width: 100%; }

	/* 300+ and 20+ (light cards) adopt the glass look on mobile */
	.tg-card--light {
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		box-shadow: none;
	}
	.tg-card--light::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: var(--tg-card-radius);
		background: rgba(60, 70, 70, .28);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border: 1px solid rgba(255, 255, 255, .35);
		box-shadow: 0 24px 50px rgba(0, 0, 0, .22);
		z-index: 1;
	}
	.tg-card--light .tg-card__body { position: relative; z-index: 2; }
	.tg-card--light .tg-card__icon { z-index: 2; }
	.tg-card--light .tg-card__number { color: #fff; }
	.tg-card--light .tg-card__label { color: rgba(255, 255, 255, .92); opacity: 1; }
	.tg-card--light .tg-card__number,
	.tg-card--glass .tg-card__number { font-size: 30px; }
	.tg-card--light .tg-card__label,
	.tg-card--glass .tg-card__label { font-size: 17px; }
	.tg-card__icon--map { top: -70px; }
	.tg-card__icon--hearts { left: -30px; }

	/* Dots = Swiper pagination, kept in flow below the carousel */
	.tg-hero__dots {
		position: static;
		display: flex;
		gap: 8px;
		justify-content: center;
		margin-top: 4px;
	}
	.tg-hero__dots .swiper-pagination-bullet {
		width: 8px; height: 8px; margin: 0;
		border: none; border-radius: 50%;
		background: #c2cde0; opacity: 1; cursor: pointer;
		transition: width .2s ease, background .2s ease;
	}
	.tg-hero__dots .swiper-pagination-bullet-active {
		width: 22px; border-radius: 4px; background: var(--tg-blue);
	}
}

@media (max-width: 600px) {
	.tg-hero { padding-top: 80px; }
	.tg-hero .tg-hero__title { font-size: 20px; line-height: 1.18; }
	.tg-hero__subtitle { font-size: 14px; }
	.tg-hero__logo { width: 140px; height: auto; }
	/* Two columns on mobile instead of stacking */
	.tg-hero__badges {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.tg-hero__badge { min-width: 0; height: 50px; padding: 0 14px; gap: 7px; justify-content: center; }
	.tg-hero__badge-text strong { font-size: 15px; }
	.tg-hero__badge-text small { font-size: 8px; }
	.tg-hero__phone { width: 100%; }
	.tg-hero__track > .tg-card,
	.tg-card,
	.tg-card--glass { width: 100%; }
}