/* ==========================================================================
   GrowthStudioz, stats row (Launchpad first)

   Off Adarsh's Figma inspector, 6th October 2026.

   Desktop (1440):
     content  the hero section's width (80 to 1360), 1320 at most; 40 top
              and bottom; a 1px #EAEAEA rule across the full width
              underneath. (The frame has 1200 at 120 in; Adarsh widened it.)
     stats    three equal columns, 210 apart (287 wide at 1440); a 1px x 60
              #EAEAEA line in the middle of each gap, level with the tops of
              the numbers
     stat     number DM Sans 800, 36px, #0A0A0A, 47 tall; 4 under it the
              label, 400, 14px, 18 tall
   Phone (390 frame, 20px sides):
     two to a row, 20 apart both ways, 32 top and bottom, no lines; number
     800, 32px, #15171A, 42 tall; label 13/18; the last one alone on its row
     takes the whole width, as its label does in the frame
   Labels #737373 at every size: the phone frame's #7B8187 is 3.9:1 on white,
   under the 4.5:1 that 13px text needs (Adarsh's pick).
   No tablet frame: the desktop row with closer columns, labels wrapping
   where they must.
   ========================================================================== */

.gs-stats {
	--gs-stats-ink: #0A0A0A;
	--gs-stats-text: #737373;
	--gs-stats-line: #EAEAEA;
	/* 210 at the frame's 1440, closing up with the screen below that. */
	--gs-stats-gap: min(13.125rem, 14.5833vw);

	/* Full bleed, so the rule underneath runs edge to edge. Same fix as the
	   clients band: cancel main's gutter, lift core's max-width cap, and put
	   the gutter back inside. */
	margin-inline: calc(var(--gs-gutter-now) * -1) !important;
	max-width: none !important;
	padding: 2.5rem var(--gs-gutter-now);              /* 40 */
	border-bottom: var(--gs-border-width) solid var(--gs-stats-line);
}

/* Straight under the brand strip, as in the frame: the strip's 40 of white
   below it would double the row's own 40. */
.gs-clients--band:has(+ .gs-stats) {
	margin-block-end: 0;
}

/* Across the hero SECTION's width, not its 1200 of copy (Adarsh, 6th October
   2026: "same width as hero section", "approx 1320 max"): 80 to 1360 at
   1440, capped at 1320 on wider screens. */
.gs-stats__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	align-items: start;
	column-gap: var(--gs-stats-gap);
	max-width: 82.5rem;                                /* 1320 */
	margin: 0 auto;
	padding: 0;
}

.gs-stats__item {
	position: relative;
	display: flex;
	/* The label is first in the markup (it names the number); the number
	   sits on top. */
	flex-direction: column-reverse;
	gap: 0.25rem;                                      /* 4 */
	min-width: 0;
}

/* The thin line in the middle of each gap, level with the number's top. */
.gs-stats__item + .gs-stats__item::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: calc(var(--gs-stats-gap) / -2);
	width: var(--gs-border-width);
	height: 3.75rem;                                   /* 60 */
	background: var(--gs-stats-line);
}

.gs-stats__value {
	margin: 0;
	color: var(--gs-stats-ink);
	font-size: 2.25rem;                                /* 36 */
	font-weight: 800;
	line-height: 1.3;                                  /* 47 */
}

.gs-stats__label {
	margin: 0;
	color: var(--gs-stats-text);
	font-size: 0.875rem;                               /* 14 */
	font-weight: 400;
	line-height: 1.125rem;                             /* 18 */
	/* Where a label must take two lines (the last one, 1024-1279 and on
	   tablets), split it evenly rather than after the hyphen in "in-house". */
	text-wrap: balance;
}

/* Figma's last label ("Brand, store, content, and ads in-house", ~275) is
   wider than its 260 column and runs on into the margin. Let it do the same,
   up to the page gutter less 16, and wrap only beyond that: one line at
   1440 and 1280, two on smaller screens, never off the edge. */
.gs-stats__item:last-child .gs-stats__label {
	width: max-content;
	max-width: calc(100% + var(--gs-gutter-now) - 1rem);
}

.gs-stats--empty {
	border-bottom: 0;
}

/* --- tablet: the desktop row, closer ------------------------------------- */

@media (min-width: 768px) and (max-width: 1023.98px) {
	.gs-stats {
		--gs-stats-gap: 3rem;                          /* 48 */
	}
}

/* --- phone: two to a row, no lines ---------------------------------------- */

@media (max-width: 767.98px) {
	.gs-stats {
		--gs-stats-ink: #15171A;

		padding-block: 2rem;                           /* 32 */
		border-bottom: 0;
	}

	.gs-stats__list {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;                                  /* 20 */
	}

	.gs-stats__item + .gs-stats__item::before {
		content: none;
	}

	/* An odd one out takes the whole row. */
	.gs-stats__item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.gs-stats__value {
		font-size: 2rem;                               /* 32, 42 tall */
	}

	/* In the frame "D2C brands built and scaled" (171) runs 6 past its 165
	   column into the gap rather than wrapping. Same here: up to 16 of the
	   20 gap, so one line on a 390 or 375 phone, two only where that would
	   touch the next column. */
	.gs-stats__label,
	.gs-stats__item:last-child .gs-stats__label {
		width: max-content;
		max-width: calc(100% + 1rem);
		font-size: 0.8125rem;                          /* 13 */
	}
}