/* ==========================================================================
   GrowthStudioz — clients band

   Count + label + rule, a logo grid, then rule + label mirrored at the bottom.
   ========================================================================== */

/* Not full bleed: the band sits inside main's gutter like an ordinary block,
   so its background starts on the same 60px line as everything else.

   The inner wrapper deliberately does NOT use .gs-container. main already
   supplies the gutter; adding the container's on top put the rules at 120px
   instead of 60. One source of inset, not two.

   No background fill: the grey behind this band in the mockup was the Figma
   canvas, not a section colour. Same misread as the enquiry form. */
.gs-clients {
	padding-block: var(--gs-section-pad);
}

.gs-clients__inner {
	display: flex;
	flex-direction: column;
	gap: var(--gs-space-6);
}

/* --- head and foot rows ---------------------------------------------------
   Both rows are one flex line; the rule is a flex-1 element rather than a
   border, so it fills whatever space the labels leave and needs no width maths.
   -------------------------------------------------------------------------- */

.gs-clients__head,
.gs-clients__foot {
	display: flex;
	align-items: center;
	gap: var(--gs-space-4);
}

.gs-clients__rule {
	flex: 1;
	height: 2px;
	background: var(--gs-pm-red);
	/* min-width so the rule never collapses to nothing when the labels are long
	   on a narrow screen. */
	min-width: var(--gs-space-6);
}

.gs-clients__count {
	margin: 0;
	max-width: none;
	color: var(--gs-red-deep);
	font-size: 1.75rem;              /* 28px, per spec */
	font-weight: var(--gs-weight-bold);
	line-height: 1;
	letter-spacing: -0.02em;
}

.gs-clients__plus {
	/* The plus is part of the number, not a separate word: no tracking, and it
	   must not wrap onto its own line. */
	white-space: nowrap;
}

.gs-clients__label {
	margin: 0;
	max-width: none;
	color: var(--gs-red-deep);
	font-size: 1.5rem;               /* 24px, per spec */
	font-weight: var(--gs-weight-medium);
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* Tracking adds a trailing gap after the last glyph; pulling it back keeps
	   the label optically flush against the rule. */
	margin-inline-end: -0.08em;
}

/* --- marquee rows ---------------------------------------------------------
   Every logo is in one row only, once (Adarsh, 8th October 2026). clients.js
   lays the rows out to fit the screen and marks each one:
     is-moving  wider than the screen: the script adds ONE copy of the row and
                translating by exactly -50% lands the copy where the original
                began, so the loop is seamless and no logo is ever on screen
                twice (the row is at least a screen and a logo wide)
     is-still   the whole set fits: one still, centred row
     is-scroll  too wide to fit, too short to move without showing a logo
                twice: a still row you can scroll
   Before the script runs (or without it) the rows simply sit still.

   The rows share the width of the rules above and below them, per the mockup,
   rather than breaking out to the page edge. The ends fade instead of cutting,
   so logos enter and leave rather than appearing at a hard edge.
   -------------------------------------------------------------------------- */

.gs-clients__rows {
	display: flex;
	flex-direction: column;
	gap: var(--gs-space-5);
	/* A soft edge rather than a clipped one. The mask is the same at both ends,
	   so logos appear and leave the same way. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* How many rows is the script's call (up to three on desktop and six on
   phones at Home, two on the division band); none is ever hidden, so every
   client is always in one of them. */
.gs-clients__row {
	overflow: hidden;
}

.gs-clients__row.is-still .gs-clients__track {
	margin-inline: auto;
}

.gs-clients__row.is-scroll {
	overflow-x: auto;
	scrollbar-width: none;
}

.gs-clients__row.is-scroll::-webkit-scrollbar {
	display: none;
}

.gs-clients__track {
	display: flex;
	align-items: center;
	gap: var(--gs-space-8);
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	/* will-change keeps the track on its own layer; without it the browser
	   re-rasterises every frame and the motion judders on long rows. */
	will-change: transform;
}

/* Only rows the script found wide enough move. Speed: the Home page sets
   --gs-clients-loop from its Clients band box (Adarsh, 7th October 2026),
   anywhere else 40s; it is now the time the WHOLE set takes to pass, so the
   script gives each row its share of it (inline animation-duration), and the
   speed matches the old rows that each carried the whole set. The other
   direction still takes 15% longer, so the rows never move in step. */
.gs-clients__row.is-moving .gs-clients__track--ltr {
	animation: gs-marquee-ltr var(--gs-clients-loop, 40s) linear infinite;
}

.gs-clients__row.is-moving .gs-clients__track--rtl {
	animation: gs-marquee-rtl calc(var(--gs-clients-loop, 40s) * 1.15) linear infinite;
}

/* Pause on hover so a logo can actually be looked at. */
@media (hover: hover) and (pointer: fine) {
	.gs-clients__rows:hover .gs-clients__track {
		animation-play-state: paused;
	}
}

@keyframes gs-marquee-ltr {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Starts at -50% and returns to 0: the same distance travelled the other way,
   so both rows loop identically but move in opposite directions. */
@keyframes gs-marquee-rtl {
	from { transform: translate3d(-50%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

.gs-clients__item {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: none;
	flex: none;
	min-height: 64px;
}

.gs-clients__logo {
	display: block;
	width: auto;
	/* Cap the height, not the width: these marks vary wildly in aspect ratio,
	   and matching heights is what makes a logo wall look even. */
	height: 48px;
	max-width: none;
	object-fit: contain;
}

/* The names, for screen readers only. The marquee itself is aria-hidden
   because each logo appears twice in the markup. */
.gs-clients__names {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	list-style: none;
}

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

.gs-clients--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-clients--empty p {
	margin: 0;
	max-width: none;
}

/* ==========================================================================
   Tablet and phones

   Fewer columns rather than smaller logos: shrinking a wordmark past a certain
   point makes it unreadable, which defeats the point of showing it.
   ========================================================================== */

@media (max-width: 639px) {
	.gs-clients__track {
		gap: var(--gs-space-6);
	}

	.gs-clients__item {
		min-height: 44px;
	}

	.gs-clients__logo {
		height: 32px;
	}

	.gs-clients__count {
		font-size: 1.375rem;
	}

	.gs-clients__label {
		font-size: 1rem;
		letter-spacing: 0.06em;
	}

	.gs-clients__head,
	.gs-clients__foot {
		gap: var(--gs-space-3);
	}
}

/* ==========================================================================
   Reduced motion

   An infinite marquee is exactly the kind of motion this setting exists for.
   The animation stops entirely and the row becomes a normal scrollable strip,
   so every logo is still reachable.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.gs-clients__track {
		animation: none;
		will-change: auto;
	}

	.gs-clients__row {
		overflow-x: auto;
		scrollbar-width: thin;
	}
}

/* ==========================================================================
   Division-page band (.gs-clients--band)

   The same marquee, restyled for the division pages: full bleed on a grey
   field, two rows, logos only. No count, no labels, no rules — those belong
   to the home band, where the claim is the point; here the logos are.
   ========================================================================== */

.gs-clients--band {
	/* Full bleed. Same three-part fix the creatives and case-study bands use:
	   negative margin to cancel main's gutter, and the max-width cap lifted,
	   because core's constrained layout centres children of
	   .wp-block-post-content with `margin-left: auto !important` and caps them
	   with max-width. The negative margin alone moves the band but cannot
	   widen it. */
	margin-inline: calc(var(--gs-gutter-now) * -1) !important;
	max-width: none !important;
	/* The 40 sits OUTSIDE the grey, not inside it (Adarsh, 24th September
	   2026), so the field hugs the logos instead of carrying 40px of empty
	   grey above and below them.

	   It is still the same 40, just moved from padding to margin, so the
	   section still contributes its half and the sitewide 80px gap is
	   unchanged: the neighbour's 40 of padding plus this 40 of margin. */
	/* 20px of grey above and below the logos (Adarsh, 24th September 2026), so
	   the field breathes without carrying the full section step inside it.

	   A literal, not a spacing token: the scale steps 16 / 24 and this is 20,
	   so rounding it to a token would quietly be the wrong number. */
	padding-block: 1.25rem;
	margin-block: var(--gs-section-pad);
	background: var(--gs-grey-l);
}

/* The rows run edge to edge; only the gutter of the page is cancelled, and
   nothing inside needs putting back, because a marquee has no left edge to
   line up with. */
.gs-clients--band .gs-clients__inner {
	gap: 0;
}

/* The rows sit closer together than the home band's, which has the count and
   the rules to separate it from its neighbours. */
.gs-clients--band .gs-clients__rows {
	display: flex;
	flex-direction: column;
	gap: var(--gs-space-5);
}

/* On the division pages this band is followed straight away by the case
   studies, which carry the SAME #F1F1F1 field. WP's block-gap then draws a
   24px white strip between two identical greys, which reads as a seam rather
   than as two sections. Collapsing it makes them one continuous field.

   Beats core's gap rule on specificity: that one is written with :where(),
   which contributes zero, so a two-class selector is enough and no
   !important is needed. */
.gs-clients--band + .gs-cases {
	margin-block-start: 0;
}