/* testimonials-home — Figma 243:102. Tokens only (R8), logical props (R9).
   The letter images overhang their navy card (Figma: 59px above, 52/59px
   below); the overhang is a negative margin, so the card still grows with
   its text (R4). */

.testimonials-home {
	padding-block-end: var(--space-testi-bottom);
}

.testimonials-home__title {
	margin-block: var(--space-title-gap) var(--space-fluid-xl);
}

.testimonials-home__stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-testi-gap);
}

/* ---- Letter cards (Figma 243:110, 243:119) ---- */

.testimonials-home__card {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-letter-gap);
	padding-inline: var(--space-fluid-md);
	border-radius: var(--radius-md);
	background: var(--color-ink);
	color: var(--color-white);
}

.testimonials-home__letter--image-left .testimonials-home__card {
	gap: var(--space-letter-gap-wide);
}

.testimonials-home__letter-image {
	flex: none;
	inline-size: var(--size-letter);
	aspect-ratio: 396 / 562; /* the shape lives on the container (R7) */
	margin-block: calc(var(--size-letter) * -0.149) calc(var(--size-letter) * -0.131); /* Figma overhang 59 / 52px */
	overflow: hidden; /* radius mask */
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

.testimonials-home__letter--image-left .testimonials-home__letter-image {
	margin-block-end: calc(var(--size-letter) * -0.149); /* card 2 overhangs 59px at both ends */
}

.testimonials-home__letter-image img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Text column: its width is the title's (card 2) or the 736px quote (card 1);
   the grid + zero-width trick lets the quote wrap at that width. */
.testimonials-home__letter-text {
	display: grid;
	justify-items: start; /* RTL: right edge */
	gap: var(--space-10);
	min-inline-size: 0;
	padding: var(--space-2);
}

.testimonials-home__letter-title {
	font-size: var(--fs-600);
	font-weight: var(--fw-regular);
}

.testimonials-home__quote {
	inline-size: 0;
	min-inline-size: 100%;
	font-size: var(--fs-400);
	text-box: trim-both cap alphabetic;
}

.testimonials-home__quote p {
	text-box: none;
}

/* Card 1: the text column is up to 736px + padding (Figma) and shrinks on
   narrower screens — a fixed quote width would push the page sideways. */
.testimonials-home__letter--image-right .testimonials-home__letter-text {
	flex: 0 1 47rem; /* lint-ok: 752px = Figma 736px quote + 2 × 8px padding, a flex-basis cap */
}

.testimonials-home__letter--image-right .testimonials-home__quote {
	inline-size: auto;
	min-inline-size: 0;
}

.testimonials-home__name {
	font-size: var(--fs-200);
	color: var(--color-primary);
}

.testimonials-home__btn {
	padding-block: var(--space-6);
}

/* ---- Video testimonials (Figma 243:128) ---- */

.testimonials-home__videos .carousel__track {
	--carousel-gap: var(--space-video-gap);
	justify-content: safe center;
}

.testimonials-home__video {
	position: relative;
	inline-size: var(--size-video);
	aspect-ratio: 390 / 562; /* Figma: h-full inside the 578px padded track */
	overflow: hidden; /* radius mask */
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

.testimonials-home__video img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 100%; /* Figma shows the lower part of each clip thumbnail */
}

/* Figma: 130px badge at 133/216 of the 390×562 card — decoration (R3). */
.testimonials-home__play {
	position: absolute;
	inset-block-start: 37.4%;
	inset-inline-start: 50%;
	inline-size: var(--size-play);
	color: var(--color-white);
	transform: translateX(50%); /* physical: RTL inline-start is the right edge */
	pointer-events: none;
}

.testimonials-home__play svg {
	inline-size: 100%;
	block-size: auto;
}

/* ---- WhatsApp screenshots (Figma 243:152): full-bleed strip ---- */

.testimonials-home__chats .carousel__track {
	--carousel-gap: var(--space-12);
	padding-inline: calc(50% - var(--size-shot) / 2);
}

.testimonials-home__chat {
	inline-size: var(--size-shot);
	aspect-ratio: 1;
	overflow: hidden; /* radius mask */
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-shot);
}

.testimonials-home__chat img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* ---- Phone plan: letters stack (image on top ~50%), carousels 1 per screen ---- */

@media (max-width: 767px) { /* bp: --bp-md */
	.testimonials-home__card,
	.testimonials-home__letter--image-left .testimonials-home__card {
		flex-direction: column;
		gap: var(--space-fluid-md);
		padding-block-end: var(--space-fluid-md);
		text-align: center;
	}
	.testimonials-home__letter-image,
	.testimonials-home__letter--image-left .testimonials-home__letter-image {
		order: -1;
		inline-size: 50%;
		margin-block-end: 0;
		margin-block-start: calc(var(--size-letter) * -0.2);
	}
	.testimonials-home__letter-text,
	.testimonials-home__letter--image-right .testimonials-home__letter-text {
		flex: none; /* the desktop 752px basis would become a height in the column */
		justify-items: center;
	}
	.testimonials-home__letter-title {
		text-wrap: balance;
	}
}