/*
 * Theme blocks: bti/contact-buttons, bti/measured-photo, bti/find-us (blocks/*).
 * Page layouts (e.g. pages/home.css) place them; these are the standalone looks.
 */

/* Contact buttons: «Подзвонити» (Primary) + «Написати в Telegram» (Secondary). */
.bti-contact-buttons {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

@media (min-width: 600px) {
	.bti-contact-buttons {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* Photo with dimension lines: the photo fills the box, the lines sit over it. */
.bti-measured-photo {
	position: relative;
	height: 280px;
}

.bti-measured-photo .bti-measured-photo__photo {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

.bti-measured-photo .bti-dim {
	position: absolute;
	pointer-events: none;
}

.bti-measured-photo .bti-dim__label {
	background: var(--c-sheet);
}

.bti-measured-photo .bti-dim--h {
	top: 22px;
	left: 15%;
	right: 15%;
}

.bti-measured-photo .bti-dim--v {
	top: 19%;
	right: 10px;
	height: 65%;
	min-height: 0;
}

/* The vertical label reads bottom to top, as on a drawing. */
.bti-measured-photo .bti-dim--v .bti-dim__label {
	padding: var(--space-2) 0;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

@media (min-width: 1024px) {
	.bti-measured-photo .bti-dim--h {
		top: 36px;
		left: 13.5%;
		right: 13.5%;
	}

	.bti-measured-photo .bti-dim--v {
		right: 22px;
	}
}

/* Find us: NAP lines with icons, the route link, the click-to-load map. */
.bti-find-us {
	display: grid;
	gap: var(--space-5);
}

.bti-find-us__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

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

.bti-find-us__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
}

.bti-find-us__icon {
	width: 24px;
	height: 24px;
	margin-top: 1px;
	color: var(--c-graphite);
}

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

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

.bti-map {
	display: grid;
	place-items: center;
	height: 240px;
	aspect-ratio: auto;
}

.bti-map__load {
	position: relative;
	z-index: 1;
}

.bti-map.is-loaded {
	display: block;
	background: var(--c-hatch);
}

.bti-map__frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (min-width: 1024px) {
	.bti-find-us {
		grid-template-columns: 400px minmax(0, 1fr);
		gap: 48px;
	}

	.bti-map {
		height: 360px;
	}
}

/* Find us, card layout (contacts page, Figma 24:1478): a bordered card with a row per channel. */
.bti-contact-card {
	margin: 0;
	padding: 0;
	border: 1px solid var(--c-graphite);
	background: var(--c-sheet);
	list-style: none;
}

.bti-contact-card__row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
	padding: 14px 16px;
	border-bottom: 1px solid var(--c-hatch);
}

.bti-contact-card__row:last-child {
	border-bottom: 0;
}

.bti-contact-card__icon {
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--c-graphite);
}

.bti-contact-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.bti-contact-card__body > p {
	margin: 0;
}

.bti-contact-card__label {
	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-contact-card__value {
	color: var(--c-graphite);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: 500;
	letter-spacing: var(--ls-h3);
	overflow-wrap: anywhere;
}

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

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

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

.bti-contact-card__route {
	display: inline-block;
	padding-block: 11px;
	margin-block: -11px;
}

@media (min-width: 1024px) {
	.bti-find-us--card {
		grid-template-columns: 520px minmax(0, 1fr);
		align-items: stretch;
	}

	.bti-find-us--card .bti-map {
		height: auto;
		min-height: 360px;
	}
}

/* Dimension line block: the line across the block width. */
.bti-dimension-line {
	margin: 0;
}