/*
 * Prices page (Figma «Ціни» 18:1465 desktop, 18:1283 mobile), pattern bti-child/prices.
 * Sections: title, the price table (bti/price-table), «Як рахуємо» on the sheet background,
 * the calculator (bti/calculator) beside the order form.
 */

.prices-section {
	padding-block: 40px;
}

:where(.prices-section) h2 {
	margin: 0 0 20px;
}

:where(.prices-section) p {
	margin: 0;
}

/* ---------- Title ---------- */
.prices-hero {
	padding: 20px 0 28px;
}

.prices-hero__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.prices-hero__inner > * {
	margin: 0;
}

.prices-hero__title {
	max-width: 800px;
}

.prices-hero__lead {
	max-width: 800px;
	margin-top: -4px;
	color: var(--c-graphite-soft);
}

/* ---------- Table ---------- */
.prices-table {
	padding-top: 0;
}

/* ---------- How we count ---------- */
.prices-how {
	background: var(--c-sheet);
}

.prices-how__inner > * {
	max-width: 800px;
}

.prices-how__lead {
	margin-bottom: var(--space-4);
}

.prices-how__list {
	margin: 0 0 var(--space-4);
}

.prices-how__note {
	color: var(--c-graphite-soft);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

/* ---------- Calculator and order form ---------- */
.prices-order__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.prices-order__calc,
.prices-order__main {
	min-width: 0;
}

.prices-order__main {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.prices-order__intro h2 {
	margin-bottom: 14px;
}

.prices-order__intro p {
	color: var(--c-graphite-soft);
}

.prices-order__form {
	scroll-margin-top: var(--space-4);
	min-width: 0;
}

.prices-order__form .bti-order-form {
	max-width: none;
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
	.prices-section {
		padding-block: 72px;
	}

	.prices-hero {
		padding: 40px 0 56px;
	}

	.prices-hero__inner {
		gap: 28px;
	}

	.prices-hero__lead {
		margin-top: -12px;
	}

	.prices-table {
		padding-top: 0;
	}

	:where(.prices-section) h2 {
		margin-bottom: 28px;
	}

	.prices-order__inner {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--space-8);
	}

	/* The calculator stays in view beside the longer form, as in the service page aside. */
	.prices-order__calc {
		flex: 0 0 420px;
		position: sticky;
		top: var(--sticky-top);
	}

	.prices-order__main {
		flex: 1 1 0;
		gap: 28px;
	}
}