/* ==========================================================================
   Video testimonials row (gs/reels), Launchpad, under Results

   From Adarsh's export "Frame 1321320186" (1440 x 702), 7th October 2026.

   Desktop (1200 up, where the arrows show): #F9F9F9 band, 48 above the
   cards. Four cards 246.15 x 438.42, radius 11.02, 24 apart. Arrows 48.73
   square plus a 1px black line (49.73), radius 7.5 inside the line, white to
   #F3F3F3 top to bottom, the frame's tall chevron (10.73 x 22.4, 2.89 line);
   40 clear of the cards, level with their middle. The row is 1236.06 wide,
   centred. Narrower screens shrink the cards, never the 40.

   Below 1200 the cards, sizes and swipe are the home page's video strip
   (testimonials.css, carousel.css), as Adarsh asked; this file only sets
   the band. The track's own 8 above and below is part of every gap here.
   ========================================================================== */

.gs-reels {
	/* Full bleed, as the bands around it: cancel main's gutter, lift core's
	   max-width cap, put the gutter back inside. */
	margin-inline: calc(var(--gs-gutter-now) * -1) !important;
	max-width: none !important;
	padding: 2rem var(--gs-gutter-now);                  /* phone: 32 + 8 = 40 */
	background: #F9F9F9;
}

/* The CTA under it adds no space of its own, so this band sets the gap:
   16 + 8 = 24 on phones. */
.gs-reels:has(+ .gs-midcta) {
	padding-block-end: 1rem;
}

/* The home strip breaks out by --gs-gutter (16), but this page's phone gutter
   is 20: by the gutter in force, so the row still runs to both screen edges
   and the first card lines up with the bands around it. */
@media (max-width: 767px) {
	.gs-reels .gs-carousel__track {
		margin-inline: calc(var(--gs-gutter-now) * -1);
		padding-inline: var(--gs-gutter-now);
		scroll-padding-inline: var(--gs-gutter-now);
	}
}

@media (min-width: 768px) {
	.gs-reels,
	.gs-reels:has(+ .gs-midcta) {
		padding-block: 2.5rem;                           /* 40 + 8 = 48, the frame's */
	}
}

/* --- desktop: the frame ------------------------------------------------------------ */

@media (min-width: 1200px) {
	/* Cards 4 x 246.15 + 3 x 24 = 1056.6, with room for an arrow and its 40
	   on each side. */
	.gs-reels .gs-reels__row {
		max-width: min(66.0375rem, 100% - 2 * (3.108rem + 2.5rem));
	}

	/* Always four across here; the home formula would show 3.5 at 1200. */
	.gs-reels .gs-video {
		width: calc((100% - 3 * var(--gs-space-5)) / 4);
	}

	.gs-reels .gs-video__el {
		aspect-ratio: 246.152 / 438.42;
		border-radius: 0.6889rem;                        /* 11.02 */
	}

	.gs-reels .gs-reels__arrow {
		width: 3.108rem;                                 /* 49.73 with the line */
		height: 3.108rem;
		border: 1px solid #000000;
		border-radius: 0.5rem;                           /* 7.5 inside the line */
		background: linear-gradient(180deg, #FFFFFF 0%, #F3F3F3 100%);
		color: #000000;
		transition:
			transform var(--gs-dur-press) var(--gs-ease-out),
			background-color var(--gs-dur-hover) ease,
			border-color var(--gs-dur-hover) ease,
			color var(--gs-dur-hover) ease;
	}

	.gs-reels .gs-reels__arrow.gs-carousel__arrow--prev {
		inset-inline-start: calc((3.108rem + 2.5rem) * -1);
	}

	.gs-reels .gs-reels__arrow.gs-carousel__arrow--next {
		inset-inline-end: calc((3.108rem + 2.5rem) * -1);
	}

	.gs-reels .gs-reels__arrow svg {
		width: 1rem;                                     /* 16 x 26 box */
		height: 1.625rem;
	}

	.gs-reels .gs-reels__arrow:active {
		transform: translateY(-50%) scale(0.97);
	}

	.gs-reels .gs-reels__arrow:focus-visible {
		outline: 0.125rem solid #0A0A0A;
		outline-offset: 0.1875rem;
	}

	/* Red on hover, as the launch plan's and the results' arrows. Mouse only. */
	@media (hover: hover) and (pointer: fine) {
		.gs-reels .gs-reels__arrow:hover {
			border-color: var(--gs-pm-red);
			background: var(--gs-pm-red);
			color: #FFFFFF;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-reels .gs-reels__arrow:active {
		transform: translateY(-50%);
	}
}