/* Hero: одинаковые CTA-кнопки, особенно на мобильном. */
#colibri #hero .h-x-container-inner > .h-button__outer .h-button {
	min-width: 220px;
}

@media (max-width: 700px) {
	#colibri #hero .h-x-container-inner {
		flex-direction: column;
		align-items: stretch;
	}

	#colibri #hero .h-x-container-inner > .h-button__outer {
		width: 100%;
		display: flex;
		margin: 0 !important;
	}

	#colibri #hero .h-x-container-inner > .h-button__outer .h-button {
		width: 100%;
		min-width: 0;
	}
}

/* Yana Berg — блок заказа. */

.yb-contact {
	/* Еле заметный марсаловый блик в центре — акцент на заголовке и форме. */
	background:
		radial-gradient(ellipse 55% 45% at 50% 38%, rgba(164, 92, 88, 0.09) 0%, rgba(164, 92, 88, 0.03) 45%, transparent 75%),
		var(--yb-ink);
	color: var(--yb-white);
	padding: 120px 24px;
	font-family: var(--yb-font-body);
	text-align: left;
}

.yb-contact * {
	box-sizing: border-box;
}

.yb-contact__inner {
	max-width: var(--yb-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 96px;
	align-items: start;
}

/* -------- левая колонка -------- */

.yb-contact__title {
	font-family: var(--yb-font-display);
	font-size: clamp(40px, 4vw, 56px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: #ffffff;
	margin: 0 0 24px;
}

.yb-contact__lead {
	font-size: var(--yb-fs-md);
	line-height: 1.6;
	color: var(--yb-text-muted);
	margin: 0 0 48px;
	max-width: 460px;
}

/* Компактные контакты: адрес на всю ширину с действиями, ниже телефон и e-mail в две колонки. */
.yb-contact__meta {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 40px;
	padding-top: 40px;
	border-top: 1px solid var(--yb-line);
	font-size: var(--yb-fs-md);
	line-height: 1.5;
}

.yb-contact__meta-item--wide {
	grid-column: 1 / -1;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--yb-line-soft);
}

/* Адрес с пином: иконка слева, текст и действия выровнены по одной линии. */
.yb-contact__place {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	column-gap: 14px;
	align-items: start;
}

.yb-contact__pin {
	grid-row: 1 / span 2;
	margin-top: 1px;
	color: var(--yb-marsala-text);
}

.yb-contact__meta dd {
	margin: 0;
}

.yb-contact__meta-label {
	display: block;
	margin-bottom: 14px;
	font-size: var(--yb-fs-label);
	letter-spacing: var(--yb-track-button);
	text-transform: uppercase;
	color: var(--yb-text-subtle);
	font-weight: 500;
}

.yb-contact__address {
	font-style: normal;
	line-height: 1.6;
	color: var(--yb-on-dark);
}

.yb-contact .yb-contact__value {
	color: var(--yb-white);
	font-size: var(--yb-fs-lg);
	text-decoration: none;
	transition: color 0.2s ease;
}

.yb-contact .yb-contact__value:hover {
	color: var(--yb-marsala-text);
}

/* Действия рядом с адресом: пунктирное подчёркивание, как у референса. */
.yb-contact__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin-top: 16px;
}

.yb-contact .yb-contact__action {
	padding: 0 0 3px;
	border: 0;
	border-bottom: 1px dashed color-mix(in srgb, var(--yb-marsala-text) 60%, transparent);
	background: none;
	color: var(--yb-marsala-text);
	font-family: inherit;
	font-size: var(--yb-fs-ui);
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
	appearance: none;
	-webkit-appearance: none;
}

.yb-contact .yb-contact__action:hover,
.yb-contact .yb-contact__action:focus-visible {
	border-bottom-style: solid;
	border-bottom-color: var(--yb-marsala-text);
	outline: none;
}

.yb-contact .yb-contact__action.is-done {
	color: var(--yb-white);
	border-bottom-color: transparent;
}

/* Карта — широкая полоса под формой и контактами. */
.yb-contact__map {
	grid-column: 1 / -1;
	height: 360px;
	overflow: hidden;
	background: var(--yb-ink-raised);
}

.yb-contact__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	/* Приглушаем яркую карту под тёмную секцию. */
	filter: grayscale(0.6) invert(0.9) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}

/* -------- форма -------- */

.yb-contact__form {
	display: grid;
	gap: 36px;
}

.yb-field {
	display: block;
}

.yb-field__label {
	display: block;
	font-size: var(--yb-fs-xs);
	letter-spacing: var(--yb-track-caps);
	text-transform: uppercase;
	color: var(--yb-text-subtle);
	font-weight: 500;
	margin-bottom: 12px;
}

.yb-field__label span {
	color: var(--yb-marsala-text);
	margin-left: 2px;
}

.yb-field input,
.yb-field textarea {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--yb-line);
	padding: 8px 0;
	color: #ffffff;
	font-family: inherit;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
}

.yb-field input::placeholder,
.yb-field textarea::placeholder {
	color: rgba(255, 255, 255, 0.35);
	font-weight: 300;
}

.yb-field input:hover,
.yb-field textarea:hover {
	border-bottom-color: rgba(255, 255, 255, 0.5);
}

/* Фокус: линия под полем становится марсаловой и вдвое толще, подпись — светлее. */
.yb-field input:focus,
.yb-field textarea:focus {
	border-bottom-color: var(--yb-marsala-text);
	box-shadow: 0 1px 0 var(--yb-marsala-text);
}

.yb-field:focus-within .yb-field__label {
	color: var(--yb-white);
}

.yb-field textarea {
	resize: vertical;
	min-height: 96px;
	font-size: var(--yb-fs-lg);
	line-height: 1.5;
}

.yb-field-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
}

/* -------- согласие + кнопка -------- */

.yb-consent {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 12px;
	align-items: start;
	font-size: var(--yb-fs-ui);
	line-height: 1.6;
	color: var(--yb-on-dark-soft);
	cursor: pointer;
	margin-top: 4px;
}

.yb-consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: transparent;
	cursor: pointer;
	display: inline-grid;
	place-content: center;
	transition: all 0.2s ease;
	margin: 0;
	flex: none;
	border-radius: 0;
}

.yb-consent input[type="checkbox"]::before {
	content: "";
	width: 10px;
	height: 10px;
	background: radial-gradient(circle at 35% 35%, var(--yb-marsala-light), var(--yb-marsala-dark));
	transform: scale(0);
	transition: transform 0.15s ease;
}

.yb-consent input[type="checkbox"]:checked {
	border-color: var(--yb-marsala-light);
}

.yb-consent input[type="checkbox"]:checked::before {
	transform: scale(1);
}

/* Ссылки в согласии. Двойной класс перебивает правило темы body a:hover { color: #242439 },
 * из-за которого текст ссылки при наведении сливался с тёмным фоном. */
.yb-consent .yb-consent__link {
	color: var(--yb-marsala-text);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--yb-marsala-text) 45%, transparent);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.yb-consent .yb-consent__link:hover,
.yb-consent .yb-consent__link:focus-visible {
	color: var(--yb-white);
	border-bottom-color: var(--yb-white);
	outline: none;
}

.yb-submit {
	/* Вид — .yb-btn--accent (components.css); здесь только место в форме. */
	justify-self: end;
	margin-top: 12px;
}
/* -------- адаптив -------- */

@media (max-width: 900px) {
	.yb-contact {
		padding: 72px 20px;
	}

	.yb-contact__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	.yb-contact__map {
		height: 280px;
	}

	.yb-contact__title {
		font-size: 36px;
	}

	.yb-field-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.yb-submit {
		justify-self: stretch;
		width: 100%;
	}
}

@media (max-width: 480px) {
	.yb-contact {
		padding: 56px 16px;
	}

	.yb-contact__title {
		font-size: var(--yb-fs-3xl);
	}

	.yb-field input,
	.yb-field textarea {
		font-size: var(--yb-fs-lg);
	}
}

@media (max-width: 700px) {
	.yb-contact__meta {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding-top: 32px;
	}

	.yb-contact__meta-item--wide {
		padding-bottom: 28px;
	}
}

/* -------- отправка заявки (assets/js/forms.js) -------- */

/* Поле-ловушка для ботов: убрано с экрана, но не display:none — его заполняют только боты. */
.yb-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.yb-field__error {
	display: block;
	margin-top: 6px;
	font-size: var(--yb-fs-xs);
	color: var(--yb-error);
}

.yb-field [aria-invalid="true"] {
	border-bottom-color: var(--yb-error);
}

.yb-form-status {
	min-height: 1.4em;
	margin: 14px 0 0;
	font-size: var(--yb-fs-ui);
	color: var(--yb-on-dark-soft);
}

.yb-form-status.is-error {
	color: var(--yb-error);
}

/* -------- общая форма заявки (template-parts/contact-form.php), для тёмного фона -------- */

.yb-cform {
	display: grid;
	gap: 22px;
}

.yb-cform[hidden],
.yb-cform__done[hidden] {
	display: none;
}

.yb-cform .yb-field {
	margin: 0;
}

.yb-cform__prefer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

.yb-cform__prefer legend {
	width: 100%;
	margin-bottom: 10px;
	padding: 0;
}

.yb-cform__prefer label {
	position: relative;
	cursor: pointer;
}

.yb-cform__prefer input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.yb-cform__prefer span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--yb-line);
	border-radius: var(--yb-radius-pill);
	font-size: var(--yb-fs-ui);
	color: var(--yb-on-dark);
	transition: background var(--yb-duration) ease, border-color var(--yb-duration) ease;
}

.yb-cform__prefer input:checked + span {
	border-color: transparent;
	background: var(--yb-gradient-accent);
	color: var(--yb-white);
}

.yb-cform__prefer input:focus-visible + span {
	box-shadow: var(--yb-focus-ring);
}

.yb-cform__done {
	padding: 24px 0 8px;
	color: var(--yb-text-muted);
	outline: none;
}

.yb-cform__done .yb-cform__done-title {
	margin: 0 0 10px;
	font-family: var(--yb-font-display);
	font-size: 44px;
	line-height: 1;
	color: var(--yb-white);
}

.yb-cform__again {
	margin-top: 16px;
}

/* Ошибка согласия встаёт под текстом, а не в узкую колонку чекбокса. */
.yb-consent .yb-field__error {
	grid-column: 2;
}