/*
 * form-band.css — a form presented on a pale band: reassurance left, the form
 * on a white panel right. Shared by Yhteystiedot (D5) and Tarjouspyyntö (D6),
 * so the site's two forms can never drift apart in presentation.
 */

.form-band {
	background: var(--bg-alt);
}

/*
 * On the quote page the form is the whole page, so the band lands directly
 * against the (also pale) page hero and the two merge into one flat block.
 * There, the page keeps its own background and the white panel does the
 * framing on its own.
 */
.page-hero + .form-band {
	background: var(--bg);
}

.form-band__split {
	display: grid;
	gap: var(--s-12);
	align-items: start;
}

.form-band__title {
	margin: 0 0 var(--s-4);
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 500;
}

.form-band__lead {
	margin: 0 0 var(--s-8);
	max-width: 50ch;
	color: var(--text-muted);
}

.form-band__lead:last-child {
	margin-bottom: 0;
}

/* The other ways in, as quiet hairline rows beside the form. */
.form-band__alt {
	margin: 0;
	max-width: 26rem;
}

.form-band__alt-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s-2) var(--s-4);
	padding-block: var(--s-3);
	border-top: 1px solid var(--line);
}

.form-band__alt-row:last-child {
	border-bottom: 1px solid var(--line);
}

.form-band__alt-row dt {
	font-size: var(--fs-small);
	color: var(--text-muted);
}

.form-band__alt-row dd {
	margin: 0;
}

/* The form itself sits on a white panel so the band frames it. */
.form-band__panel {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(var(--s-6), 4vw, var(--s-12));
	box-shadow: var(--shadow-soft);
}

.form-band__panel .form-block {
	max-width: none;
}

@media (min-width: 900px) {
	/* Asymmetric 5/7: the form carries the weight, the intro supports. */
	.form-band__split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(var(--s-12), 5vw, var(--s-24));
	}

	/*
	 * The intro is much shorter than the form, which left a tall dead column
	 * beside it. Sticking it keeps the reassurance — and the phone number —
	 * beside whichever field the visitor has reached.
	 */
	.form-band__intro {
		position: sticky;
		top: calc(104px + var(--s-8));
	}
}