/* ==========================================================================
   GrowthStudioz, Recent Creatives

   Full-bleed red band, a two-row horizontal scroller, then copy and a CTA.
   ========================================================================== */

.gs-creatives {
	/* Full bleed. Same three-part fix the case studies band uses: 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;
	/* 40px inside the red AND 40px of white outside it, above and below
	   (Adarsh, 25th September 2026). With the neighbour's own 40, that is
	   80px of white either side of the red, the sitewide gap, rather than
	   the red taking half of it. Same pattern as the grey client-logo band.
	   The token, so phones get 22.5 + 22.5 = 45. */
	padding-block: var(--gs-section-pad);
	margin-block: var(--gs-section-pad);
	/* Supplied as "F80000 and 920000". Vertical, bright at the top. */
	background: linear-gradient(180deg, #F80000 0%, #920000 100%);
	color: var(--gs-white);
}

/* Heading and footer sit on the site gutter; only the artwork runs wider. */
.gs-creatives__head,
.gs-creatives__foot {
	padding-inline: var(--gs-gutter-now);
}

.gs-creatives__title {
	margin: 0 0 var(--gs-space-5);
	color: var(--gs-white);
	line-height: var(--gs-lh-heading);
}

/* --- the two-row scroller ------------------------------------------------- */

/* Each row is its own scroll container, so the rows move independently. The
   script builds them from the single row the markup ships; this only says how
   many there should be. */
.gs-creatives__rows {
	display: flex;
	flex-direction: column;
	gap: var(--gs-creative-gap);
	/* The inset lives HERE, on the wrapper, not on the scrolling row.
	   Padding on a scroll container sits inside the scrollport, so the next
	   tile shows through it: six tiles filling the content box exactly still
	   left a 12px sliver of tile seven in the right padding. Insetting the
	   wrapper instead ends each row's box at the inset, so the seventh tile is
	   clipped rather than peeking, and the red margin is still there. */
	padding-inline: var(--gs-space-4);
}

/* The row is the window; the track inside it is what moves. Rows alternate
   direction, per Adarsh 23rd September 2026: row one travels left to right,
   row two right to left, row three left to right again. */
.gs-creatives__row {
	overflow: hidden;
}

.gs-creatives__track {
	display: flex;
	gap: var(--gs-creative-gap);
	/* max-content, so the track is as wide as its tiles rather than being
	   squeezed to the row. This is what makes -50% a whole lap. */
	width: max-content;
	margin: 0;
	/* No padding of its own: the inset is the wrapper's job, above. */
	padding: 0;
	list-style: none;
	/* Keeps the track on its own layer. Without it the browser re-rasterises
	   every frame and a row this wide judders. */
	will-change: transform;
}

/* Same duration both ways, so the two rows read as one deliberate pattern
   rather than drifting in and out of step. */
.gs-creatives__track--right {
	animation: gs-creatives-right 60s linear infinite;
}

.gs-creatives__track--left {
	animation: gs-creatives-left 60s linear infinite;
}

/* No pause on hover: the rows keep moving under the pointer (Adarsh, 8th
   October 2026). Reduced motion still stops them, below. */

/* The script renders every tile TWICE, so at -50% the second copy sits exactly
   where the first began and the loop has no seam. Named for the direction the
   artwork visibly travels, not for the sign of the transform, which is the
   thing that gets read backwards later. */
@keyframes gs-creatives-right {
	from { transform: translate3d(-50%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

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

/* Tile width is derived from how many should be in view, not set in pixels, so
   the row always divides the visible width exactly at every screen size. The
   fractional count on phones is deliberate: a part-cut tile is what says the
   wall continues.

   Measured against the VIEWPORT, not the track. The track is `max-content`, so
   a percentage inside it would resolve against a width that the percentage is
   itself deciding. The band is full-bleed, so 100vw is the row's real width,
   less the wrapper's two 16px insets. */
.gs-creatives {
	--gs-creative-per-row: 6;
	--gs-creative-rows: 2;
	--gs-creative-gap: 4px;
	--gs-creative-w: calc(
		(100vw - (2 * var(--gs-space-4)) - (var(--gs-creative-per-row) - 1) * var(--gs-creative-gap))
		/ var(--gs-creative-per-row)
	);
	/* Every tile is this tall: what a 4:5 tile of the width above was. */
	--gs-creative-h: calc(var(--gs-creative-w) * 5 / 4);
}

/*
 * Same height, own width (Adarsh, 7th October 2026: square pieces were cut on
 * both sides by the one 4:5 shape every tile had). The width is the height
 * times the picture's own shape, written on each tile as --gs-creative-ar by
 * creatives.php, so nothing is cropped and both rows still line up. The
 * per-row count above now only sets the height; a row holds as many as fit.
 */
.gs-creative {
	flex: 0 0 auto;
	height: var(--gs-creative-h);
	aspect-ratio: var(--gs-creative-ar, 0.8);
	max-width: none;
}

.gs-creative__img {
	display: block;
	width: 100%;
	height: 100%;
	/* The tile is the picture's own shape, so cover crops nothing; it only
	   guards against a file whose real shape differs from its metadata. */
	object-fit: cover;
}

/* --- copy and CTA --------------------------------------------------------- */

.gs-creatives__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gs-space-5);
	margin-block-start: var(--gs-space-5);
}

.gs-creatives__text {
	margin: 0;
	max-width: 58ch;
	color: var(--gs-white);
	font-size: var(--gs-b1);
	line-height: var(--gs-lh-body);
}

/* .gs-btn--light in base.css carries the white fill and the ink hover. The
   only thing this band adds is that the button must not be squeezed by the
   paragraph beside it. */
.gs-creatives__cta {
	flex: none;
}

.gs-creatives__cta-icon {
	flex: none;
}

/* --- two headings, one per width ------------------------------------------
   Only when a page sets a separate phone heading. display:none, not visually
   hidden: the hidden one must leave the accessibility tree too, or a screen
   reader would hear both. */

.gs-creatives__title-phone {
	display: none;
}

/* --- centred layout (Narrativ) ----------------------------------------------
   Off Adarsh's frames, 25th September 2026: the heading centred on desktop,
   no paragraph, the button centred under the wall in tracked capitals with no
   arrow, and the red running from bright at the top left to dark at the bottom
   right. The same two reds as the default band, only the direction differs.
   Home keeps the default. */

.gs-creatives--centred {
	background: linear-gradient(to bottom right, #F80000 0%, #920000 100%);
}

.gs-creatives--centred .gs-creatives__title {
	text-align: center;
}

.gs-creatives--centred .gs-creatives__foot {
	justify-content: center;
}

.gs-creatives--centred .gs-creatives__cta {
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* --- stacked layout (Performance Marketing) ---------------------------------
   Off Adarsh's frames, 1st October 2026: the heading centred on desktop, the
   paragraph centred under the wall, and under that two buttons side by side,
   black then white. 32 above and below, 40 between the heading, the wall, the
   paragraph and the buttons.

   The red runs LEFT TO RIGHT (Adarsh), bright to dark, with the slight tilt
   the frame has: its corners measure 237 / 164 across the top and 209 / 146
   across the bottom, which is a line about 29 degrees below level. The same
   two reds as every other version of the band.

   The buttons are the site's own button, tracked like this page's others.
   The frame draws the pair at different heights (50 and 54.5) and different
   type sizes; one size is used for both. */

.gs-creatives--stacked {
	padding-block: 2rem;                   /* 32px */
	background: linear-gradient(119deg, #F80000 0%, #920000 100%);
}

.gs-creatives--stacked .gs-creatives__title {
	margin-block-end: 2.5rem;              /* 40px */
	text-align: center;
}

.gs-creatives--stacked .gs-creatives__foot {
	flex-direction: column;
	justify-content: center;
	gap: 2.5rem;                           /* 40px */
	margin-block-start: 2.5rem;            /* 40px */
	text-align: center;
}

.gs-creatives--stacked .gs-creatives__text {
	max-width: none;
	/* 31.7 between the frame's two lines of 24px. */
	line-height: 1.3;
}

.gs-creatives__actions {
	display: flex;
	justify-content: center;
	gap: var(--gs-space-5);                /* 24px */
	width: 100%;
}

/* A tablet has no room for the pair at full tracking, so there they sit one
   under the other, centred. From 1024 up they stay side by side and give way
   together. */
@media (max-width: 1023px) {
	.gs-creatives__actions {
		flex-wrap: wrap;
	}
}

.gs-creatives--stacked .gs-creatives__cta {
	/* 456 each, giving way together on a narrower screen. */
	flex: 0 1 28.5rem;
	letter-spacing: 0.2em;
	/* The tracking after the last letter and the icon's own inset both add to
	   the gap before the arrow; taken back off it (questions.css has the
	   arithmetic). */
	gap: calc(var(--gs-space-3) - 0.55em);
}

/* The solid button's sitewide hover is the brand red, which on this band is
   the background: it would vanish. It turns white instead, the mirror of the
   white button beside it turning black. */
.gs-creatives--stacked .gs-btn--solid {
	--btn-fill-hover: var(--gs-white);
	--btn-ink-hover: var(--gs-ink);
}

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

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

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

@media (max-width: 767px) {
	.gs-creatives {
		/* 3.4 in view, so the fourth is cut and the row reads as scrollable. */
		--gs-creative-per-row: 3.4;
		/* Three rows on phones against two on desktop: the tiles are far
		   smaller here, so a third row costs little height and keeps the wall
		   from looking thin. Read by the script, which builds the rows. */
		--gs-creative-rows: 3;
	}


	.gs-creatives__foot {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.gs-creatives__text {
		max-width: none;
		font-size: var(--gs-b4);
	}

	.gs-creatives__cta {
		width: 100%;
	}

	/* The phone heading, where a page has one. */
	.gs-creatives__title-wide {
		display: none;
	}

	.gs-creatives__title-phone {
		display: inline;
	}

	/* The phone frame sets the heading on the left, like the default band. */
	.gs-creatives--centred .gs-creatives__title {
		text-align: start;
	}

	/* One line on a phone. At the phone button size, 0.2em tracking needs
	   281px against the 247 a 360 screen leaves; 0.1em needs 245, and the
	   narrower inner padding gives the full-width button room down to 320.
	   The text is centred in a full-width button, so the padding only ever
	   mattered for fitting. */
	.gs-creatives--centred .gs-creatives__cta {
		padding-inline: var(--gs-space-4);
		letter-spacing: 0.1em;
		white-space: nowrap;
	}

	/* The stacked layout, off the phone frame: the heading on the left, the
	   paragraph centred, the two buttons one under the other, 8 apart, each
	   32 tall in tracked capitals with no arrow. Heading and buttons sit
	   30 from the screen's edges. The band is taller than it is wide here, so
	   the same left-to-right red needs a shallower tilt to meet the frame's
	   corners. */
	.gs-creatives--stacked {
		background: linear-gradient(101deg, #F80000 0%, #920000 100%);
	}

	.gs-creatives--stacked .gs-creatives__head,
	.gs-creatives--stacked .gs-creatives__foot {
		padding-inline: 1.875rem;          /* 30px */
	}

	.gs-creatives--stacked .gs-creatives__title {
		margin-block-end: var(--gs-space-5);
		text-align: start;
	}

	.gs-creatives--stacked .gs-creatives__foot {
		align-items: stretch;
		gap: var(--gs-space-5);            /* 24px */
		margin-block-start: var(--gs-space-5);
	}

	.gs-creatives__actions {
		flex-direction: column;
		gap: var(--gs-space-2);            /* 8px */
	}

	/* The small tracked button of the phone frames, fitted to them: 600 at
	   12px, 0.35em. The tracking after the last letter is matched in front
	   so the label stays centred. */
	.gs-creatives--stacked .gs-creatives__cta {
		flex: none;
		width: 100%;
		min-height: 2rem;                  /* 32px */
		padding: 0 var(--gs-space-1) 0 calc(var(--gs-space-1) + 0.35em);
		border-radius: var(--gs-radius-sm);
		font-size: 0.75rem;                /* 12px */
		font-weight: var(--gs-weight-semibold);
		letter-spacing: 0.35em;
		text-transform: uppercase;
		white-space: nowrap;
		gap: 0;
	}

	.gs-creatives--stacked .gs-creatives__cta-icon {
		display: none;
	}
}

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

   A wall of artwork sliding in two directions is exactly what this setting
   exists to stop. The animation goes and each row becomes an ordinary
   scroller instead, so every creative is still reachable rather than the
   section quietly losing half its content off the right edge.
   ========================================================================== */

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

	.gs-creatives__row {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

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

	/* The script makes the row focusable only in this mode, so the outline is
	   only ever drawn on something that actually scrolls. */
	.gs-creatives__row:focus-visible {
		outline: 2px solid var(--gs-white);
		outline-offset: 4px;
	}
}