/* ==========================================================================
   GrowthStudioz, results wall

   Two full-width rows of picture cards gliding in opposite directions
   (Adarsh, 1st October 2026, Performance Marketing). Pictures only since 7th
   October 2026: the label, the result line and the red fade under them are
   off (the label, result and fade notes below are kept for the record).

   Off the Figma inspector:
     card     190.74 x 240.71, radius 10.68; 11 between cards, 16 between rows
              (the wall frame is 2 x 240.71 + 16 = 497.43 tall)
     label    DM Sans 500, 10.82px, uppercase, white; its 104.16 x 13.53 box
              sits 16.23 from the left, the text 3.08 inside that
     result   DM Sans 500, 13.53px, white, two lines in 36px; 16.23 from the
              left, 159.63 wide; 5.41 under the label, 11.26 off the bottom
     fade     the full height of the card, #666666 at 0% opacity to #9A0000,
              and to #510000 on every second card
     phone    the same card at 141 wide (141 / 190.74 = 0.739): 177.94 tall,
              radius 7.9, label 8px, result 10px; 6 between cards, 9 between
              rows

   The phone card is the desktop card scaled, text and all, so everything
   INSIDE a card is written as the inspector's desktop number times one unit,
   --gs-res-u, which is the card's width over 190.74. Change the width and the
   whole card follows. The gaps between cards do not scale with it (11 -> 6 is
   not 0.739), so those are set per breakpoint.
   ========================================================================== */

.gs-results {
	--gs-res-w: 190.74px;
	--gs-res-u: calc(var(--gs-res-w) / 190.74);
	--gs-res-gap: 11px;
	--gs-res-row-gap: 16px;

	display: flex;
	flex-direction: column;
	gap: var(--gs-res-row-gap);
	/* Full bleed, the same three-part fix the creatives band uses: negative
	   margin to cancel main's gutter, and the max-width cap lifted, because
	   core's constrained layout centres and caps children of the post
	   content. The cards run edge to edge, with no inset. */
	margin-inline: calc(var(--gs-gutter-now) * -1) !important;
	max-width: none !important;
	padding-block: var(--gs-section-pad);
}

/* --- rows ----------------------------------------------------------------- */

/* A plain sideways scroller until the script takes over, so with no script,
   or under reduced motion, every card is still there to be reached. */
.gs-results__row {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

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

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

.gs-results__track {
	display: flex;
	gap: var(--gs-res-gap);
	/* max-content, so the track is as wide as its cards rather than being
	   squeezed to the row. */
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The script has filled the row and set one lap's length and duration. The
   row stops being a scroller and becomes a window on a moving track. */
.gs-results__row.is-moving {
	overflow: hidden;
}

.gs-results__row.is-moving > .gs-results__track {
	/* Keeps the track on its own layer. Without it the browser re-rasterises
	   every frame and a row this wide judders. */
	will-change: transform;
	animation: gs-results-right var(--gs-res-dur, 60s) linear infinite;
}

.gs-results__row.is-moving > .gs-results__track--left {
	animation-name: gs-results-left;
}

/* Pause so a card can actually be read: under the pointer, or under a finger
   (the script adds is-held on touch). */
@media (hover: hover) and (pointer: fine) {
	.gs-results:hover .gs-results__track {
		animation-play-state: paused;
	}
}

.gs-results.is-held .gs-results__track {
	animation-play-state: paused;
}

/* The track holds two identical laps, so after one lap's travel the second
   sits exactly where the first began and the loop has no seam. Named for the
   direction the cards visibly travel, not for the sign of the transform. */
@keyframes gs-results-right {
	from { transform: translate3d(calc(var(--gs-res-lap) * -1), 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

@keyframes gs-results-left {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(var(--gs-res-lap) * -1), 0, 0); }
}

/* --- card ----------------------------------------------------------------- */

.gs-result {
	position: relative;
	/* flex-basis, not width: a flex item would otherwise shrink to fit. */
	flex: 0 0 var(--gs-res-w);
	height: calc(240.71 * var(--gs-res-u));
	max-width: none;
	overflow: hidden;
	/* Square corners (Adarsh, 8th October 2026); the frame drew 10.68. */
	border-radius: 0;
	/* What shows for the moment before the picture arrives. Grey, not the
	   red it was: the cards no longer fade to red. */
	background: var(--gs-surface-alt, #F3F3F3);
}

.gs-result__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	/* Cropped to the card. A wall needs equal cards, and the pictures arrive
	   in different shapes. */
	object-fit: cover;
}

/* The red fade and the label and result text over each picture were taken
   off on 7th October 2026 (Adarsh): the cards are the pictures alone. */

/* --- empty (editors only) ------------------------------------------------- */

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

/* --- phone ---------------------------------------------------------------- */

@media (max-width: 767px) {
	.gs-results {
		--gs-res-w: 141px;
		--gs-res-gap: 6px;
		--gs-res-row-gap: 9px;
	}
}

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

   The script does not start the glide in this mode, so the rows stay the
   scrollers they shipped as. This is the belt to that brace: if the setting
   is switched on mid-visit, the motion stops before the script has rebuilt.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.gs-results__row.is-moving {
		overflow-x: auto;
	}

	.gs-results__row.is-moving > .gs-results__track {
		animation: none;
		will-change: auto;
	}
}