/* ==========================================================================
   GrowthStudioz, "How will we do it" band

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

   Desktop (a 1010px column, centred):
     heading  DM Sans 600, 64px, #0E0E0E, tracking 0
     steps    title 600 20px #000, text 400 16px #838383, 7px apart;
              drawing 107 x 107, 32px from the copy; copy centred on it
     lines    1.19px black, dashes 2.38
     button   710 x 48, black, radius 4, "BEGIN YOUR PROJECT" 400 24px white,
              85px under the last step
   Phone (393 frame, 25px sides):
     heading  32px, with a question mark (its own field)
     steps    title 600 16px, text 400 12px, 6px apart; drawings about 91

   The steps are not a flow: they sit at the design's own coordinates, so the
   drawn lines meet them. Every position below is in design pixels, and one
   unit, --u, turns them into real ones: 1px at the design width, less in a
   narrower column. The lines are an SVG on the same grid (inc/process.php),
   so the two scale together.

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

.gs-process {
	/* The grid: width, height and drawing size, in design pixels. The phone
	   block below swaps these and the step places, never the rules. */
	--gs-pr-w: 1010;
	--gs-pr-h: 755;
	--gs-pr-icon: 107;

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

/* About 1000px in the 1440 design, kept as a proportion (Adarsh, 26th
   September 2026): 76.5% of the page column, capped at the design's 1010 so a
   big screen does not stretch it, and never narrower than 900 (or the whole
   column, if that is less), where the steps would start to crowd. */
.gs-process__inner {
	max-width: clamp(min(100%, 56.25rem), 76.5%, 63.125rem);
	margin-inline: auto;
}

/* --- heading -------------------------------------------------------------- */

/* The 32px to the first step sits on the heading, so a band with no heading
   has no stray space above the steps. */
.gs-process__title {
	margin: 0 0 var(--gs-space-6);         /* 32px */
	max-width: none;
	color: #0E0E0E;
	font-size: var(--gs-h1);               /* 64px */
	font-weight: var(--gs-weight-semibold);
	line-height: 1.3;
	letter-spacing: 0;
}

/* Two headings, one per width, only when the page sets a phone one.
   display:none, so the hidden one also leaves the accessibility tree. */
.gs-process__title-phone {
	display: none;
}

/* --- the stage ------------------------------------------------------------ */

/* The frame is the container the stage measures itself against: a container
   cannot size itself by its own cqw, so the two are separate boxes. */
.gs-process__frame {
	container-type: inline-size;
}

.gs-process__stage {
	/* One design pixel. */
	--u: calc(100cqw / var(--gs-pr-w));

	position: relative;
	height: calc(var(--gs-pr-h) * var(--u));
}

.gs-process__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

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

.gs-process__line {
	fill: none;
	stroke: var(--gs-black);
	stroke-width: 1.19;
	stroke-dasharray: 2.38 2.38;
}

/* The solid copy inside each line's mask, which the script draws in. Wider
   than the line so every dash sits well inside it; narrow enough that the
   hook at the end of line 2 does not show early from the pass beside it.
   Butt ends: a round cap reaches past the drawn part, and showed a stray dot
   at the start of every line before it had begun. */
.gs-process__reveal {
	fill: none;
	stroke: var(--gs-white);
	stroke-width: 5;
	stroke-linecap: butt;
	stroke-linejoin: round;
}

/* --- the steps ------------------------------------------------------------ */

.gs-process__steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The step itself has no box: its drawing and copy are placed on the stage
   separately, because the design does not keep them in a fixed relation
   (step 5's drawing sits 40px further right than steps 1 and 3). */
.gs-process__step {
	margin: 0;
}

/* Design places, desktop. Drawing: --ix, --iy (its top-left). Copy: --tx
   (left), --ty (its vertical centre, which is the drawing's) and --tw. */
.gs-process__step:nth-child(1) { --ix: 258;   --iy: 0;     --tx: 0;     --ty: 53.5;  --tw: 226; }
.gs-process__step:nth-child(2) { --ix: 580.5; --iy: 72.5;  --tx: 719.5; --ty: 126;   --tw: 290.5; }
.gs-process__step:nth-child(3) { --ix: 258;   --iy: 345;   --tx: 0;     --ty: 398.5; --tw: 226; }
.gs-process__step:nth-child(4) { --ix: 638.5; --iy: 491.2; --tx: 779;   --ty: 544.7; --tw: 231; }
.gs-process__step:nth-child(5) { --ix: 297.5; --iy: 647.5; --tx: 0;     --ty: 701;   --tw: 226; }

/* UX19's seven steps (Adarsh, 29th September 2026): the same design grid idea,
   1010 x 1170, 67px under the heading. Steps 1 to 5 sit almost where
   Narrativ's do; measured off the frames at 100% where they reach, half
   scale above that. The campfire drawing is 119 x 125, not square. */
.gs-process--7 {
	--gs-pr-h: 1170;
}

.gs-process--7 .gs-process__title {
	margin-block-end: 4.1875rem;           /* 67px */
}

.gs-process--7 .gs-process__step:nth-child(1) { --ix: 256.3; --iy: 5.9;   --tx: 0;   --ty: 58;    --tw: 226; }
.gs-process--7 .gs-process__step:nth-child(2) { --ix: 579.3; --iy: 87.9;  --tx: 720; --ty: 145;   --tw: 260; }
.gs-process--7 .gs-process__step:nth-child(3) { --ix: 255;   --iy: 344.4; --tx: 0;   --ty: 398;   --tw: 226; }
.gs-process--7 .gs-process__step:nth-child(4) { --ix: 638.5; --iy: 491.2; --tx: 779; --ty: 544;   --tw: 214; }
.gs-process--7 .gs-process__step:nth-child(5) { --ix: 296.2; --iy: 662.7; --tx: 0;   --ty: 716.5; --tw: 256; }
.gs-process--7 .gs-process__step:nth-child(6) { --ix: 588.4; --iy: 856.9; --tx: 728; --ty: 911.5; --tw: 270; }
.gs-process--7 .gs-process__step:nth-child(7) { --ix: 322;   --iy: 1044;  --tx: 0;   --ty: 1110;  --tw: 288; --iw: 119; --ih: 125; }

/* An image (SVG, PNG, GIF) or a video: the same box either way. A step can
   set its own drawing size (--iw, --ih) where the drawing is not square. */
.gs-process__icon {
	position: absolute;
	left: calc(var(--ix) * var(--u));
	top: calc(var(--iy) * var(--u));
	width: calc(var(--iw, var(--gs-pr-icon)) * var(--u));
	height: calc(var(--ih, var(--gs-pr-icon)) * var(--u));
	max-width: none;
	object-fit: contain;
}

.gs-process__copy {
	position: absolute;
	left: calc(var(--tx) * var(--u));
	top: calc(var(--ty) * var(--u));
	width: calc(var(--tw) * var(--u));
	/* Centred on its drawing, so a title that wraps grows both ways rather
	   than down into the next line. `translate`, not `transform`: the script
	   animates the transform, and the two add up instead of fighting. */
	translate: 0 -50%;
}

/* Type scales with the grid, so a narrower column is the same picture
   smaller, but never below a readable floor. */
.gs-process__name {
	margin: 0;
	max-width: none;
	color: var(--gs-black);
	font-size: max(var(--gs-b3), calc(20 * var(--u)));
	font-weight: var(--gs-weight-semibold);
	line-height: 1.3;
	letter-spacing: 0;
	/* Natural wrapping, as the mockup's "Step 4: Moodboard & / Pitch". */
	text-wrap: wrap;
}

.gs-process__text {
	margin: calc(7.13 * var(--u)) 0 0;
	max-width: none;
	color: #838383;
	font-size: max(0.8125rem, calc(16 * var(--u)));
	line-height: 1.3;
}

/* --- the button ----------------------------------------------------------- */

/* Its own look, not the site's .gs-btn (Adarsh): plain black, square-ish,
   plain uppercase with no tracking and no arrow. */
.gs-process__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70.3%;                          /* 710 of 1010 */
	min-height: var(--gs-space-7);         /* 48px */
	margin: 5.3125rem auto 0;              /* 85px under the last step */
	padding: var(--gs-space-2) var(--gs-space-4);
	border-radius: var(--gs-radius-sm);    /* 4px */
	background: var(--gs-black);
	color: var(--gs-white);
	font-size: var(--gs-b1);               /* 24px */
	font-weight: var(--gs-weight-regular);
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		background-color var(--gs-dur-hover) ease,
		transform var(--gs-dur-press) var(--gs-ease-out);
}

/* Red fill, white text, like the site's other black buttons (Adarsh, 28th
   September 2026). Written as a.gs-process__btn: base.css turns every link
   that is not a .gs-btn red on hover, and that rule outranks a bare class,
   which left red text on the hover fill. */
@media (hover: hover) and (pointer: fine) {
	a.gs-process__btn:hover {
		background: var(--gs-accent);          /* #F80000 */
		color: var(--gs-white);
	}
}

.gs-process__btn:focus-visible {
	outline: 2px solid var(--gs-accent);
	outline-offset: 3px;
}

.gs-process__btn:active {
	transform: scale(0.98);
}

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

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

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

@media (max-width: 767px) {
	.gs-process {
		--gs-pr-w: 343;
		--gs-pr-h: 697;
		--gs-pr-icon: 91;
	}

	.gs-process__title {
		margin-block-end: 1.5625rem;       /* 25px */
		font-size: var(--gs-h3);           /* 32px */
	}

	.gs-process__title-wide {
		display: none;
	}

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

	/* Past a phone's width the grid would keep growing, drawings and all.
	   Held at a large phone's size and centred instead. */
	.gs-process__frame {
		max-width: 26rem;
		margin-inline: auto;
	}

	.gs-process__lines--desktop {
		display: none;
	}

	.gs-process__lines--phone {
		display: block;
	}

	.gs-process__step:nth-child(1) { --ix: 206.5; --iy: 0;     --tx: 0;   --ty: 44;    --tw: 190; }
	.gs-process__step:nth-child(2) { --ix: 1;     --iy: 155;   --tx: 124; --ty: 199.8; --tw: 190; }
	.gs-process__step:nth-child(3) { --ix: 237.5; --iy: 308;   --tx: 17;  --ty: 334.8; --tw: 190; }
	.gs-process__step:nth-child(4) { --ix: 16;    --iy: 463.5; --tx: 139; --ty: 510.4; --tw: 180; }
	.gs-process__step:nth-child(5) { --ix: 237;   --iy: 605.5; --tx: 17;  --ty: 654;   --tw: 190; }

	/* UX19's seven on a phone: a 350 x 1075 grid, off the phone frame. */
	.gs-process--7 {
		--gs-pr-w: 350;
		--gs-pr-h: 1075;
	}

	.gs-process--7 .gs-process__title {
		margin-block-end: 1.25rem;         /* 20px */
	}

	.gs-process--7 .gs-process__step:nth-child(1) { --ix: 215.2; --iy: 0;     --tx: 4;     --ty: 45.8;   --tw: 178; }
	.gs-process--7 .gs-process__step:nth-child(2) { --ix: 2.8;   --iy: 168.6; --tx: 128.7; --ty: 214.8;  --tw: 182; }
	.gs-process--7 .gs-process__step:nth-child(3) { --ix: 242.4; --iy: 331.5; --tx: 22.2;  --ty: 369.6;  --tw: 168; }
	.gs-process--7 .gs-process__step:nth-child(4) { --ix: 19.5;  --iy: 491.4; --tx: 142.8; --ty: 538.5;  --tw: 182; }
	.gs-process--7 .gs-process__step:nth-child(5) { --ix: 242.5; --iy: 644.4; --tx: 22.2;  --ty: 689.2;  --tw: 192; }
	.gs-process--7 .gs-process__step:nth-child(6) { --ix: 22.4;  --iy: 805.8; --tx: 138.8; --ty: 851.4;  --tw: 188; }
	.gs-process--7 .gs-process__step:nth-child(7) { --ix: 237.3; --iy: 967.6; --tx: 16.2;  --ty: 1022.8; --tw: 188; --iw: 102.5; --ih: 106.5; }

	/* Fixed on a phone: the frame's sizes are already phone sizes. */
	.gs-process__name {
		font-size: var(--gs-b3);           /* 16px */
	}

	.gs-process__text {
		margin-block-start: 0.375rem;      /* 6px */
		font-size: var(--gs-b5);           /* 12px */
	}

	/* Not in the phone frame; kept so the form is one tap away, full width
	   like the site's other phone buttons. */
	.gs-process__btn {
		width: 100%;
		margin-block-start: 2.5rem;
		font-size: var(--gs-b3);           /* 16px */
	}
}

/* ==========================================================================
   Reduced motion: the script does nothing, so the band is simply drawn.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.gs-process__btn:active {
		transform: none;
	}
}