/**
 * HTPLaw Process Steps widget ("How HTPLaw consultation works").
 *
 * Measured from the 4x Figma export (design px, section top = 0 at y4207,
 * height 498): #f5f7f9 band. Eyebrow centre 69.5; heading 43/50 (−3%) at
 * 103. Steps 309.75px wide on a 378px pitch, each topped by a 2px #24597f
 * rule at 187; "STEP n" Source Serif 4 400 14px, ~6% tracking, uppercase,
 * centred at 231.5; title Source Serif 4 600 20/27 at 248.5; text Inter
 * 17/23 −3% at 282; optional button (223×42, 6px radius) 34px below the
 * text. Bottom padding 117 below the step 1 button. All text #0e1b2c.
 *
 * Figma's button copper is #b87333; it uses the AA-compliant copper here.
 * Below 900px the steps stack (not in Figma).
 */

.htplaw-ps {
	--_bg: var(--htplaw-ps-bg, var(--htplaw-color-muted));
	--_rule: var(--htplaw-ps-rule, var(--htplaw-color-blue));

	padding-top: var(--htplaw-ps-pad-top, 59px);
	padding-bottom: var(--htplaw-ps-pad-bottom, 117px);
	background: var(--_bg);
}

.htplaw-ps__eyebrow {
	margin-bottom: 23px;
	text-transform: uppercase;
}

.htplaw-ps .htplaw-ps__title {
	margin-bottom: 34px;
}

/* Steps share the container width (Figma: 309.75px steps in its 1100px layout). */
.htplaw-ps__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(24px, 4vw, 68.25px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.htplaw-ps__step {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: 32px;
	border-top: 2px solid var(--_rule);
	color: var(--htplaw-color-primary);
}

.htplaw-ps__label {
	margin: 0;
	font-family: var(--htplaw-font-heading);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .06em;
	line-height: 21px;
	text-transform: uppercase;
}

/* (0,2,0) beats the Elementor kit's .elementor-kit-N h3 rule. */
.htplaw-ps .htplaw-ps__step-title {
	margin: 7px 0 0;
	color: inherit;
	font-family: var(--htplaw-font-heading);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 27px;
}

.htplaw-ps__text {
	margin: 6px 0 0;
	font-family: var(--htplaw-font-body);
	font-size: 17px;
	letter-spacing: -.03em;
	line-height: 23px;
}

.htplaw-ps__button {
	margin-top: 34px;
}

@media (max-width: 900px) {
	.htplaw-ps {
		padding-top: var(--htplaw-ps-pad-top, 56px);
		padding-bottom: var(--htplaw-ps-pad-bottom, 64px);
	}

	.htplaw-ps__list {
		grid-template-columns: minmax(0, 560px);
		row-gap: 36px;
	}

	.htplaw-ps__step {
		padding-top: 24px;
	}

	.htplaw-ps__button {
		margin-top: 24px;
	}
}

@media (max-width: 480px) {
	.htplaw-ps__button {
		align-self: stretch;
	}
}

/* Mobile spacing: section padding is capped at the shared mobile token
   (variables.css), so large desktop values set in Elementor don't carry
   over to tablets and phones; smaller custom values are kept. */
@media (max-width: 900px) {
	.htplaw-ps {
		padding-top: min(var(--htplaw-ps-pad-top, var(--htplaw-space-section)), var(--htplaw-space-section));
		padding-bottom: min(var(--htplaw-ps-pad-bottom, var(--htplaw-space-section)), var(--htplaw-space-section));
	}
}