/*
 * TOPOSEL Home – content sections (Unbeatable Growth Solutions, Best-in-Class
 * Growth Services) and shared section styles.
 * Scoped under .tsl-home; loaded ONLY on the approved test page.
 *
 * Sizes and colours are ESTIMATES from the reference screenshots
 * (desktop ≈ 1.36 screenshot px per CSS px).
 */

/* ---------- Shared ---------- */

.tsl-home .tsl-h2 {
	margin: 0;
	color: var(--tsl-color-heading);
	font-family: inherit;
	font-size: 46px;
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.tsl-home .tsl-section-head {
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
}

.tsl-home .tsl-section-intro {
	margin: 28px 0 0;
	color: var(--tsl-color-text);
	font-size: 17px;
	line-height: 1.45;
}

/* ---------- Unbeatable Growth Solutions ---------- */

.tsl-home .tsl-growth {
	padding: 100px 0;
}

.tsl-home .tsl-growth__inner {
	display: grid;
	grid-template-columns: 297px minmax(0, 1fr) 297px;
	grid-template-areas: "left content right";
	align-items: center;
	gap: 40px;
}

.tsl-home .tsl-growth__img--left {
	grid-area: left;
	align-self: start;
}

.tsl-home .tsl-growth__img--right {
	grid-area: right;
	align-self: start;
}

.tsl-home .tsl-growth__content {
	grid-area: content;
	padding-left: 15px;
}

/* Tall "pill" shape. The right image is taller than the left (reference). */
.tsl-home .tsl-growth__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 297 / 419;
	object-fit: cover;
	border-radius: 999px;
}

.tsl-home .tsl-growth__img--right .tsl-growth__photo {
	aspect-ratio: 297 / 499;
}

.tsl-home .tsl-growth__img picture {
	display: block;
}

.tsl-home .tsl-growth__text {
	margin: 28px 0 32px;
	max-width: 460px;
	color: var(--tsl-color-text);
	font-size: 17px;
	line-height: 1.45;
}

/* ---------- Best-in-Class Growth Services ---------- */

.tsl-home .tsl-services {
	padding: 100px 0 90px;
	border-top: 1px solid #d7d6e0;
}

.tsl-home .tsl-services__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 30px;
	margin: 52px 0 0;
	padding: 0;
	list-style: none;
}

.tsl-home .tsl-card {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 0;
	padding: 31px;
	border: 1px solid #d4d3dd;
	border-radius: 4px;
}

.tsl-home .tsl-card__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 59px;
	height: 59px;
	border-radius: 50%;
	background: #ddd7f7;
	color: var(--tsl-color-primary);
}

.tsl-home .tsl-card__icon-img {
	display: block;
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.tsl-home .tsl-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.tsl-home .tsl-card__title {
	margin: 0 0 6px;
	color: var(--tsl-color-heading);
	font-family: inherit;
	font-size: 25px;
	font-weight: 500;
	line-height: 1.25;
}

.tsl-home .tsl-card__text {
	margin: 0;
	color: var(--tsl-color-text);
	font-size: 17px;
	line-height: 1.55;
}

/* Linked cards (same hover as the cards on the Our Services page). The title link is stretched over the whole card,
   so the card is one semantic link and the layout above is untouched. */
.tsl-home .tsl-card--link {
	position: relative;
	background: #fff;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.tsl-home .tsl-card--link:hover,
.tsl-home .tsl-card--link:focus-within {
	border-color: var(--tsl-color-primary);
	box-shadow: 0 8px 24px rgba(78, 47, 218, 0.12);
	transform: translateY(-2px);
}

.tsl-home .tsl-card--link {
	cursor: pointer;
}

.tsl-home .tsl-card__link {
	color: inherit;
	text-decoration: none;
}

.tsl-home .tsl-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.tsl-home .tsl-card__link:focus {
	outline: none;
}

.tsl-home .tsl-card__link:focus-visible::after {
	outline: 2px solid var(--tsl-color-primary);
	outline-offset: 2px;
}

/* Desktop (two columns): a last card alone in its row (the fifth, Razorpay Integration) is centred under the two above it,
   one column wide, like on the Our Services page. Tablet and phone already show one column, so it is simply the fifth card there. */
@media (min-width: 1025px) {
	.tsl-home .tsl-services__grid > .tsl-card:nth-child(odd):last-child {
		grid-column: 1 / -1;
		justify-self: center;
		box-sizing: border-box;
		width: calc(50% - 15px);
	}
}

/* Touch screens have no hover: the title is coloured so the cards read as links, and a tap shows a pressed state. */
@media (max-width: 1024px) {
	.tsl-home .tsl-card--link .tsl-card__link {
		color: var(--tsl-color-primary);
	}

	.tsl-home .tsl-card--link:active {
		border-color: var(--tsl-color-primary);
		background: #f6f4fe;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tsl-home .tsl-card--link {
		transition: none;
	}

	.tsl-home .tsl-card--link:hover,
	.tsl-home .tsl-card--link:focus-within {
		transform: none;
	}
}

.tsl-home .tsl-services__cta {
	display: flex;
	justify-content: center;
	margin-top: 50px;
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.tsl-home .tsl-h2 {
		font-size: 38px;
	}

	.tsl-home .tsl-section-head {
		max-width: 640px;
	}

	.tsl-home .tsl-section-intro {
		font-size: 15px;
	}

	.tsl-home .tsl-growth {
		padding: 80px 0;
	}

	/* Two images side by side (right one lower), text centred below. */
	.tsl-home .tsl-growth__inner {
		grid-template-columns: repeat(2, minmax(0, 290px));
		grid-template-areas:
			"left right"
			"content content";
		justify-content: center;
		gap: 40px;
	}

	.tsl-home .tsl-growth__img--right {
		margin-top: 50px;
	}

	.tsl-home .tsl-growth__photo,
	.tsl-home .tsl-growth__img--right .tsl-growth__photo {
		aspect-ratio: 290 / 450;
	}

	.tsl-home .tsl-growth__content {
		padding-left: 0;
		text-align: center;
	}

	.tsl-home .tsl-growth__text {
		max-width: 720px;
		margin: 20px auto 24px;
		font-size: 15px;
	}

	.tsl-home .tsl-growth__buttons {
		display: flex;
		justify-content: center;
	}

	.tsl-home .tsl-services {
		padding: 90px 0 70px;
	}

	.tsl-home .tsl-services__grid {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 48px;
	}

	.tsl-home .tsl-card__title {
		font-size: 22px;
	}

	.tsl-home .tsl-card__text {
		font-size: 15px;
	}
}

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

@media (max-width: 767px) {
	.tsl-home .tsl-h2 {
		font-size: 34px;
	}

	.tsl-home .tsl-section-intro {
		font-size: 16px;
	}

	.tsl-home .tsl-growth {
		padding: 60px 0;
	}

	.tsl-home .tsl-growth__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.tsl-home .tsl-growth__img--right {
		margin-top: 57px;
	}

	.tsl-home .tsl-growth__photo,
	.tsl-home .tsl-growth__img--right .tsl-growth__photo {
		aspect-ratio: 145 / 341;
	}

	/* Phone pills as in the mobile reference: both pills the same height (about 0.52 wide : 1 tall), the right one
	   52 px lower. The left picture (guy-mobile.webp) is a pill with a transparent margin around it, so it is shown
	   whole (contain) and made wider than its column so that the pill itself fills the column exactly. */
	.tsl-home .tsl-growth__img--right {
		margin-top: 52px;
	}

	.tsl-home .tsl-growth__img--right .tsl-growth__photo {
		aspect-ratio: 733 / 1410;
	}

	.tsl-home .tsl-growth__pic--phone .tsl-growth__photo {
		width: 148.2%;
		max-width: none;
		margin-left: -23.9%;
		aspect-ratio: 1086 / 1448;
		object-fit: contain;
		border-radius: 0;
	}

	.tsl-home .tsl-growth__content {
		margin-top: 16px;
	}

	.tsl-home .tsl-growth__text {
		font-size: 16px;
	}

}

/* ---------- Service cards, wireframe (phones and tablets) ---------- */

/* Reference measurements: card 400 x 215 px, gap 20 px, icon 72 x 72 px (round), title 26 px high, text 3 lines of
   about 23 px. The cards are centred and sized by their column, so they shrink on narrow phones; the height is the
   minimum (215 px) and grows if a text needs more lines. Desktop keeps its own layout above. */
@media (max-width: 1024px) {
	.tsl-home .tsl-services__grid {
		gap: 20px;
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}

	.tsl-home .tsl-card {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		box-sizing: border-box;
		min-height: 215px;
		padding: 15px 14px;
		text-align: center;
	}

	.tsl-home .tsl-card__icon {
		width: 72px;
		height: 72px;
		border-radius: 50%;
	}

	.tsl-home .tsl-card__icon svg,
	.tsl-home .tsl-card__icon-img {
		width: 38px;
		height: 38px;
	}

	.tsl-home .tsl-card__title {
		margin: 0 0 7px;
		font-size: 22px;
		line-height: 26px;
	}

	.tsl-home .tsl-card__text {
		font-size: 16px;
		line-height: 1.4583;
	}
}

@media (max-width: 767px) {
	.tsl-home .tsl-services__grid {
		max-width: 402.25px;
	}
}