/*
 * TOPOSEL Home – Google Reviews and LinkedIn Recommendations.
 * 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).
 */

/* ---------- Google Reviews ---------- */

.tsl-home .tsl-reviews {
	padding: 90px 0 115px;
	border-bottom: 1px solid #d7d6e0;
}

.tsl-home .tsl-reviews__carousel {
	--tsl-per-view: 3;

	position: relative;
	display: block;
	max-width: 1110px;
	margin: 50px auto 0;
}

.tsl-home .tsl-reviews__carousel .tsl-carousel__slide {
	align-items: stretch;
	padding: 0 9px;
}

/* Round white arrows overlapping the outer card edges. */
.tsl-home .tsl-reviews__carousel .tsl-carousel__btn {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 32px;
	height: 32px;
	border: 1px solid #d9d9e0;
	border-radius: 50%;
	background: #fff;
	color: #555;
	transform: translateY(-50%);
}

.tsl-home .tsl-reviews__carousel .tsl-carousel__btn svg {
	width: 10px;
	height: 16px;
}

.tsl-home .tsl-reviews__carousel .tsl-carousel__btn--prev {
	left: -7px;
}

.tsl-home .tsl-reviews__carousel .tsl-carousel__btn--next {
	right: -7px;
}

.tsl-home .tsl-review {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 207px;
	padding: 20px 20px 24px;
	border: 1px solid #dcdce3;
	border-radius: 12px;
	background: #fff;
	text-align: left;
}

/* Hover / focus: card lifts 3 px with a soft purple glow. The viewport gets matching padding and negative
   margin (net zero), so the lift and the glow are not clipped and nothing around moves. */
.tsl-home .tsl-reviews__carousel .tsl-carousel__viewport {
	padding: 12px 0;
	margin: -12px 0;
}

.tsl-home .tsl-review {
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) {
	.tsl-home .tsl-review:hover {
		transform: translateY(-3px);
		border-color: rgba(79, 47, 217, 0.35);
		box-shadow: 0 10px 24px rgba(79, 47, 217, 0.14);
	}
}

.tsl-home .tsl-review:focus-within {
	border-color: rgba(79, 47, 217, 0.35);
	box-shadow: 0 10px 24px rgba(79, 47, 217, 0.14);
}

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

	.tsl-home .tsl-review:hover {
		transform: none;
	}
}

.tsl-home .tsl-review__head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.tsl-home .tsl-review__avatar {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

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

.tsl-home .tsl-review__name {
	margin: 0;
	color: #111;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}

.tsl-home .tsl-review__date {
	margin: 2px 0 0;
	color: #888;
	font-size: 14px;
}

.tsl-home .tsl-review__source {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.tsl-home .tsl-review__rating {
	display: flex;
	align-items: center;
	gap: 1px;
	margin: 12px 0 0;
	color: #d6d6dc;
}

.tsl-home .tsl-star--on {
	color: #f4b400;
}

.tsl-home .tsl-verified {
	margin-left: 6px;
	color: #4b8af0;
}

.tsl-home .tsl-review__text {
	margin: 12px 0 0;
	color: #1f2023;
	font-size: 16px;
	line-height: 1.55;
}

/* ---------- LinkedIn Recommendations ---------- */

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

.tsl-home .tsl-linkedin__head {
	position: relative;
	max-width: 760px;
}

/* Desktop: the box hugs the heading, so the icon sits right beside the title (it was about 105 px away). */
@media (min-width: 1025px) {
	.tsl-home .tsl-linkedin__head {
		width: fit-content;
	}
}

/* Small tilted logo to the upper right of the heading (reference). */
.tsl-home .tsl-linkedin__icon {
	position: absolute;
	top: -6px;
	right: -40px;
	width: 32px;
	height: 32px;
	object-fit: contain;
	animation: tsl-float-y-8 7s ease-in-out infinite; /* Original "moving-linkedin". */
	transform: rotate(-8deg);
}

.tsl-home .tsl-linkedin__carousel {
	--tsl-per-view: 1;

	position: relative;
	display: block;
	margin-top: 50px;
}

.tsl-home .tsl-linkedin__carousel .tsl-carousel__slide {
	align-items: stretch;
	padding: 0 25px;
}

/* Square dark-grey arrows at the sides. */
.tsl-home .tsl-linkedin__carousel .tsl-carousel__btn {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 30px;
	height: 30px;
	border-radius: 3px;
	background: #6b6b6b;
	color: #fff;
	transform: translateY(-50%);
}

.tsl-home .tsl-linkedin__carousel .tsl-carousel__btn svg {
	width: 9px;
	height: 14px;
}

.tsl-home .tsl-linkedin__carousel .tsl-carousel__btn--prev {
	left: -10px;
}

.tsl-home .tsl-linkedin__carousel .tsl-carousel__btn--next {
	right: -10px;
}

.tsl-home .tsl-rec {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin: 0;
	text-align: center;
}

.tsl-home .tsl-rec__avatar {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
}

/* Placeholder when no profile picture is available. */
.tsl-home .tsl-rec__avatar--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #e6e1f7;
	color: var(--tsl-color-primary);
	font-size: 32px;
	font-weight: 600;
}

.tsl-home .tsl-rec__who {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 16px 0 24px;
}

.tsl-home .tsl-rec__name {
	color: #111;
	font-size: 20px;
	font-weight: 500;
}

.tsl-home .tsl-rec__headline {
	color: var(--tsl-color-text);
	font-size: 16px;
}

.tsl-home .tsl-rec__quote {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	margin: 0;
	padding: 24px 20px;
	border: 0;
	background: #f7f7f8;
	text-align: left;
}

/* Purple quote mark sitting on the box's top-left corner. */
.tsl-home .tsl-quote-mark {
	position: absolute;
	top: -14px;
	left: -1px;
	width: 30px;
	height: 24px;
	color: var(--tsl-color-primary);
}

/* Matching closing mark on the top-right corner, level with the opening mark: the same shape turned half way round. */
.tsl-home .tsl-quote-mark--close {
	left: auto;
	right: -1px;
	transform: rotate(180deg);
}

.tsl-home .tsl-rec__quote p {
	margin: 0;
	color: var(--tsl-color-text);
	font-size: 16px;
	font-style: italic;
	line-height: 1.55;
}

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

@media (max-width: 1024px) {
	/* Reviews become a swipeable row (native scrolling), 2 cards visible. */
	.tsl-home .tsl-reviews__carousel {
		--tsl-per-view: 2;
		--tsl-carousel-mode: scroll;

		margin-top: 40px;
	}

	.tsl-home .tsl-reviews__carousel .tsl-carousel__btn {
		display: none;
	}

	.tsl-home .tsl-reviews__carousel .tsl-carousel__viewport {
		overflow-x: auto;
		padding: 12px 0 28px; /* top allowance for the hover lift; the matching margin keeps the height unchanged */
		margin: -12px 0 0;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
		scrollbar-color: #6b6b6b #d9d9de;
	}

	.tsl-home .tsl-reviews__carousel .tsl-carousel__slide {
		scroll-snap-align: start;
	}

	.tsl-home .tsl-linkedin__carousel {
		--tsl-per-view: 2;
	}

	/* Each slide keeps its own height; carousel.js sizes the row to the slide(s) in view (no blank space under short quotes). */
	.tsl-home .tsl-linkedin__carousel .tsl-carousel__track {
		align-items: flex-start;
	}

	.tsl-home .tsl-linkedin__carousel .tsl-carousel__viewport {
		transition: height 0.5s ease;
	}

	.tsl-home .tsl-linkedin__carousel .tsl-carousel__slide {
		padding: 0 12px;
	}

	.tsl-home .tsl-linkedin__icon {
		right: 20px;
		top: 70%;
	}
}

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

@media (max-width: 767px) {
	.tsl-home .tsl-reviews {
		padding: 70px 0 60px;
	}

	/* About 1.2 cards visible, so the next one peeks in. */
	.tsl-home .tsl-reviews__carousel {
		--tsl-per-view: 1.2;
	}

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

	.tsl-home .tsl-linkedin__carousel {
		--tsl-per-view: 1;
	}

	.tsl-home .tsl-linkedin__carousel .tsl-carousel__slide {
		padding: 0 18px;
	}

	/* No page arrows on mobile (reference): the arrow no longer sits on top of the text; the slides still advance by themselves. */
	.tsl-home .tsl-linkedin__carousel {
		grid-template-columns: minmax(0, 1fr);
	}

	.tsl-home .tsl-linkedin__carousel .tsl-carousel__btn {
		display: none;
	}

	.tsl-home .tsl-linkedin__icon {
		right: 10px;
		top: -10px;
	}

	/* Mobile design: plain white quote card, upright text. */
	.tsl-home .tsl-rec__quote {
		background: #fff;
	}

	.tsl-home .tsl-rec__quote p {
		font-style: normal;
	}
}

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

	.tsl-home .tsl-linkedin__icon {
		animation: none;
	}
}