/*
 * UI kit components (Figma «_components» 3:2). Markup comes from inc/components.php;
 * patterns can put the same classes on core blocks. Component type is fixed (it does not
 * follow the 1024 px type switch): titles 20/26, text 15/22 or 17/26, as in Figma.
 */

/* Shared: a link whose click area covers its positioned card. */
.bti-stretched-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bti-stretched-link:focus-visible {
	outline: none;
}

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

/* Card grid: 1 column, 2 from 768 px, 3 from 1024 px (3 × 384 + 2 × 24 = 1200). */
.bti-card-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
	margin: 0 0 var(--space-4);
	padding: 0;
	list-style: none;
}

.bti-card-grid > li {
	display: flex;
	margin: 0;
}

.bti-card-grid > li > * {
	flex: 1 1 auto;
}

@media (min-width: 768px) {
	.bti-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-5);
	}
}

@media (min-width: 1024px) {
	.bti-card-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * Photo («Фото» 3:79). The wrapper sets the shape: 5:3 by default; contexts override
 * aspect-ratio or height. Placeholder: hatch fill, 1 px lines at 45° every 10 px
 * (colour --c-hatch-line, written into the SVG tile), caption box bottom-left.
 */
.bti-photo {
	position: relative;
	overflow: hidden;
	aspect-ratio: 5 / 3;
	margin: 0;
	border-radius: var(--radius);
	background-color: var(--c-hatch);
}

.bti-photo--placeholder {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M-1 1L1 -1M0 10L10 0M9 11L11 9' stroke='%23C2CBD4' stroke-width='1'/%3E%3C/svg%3E");
	background-size: 10px 10px;
}

.bti-photo__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bti-photo__caption {
	position: absolute;
	left: 12px;
	bottom: 12px;
	max-width: min(236px, 100% - 24px);
	padding: 4px 8px;
	background: var(--c-sheet);
	color: var(--c-graphite);
	font-family: var(--font-measure);
	word-spacing: var(--ws-measure);
	font-size: var(--fs-measure-s);
	line-height: var(--lh-measure-s);
}

/* Category label: icon + name in ink; the «change» icon (stairs, перепланування) is red. */
.bti-cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--c-ink);
	font-size: var(--fs-label);
	line-height: var(--lh-label);
	font-weight: 500;
}

.bti-cat__icon {
	width: 20px;
	height: 20px;
}

.bti-cat--stairs .bti-cat__icon {
	color: var(--c-change);
}

.bti-cat a {
	color: inherit;
	text-decoration: none;
}

.bti-cat a:hover {
	text-decoration: underline;
}

/* Article card («Картка статті» 4:21): photo 200 px, text 16 px padding. */
.bti-article-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--c-hatch);
	border-radius: var(--radius);
	background: var(--c-sheet);
	transition: border-color 0.15s ease;
}

.bti-article-card:hover {
	border-color: var(--c-line);
}

.bti-article-card__photo {
	flex: none;
	aspect-ratio: auto;
	height: 200px;
	border-radius: 0;
}

.bti-article-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: var(--space-4);
}

.bti-article-card__body > * {
	margin: 0;
}

.bti-article-card__title {
	font-size: 20px;
	line-height: 26px;
	font-weight: 500;
	letter-spacing: -0.005em;
	text-wrap: pretty;
}

.bti-article-card__title a {
	color: var(--c-graphite);
	text-decoration: none;
}

.bti-article-card:hover .bti-article-card__title a {
	color: var(--c-ink);
}

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

.bti-article-card__meta {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: auto !important;
	padding-top: 10px;
	border-top: 1px solid var(--c-hatch);
	color: var(--c-graphite-soft);
	font-family: var(--font-measure);
	word-spacing: var(--ws-measure);
	font-size: var(--fs-measure-s);
	line-height: var(--lh-measure-s);
}

.bti-article-card__meta time {
	flex: none;
}

/* Article stamp («Штамп статті» 3:63): a drawing title block. */
.bti-stamp {
	max-width: 100%;
	margin: 0 0 var(--space-4);
	border: 1px solid var(--c-graphite);
	background: var(--c-sheet);
}

.bti-stamp__row {
	display: flex;
}

.bti-stamp__row + .bti-stamp__row {
	border-top: 1px solid var(--c-graphite);
}

.bti-stamp dt,
.bti-stamp dd {
	margin: 0;
	padding: 6px 10px;
}

.bti-stamp dt {
	flex: none;
	width: 96px;
	border-right: 1px solid var(--c-graphite);
	color: var(--c-graphite-soft);
	font-family: var(--font-measure);
	word-spacing: var(--ws-measure);
	font-size: var(--fs-measure-s);
	line-height: var(--lh-measure-s);
}

.bti-stamp dd {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--c-graphite);
	font-size: var(--fs-label);
	line-height: var(--lh-label);
	font-weight: 500;
}

.bti-stamp__measure {
	font-family: var(--font-measure);
	word-spacing: var(--ws-measure);
	font-size: var(--fs-measure);
	line-height: var(--lh-measure);
	font-weight: 500;
}

/* Chips («Рубрика» 4:15): Default and Active. */
.bti-chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bti-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background: var(--c-sheet);
	color: var(--c-graphite);
	font-size: var(--fs-label);
	line-height: var(--lh-label);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.bti-chip:hover {
	border-color: var(--c-graphite);
	color: var(--c-graphite);
	text-decoration: none;
}

.bti-chip__count {
	color: var(--c-graphite-soft);
	font-family: var(--font-measure);
	word-spacing: var(--ws-measure);
	font-size: var(--fs-measure-s);
	line-height: var(--lh-measure-s);
	font-weight: 400;
}

.bti-chip.is-active {
	border-color: var(--c-graphite);
	background: var(--c-graphite);
	color: var(--c-sheet);
}

.bti-chip.is-active .bti-chip__count {
	color: var(--c-hatch);
}

/* Phones: one row that scrolls sideways to the screen edges («Рубрики (скрол)» in 8:841). */
@media (max-width: 767.98px) {
	/* The row's length must not widen grid/flex ancestors: the nav takes its width from the parent. */
	.bti-chips {
		contain: inline-size;
	}

	.bti-chips__list {
		flex-wrap: nowrap;
		margin-inline: calc(-1 * var(--gutter));
		padding: 2px var(--gutter);
		overflow-x: auto;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}

	.bti-chips__list::-webkit-scrollbar {
		display: none;
	}

	.bti-chips__list > li {
		flex: none;
	}
}

@media (min-width: 768px) {
	.bti-chip {
		min-height: 40px;
	}
}

/* Search («Пошук» 4:16): the form is the bordered 52 px box. */
.bti-search {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: var(--field-h);
	padding: 0 14px;
	border: 1px solid var(--c-graphite);
	border-radius: var(--radius);
	background: var(--c-sheet);
	color: var(--c-graphite);
}

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

.bti-search__icon {
	width: 24px;
	height: 24px;
}

.bti-search .bti-search__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: calc(var(--field-h) - 2px);
	padding: 0;
	border: 0;
	background: transparent;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

.bti-search .bti-search__input:focus,
.bti-search .bti-search__input:focus-visible {
	outline: none;
}

.bti-search__input::placeholder {
	color: var(--c-graphite-soft);
	opacity: 1;
}

.bti-search__input::-webkit-search-decoration {
	appearance: none;
}

/* Breadcrumbs («Хлібні крихти» 12:957). */
.bti-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

.bti-breadcrumbs li {
	display: inline-flex;
	gap: var(--space-2);
	color: var(--c-graphite-soft);
}

.bti-breadcrumbs li + li::before {
	content: "/";
	color: var(--c-line);
}

.bti-breadcrumbs a {
	color: var(--c-ink);
	text-decoration: none;
}

.bti-breadcrumbs a:hover {
	text-decoration: underline;
}

/* Steps («Крок» 12:935): 1 column, 2 from 768 px, 4 from 1024 px; number by CSS counter. */
.bti-steps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-5);
	margin: 0 0 var(--space-4);
	padding: 0;
	list-style: none;
	counter-reset: bti-step;
}

.bti-steps > * {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding-top: var(--space-4);
	border-top: 1.5px solid var(--c-graphite);
	counter-increment: bti-step;
}

.bti-steps > *::before {
	content: counter(bti-step);
	color: var(--c-ink);
	font-family: var(--font-measure);
	word-spacing: var(--ws-measure);
	font-size: var(--fs-measure-l);
	font-weight: 500;
	line-height: var(--lh-measure-l);
}

.bti-steps > * > * {
	margin: 0;
}

.bti-steps > * > :is(h2, h3, h4, .bti-step__title) {
	font-size: 20px;
	line-height: 26px;
	font-weight: 500;
	letter-spacing: -0.005em;
}

.bti-steps > * > :is(p, .bti-step__text) {
	color: var(--c-graphite-soft);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

@media (min-width: 768px) {
	.bti-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.bti-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Two-column variant (service page: steps beside the calculator). */
	.bti-steps.is-2-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Service card («Картка послуги» 12:939). */
.bti-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: 20px;
	border: 1px solid var(--c-hatch);
	border-radius: var(--radius);
	background: var(--c-sheet);
	transition: border-color 0.15s ease;
}

.bti-service-card:hover {
	border-color: var(--c-line);
}

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

.bti-service-card__icon {
	width: 32px;
	height: 32px;
	color: var(--c-graphite);
}

/* Red marks changes (перепланування); the ramp (inclusivity) is ink, as in Figma. */
.bti-service-card__icon.icon-stairs {
	color: var(--c-change);
}

.bti-service-card__icon.icon-ramp {
	color: var(--c-ink);
}

.bti-service-card__title {
	font-size: 20px;
	line-height: 26px;
	font-weight: 500;
	letter-spacing: -0.005em;
}

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

.bti-service-card:hover .bti-service-card__title a {
	color: var(--c-ink);
}

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

.bti-service-card__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: auto !important;
	padding-top: var(--space-2);
	border-top: 1px solid var(--c-hatch);
	font-family: var(--font-measure);
	word-spacing: var(--ws-measure);
	font-weight: 500;
	white-space: nowrap;
}

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

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

/*
 * Price row («Рядок ціни» 12:953): name | term | price. A grid with fixed term and price
 * columns, so terms and prices line up from row to row (a row without a term keeps the
 * price in its column).
 */
.bti-price-list {
	margin: 0 0 var(--space-4);
	padding: 0;
	list-style: none;
}

.bti-price-row {
	--bti-price-term-w: 76px;
	--bti-price-w: 122px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--bti-price-term-w) var(--bti-price-w);
	align-items: center;
	column-gap: 12px;
	margin: 0;
	padding-block: var(--space-4);
	border-bottom: 1px solid var(--c-hatch);
}

.bti-price-row__name {
	grid-column: 1;
	min-width: 0;
	color: var(--c-graphite);
	font-size: 17px;
	line-height: 26px;
}

.bti-price-row__name a {
	color: inherit;
	text-decoration: none;
}

.bti-price-row__name a:hover {
	color: var(--c-ink);
	text-decoration: underline;
}

.bti-price-row__term,
.bti-price-row__price {
	font-family: var(--font-measure);
	word-spacing: var(--ws-measure);
	font-weight: 500;
	text-align: right;
}

.bti-price-row__term {
	grid-column: 2;
	color: var(--c-graphite-soft);
	font-size: var(--fs-measure);
	line-height: var(--lh-measure);
}

.bti-price-row__price {
	grid-column: 3;
	color: var(--c-graphite);
	font-size: var(--fs-measure-l);
	line-height: var(--lh-measure-l);
	white-space: nowrap;
}

@media (min-width: 768px) {
	.bti-price-row {
		--bti-price-term-w: 96px;
		--bti-price-w: 140px;
		column-gap: var(--space-4);
	}

	.bti-price-row__term {
		white-space: nowrap;
	}
}

/* bti/price-table: column captions over the rows. */
.bti-price-table {
	margin: 0;
}

.bti-price-table .bti-price-list {
	margin: 0;
}

.bti-price-table__head {
	display: none;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: var(--space-4) 0 var(--space-2);
	border-bottom: 1px solid var(--c-graphite);
	color: var(--c-graphite-soft);
	font-family: var(--font-measure);
	word-spacing: var(--ws-measure);
	font-size: var(--fs-measure-s);
	line-height: var(--lh-measure-s);
}

@media (min-width: 768px) {
	.bti-price-table__head {
		display: flex;
	}
}

/* Review («Відгук» 12:948). */
.bti-review {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 20px;
	border: 1px solid var(--c-hatch);
	border-radius: var(--radius);
	background: var(--c-sheet);
}

.bti-review > *,
.bti-review__text p {
	margin: 0;
}

.bti-review__text {
	color: var(--c-graphite);
	font-size: 17px;
	line-height: 26px;
}

.bti-review__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-1) var(--space-3);
	margin-top: auto !important;
}

.bti-review__author {
	color: var(--c-graphite);
	font-size: var(--fs-label);
	line-height: var(--lh-label);
	font-weight: 500;
}

.bti-review__source {
	color: var(--c-graphite-soft);
	font-family: var(--font-measure);
	word-spacing: var(--ws-measure);
	font-size: var(--fs-measure-s);
	line-height: var(--lh-measure-s);
}

/* Engineer («Інженер» 12:961): portrait 260 × 300 in Figma. */
.bti-engineer {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bti-engineer > * {
	margin: 0;
}

.bti-engineer__photo {
	aspect-ratio: 260 / 300;
}

.bti-engineer__name {
	font-size: 20px;
	line-height: 26px;
	font-weight: 500;
	letter-spacing: -0.005em;
}

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

.bti-engineer__note {
	color: var(--c-graphite-soft);
	font-family: var(--font-measure);
	word-spacing: var(--ws-measure);
	font-size: var(--fs-measure-s);
	line-height: var(--lh-measure-s);
}

/*
 * Banner «Не знаєте, який документ вам потрібен?» (pattern bti-child/wizard-banner,
 * Figma 9:4726 / 8:1246): graphite band, four situation buttons with a hatch border.
 */
.bti-wizard-banner {
	padding-block: 32px;
	background: var(--c-graphite);
	color: var(--c-sheet);
}

.bti-wizard-banner__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.bti-wizard-banner__intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.bti-wizard-banner__intro > * {
	margin: 0;
}

.bti-wizard-banner__title {
	color: var(--c-sheet);
}

.bti-wizard-banner__lead {
	color: var(--c-hatch);
}

.wp-block-buttons.bti-wizard-banner__options {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2);
}

.bti-wizard-banner__options > .wp-block-button {
	display: flex;
	width: 100%;
	margin: 0;
}

.bti-wizard-banner__options .wp-block-button__link {
	flex: 1 1 auto;
	justify-content: flex-start;
	min-height: 50px;
	padding: 14px 16px;
	border: 1px solid var(--c-hatch);
	background: transparent;
	color: var(--c-sheet);
	text-align: left;
}

.bti-wizard-banner__options .wp-block-button__link:hover,
.bti-wizard-banner__options .wp-block-button__link:focus-visible {
	border-color: var(--c-sheet);
	background: rgb(255 255 255 / 0.08);
	color: var(--c-sheet);
}

.bti-wizard-banner__options .wp-block-button__link:focus-visible {
	outline-color: var(--c-sheet);
}

@media (min-width: 768px) {
	.wp-block-buttons.bti-wizard-banner__options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.bti-wizard-banner__options .wp-block-button__link {
		min-height: 62px;
		padding: 20px;
	}
}

@media (min-width: 1024px) {
	.bti-wizard-banner {
		padding-block: 72px;
	}

	.bti-wizard-banner__inner {
		flex-direction: row;
		align-items: flex-start;
		gap: 64px;
	}

	.bti-wizard-banner__intro {
		flex: none;
		width: 480px;
	}

	.wp-block-buttons.bti-wizard-banner__options {
		flex: 1 1 auto;
		align-content: start;
	}
}

@media (min-width: 1024px) and (max-width: 1247.98px) {
	.bti-wizard-banner__inner {
		gap: 40px;
	}

	.bti-wizard-banner__intro {
		width: 340px;
	}
}

/*
 * Banner «Звіти з інклюзивності» (pattern bti-child/orgs-banner, Figma 9:4740 / 8:2279):
 * ink-tint box with the ramp icon, text and the Primary button.
 */
.bti-orgs-banner {
	padding-block: 24px 40px;
}

.bti-orgs-banner__inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	padding: 20px;
	border-radius: var(--radius);
	background: var(--c-ink-tint);
}

.bti-orgs-banner__inner::before {
	content: "";
	flex: none;
	width: 32px;
	height: 32px;
	background-color: var(--c-ink);
	-webkit-mask: url("../icons/ramp.svg") center / contain no-repeat;
	mask: url("../icons/ramp.svg") center / contain no-repeat;
}

.bti-orgs-banner__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.bti-orgs-banner__text > * {
	margin: 0;
}

.bti-orgs-banner__title {
	font-size: 22px;
	line-height: 26px;
	font-weight: 500;
	letter-spacing: -0.005em;
}

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

.bti-orgs-banner__actions {
	margin: 0;
}

.bti-orgs-banner__actions .wp-block-button,
.bti-orgs-banner__actions .wp-block-button__link {
	width: 100%;
}

@media (min-width: 1024px) {
	.bti-orgs-banner {
		padding-block: 72px;
	}

	.bti-orgs-banner__inner {
		flex-direction: row;
		align-items: center;
		gap: 32px;
		padding: 36px 40px;
	}

	.bti-orgs-banner__inner::before {
		width: 48px;
		height: 48px;
	}

	.bti-orgs-banner__text {
		flex: 1 1 auto;
		gap: var(--space-2);
	}

	.bti-orgs-banner__title {
		line-height: 28px;
	}

	.bti-orgs-banner__actions .wp-block-button,
	.bti-orgs-banner__actions .wp-block-button__link {
		width: auto;
	}
}