/*
 * Service page (Figma «Послуга» 17:2226 desktop, 17:1283 mobile), single-bti_service.php.
 * Phones: one column (content, price card, documents, steps, FAQ). From 1024 px: a 700 px
 * main column and the price card on the right, sticky while the column scrolls.
 */

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

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

.service-hero__row {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.service-hero__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.service-hero__title,
.service-hero__lead {
	margin: 0;
}

.service-hero__lead {
	color: var(--c-graphite-soft);
}

.service-hero__aside {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

/* Stamp: «ціна / від 1 500 грн», «термін / 3 дні». */
.service-stamp {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
	margin: 0;
}

.service-stamp__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.service-stamp dt,
.service-stamp dd {
	margin: 0;
	font-family: var(--font-measure);
	font-weight: 500;
	word-spacing: var(--ws-measure);
	white-space: nowrap;
}

.service-stamp dt {
	color: var(--c-graphite-soft);
	font-size: var(--fs-measure-s);
	line-height: var(--lh-measure-s);
}

.service-stamp dd {
	color: var(--c-graphite);
	font-size: var(--fs-measure-l);
	line-height: var(--lh-measure-l);
}

.service-hero__buttons {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* ---------- Main: content, price card, documents, steps, FAQ ---------- */
.service-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 40px;
	padding-bottom: 48px;
}

.service-main > * {
	min-width: 0;
}

.service-main h2 {
	margin: 0 0 20px;
}

.service-content > :first-child {
	margin-top: 0;
}

.service-content > :last-child {
	margin-bottom: 0;
}

.service-content h2 {
	margin: 0 0 14px;
}

.service-content > * + h2 {
	margin-top: 40px;
}

.service-content p {
	margin: 0 0 14px;
}

.service-steps .bti-steps {
	margin: 0;
	row-gap: 28px;
}

.service-faq h2 {
	margin-bottom: var(--space-1);
}

.service-faq .bti-faq {
	margin: 0;
}

/*
 * Price card: fallback of the calculator slot when bti-core does not hook its calculator in.
 * bti/calculator (bti-core blocks/calculator/style.css) draws the same card.
 */
.bti-price-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px 20px;
	border: 1.5px solid var(--c-graphite);
	border-radius: var(--radius);
	background: var(--c-sheet);
}

.bti-price-card > * {
	margin: 0;
}

.bti-price-card__title {
	margin: 0;
}

.service-main .bti-price-card__title {
	margin: 0;
}

.bti-price-card__service {
	margin-top: -12px;
	color: var(--c-graphite-soft);
	font-family: var(--font-measure);
	word-spacing: var(--ws-measure);
	font-size: var(--fs-measure);
	font-weight: 500;
	line-height: var(--lh-measure);
}

.bti-price-card__result {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: var(--space-4);
	border-top: 1px solid var(--c-hatch);
}

.bti-price-card__result .bti-dim {
	width: 100%;
}

.bti-price-card__note {
	margin: 0;
	color: var(--c-graphite-soft);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

/* Documents checklist («Чекліст документів» 13:1215). */
.bti-checklist {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.service-main .bti-checklist__title {
	margin: 0;
}

.bti-checklist__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bti-checklist__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	color: var(--c-graphite);
	font-size: 17px;
	line-height: 26px;
	cursor: pointer;
}

.bti-checklist__box {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 4px 0 0;
	border: 1.5px solid var(--c-graphite);
	border-radius: var(--radius);
	background: var(--c-sheet);
	appearance: none;
	cursor: pointer;
}

.bti-checklist__box:checked {
	border-color: var(--c-graphite);
	background: var(--c-graphite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.bti-checklist__box:checked + span {
	color: var(--c-graphite-soft);
}

.bti-checklist__box:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

.bti-checklist__print {
	align-self: flex-start;
	min-height: 44px;
	padding-block: 4px;
}

.bti-checklist__print[hidden] {
	display: none;
}

/* Contacts printed under the checklist only (print.css). */
.bti-print-contacts {
	display: none;
}

/* ---------- Order: copy + the order form for this service ---------- */
.service-order {
	padding-block: 40px;
	background: var(--c-ink-tint);
}

.service-order__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.service-order__intro {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.service-order__intro > * {
	margin: 0;
}

.service-order__lead {
	color: var(--c-graphite-soft);
}

.service-order__contacts {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.service-order__contacts li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.service-order__contacts svg {
	flex: none;
	width: 24px;
	height: 24px;
	margin-top: calc((var(--lh-body) - 24px) / 2);
}

.service-order__contacts a {
	color: var(--c-graphite);
	text-decoration: none;
}

.service-order__contacts a:hover {
	color: var(--c-ink);
	text-decoration: underline;
}

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

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

/* ---------- Related articles ---------- */
.service-articles {
	padding-block: 40px;
}

.service-articles h2 {
	margin: 0 0 20px;
}

.service-articles .bti-card-grid {
	margin: 0;
}

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
	.service-hero__buttons {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
	.service-hero {
		padding: 40px 0 56px;
	}

	.service-hero__inner {
		gap: 28px;
	}

	.service-hero__row {
		flex-direction: row;
		align-items: flex-end;
		gap: var(--space-8);
	}

	.service-hero__text {
		flex: 0 1 720px;
	}

	.service-hero__aside {
		flex: 1 1 0;
		min-width: 0;
	}

	.service-main {
		grid-template-columns: minmax(0, 700px) minmax(0, 1fr);
		column-gap: var(--space-8);
		row-gap: 0;
		padding-bottom: 72px;
	}

	/* Left column: every section after the first starts 56 px lower. */
	.service-main > :not(.service-aside) {
		grid-column: 1;
	}

	.service-main > :not(.service-aside) ~ :not(.service-aside) {
		margin-top: 56px;
	}

	.service-main h2 {
		margin-bottom: 20px;
	}

	/* The card spans the whole column and stays in view while the left column scrolls. */
	.service-aside {
		grid-column: 2;
		grid-row: 1 / span 5;
		align-self: stretch;
	}

	.service-aside__inner {
		position: sticky;
		top: var(--sticky-top);
	}

	.service-order {
		padding-block: 72px;
	}

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

	/* The heading and text stay in view while the form scrolls past. */
	.service-order__intro {
		flex: 0 0 460px;
		position: sticky;
		top: var(--sticky-top);
	}

	.service-order__form {
		flex: 1 1 auto;
	}

	.service-articles {
		padding-block: 72px;
	}

	.service-articles h2 {
		margin-bottom: var(--space-6);
	}
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.service-order__form) {
		scroll-behavior: smooth;
	}
}