/* =========================================================================
   Studio Variant — Laser Processing capability page

   Shares the capability-page layer (scanning.css), so the header, section
   heads, stages, routes, steps, records and the next-capability component
   are identical between chapters. Everything below is what this chapter
   needs on top, scoped to .lp-* so it cannot reach another page.

   Subtractive worked inward from a solid. This chapter is a single
   controlled trace: the recurring device is a surface carrying a permanent
   record of where a focused point has been. Three depths of that record —
   through, into, and on — are the three processes the page explains.
   ========================================================================= */

/* ---------------------------------- Hero -------------------------------- */

/* The hero drawing is the SVG itself, not its host: the host is a grid item
   and must keep stretching to its column. */
.sc-hero-art > .lp-hero-svg {
	max-height: min(76vh, 700px);
	margin-inline: auto;
}
.lp-motif-list {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* --------------------------- The three processes ------------------------ */

/* Cut, engrave and mark are related but genuinely different, so they get
   three equal modules rather than a list — same frame, same drawing size,
   different depth of record. */
.lp-core {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sv-4);
}
.lp-core .sc-module h3 {
	font-size: var(--sv-h3);
}
.lp-core-tag {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sv-titanium-deep);
	margin: 0;
}
.lp-core-flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.lp-core-flow li {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-mist-300);
}
.lp-core-flow li + li::before {
	content: "→";
	color: var(--sv-titanium-deep);
	margin-right: var(--sv-2);
}

/* ------------------------- Cut, engrave, mark in detail ----------------- */

/* Each process gets one wide drawing and one column of plain-English
   applications. The drawing carries the technical explanation; the list
   carries the commercial one. */
.lp-detail {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(var(--sv-5), 4vw, var(--sv-7));
	align-items: center;
}
.lp-detail.is-flipped .lp-detail-art {
	order: 2;
}
.lp-detail-art {
	color: var(--sv-titanium);
	padding: var(--sv-3) 0;
	background: radial-gradient(ellipse 72% 60% at 50% 50%, rgba(185, 192, 196, 0.05), transparent 70%);
}
.lp-detail-svg {
	width: 100%;
	height: auto;
}
.lp-detail-body {
	display: flex;
	flex-direction: column;
	gap: var(--sv-4);
}
.lp-detail-body h3 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	font-weight: 500;
	letter-spacing: -0.016em;
	color: var(--sv-text);
}
.lp-detail-body p {
	margin: 0;
}
.lp-detail-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.lp-detail-list li {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
	padding: 6px 10px;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-bg-sunken);
}
.lp-detail-keys {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2) var(--sv-4);
	list-style: none;
	margin: 0;
	padding: 0;
}
.lp-detail-keys li {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-titanium);
}

/* --------------------------- Commercial + creator ----------------------- */

/* Two audiences, one drawing discipline. Identical structure either side:
   what changes between the panels is the content, not the quality. */
.lp-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sv-5);
}
.lp-side {
	display: flex;
	flex-direction: column;
	gap: var(--sv-4);
	padding: clamp(var(--sv-5), 3vw, var(--sv-7));
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background-color: var(--sv-surface);
	background-image: var(--sv-texture-carbon);
	box-shadow: var(--sv-shadow-hairline);
	transition: border-color var(--sv-base) var(--sv-ease-precision);
}
.lp-side:hover {
	border-color: var(--sv-titanium-line);
}
.lp-side h3 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h2);
	font-weight: 500;
	letter-spacing: -0.018em;
	color: var(--sv-text);
}
.lp-side p {
	margin: 0;
}
.lp-side-art {
	color: var(--sv-titanium);
	padding: var(--sv-2) 0;
	background: radial-gradient(ellipse 72% 60% at 50% 50%, rgba(185, 192, 196, 0.05), transparent 70%);
}
/* The drawings carry their own annotation type. Holding each one near the
   width it was drawn at keeps that type the same size as the technical
   notation around it instead of scaling it up with the artwork. */
.lp-side-art svg {
	max-width: 340px;
	margin-inline: auto;
}
.lp-examples {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.lp-examples li {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
	padding: 6px 10px;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-bg-sunken);
}
.lp-side-cta {
	margin-top: auto;
	padding-top: var(--sv-2);
}

/* ------------------------------- Sequences ------------------------------ */

/* Design-to-laser, branding, CNC + laser and additive + laser are all the
   same component drawn at each stage, so they share one grid. */
.lp-sequence {
	display: grid;
	gap: var(--sv-3);
	align-items: stretch;
}
.lp-sequence.is-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lp-sequence.is-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
.lp-sequence .sc-stage {
	padding: var(--sv-3);
	gap: var(--sv-2);
}
.lp-sequence .sc-stage + .sc-stage::before {
	left: calc(var(--sv-3) * -1 - 1px);
	width: var(--sv-3);
}

/* -------------------------- Industrial identification ------------------- */

.lp-industrial {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: clamp(var(--sv-5), 4vw, var(--sv-7));
	align-items: center;
}
.lp-industrial-art {
	color: var(--sv-titanium);
}
.lp-marks {
	display: grid;
	gap: var(--sv-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.lp-marks li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sv-4);
	padding: var(--sv-3) var(--sv-4);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-bg-sunken);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-mist-200);
}
.lp-marks li span {
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	color: var(--sv-text-faint);
}

/* ------------------------------- Materials ------------------------------ */

.lp-mats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sv-4);
}
.lp-mat {
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	padding: var(--sv-5);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background-color: var(--sv-surface);
	background-image: var(--sv-texture-carbon);
	transition: border-color var(--sv-base) var(--sv-ease-precision);
}
.lp-mat:hover {
	border-color: var(--sv-titanium-line);
}
.lp-mat h3 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h4);
	font-weight: 500;
	color: var(--sv-text);
}
.lp-mat p {
	margin: 0;
}
.lp-mat-art {
	width: 64px;
	color: var(--sv-titanium);
}
.lp-mat-svg {
	width: 100%;
	height: auto;
	stroke-opacity: 0.75;
}
.lp-mat.is-review {
	border-style: dashed;
	border-color: var(--sv-brass-line);
}
.lp-mat.is-review .lp-mat-art {
	color: var(--sv-brass);
}
.lp-mat-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.lp-mat-list li {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-mist-200);
	padding: 7px 12px;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-pill);
}
/* Which processes a family may suit. Never every process, never every
   material: the page has to keep saying so, so it is part of the card. */
.lp-mat-routes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2);
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--sv-border);
	padding-top: var(--sv-3);
}
.lp-mat-routes li {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-titanium-deep);
}
.lp-mat-routes li + li::before {
	content: "·";
	margin-right: var(--sv-2);
	color: var(--sv-text-faint);
}

/* A standing note under the material families. It is a statement of how
   the work is quoted, so it is framed like a drawing note, not a warning. */
.lp-standing {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-3) var(--sv-4);
	padding: var(--sv-4) var(--sv-5);
	border: 1px dashed var(--sv-brass-line);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-bg-sunken);
}
.lp-standing p {
	margin: 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-brass);
}
.lp-standing span {
	color: var(--sv-text-muted);
	font-family: var(--sv-font-body);
	font-size: var(--sv-body-s);
	letter-spacing: 0;
	text-transform: none;
}

/* -------------------------- The material comes first -------------------- */

/* Deliberately quiet. It matters, but it is a condition of the work rather
   than the subject of the page. */
.lp-safety {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: clamp(var(--sv-5), 4vw, var(--sv-7));
	align-items: center;
	padding: clamp(var(--sv-5), 3vw, var(--sv-7));
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background: var(--sv-bg-sunken);
}
.lp-safety h2 {
	margin: 0 0 var(--sv-3);
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	font-weight: 500;
	letter-spacing: -0.016em;
	color: var(--sv-text);
}
.lp-safety-art {
	color: var(--sv-titanium);
}
.lp-safety-points {
	display: grid;
	gap: var(--sv-2);
	list-style: none;
	margin: var(--sv-4) 0 0;
	padding: 0;
	color: var(--sv-text-muted);
	font-size: var(--sv-body-s);
}
.lp-safety-points li {
	padding-left: var(--sv-4);
	position: relative;
}
.lp-safety-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 10px;
	height: 1px;
	background: var(--sv-titanium-deep);
}

/* ------------------------------ Rotary work ----------------------------- */

.lp-rotary {
	color: var(--sv-titanium);
	background: radial-gradient(ellipse 66% 60% at 50% 50%, rgba(185, 192, 196, 0.05), transparent 70%);
}
.lp-rotary-svg {
	max-width: 560px;
	margin-inline: auto;
}
/* The hatching wrapped round the object is what carries the rotation, which
   is how rotation reads on a drawing. The head stays put; the object turns
   under it. */
.lp-rotary-svg .lp-spin {
	animation: lp-roll 6s linear infinite;
}
.lp-rotary-svg .lp-rotary-head {
	animation: lp-focus 6s var(--sv-ease-precision) infinite;
}
@keyframes lp-roll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(15px);
	}
}
@keyframes lp-focus {
	0%,
	16% {
		transform: translateY(-5px);
		opacity: 0.55;
	}
	40%,
	78% {
		transform: translateY(2px);
		opacity: 1;
	}
	100% {
		transform: translateY(-5px);
		opacity: 0.55;
	}
}

/* ---------------------------- Batch and variable ------------------------ */

.lp-batch {
	color: var(--sv-titanium);
}
.lp-batch-svg {
	max-width: 620px;
	margin-inline: auto;
}
/* Identical components, then identifiers arriving one at a time. The stagger
   is the whole point of the drawing. */
.lp-batch-mark {
	opacity: 0;
	animation: lp-apply 7s var(--sv-ease-precision) infinite;
}
@keyframes lp-apply {
	0%,
	4% {
		opacity: 0;
	}
	16%,
	84% {
		opacity: 1;
	}
	96%,
	100% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-rotary-svg .lp-spin,
	.lp-rotary-svg .lp-rotary-head,
	.lp-batch-mark {
		animation: none;
	}
	.lp-batch-mark {
		opacity: 1;
	}
}

/* ------------------------------ Start where ----------------------------- */

.lp-entries {
	display: grid;
	gap: var(--sv-3);
}
.lp-entry {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
	gap: var(--sv-4);
	align-items: center;
	padding: var(--sv-4) var(--sv-5);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background-color: var(--sv-surface);
	background-image: var(--sv-texture-carbon);
}
.lp-entry p {
	margin: 0;
}
.lp-entry-said {
	font-family: var(--sv-font-display);
	font-size: var(--sv-body-l);
	font-weight: 500;
	color: var(--sv-text);
}
.lp-entry-route {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-2) var(--sv-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
.lp-entry-route li {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-mist-300);
	padding: 5px 10px;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-bg-sunken);
	display: flex;
	align-items: center;
	gap: var(--sv-3);
}
.lp-entry-route li + li::before {
	content: "→";
	color: var(--sv-titanium-deep);
	margin-left: calc(var(--sv-3) * -1 + 2px);
}
.lp-entry-route li.is-other {
	border-style: dashed;
	color: var(--sv-text-muted);
}

/* ------------------------------ The finder ------------------------------ */

.lp-tool-band {
	display: grid;
	gap: var(--sv-5);
}
.lp-tool-note {
	margin: 0;
	max-width: 68ch;
}

/* ------------------------------ Project size ---------------------------- */

.lp-size {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sv-5);
	text-align: center;
	padding: clamp(var(--sv-6), 5vw, var(--sv-9)) var(--sv-5);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background-color: var(--sv-surface);
	background-image: var(--sv-texture-carbon);
}
.lp-size h2 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.024em;
	color: var(--sv-text);
}
.lp-size h2 em {
	display: block;
	font-style: normal;
	color: var(--sv-mist-300);
}
.lp-size p {
	margin: 0;
	max-width: 62ch;
}

/* -------------------------------- Closing ------------------------------- */

/* The shared closing block assumes a short second line. This chapter closes
   on five of them, so they are held a step below the headline rather than
   set at the same size, where they would compete with it. */
[data-sv-capability="laser-processing"] .sc-close h2 em {
	margin: var(--sv-4) auto 0;
	max-width: 30ch;
	font-size: clamp(1.05rem, 1.8vw, 1.45rem);
	line-height: 1.34;
	letter-spacing: -0.006em;
}

/* ------------------------------ Responsive ------------------------------ */

@media (max-width: 1080px) {
	.lp-motif-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.lp-sequence.is-4,
	.lp-sequence.is-5 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.lp-sequence .sc-stage:nth-child(3n + 1)::before {
		display: none;
	}
	.lp-detail,
	.lp-industrial,
	.lp-safety {
		grid-template-columns: minmax(0, 1fr);
	}
	.lp-detail.is-flipped .lp-detail-art {
		order: 0;
	}
}

@media (max-width: 860px) {
	.lp-split,
	.lp-core {
		grid-template-columns: minmax(0, 1fr);
	}
	.lp-mats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.lp-sequence.is-4,
	.lp-sequence.is-5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.lp-sequence .sc-stage::before {
		display: none;
	}
	.lp-entry {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sv-3);
	}
}

@media (max-width: 640px) {
	.lp-motif-list,
	.lp-mats {
		grid-template-columns: minmax(0, 1fr);
	}
	.lp-sequence.is-4,
	.lp-sequence.is-5 {
		grid-template-columns: minmax(0, 1fr);
	}
	.lp-marks li {
		flex-direction: column;
		gap: var(--sv-2);
	}
	/* "Discuss branding / personalisation" and "Start a laser project" are
	   long labels. Held on one line they set the grid wider than a phone,
	   so on a phone they wrap. */
	[data-sv-capability="laser-processing"] .sc-actions .sv-btn,
	[data-sv-capability="laser-processing"] .sc-close-actions .sv-btn {
		white-space: normal;
		text-align: center;
	}
	/* The hero drawing renders about a third of its design width on a phone,
	   which is too small for its call-outs. The annotation text and the
	   leaders that point at it stand down; the phase read-out and the path
	   counter tell the story instead. */
	.lp-sheet-note,
	.lp-sheet,
	.lp-lead,
	.lp-lead-note {
		display: none;
	}
	.lp-hero-svg text {
		display: none;
	}
	.lp-hero-svg [data-lp-phase] {
		display: block;
		font-size: 34px;
		letter-spacing: 4px;
	}
	.lp-hero-svg [data-lp-counter] {
		display: block;
		font-size: 21px;
		letter-spacing: 2.4px;
	}
}