/* Domig — Hero главной. Дизайн: Figma home 4:2 (@1440).
   ПОЛНОСТЬЮ в vw: hero масштабируется пропорцией макета на любой ширине (1px@1440 =
   1/14.4vw ≈ 0.0694vw). Цвета/шрифты-семейства — токены; РАЗМЕРЫ/ОТСТУПЫ/ШРИФТЫ — vw.
   Ниже брейкпоинта — мобильная раскладка (стопка, px/токены). vw в Hero разрешён правилами. */

.dm-hero {
	padding: 0 1.111vw;               /* 16px поле карточки */
}

.dm-hero__card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 1.667vw;           /* 24px */
	background: var(--wp--preset--color--primary-dark);
	/* Высота = экран минус шапка (≈9.722vw): hero помещается на один экран,
	   поиск виден без скролла. Текст/отступы остаются в vw (масштаб пропорцией макета). */
	min-height: calc(100svh - 9.722vw);
}
.dm-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
	user-select: none;
}
.dm-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.1);
}

/* Печати-бейджи справа сверху */
.dm-hero__badges {
	position: absolute;
	z-index: 2;
	top: 2.222vw;                     /* 32px */
	right: 2.222vw;
	display: flex;
	flex-direction: column;
	gap: 1.667vw;                     /* 24px */
}
.dm-hero__badge {
	width: 4.861vw;                  /* 70px */
	height: 4.861vw;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-size: 200% 100%;
	background-color: var(--wp--preset--color--base);
}
.dm-hero__badge--1 { background-position: left center; }
.dm-hero__badge--2 { background-position: right center; }

/* Контент — целиком в vw, без кэпа (масштабируется как макет) */
.dm-hero__inner {
	position: relative;
	z-index: 2;
	min-height: calc(100svh - 9.722vw);
	padding: 3vw 3.333vw 2.5vw;       /* контент прижат к низу, фото заполняет верх */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 3.5vw;                        /* зазор между текстом и поиском (≈50px@1440) */
}
.dm-hero__title {
	margin: 0;
	color: var(--wp--preset--color--on-dark);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 4.444vw;              /* 64px */
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.02em;
}
.dm-hero__subtitle {
	margin: 1.111vw 0 0;            /* 16px */
	color: var(--wp--preset--color--on-dark);
	font-size: 1.667vw;             /* 24px */
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

/* ── Виджет поиска (тоже целиком в vw) ── */
.dm-hero__search {
	display: flex;
	flex-direction: column;
	gap: 1.528vw;                   /* 22px */
	padding: 1.667vw;               /* 24px */
	border-radius: 1.667vw;
	background: var(--wp--preset--color--surface);
}

/* Свитч Kaufen/Verkaufen — тёмно-зелёная пилюля СКОЛЬЗИТ под активную опцию (макет 89:410).
   Половины равной ширины (6.18vw ≈ 89px@1440), пилюля = 50% − паддинг, сдвиг translateX(100%). */
.dm-search__toggle {
	position: relative;
	display: inline-flex;
	align-self: flex-start;
	padding: 0.278vw;               /* 4px */
	border: 1px solid var(--wp--custom--field--border);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
}
.dm-search__toggle::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0.278vw;
	left: 0.278vw;
	width: calc(50% - 0.278vw);
	height: calc(100% - 0.556vw);
	border-radius: 999px;
	background: var(--wp--preset--color--primary-dark);
	transition: transform 0.25s ease;
}
.dm-search__toggle.is-verkaufen::before { transform: translateX(100%); }
.dm-search__toggle-btn {
	position: relative;
	z-index: 1;
	width: 6.18vw;                  /* 89px — равные половины под пилюлю */
	padding: 0.347vw 0;             /* 5px */
	border: 0;
	border-radius: 999px;
	background: none;
	cursor: pointer;
	text-align: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.972vw;             /* 14px */
	font-weight: 500;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast);
	transition: color 0.18s ease;
}
.dm-search__toggle-btn.is-active {
	color: var(--wp--preset--color--on-dark);
	font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
	.dm-search__toggle::before { transition: none; }
}

/* Табы типов */
.dm-search__tabs { display: flex; gap: 2.222vw; }  /* 32px */
.dm-search__tab {
	padding: 0 0 0.278vw;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.972vw;             /* 14px */
	font-weight: 500;
	line-height: 1.55;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	opacity: 0.7;
	transition: color 0.18s ease, opacity 0.18s ease;
}
.dm-search__tab:hover { opacity: 1; }
.dm-search__tab.is-active {
	/* Текст — primary-dark для контраста ≥4.5:1 на surface (#f4f4f4);
	   зелёный underline остаётся индикатором активного таба (a11y). */
	color: var(--wp--preset--color--primary-dark);
	border-bottom-color: var(--wp--preset--color--primary);
	font-weight: 700;
	opacity: 1;
}

/* Строка полей */
.dm-search__bar {
	display: flex;
	align-items: center;
	height: 4.444vw;                /* 64px */
	padding: 0.278vw 0.278vw 0.278vw 1.667vw;  /* 4 / 24 */
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.972vw;             /* 14px */
}
.dm-field { display: flex; align-items: center; gap: 0.556vw; min-width: 0; }
.dm-field__label { color: var(--wp--preset--color--contrast); white-space: nowrap; }
.dm-field__divider { flex: 0 0 auto; width: 1px; height: 2.778vw; background: var(--wp--preset--color--border); margin: 0 1.389vw; }
.dm-field__dash { color: var(--wp--preset--color--contrast); }

.dm-hero__search select,
.dm-hero__search input {
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 0.972vw;             /* 14px */
	color: var(--wp--preset--color--contrast);
	padding: 0;
	min-width: 0;
}
.dm-hero__search select:focus,
.dm-hero__search input:focus { outline: none; }
.dm-hero__search input::placeholder { color: var(--wp--preset--color--subtle); }

.dm-field--select { flex: 0 0 auto; }
.dm-field--select select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 1.389vw;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6' fill='none'%3E%3Cpath d='M1 1.25 4.5 4.75 8 1.25' stroke='%2325283b' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 0.625vw;
}
.dm-field--price { flex: 0 0 auto; }
/* Шире под реальные суммы (6–7 цифр), не под плейсхолдер von/bis */
.dm-field--price input { width: 5vw; text-align: left; }
.dm-field--search { flex: 1 1 auto; }
.dm-field--search input { width: 100%; }

/* Числовые поля режима Verkaufen (Zimmer / Baujahr / Fläche) */
.dm-field--num { flex: 0 0 auto; }
.dm-field--num input { width: 5vw; text-align: left; }
/* [hidden] на баре перебивает display:flex → скрытый бар реально прячется */
.dm-search__bar[hidden] { display: none; }
/* Kaufen «Objekte anzeigen» шире; Calculate — под свою надпись */
.dm-search__calc { min-width: 0; }

.dm-search__submit {
	flex: 0 0 auto;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.694vw;                   /* 10px */
	height: 3.889vw;                /* 56px */
	padding: 0 1.389vw;             /* 20px */
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-dark);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.111vw;             /* 16px */
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.18s ease;
}
.dm-search__submit svg { width: 1.111vw; height: 1.111vw; }
.dm-search__submit:hover,
.dm-search__submit:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--primary-dark) 36%, var(--wp--preset--color--primary));
}

/* ── Мобилка: пропорция макета не тянется, переходим на стопку (px/токены) ── */
@media (max-width: 782px) {
	.dm-hero { padding: 0 8px; }
	.dm-hero__card { min-height: 0; border-radius: 16px; }
	.dm-hero__inner { min-height: 0; padding: clamp(96px, 40vh, 220px) 16px 20px; }
	.dm-hero__badges { top: 16px; right: 16px; gap: 12px; }
	.dm-hero__badge { width: 54px; height: 54px; }
	.dm-hero__title { font-size: var(--wp--preset--font-size--r-40); }
	.dm-hero__subtitle { font-size: var(--wp--preset--font-size--r-16); margin-top: 12px; }

	.dm-hero__search { gap: 16px; padding: 16px; border-radius: 16px; }
	.dm-search__toggle { padding: 4px; }
	.dm-search__toggle::before { top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); }
	.dm-search__toggle-btn { width: 96px; padding: 6px 0; font-size: var(--wp--preset--font-size--r-14); }
	.dm-search__tabs { gap: 18px; flex-wrap: wrap; }
	.dm-search__tab { font-size: var(--wp--preset--font-size--r-14); padding-bottom: 4px; }

	.dm-search__bar { flex-wrap: wrap; height: auto; padding: 16px; gap: 12px; border-radius: 16px; font-size: var(--wp--preset--font-size--r-16); }
	.dm-search__bar select,
	.dm-search__bar input { font-size: var(--wp--preset--font-size--r-16); }
	.dm-field__divider { display: none; }
	.dm-field--select { flex-basis: 100%; }
	.dm-field--select select { width: 100%; background-size: 12px; padding-right: 20px; }
	.dm-field--price { flex-basis: 100%; }
	.dm-field--price input { width: 96px; }
	.dm-field--num { flex-basis: 100%; justify-content: space-between; }
	.dm-field--num input { width: 120px; }
	.dm-field--search { flex-basis: 100%; }
	.dm-search__submit { width: 100%; justify-content: center; height: 52px; padding: 0 20px; font-size: var(--wp--preset--font-size--r-16); }
	.dm-search__submit svg { width: 16px; height: 16px; }
}