/**
 * How It Works — template-parts/how-it-works.php, front-page.php only,
 * directly after the catalog showcase.
 *
 * Reused as-is, nothing redefined: color/spacing/type/radius tokens,
 * .container, .section, .badge (as the base for the numeral marker — see
 * .how-it-works__number below), .section-label, .link-arrow (the CTA's
 * icon-shift-on-hover behavior — promoted to main.css while building
 * template-parts/devices.php, which needed the same pattern;
 * .how-it-works__cta now only adds this section's own margin-top), get_icon().
 * No new tokens.
 *
 * Marker shape: SHARP, not circular — this brief explicitly calls for
 * "numeral badges (sharp-cornered, not circular pills)," and the icon
 * ring follows the same rule for visual consistency (a circular ring +
 * sharp badge would look like two different systems). The connector is a
 * solid 2px ACCENT line, not Midnight Broadcast's dashed neutral one —
 * a bolder "signal path" reads more purposeful than a quiet diagram
 * line, closer to this brand's energy.
 *
 * Mobile-first: the vertical step layout + vertical connector is the
 * default (no media query), and the horizontal 3-column layout with a
 * horizontal connector is the >= 1024px override — same breakpoint and
 * "mobile is the default, override upward" convention used throughout
 * this theme's other CSS files.
 */

.how-it-works__header {
	max-width: 60ch;
	margin-inline: auto;
	margin-bottom: var(--space-9);
	text-align: center;
}

.how-it-works__subcopy {
	margin-top: var(--space-4);
	font-size: var(--fs-md);
	line-height: var(--lh-md);
}

/* =========================================================
   Step list — a real <ol> (see the template's docblock for why),
   visually laid out as a vertical stack on mobile and a 3-column row on
   desktop. gap stays var(--space-6) in both directions so the connector
   pseudo-elements below (sized to match) line up exactly with the real
   gap, whichever orientation is active.
   ========================================================= */

.how-it-works__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-9);
}

.how-it-works__step {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
}

@media (min-width: 1024px) {
	.how-it-works__list {
		flex-direction: row;
	}

	.how-it-works__step {
		flex: 1;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
	}
}

/* =========================================================
   Marker — sharp icon "ring" (square, not circular) + overlapping sharp
   numeral badge. The connector line is a ::after on this element:
   purely decorative, not a DOM node, so it can't land in reading/focus
   order at all.
   ========================================================= */

.how-it-works__marker {
	position: relative;
	flex-shrink: 0;
	width: 3.5rem;
	height: 3.5rem;
}

.how-it-works__icon-ring {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: var(--radius-lg);
	background: var(--color-surface-2);
	border: 1px solid var(--color-border);
	color: var(--color-accent);
}

/* Numeral badge: reuses .badge's own fill/border/ink custom properties
   (via badge--accent in the markup) for color, only overriding shape/size
   — the base .badge is a pill sized for text, not a single-character
   square. Sharp corners (radius-sm), not a circle. */
.how-it-works__number {
	position: absolute;
	top: -0.375rem;
	right: -0.375rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border-radius: var(--radius-sm);
	font-size: var(--fs-xs);
	text-transform: none;
	letter-spacing: normal;
}

/* Connector — mobile default: solid accent line running down from this
   marker to the next step's. Purely decorative, border-only. */
.how-it-works__step:not(:last-child) .how-it-works__marker::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: var(--space-6);
	border-left: 2px solid var(--color-accent);
	transform: translateX(-50%);
}

@media (min-width: 1024px) {
	/* Desktop: same connector, flipped to horizontal — spans from this
	   marker's right edge across the column gap to the next one. */
	.how-it-works__step:not(:last-child) .how-it-works__marker::after {
		top: 50%;
		left: 100%;
		width: var(--space-6);
		height: 0;
		border-left: none;
		border-top: 2px solid var(--color-accent);
		transform: translateY(-50%);
	}
}

.how-it-works__step-content {
	padding-top: var(--space-1);
}

.how-it-works__step-title {
	font-size: var(--fs-lg);
	line-height: var(--lh-lg);
}

.how-it-works__step-description {
	margin-top: var(--space-2);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
}

/* =========================================================
   Footer — reassurance line + link. Centered on purpose, unlike the
   left-aligned section header above: this closes out a visually
   symmetric 3-column row, so a centered closing line completes that
   symmetry rather than fighting it.
   ========================================================= */

.how-it-works__footer {
	text-align: center;
}

.how-it-works__reassurance {
	font-weight: var(--fw-semibold);
	color: var(--color-text);
}

/* Layout/hover behavior lives in main.css's .link-arrow now — this only
   adds the section's own spacing. */
.how-it-works__cta {
	margin-top: var(--space-3);
}