/**
 * HTPLaw Booking Steps widget ("How booking works").
 *
 * Not in Figma: built from the client's booking-page screenshot
 * (2026-10-31). Heading uses the shared sans section heading
 * (.htplaw-heading-lg). Steps aren't links, so no design has a hover state.
 * Three designs (Design control, .htplaw-bs--{design}):
 *
 * - Cards (default): made to sit under Consultation Cards and shares their
 *   look: #f5f7f9 cards, 1px #d9d9d9 border, 6px radius. Copper serif
 *   number in a 36px ring; a faint copper line runs from each ring towards
 *   the next card. Two columns on tablets, one on phones (number beside
 *   the text).
 * - Timeline: no cards. Filled copper dots joined by a grey line, text
 *   below. Vertical (dots down the left) below 900px.
 * - Navy panel: navy band, large copper serif numbers ("01"), steps split
 *   by thin light rules, light text. Stacks below 900px.
 *
 * Default top padding is small because the widget usually follows
 * Consultation Cards, whose bottom padding already separates them. The navy
 * panel is its own band, so it gets full padding.
 */

.htplaw-bs {
	--_bg: var(--htplaw-bs-bg, var(--htplaw-color-surface));
	--_card-bg: var(--htplaw-bs-card-bg, var(--htplaw-color-muted));
	--_card-border: var(--htplaw-bs-card-border, #d9d9d9);
	--_number: var(--htplaw-bs-number, var(--htplaw-color-accent-strong));
	--_text: var(--htplaw-color-text);
	--_gap: 24px;

	padding-top: var(--htplaw-bs-pad-top, 8px);
	padding-bottom: var(--htplaw-bs-pad-bottom, 80px);
	background: var(--_bg);
}

.htplaw-bs__list {
	display: grid;
	grid-template-columns: repeat(var(--htplaw-bs-columns, 4), minmax(0, 1fr));
	gap: var(--_gap);
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.htplaw-bs__list:first-child {
	margin-top: 0;
}

.htplaw-bs__step {
	position: relative;
	color: var(--htplaw-color-primary);
}

.htplaw-bs__number {
	display: grid;
	place-items: center;
	color: var(--_number);
	font-family: var(--htplaw-font-heading);
	font-weight: 600;
	line-height: 1;
}

.htplaw-bs__text {
	margin: 18px 0 0;
	color: var(--_text);
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	line-height: 1.55;
}

/* ---- Cards ---- */

.htplaw-bs--cards .htplaw-bs__step {
	padding: 24px 24px 26px;
	border: 1px solid var(--_card-border);
	border-radius: var(--htplaw-radius);
	background: var(--_card-bg);
}

.htplaw-bs--cards .htplaw-bs__number {
	width: 36px;
	height: 36px;
	border: 1px solid var(--_number);
	border-radius: 50%;
	background: var(--htplaw-color-surface);
	font-size: 17px;
}

/* Sequence line: from the ring to the card's edge and across the gap. */
.htplaw-bs--cards .htplaw-bs__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 42px; /* 24px padding + half the 36px ring */
	left: 72px; /* 24px padding + ring + 12px space */
	right: calc(-1 * var(--_gap) - 1px);
	height: 1px;
	background: linear-gradient(90deg, var(--_number), rgb(143 90 40 / 0%));
	opacity: .45;
}

/* ---- Timeline ---- */

.htplaw-bs--timeline {
	--_gap: 32px;
}

.htplaw-bs--timeline .htplaw-bs__list {
	margin-top: 28px;
}

.htplaw-bs--timeline .htplaw-bs__step {
	padding-right: 8px;
}

.htplaw-bs--timeline .htplaw-bs__number {
	position: relative;
	z-index: 1;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--_number); /* white text on #8f5a28: 5.7:1 */
	box-shadow: 0 0 0 6px var(--_bg); /* gap where the line meets the dot */
	color: var(--htplaw-color-on-dark);
	font-size: 18px;
}

/* Line from this dot to the next one. */
.htplaw-bs--timeline .htplaw-bs__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 20px;
	left: 40px;
	right: calc(-1 * var(--_gap));
	height: 2px;
	margin-top: -1px;
	background: var(--_card-border);
}

.htplaw-bs--timeline .htplaw-bs__text {
	margin-top: 20px;
}

/* ---- Navy panel ---- */

.htplaw-bs--navy {
	--_bg: var(--htplaw-bs-bg, var(--htplaw-color-primary));
	--_number: var(--htplaw-bs-number, var(--htplaw-color-accent-on-dark)); /* 5.5:1 on navy */
	--_text: rgb(245 247 249 / 84%);
	--htplaw-heading-color: var(--htplaw-color-on-dark);
	--_gap: 0px;

	padding-top: var(--htplaw-bs-pad-top, 64px);
	padding-bottom: var(--htplaw-bs-pad-bottom, 72px);
}

.htplaw-bs--navy .htplaw-bs__list {
	margin-top: 36px;
}

.htplaw-bs--navy .htplaw-bs__step {
	padding: 4px 28px 4px;
	border-left: 1px solid rgb(245 247 249 / 16%);
}

.htplaw-bs--navy .htplaw-bs__step:first-child {
	padding-left: 0;
	border-left: 0;
}

.htplaw-bs--navy .htplaw-bs__number {
	justify-content: start;
	font-size: 40px;
	letter-spacing: -.02em;
}

.htplaw-bs--navy .htplaw-bs__text {
	margin-top: 16px;
}

/* ---- Smaller screens ---- */

@media (max-width: 1200px) {
	.htplaw-bs--cards .htplaw-bs__step {
		padding: 22px 20px 24px;
	}

	.htplaw-bs--cards .htplaw-bs__step:not(:last-child)::after {
		top: 40px;
		left: 68px;
	}

	.htplaw-bs--navy .htplaw-bs__step {
		padding-inline: 20px;
	}
}

@media (max-width: 900px) {
	.htplaw-bs {
		padding-bottom: min(var(--htplaw-bs-pad-bottom, 80px), var(--htplaw-space-section));
	}

	.htplaw-bs--navy {
		padding-top: min(var(--htplaw-bs-pad-top, 64px), var(--htplaw-space-section));
	}

	/* Cards: two columns; the sequence line would point at the wrong card. */
	.htplaw-bs--cards .htplaw-bs__list {
		grid-template-columns: repeat(min(2, var(--htplaw-bs-columns, 4)), minmax(0, 1fr));
		gap: 16px;
	}

	.htplaw-bs--cards .htplaw-bs__step:not(:last-child)::after {
		content: none;
	}

	/* Timeline: vertical, dots down the left. */
	.htplaw-bs--timeline .htplaw-bs__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.htplaw-bs--timeline .htplaw-bs__step {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 18px;
		align-items: start;
		padding-right: 0;
	}

	.htplaw-bs--timeline .htplaw-bs__step:not(:last-child)::after {
		top: 40px;
		bottom: -28px;
		left: 20px;
		right: auto;
		width: 2px;
		height: auto;
		margin: 0 0 0 -1px;
	}

	.htplaw-bs--timeline .htplaw-bs__text {
		margin-top: 8px;
	}

	/* Navy: one per line, split by rules above. */
	.htplaw-bs--navy .htplaw-bs__list {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 24px;
	}

	.htplaw-bs--navy .htplaw-bs__step,
	.htplaw-bs--navy .htplaw-bs__step:first-child {
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr);
		align-items: baseline;
		padding: 20px 0;
		border-left: 0;
		border-top: 1px solid rgb(245 247 249 / 16%);
	}

	.htplaw-bs--navy .htplaw-bs__number {
		display: block;
		font-size: 30px;
	}

	.htplaw-bs--navy .htplaw-bs__text {
		margin-top: 0;
	}
}

/* Cards on phones: one per line, number beside the text. */
@media (max-width: 560px) {
	.htplaw-bs--cards .htplaw-bs__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.htplaw-bs--cards .htplaw-bs__step {
		display: grid;
		grid-template-columns: 36px minmax(0, 1fr);
		column-gap: 16px;
		align-items: start;
		padding: 18px 18px 20px;
	}

	.htplaw-bs--cards .htplaw-bs__text {
		margin-top: 6px;
	}
}