/* ==========================================================================
   GrowthStudioz — carousel shell

   Shared by the testimonials and case-study rows. A native scroll container
   with scroll-snap; the arrows scroll it. Nothing here depends on JS to be
   usable — touch, trackpad and keyboard scrolling are the browser's, and the
   arrows are an enhancement on top.
   ========================================================================== */

.gs-carousel {
	position: relative;
	/* The cards area is 1250px; the arrows sit outside it. */
	width: 100%;
	max-width: 1250px;
	margin-inline: auto;
}

.gs-carousel__track {
	display: flex;
	gap: var(--gs-space-5);
	margin: 0;
	padding: var(--gs-space-2) 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	/* NOT justify-content: center. On a scrolling flex container that centres
	   overflowing content, the overflow at the START becomes unreachable —
	   scrollLeft cannot go negative, so the first card is stranded off-screen
	   and the row appears to begin at card two.

	   Auto margins on the end children centre the row when there is spare
	   space and collapse to zero when there is not, so nothing is ever cut
	   off. */
	/* The scrollbar is redundant next to the arrows and breaks the card
	   rhythm, but the container must stay scrollable for touch. */
	scrollbar-width: none;
}

.gs-carousel__track::-webkit-scrollbar {
	display: none;
}

.gs-carousel__track:focus-visible {
	outline: 2px solid var(--gs-accent);
	outline-offset: 4px;
	border-radius: var(--gs-radius);
}

.gs-carousel__track > * {
	scroll-snap-align: start;
	flex: none;
	max-width: none;
}

.gs-carousel__track > :first-child { margin-inline-start: auto; }
.gs-carousel__track > :last-child { margin-inline-end: auto; }

/* --- arrows ---------------------------------------------------------------
   50x50 boxes sitting entirely outside the cards, 16px clear of them, so they
   never cover a card at any width.
   -------------------------------------------------------------------------- */

.gs-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	transform: translateY(-50%);
	border: var(--gs-border-width) solid var(--gs-border);
	border-radius: var(--gs-radius);
	background: var(--gs-surface);
	color: var(--gs-ink);
	cursor: pointer;
	transition:
		border-color var(--gs-dur-hover) ease,
		opacity var(--gs-dur-hover) ease;
}

/* Its own width plus the 16px gap, so the box clears the cards entirely.
   Capped at the space actually beside the carousel less 4px: between 1200
   and about 1370 the testimonial carousel runs the full width inside the
   60px margin, and a 66px offset put both arrows 6px off the screen. Where
   there is room (wider screens) the cap never bites. */
.gs-carousel__arrow--prev { inset-inline-start: calc(min(50px + 16px, (100vw - 100%) / 2 - 4px) * -1); }
.gs-carousel__arrow--next { inset-inline-end: calc(min(50px + 16px, (100vw - 100%) / 2 - 4px) * -1); }

.gs-carousel__arrow svg {
	width: 10px;
	height: 22px;
}

@media (hover: hover) and (pointer: fine) {
	.gs-carousel__arrow:hover {
		border-color: var(--gs-ink);
	}
}

/* No disabled state: the arrows wrap around at the ends rather than dying, so
   there is never a greyed-out control. */

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

   Tracks break out of the right gutter so the peeking card runs to the screen
   edge — a row that stops short of the edge reads as finished, and the cut-off
   card is what tells you there is more. The left edge keeps the gutter so the
   first card still lines up with the heading above it. padding-inline-end
   restores the same distance at the end of the scroll, so the last card is not
   jammed against the glass.
   ========================================================================== */

@media (max-width: 767px) {
	/* Both sides, not just the end: the scroller's box has to reach each
	   viewport edge or a swiped card is clipped at the gutter, leaving a strip
	   of empty background beside a half-cut card. The padding puts the gutter
	   back inside, so at rest the first card still lines up with the heading. */
	.gs-carousel__track {
		gap: 6px;
		margin-inline: calc(var(--gs-gutter) * -1);
		padding-inline: var(--gs-gutter);
		scroll-padding-inline: var(--gs-gutter);
	}

	.gs-carousel__arrow {
		display: none;
	}
}

/* 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) {
	.gs-carousel__arrow {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-carousel__track {
		scroll-behavior: auto;
	}
}