/* ==========================================================================
   Thai Go "Bangkok in your pocket" download CTA banner
   ========================================================================== */

.tg-download {
	width: 100%;
	box-sizing: border-box;
	padding: 80px 60px;
	/* City cityscape sits BEHIND the blue card, filling the section. Colour +
	   image are overridable from the Elementor "Section Background" controls. */
	--tg-download-bg: url('../images/download-app-bg.webp');
	background-color: #0c1b33;
	background-image: var(--tg-download-bg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.tg-download *,
.tg-download *::before,
.tg-download *::after { box-sizing: border-box; }

.tg-download__card {
	position: relative;
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
	aspect-ratio: 1280 / 700;
	padding: 56px 60px;
	overflow: hidden;
	border-radius: 36px;
	background: linear-gradient(135deg, #6a90e3 0%, #0245dc 100%) !important;
	box-shadow: 0 30px 60px rgba(13, 58, 160, 0.28);
}

/* Decorative ThaiGo cloud-shape watermarks in the corners */
.tg-download__deco {
	position: absolute;
	z-index: 1;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}
.tg-download__deco--1 {
	bottom: 0px;
	left: 0;
	width: 300px;
	height: 300px;
	background-image: url('../images/download-deco-tr.webp');
	transform: translate(-35%, 35%);
}
.tg-download__deco--2 {
	top: 0;
	right: 0;
	width: 300px;
	height: 300px;
	background-image: url('../images/download-deco-bl.webp');
	transform: translate(35%, -35%);
}

/* ---- Left content ------------------------------------------------------ */
.tg-download__content {
	position: relative;
	z-index: 3;
	max-width: 580px;
}
.tg-download .tg-download__title {
	color: #ffffff;
	font-family: "Instrument Sans", sans-serif;
	font-size: 48px;
	font-weight: 600;
	line-height: 1.12;
	margin: 0 0 14px;
}
.tg-download__subtitle {
	color: rgba(255, 255, 255, .82);
	font-family: "Instrument Sans", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	max-width: 600px;
	margin: 0 0 26px;
}
.tg-download__label {
	display: block;
	color: rgba(255, 255, 255, .9);
	font-family: "Instrument Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .4px;
	margin-bottom: 12px;
	text-align: center;
}

/* Label + stacked badges, sitting to the right of the mascot */
.tg-download__get {
	position: absolute;
	z-index: 3;
	left: calc(50% - 240px);
	bottom: 60px;
}
.tg-download__badges {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.tg-download__badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-width: 168px;
	padding: 12px 30px;
	border-radius: 30px;
	background: #0c1426;
	color: #fff;
	text-decoration: none;
}
/* Neutralise the theme's link-hover (which otherwise dims the badge text) */
.tg-download__badge:hover,
.tg-download__badge:focus {
	color: #fff !important;
	opacity: 1;
}
.tg-download__badge-logo { width: 30px; height: auto; display: block; }
.tg-download__badge-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}
.tg-download__badge-text small { font-size: 9px; font-weight: 400; opacity: .85; }
.tg-download__badge-text strong { font-size: 25px; font-weight: 600; }

/* ---- Mascot ------------------------------------------------------------ */
.tg-download__mascot {
	position: absolute;
	z-index: 4;
	left: 0;
	bottom: 0;
	width: 470px;
	height: auto;
	pointer-events: none;
}

/* ---- Phones (right) ---------------------------------------------------- */
.tg-download__phones {
	position: absolute;
	z-index: 2;
	right: 56px;
	bottom: -40px;
	width: 440px;
	height: 100%;
}
/* Phone PNGs already include their own frame, shadow and tilt */
.tg-download__phone {
	position: absolute;
	bottom: 0;
	width: 250px;
	height: auto;
}
.tg-download__phone--back {
	right: -45px;
	bottom: -90px;
	z-index: 1;
	width: 350px;
}
.tg-download__phone--front {
	right: calc(50% - 30px);
	bottom: -20px;
	width: 380px;
	z-index: 2;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Small-desktop / large landscape-tablet: keep the side-by-side card but give
   it a taller ratio so the fixed-size mascot + phones stop overlapping. */
@media (min-width: 1025px) and (max-width: 1180px) {
	.tg-download__card { aspect-ratio: 1180 / 760; padding: 44px 36px; }
	.tg-download__phones { width: 360px; right: 24px; }
	.tg-download .tg-download__title { font-size: 40px; }
}

/* Tablet + mobile: the horizontal composition can't fit, so stack it.
   (Was 768px — raised to 1024px so portrait/landscape tablets stack too.) */
@media (max-width: 1024px) {
	.tg-download { padding: 24px 0 24px; }
	.tg-download__deco--1,
	.tg-download__deco--2 { width: 150px; height: 150px; }

	/* Stack: heading → subtitle → phones → label → badges */
	.tg-download__card {
		display: flex;
		flex-direction: column;
		padding: 36px 26px 40px;
		height: auto;
		aspect-ratio: auto;
		min-height: 0;
		text-align: left;
	}
	.tg-download__content { order: 1; max-width: none; }
	.tg-download__phones { order: 2; }
	.tg-download__get { order: 3; }
	.tg-download__mascot { display: none; }
	.tg-download .tg-download__title { font-size: 28px; }
	.tg-download__subtitle { font-size: 14px; }
	.tg-download__badge-text small { font-size: 14px; }
	.tg-download__badge-text { text-align: left; }

	/* Label + badges centred below the phones */
	.tg-download__get {
		position: static;
		align-self: center;
		text-align: center;
		margin-top: 24px;
	}
	.tg-download__badges { align-items: stretch; }
	.tg-download__badge { justify-content: center; padding: 14px 30px; }

	/* Two overlapping phones, centred. Cap the width so they stay grouped
	   on wide tablets instead of drifting to the card edges. */
	.tg-download__phones {
		position: relative;
		right: auto;
		bottom: auto;
		width: 100%;
		max-width: 420px;
		height: 360px;
		margin: 28px auto 0;
	}
	.tg-download__phone { bottom: 0; }
	.tg-download__phone--back {
		right: 0;
		width: 180px;
		bottom: 0;
		top: 0;
		transform: translate(-30%, 20%);
	}
	.tg-download__phone--front {
		left: 0;
		right: 0;
		width: 200px;
		bottom: 0;
		transform: translate(20%, 0);
	}
}