/* ==========================================================================
   GrowthStudioz — testimonials

   Two carousels: written quotes, then video. Both are native scroll containers
   with scroll-snap; the arrows scroll them. Nothing depends on JS to be usable.
   ========================================================================== */

.gs-testimonials {
	padding-block: var(--gs-section-pad);
}

/* gap:0 and explicit margins. The container gap used to be added on top of
   every margin here, so each spacing value had to be written as a subtraction
   to come out right. One source of spacing is easier to reason about. */
.gs-testimonials__inner {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.gs-testimonials__title {
	margin: 0;
	text-align: center;
}

/* Sub-heading above each carousel: "Read our latest victories!" and
   "Or hear about them...". 36px clear of the row beneath it.

   36px above the sub-heading. Below it, 11px to the row it introduces: the
   original 16 reduced by 30%, which ties the heading to its own cards rather
   than letting it float between the two. */
.gs-testimonials__lead {
	margin: 36px 0 11px;
	max-width: none;
	text-align: center;
	color: var(--gs-subhead);
	font-size: var(--gs-b2);
}

/* The second lead follows a carousel rather than the heading, and needs more
   room above it than the first does. */
.gs-carousel + .gs-testimonials__lead {
	margin-block-start: var(--gs-space-8);
}

/* ==========================================================================
   Quote cards
   ========================================================================== */

/* Card redesigned 6th October 2026 (Adarsh's frame "Frame 1321319640",
   sitewide): 17 padding; quote 16px #545454; 16 under it a short rule
   (304 of the frame's 328 text width), 15 under that the author row: an 83
   portrait (15 corners, 0.71px black edge, #F9F8F4) and, 12 to its right,
   name 16 medium, role 12, and the red result line. Quote to portrait 32.

   Width stays three across the carousel (about 401 at 1440); the frame's 362
   is the card hugging its text, which the carousel sets instead. */
.gs-quote {
	display: flex;
	flex-direction: column;
	gap: 1rem;                                     /* 16, quote to rule */
	/* Three across inside 1250px, the gaps subtracted first. Below that the
	   min() takes over and cards become swipeable at a readable width. */
	width: max(min(78vw, 360px), calc((100% - (2 * var(--gs-space-5))) / 3));
	padding: 1.0625rem;                            /* 17 */
	border-radius: 1rem;                           /* 16 */

	/* Gradient border, grey into red. A gradient cannot be a border-color, and
	   border-image ignores border-radius, so the card paints two backgrounds:
	   the surface clipped to padding-box, the gradient to border-box. The 1px
	   transparent border is what leaves the gradient visible. */
	border: var(--gs-border-width) solid transparent;
	background:
		linear-gradient(var(--gs-surface), var(--gs-surface)) padding-box,
		linear-gradient(135deg, var(--gs-card-border-from) 0%, var(--gs-card-border-to) 100%) border-box;
}

.gs-quote__body {
	margin: 0;
	color: var(--gs-body);                         /* #545454 */
	font-size: 1rem;                               /* 16 */
	line-height: 1.3;                              /* 21, the frame's 126 for 6 lines */
}

.gs-quote__body p {
	margin: 0;
	max-width: none;
}

.gs-quote__body p + p {
	margin-block-start: var(--gs-space-3);
}

/* Author sits at the foot of the card whatever the quote length, so a row of
   cards lines up along the bottom rather than floating at different heights. */
.gs-quote__author {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;                                  /* 12, portrait to text */
	margin-block-start: auto;
	padding-block-start: 0.9375rem;                /* 15 under the rule */
}

/* The rule is shorter than the text above it in the frame (304 of 328). */
.gs-quote__author::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 92.68%;
	height: var(--gs-border-width);
	background: #DDDDDD;
}

.gs-quote__photo,
.gs-quote__initial {
	width: 5.1875rem;                              /* 83 */
	height: 5.1875rem;
	flex: none;
	border-radius: 0.9375rem;                      /* 15 */
	object-fit: cover;
	/* Black edge on both, so a photo and an initial read as the same
	   component rather than two different treatments. */
	border: 0.71px solid #000;
}

/* No photo: the initial, small in the middle of the square, as the frame
   draws it (Adarsh reverted the larger one, 6th October 2026). */
.gs-quote__initial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #F9F8F4;
	color: #0A0A0A;
	font-size: var(--gs-b5);                       /* 12 */
	font-weight: var(--gs-weight-medium);
	line-height: 1;
	text-transform: uppercase;
}

.gs-quote__who {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	min-width: 0;
}

.gs-quote__name {
	color: #000;
	font-size: 1rem;                               /* 16 */
	font-weight: var(--gs-weight-medium);
	line-height: 1.3;
}

.gs-quote__role {
	color: #000;
	font-size: 0.75rem;                            /* 12 */
	line-height: 1.3;
}

/* The site red: the frame's brighter red fails contrast at this size.
   16px at every size (Adarsh, 6th October 2026). */
.gs-quote__result {
	display: flex;
	align-items: flex-start;
	gap: 0.375rem;
	color: var(--gs-red-highlight);                /* #E11D2E */
	font-size: 1rem;                               /* 16 */
	font-weight: var(--gs-weight-medium);
	line-height: 1.3;
}

/* Level with the first line if a long result wraps (1.3 line, 1em arrow). */
.gs-quote__result svg {
	flex: none;
	margin-block-start: 0.15em;
}

/* ==========================================================================
   Video cards

   The video row is 1170px and fits four across; the quote row above is 1250px
   and fits three. Both use the same 50x50 arrows, 16px clear of the cards.
   ========================================================================== */

.gs-carousel--videos {
	max-width: 1170px;
}

.gs-video {
	position: relative;
	/* Four across inside 1200px, the three gaps subtracted first. */
	width: max(min(60vw, 240px), calc((100% - (3 * var(--gs-space-5))) / 4));
}

.gs-video__el {
	display: block;
	width: 100%;
	/* Portrait, per the mockup. aspect-ratio rather than a fixed height so the
	   frame holds its shape before the video loads and nothing shifts. */
	aspect-ratio: 9 / 16;
	border-radius: 12px;
	background: var(--gs-black);
	object-fit: cover;
}

/* Invisible hit area over the arrow that is drawn into the thumbnail. Sized
   and placed to match that artwork, so the arrow people can see is the arrow
   they can click. Nothing is painted here — the image already shows it. */
.gs-video__hit {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	z-index: 1;
	width: 56px;
	height: 56px;
	border-radius: 12px;
}

.gs-video__hit:focus-visible {
	outline: 2px solid var(--gs-white);
	outline-offset: -4px;
}

/* Caption over the frame, clear of the native control bar at the bottom. The
   poster artwork is unknown, so the label carries its own shadow rather than
   relying on the image being dark behind it. */
.gs-video__caption {
	position: absolute;
	inset-inline: 0;
	bottom: var(--gs-space-8);
	z-index: 1;
	margin: 0;
	max-width: none;
	padding-inline: var(--gs-space-4);
	color: var(--gs-white);
	font-size: var(--gs-b5);
	text-align: center;
	text-shadow: 0 1px 4px rgb(0 0 0 / 70%);
	pointer-events: none;
}

/* --- editor-only empty state ---------------------------------------------- */

.gs-testimonials--empty {
	display: grid;
	place-items: center;
	min-height: 160px;
	padding: var(--gs-space-6);
	border: 1px dashed var(--gs-border);
	background: var(--gs-surface-alt);
	color: var(--gs-body);
}

.gs-testimonials--empty p {
	margin: 0;
	max-width: none;
}

/* ==========================================================================
   Phones

   Heading and leads left-aligned, per the mockup, and the arrows give way to
   plain swiping.
   ========================================================================== */

@media (max-width: 767px) {

	.gs-testimonials__title {
		text-align: left;
	}

	.gs-testimonials__lead {
		text-align: left;
		font-size: var(--gs-b3);
	}


	/* A touch wider than the old 1.2-in-view, so the result line fits beside
	   the portrait on one line on a 390 phone. No phone frame for the new
	   card: portrait and result scaled down to fit. */
	.gs-quote {
		width: calc((100% - 6px) / 1.12);
	}

	.gs-quote__photo,
	.gs-quote__initial {
		width: 4rem;                               /* 64 */
		height: 4rem;
		border-radius: 0.75rem;
	}

	/* 1.8 videos in view. Narrower cards than the quotes, so more of the next
	   one shows before the row needs scrolling. Capped at the tablet card's
	   240 (Adarsh, 7th October 2026): on large phones 1.8 in view made cards
	   about 400 x 712, taller than the screen. Phones up to ~470 are unchanged. */
	.gs-video {
		width: min(calc((100% - 6px) / 1.8), 15rem);
	}
}

/* Arrows need room outside the track; below that they would sit over the
   cards, so they are dropped and swiping carries the section. */
@media (max-width: 1199px) {}