/* ==========================================================================
   GrowthStudioz, page hero band (first on Case Studies)

   Off Adarsh's Figma frames, 26th September 2026.

   Desktop (1440):
     band     #FAFAFA, edge to edge, 80px top and bottom
     columns  copy 520 and picture 600, 160 apart, centred on each other
     label    DM Sans 700, 12px, tracking 1px, uppercase, #F80000, after
              the red flame (15 x 25), 6px apart; 20px to the heading
     heading  600, 64px, tracking -3.02px, #111111; 24px to the text
     text     400, 16px, #545454; 40px to the stats
     stats    value 700 32px #111111, label 600 12px uppercase #737373,
              4px apart; 40px between stats
     picture  600 x 350
   Phone (390 frame, 20px sides):
     picture first, 350 x 204, then 20px to the label; the label leads with
     an 8px red dot instead of the flame and is #E11D2E; heading 32px with
     -1.5px tracking; 20px to the text, 28px to the stats; value 28px, label
     11px; 32px between stats; 40px top and bottom

   Line height: the inspector says 100%, but every box it measures is 1.3x
   its type (64 -> 83, 16 -> 21, 32 -> 42), DM Sans's own line height, and the
   gaps it gives are between those boxes. So 1.3 here.
   ========================================================================== */

.gs-page-hero {
	/* Every desktop/phone difference is one of these, so the smaller-screen
	   blocks below change dials, never rules. */
	--gs-ph-pad: 5rem;                     /* 80px top and bottom */
	--gs-ph-title: clamp(2.875rem, 4.444vw, 4rem); /* 64px at 1440 */
	--gs-ph-track: -0.0472em;              /* -3.02px at 64 */
	--gs-ph-value: 2rem;                   /* 32px */
	--gs-ph-stat-label: var(--gs-b5);      /* 12px */
	--gs-ph-stat-gap: 2.5rem;              /* 40px */
	--gs-ph-label-colour: var(--gs-red);   /* #F80000 */

	/* Out of main's side padding to the window edges, so the grey runs
	   edge to edge; the padding comes back inside. Same fix as the creatives
	   band: core's constrained layout sets auto side margins with !important
	   AND caps the width, and the margin alone moves the band without
	   widening it (it stopped 160px short of the right edge). */
	margin-inline: calc(var(--gs-gutter-now) * -1) !important;
	max-width: none !important;
	padding: var(--gs-ph-pad) var(--gs-gutter-now);
	background: #FAFAFA;
}

/*
 * Copy 520 and picture 600 with 160 between them, in a 1280 column. As
 * proportions, so a narrower laptop keeps the same picture: the gap is 12.5%
 * of the column and what is left splits 520:600.
 */
.gs-page-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 520fr) minmax(0, 600fr);
	column-gap: 12.5%;
	align-items: center;
}

/* --- label ---------------------------------------------------------------- */

/* The text sits on the flame's base, as the design (Adarsh, 29th September
   2026); centring it put the letters 4px higher than the frame. */
.gs-page-hero__label {
	display: flex;
	align-items: flex-end;
	gap: 0.375rem;                         /* 6px */
	margin: 0 0 1.25rem;                   /* 20px */
	max-width: none;
	color: var(--gs-ph-label-colour);
	font-size: var(--gs-b5);               /* 12px */
	font-weight: var(--gs-weight-bold);
	line-height: 1.3;
	letter-spacing: 0.0833em;              /* 1px at 12 */
	text-transform: uppercase;
}

/* The line box keeps ~4px under the capitals for descenders, which this
   uppercase label never has, so bottom-aligning the box left the letters
   floating above the flame's base (Adarsh, 29th September 2026). Moved down
   by that space so the capitals end level with the flame. Visual only: the
   label's height and the gap to the heading don't change. */
.gs-page-hero__label > span {
	translate: 0 0.3333em;                 /* 4px at 12px */
}

.gs-page-hero__label-icon {
	flex: none;
	width: 0.9375rem;                      /* 15px */
	height: 1.5625rem;                     /* 25px */
	max-width: none;
	object-fit: contain;
}

/* --- heading and text ----------------------------------------------------- */

.gs-page-hero__title {
	margin: 0 0 var(--gs-space-5);         /* 24px */
	max-width: none;
	color: #111111;
	font-size: var(--gs-ph-title);
	font-weight: var(--gs-weight-semibold);
	line-height: 1.3;
	letter-spacing: var(--gs-ph-track);
}

/* One line each, as set in the page box. */
.gs-page-hero__title-line {
	display: block;
}

.gs-page-hero__body {
	margin: 0 0 2.5rem;                    /* 40px */
	max-width: none;
	color: var(--gs-text-grey);            /* #545454 */
	font-size: var(--gs-b3);               /* 16px */
	line-height: 1.3;
}

/* --- stats ---------------------------------------------------------------- */

.gs-page-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gs-space-5) var(--gs-ph-stat-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-page-hero__stat {
	display: flex;
	flex-direction: column;
	gap: var(--gs-space-1);                /* 4px */
	margin: 0;
}

.gs-page-hero__stat-value {
	color: #111111;
	font-size: var(--gs-ph-value);
	font-weight: var(--gs-weight-bold);
	line-height: 1.3;
}

.gs-page-hero__stat-label {
	color: var(--gs-body-soft);            /* #737373 */
	font-size: var(--gs-ph-stat-label);
	font-weight: var(--gs-weight-semibold);
	line-height: 1.3;
	text-transform: uppercase;
}

/* --- picture -------------------------------------------------------------- */

.gs-page-hero__art {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 600 / 350;
	object-fit: cover;
}

/* No picture yet: the design's grey block, so the band keeps its shape. */
.gs-page-hero__art--empty {
	background: #D9D9D9;
}

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

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

/* --- below desktop: one column, picture first ----------------------------- */

/* Two columns need about 1024px: below that the 64px heading no longer fits
   its half, so the band stacks the way the phone frame does. */
@media (max-width: 1023px) {
	.gs-page-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.gs-page-hero__media {
		order: -1;
		margin-block-end: 1.25rem;         /* 20px */
	}
}

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

@media (max-width: 767px) {
	.gs-page-hero {
		--gs-ph-pad: 2.5rem;               /* 40px */
		--gs-ph-title: var(--gs-h3);       /* 32px */
		--gs-ph-track: -0.0469em;          /* -1.5px at 32 */
		--gs-ph-value: 1.75rem;            /* 28px */
		--gs-ph-stat-label: 0.6875rem;     /* 11px */
		--gs-ph-stat-gap: var(--gs-space-6); /* 32px */
		--gs-ph-label-colour: var(--gs-pm-red); /* #E11D2E */
	}

	/* The phone frame leads the label with a red dot, not the flame, centred
	   on the text. */
	.gs-page-hero__label {
		align-items: center;
		gap: var(--gs-space-2);            /* 8px */
	}

	.gs-page-hero__label > span {
		translate: none;
	}

	.gs-page-hero__label::before {
		content: "";
		flex: none;
		width: 0.5rem;                     /* 8px */
		height: 0.5rem;
		border-radius: 50%;
		background: currentColor;
		/* Capitals sit high in their line box, so the box's middle is 1.3px
		   below the letters' middle. Lifted to the letters (measured). */
		translate: 0 -0.11em;
	}

	.gs-page-hero__label-icon {
		display: none;
	}

	.gs-page-hero__title {
		margin-block-end: 1.25rem;         /* 20px */
	}

	.gs-page-hero__body {
		margin-block-end: 1.75rem;         /* 28px */
	}
}