/* ==========================================================================
   GrowthStudioz, stat tiles

   A centred row of red tiles, each a number over what it measures (Adarsh,
   1st October 2026, Performance Marketing).

   Off the Figma inspector:
     desktop  tile: #E11D2E, radius 8, padding 12 / 24, hugging its text, 112
              tall; 39 between tiles; 80 to the band above and below
              number: DM Sans 600, 48px, -2.18px tracking, #F1F1F1
              label:  DM Sans 400, 14px, #F1F1F1; 10 under the number
     phone    tile: radius 8, padding 8, 60 tall; 9 between tiles; 32 to the
              band above and below
              label FIRST: DM Sans 500, 16px, white
              number: DM Sans 900, 18px, white, straight under the label

   The phone frame draws three tiles with shorter wording; the phone shows the
   same tiles and wording as desktop (his call), so on a phone they wrap onto
   a second row.
   ========================================================================== */

.gs-tiles {
	padding-block: var(--gs-section-pad);
}

.gs-tiles__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* 39 at the frame's 1440, closing up below that so the four stay on one
	   row down to a small laptop instead of dropping the last one alone. */
	gap: clamp(1rem, 2.71vw, 2.4375rem);   /* 39px */
	margin: 0;
	padding: 0;
}

.gs-tile {
	display: flex;
	/* The label is first in the markup (it names the number, and that is how
	   the phone shows it). Desktop puts the number on top. */
	flex-direction: column-reverse;
	align-items: center;
	gap: 0.625rem;                         /* 10px */
	padding: 0.75rem 1.5rem;               /* 12 / 24 */
	border-radius: 0.5rem;                 /* 8px */
	background: var(--gs-pm-red);          /* #E11D2E */
	color: #F1F1F1;
	text-align: center;
}

.gs-tile__value,
.gs-tile__label {
	margin: 0;
	max-width: none;
	color: inherit;
}

.gs-tile__value {
	font-size: 3rem;                       /* 48px */
	font-weight: var(--gs-weight-semibold);
	/* 60 over 48. The inspector says 100%, but the tile hugs to 112, which
	   is 12 + 60 + 10 + 18 + 12. */
	line-height: 1.25;
	letter-spacing: -0.0454em;             /* -2.18px at 48 */
	/* A number and its unit stay on one line; the tile is as wide as that. */
	white-space: nowrap;
}

.gs-tile__label {
	font-size: 0.875rem;                   /* 14px */
	font-weight: var(--gs-weight-regular);
	line-height: 1.2857;                   /* 18 over 14 */
}

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

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

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

@media (max-width: 767px) {
	/* 32 to the band above and below, where the site's phone gap is 45: each
	   neighbour brings its own 22.5, so this band brings the 9.5 that makes
	   up the difference rather than its usual half. */
	.gs-tiles {
		padding-block: calc(2rem - var(--gs-section-pad));
	}

	.gs-tiles__list {
		gap: 0.5625rem;                    /* 9px */
	}

	.gs-tile {
		flex-direction: column;
		gap: 0;
		padding: 0.5rem;                   /* 8px */
		color: var(--gs-white);
	}

	.gs-tile__label {
		font-size: 1rem;                   /* 16px */
		font-weight: var(--gs-weight-medium);
		line-height: 1.3125;               /* 21 over 16 */
	}

	.gs-tile__value {
		font-size: 1.125rem;               /* 18px */
		font-weight: 900;
		line-height: 1.2778;               /* 23 over 18 */
		letter-spacing: 0;
	}
}