/*
 * TOPOSEL Home – hero section.
 * Scoped under .tsl-home; loaded ONLY on the approved test page.
 *
 * All sizes, positions and colours are ESTIMATES measured from the reference
 * screenshots (desktop ≈ 1.36 screenshot px per CSS px). Floating motion of
 * the icons, analytics card and sphere copies the original site's
 * "moving-*" CSS (keyframes in base.css).
 */

/* ---------- Section and background ---------- */

.tsl-home .tsl-hero {
	--tsl-hero-pink: #f6dcef;
	--tsl-hero-lilac: #ece6fb;

	position: relative;
	/* Pull the section up behind the transparent header, then pad it back down. */
	margin-top: calc(-1 * var(--tsl-header-h));
	padding: var(--tsl-header-h) 0 60px;
	background:
		radial-gradient(48% 60% at 0% 12%, var(--tsl-hero-pink) 0%, transparent 70%),
		radial-gradient(40% 55% at 100% 55%, var(--tsl-hero-pink) 0%, transparent 70%),
		linear-gradient(180deg, var(--tsl-hero-lilac) 0%, var(--tsl-color-bg) 100%);
}

.tsl-home .tsl-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.97fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/* ---------- Text column ---------- */

.tsl-home .tsl-hero__content {
	position: relative;
	z-index: 2;
	padding-top: 110px; /* text block starts just below the header, level with the upper half of the halo */
}

.tsl-home .tsl-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 26px;
	padding: 8px 14px;
	border-radius: 8px;
	background: #dbf3cf;
	color: var(--tsl-color-heading);
	font-size: 17px;
	line-height: 1.3;
}

.tsl-home .tsl-hero__badge-icon {
	flex: 0 0 auto;
	color: #3fa34d;
}

.tsl-home .tsl-hero__title {
	margin: 0 0 28px;
	max-width: 620px;
	color: var(--tsl-color-heading);
	font-family: inherit;
	font-size: 66px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
}

.tsl-home .tsl-hero__text {
	margin: 0 0 24px;
	max-width: 600px;
	color: var(--tsl-color-text);
	font-size: 17px;
	line-height: 1.45;
}

.tsl-home .tsl-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

/* Outlined button (filled .tsl-btn--primary comes from header.css). */
.tsl-home .tsl-btn--outline {
	padding: 12px 25px;
	border: 1.5px solid var(--tsl-color-primary);
	background: transparent;
	color: var(--tsl-color-primary);
}

.tsl-home .tsl-btn--outline .tsl-btn__icon-arrow {
	stroke: #fff;
}

/* ---------- Image group ---------- */

.tsl-home .tsl-hero__media {
	/* One value moves the photo AND the card (card = photo top + 70.7 %): the photo's top edge is level with the heading's top. */
	--tsl-photo-top: 37.3%;

	position: relative;
	justify-self: end;
	width: 100%;
	max-width: 558px;
	aspect-ratio: 1 / 1;
	/* The photo hangs below the halo (to 133% of its height) and the analytics card tucks in under its
	   left corner (to 147%), so the space under the box is 29% of the box width (percentages = width of the column). */
	margin: -34px 0 calc(min(100%, 558px) * 0.29);
}

.tsl-home .tsl-hero__halo {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	/* Three concentric rings measured on the reference: outer #f5eaf5, middle #f5e3f2 (77.4%), inner #f6d8eb (55%). */
	background: radial-gradient(circle closest-side, #f6d8eb 0 55%, #f5e3f2 55.2% 77.4%, #f5eaf5 77.6% 100%);
}

.tsl-home .tsl-hero__photo {
	position: absolute;
	left: 2.7%;
	top: var(--tsl-photo-top);
	width: 94.4%;
	height: 75.4%;
}

/* Reference crop: an ellipse (rx 55%, ry 55.7% of the frame, measured on the reference) cut by the frame,
   so the top, bottom, left and right edges are flat where the ellipse is wider than the frame. */
.tsl-home .tsl-hero__photo--circle {
	clip-path: ellipse(55% 55.7% at 50% 49.8%);
}

.tsl-home .tsl-hero__photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tsl-home .tsl-hero__photo--none .tsl-hero__photo-img {
	object-fit: contain;
}

.tsl-home .tsl-hero__icon {
	position: absolute;
	width: 6%;
	height: auto;
	transform: translate(-50%, -50%);
}

.tsl-home .tsl-hero__icon--1 { left: 14.7%; top: 26.1%; width: 5.4%; animation: tsl-float-y-10 9s ease-in-out infinite; }
.tsl-home .tsl-hero__icon--2 { left: 34.8%; top: 16.8%; width: 6.1%; animation: tsl-float-y-10 8s ease-in-out infinite; }
.tsl-home .tsl-hero__icon--3 { left: 68.5%; top: 5.1%; width: 10.4%; animation: tsl-float-y-8 7s ease-in-out infinite; }
.tsl-home .tsl-hero__icon--4 { left: 87.1%; top: 22.4%; width: 10.4%; animation: tsl-float-y-12 8s ease-in-out infinite; }

.tsl-home .tsl-hero__card {
	position: absolute;
	left: -6.3%;
	top: calc(var(--tsl-photo-top) + 70.7%);
	width: 21%;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(17, 17, 40, 0.12);
	animation: tsl-float-x 6s ease-in-out infinite;
}

/* Decorative sphere near the page's left edge (behind the text so it stays readable). */
.tsl-home .tsl-hero__sphere {
	position: absolute;
	z-index: 1;
	left: 28px;
	top: 100px;
	width: 88px;
	height: auto;
	pointer-events: none;
	animation: tsl-drift-y 5s ease-in-out infinite;
}

/* ---------- Tablet: stacked and centred ---------- */

@media (max-width: 1024px) {
	.tsl-home .tsl-hero {
		padding-bottom: 60px;
	}

	.tsl-home .tsl-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 56px;
	}

	.tsl-home .tsl-hero__content {
		padding-top: 64px;
		text-align: center;
	}

	.tsl-home .tsl-hero__title,
	.tsl-home .tsl-hero__text {
		margin-left: auto;
		margin-right: auto;
	}

	.tsl-home .tsl-hero__title {
		max-width: 700px;
		font-size: 48px;
	}

	.tsl-home .tsl-hero__text {
		max-width: 680px;
		font-size: 16px;
	}

	.tsl-home .tsl-hero__buttons {
		justify-content: center;
	}

	.tsl-home .tsl-hero__media {
		justify-self: center;
		max-width: 560px;
		margin: 0 0 calc(min(100%, 560px) * 0.29);
	}

	.tsl-home .tsl-hero__sphere {
		top: 115px;
	}

	/* Raised so it overlaps the photo's lower left, like the desktop card (about 58% of its height over the photo). */
	.tsl-home .tsl-hero__card {
		top: calc(var(--tsl-photo-top) + 64.3%);
	}
}

/* ---------- Mobile ---------- */

/* Sizes follow the mobile reference (measured on a 390 px wide screen). */
@media (max-width: 767px) {
	.tsl-home .tsl-hero {
		padding-bottom: 32px; /* the halo no longer touches the "Our Platforms" band */
	}

	.tsl-home .tsl-hero__inner {
		gap: 47px;
	}

	.tsl-home .tsl-hero__content {
		padding-top: 34px;
	}

	.tsl-home .tsl-hero__badge {
		gap: 4px;
		margin-bottom: 19px;
		padding: 8px 10px;
		font-size: 12px;
	}

	.tsl-home .tsl-hero__badge-icon {
		width: 15px;
		height: 15px;
	}

	.tsl-home .tsl-hero__title {
		max-width: 290px; /* wraps to three lines like the reference */
		margin-bottom: 16px;
		font-size: 34px;
		line-height: 1.1;
	}

	.tsl-home .tsl-hero__text {
		margin-bottom: 21px;
		color: #3b3b46;
		font-size: 14px;
		line-height: 1.54;
	}

	/* The two buttons sit side by side (they wrap under each other only on very narrow screens). */
	.tsl-home .tsl-hero__buttons {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 11px;
	}

	.tsl-home .tsl-hero__buttons .tsl-btn {
		gap: 9px;
		padding: 9px 14px;
		font-size: 16px;
	}

	.tsl-home .tsl-hero__buttons .tsl-btn--outline {
		padding: 8px 13px;
	}

	.tsl-home .tsl-hero__buttons .tsl-btn__icon-arrow {
		width: 22px;
		height: 22px;
	}

	.tsl-home .tsl-hero__sphere {
		left: 22px;
		top: 81px;
		width: 75px;
	}

	/* Image group: the photo sits high in the halo, icons around it, the card on its lower left. */
	.tsl-home .tsl-hero__media {
		--tsl-photo-top: 12.2%;

		margin: 0;
	}

	.tsl-home .tsl-hero__photo {
		left: 4.9%;
		width: 90.6%;
		height: 70.9%;
	}

	.tsl-home .tsl-hero__icon--1 { left: 10.6%; top: 33.9%; width: 5.4%; }
	.tsl-home .tsl-hero__icon--2 { left: 40%; top: 21.5%; width: 6.8%; }
	.tsl-home .tsl-hero__icon--3 { left: 60%; top: 5.5%; width: 12.5%; }
	.tsl-home .tsl-hero__icon--4 { left: 82%; top: 24%; width: 11.2%; }

	.tsl-home .tsl-hero__card {
		left: 2.8%; /* the card floats +-20 px sideways: it stays on screen */
		top: calc(var(--tsl-photo-top) + 61.8%); /* overlaps the photo's lower left, like the desktop card */
		width: 17.1%;
	}
}

/* ---------- Desktop only (1025 px and wider): one cohesive image group ---------- */

/* The photo sits INSIDE the pink halo (centred, like the reference), the four icons ride on the halo's rim and the
   card overlaps the photo's lower left. All positions are percentages of the square group, so the arrangement scales
   as one piece. Tablet and phones keep their own rules above. */
@media (min-width: 1025px) {
	.tsl-home .tsl-hero__media {
		--tsl-photo-top: 13.4%;

		margin: 24px 0 40px;
	}

	.tsl-home .tsl-hero__photo {
		left: 3.1%;
		width: 94.1%;
		height: 73.5%;
	}

	.tsl-home .tsl-hero__icon--1 { left: 9.5%; top: 35.8%; width: 5.4%; }
	.tsl-home .tsl-hero__icon--2 { left: 40%; top: 23.5%; width: 6.8%; }
	.tsl-home .tsl-hero__icon--3 { left: 60.3%; top: 6.7%; width: 10.4%; }
	.tsl-home .tsl-hero__icon--4 { left: 83%; top: 26%; width: 10.4%; }

	.tsl-home .tsl-hero__card {
		left: 1.4%;
		top: calc(var(--tsl-photo-top) + 64%);
		width: 17.9%;
	}
}

/* ---------- Phones and tablets: background as in the reference (pale blue-grey with a soft lilac glow) ---------- */

@media (max-width: 1024px) {
	.tsl-home .tsl-hero {
		background:
			radial-gradient(85% 50% at 65% 35%, rgba(233, 229, 246, 0.95) 0%, transparent 75%),
			#eef5f9;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tsl-home .tsl-hero__icon,
	.tsl-home .tsl-hero__card,
	.tsl-home .tsl-hero__sphere {
		animation: none;
	}
}