/* ==========================================================================
   Главная — редизайн «сайт как приложение» (с 29.09.2026)
   Правила: FRONTEND_CONVENTIONS.md. Макеты: Home.dc.html (ПК),
   MobileHome.dc.html + MobileCalc.dc.html (телефон) в
   https://claude.ai/artifact/DWC7sWLCLi7TmMaE6t6Lhe.
   Только внешний вид: все классы/id/data-атрибуты калькулятора, ленты и
   баннеров прежние, скрипты страницы не менялись. Всё — внутри .home-v2.
   Шрифт Inter — только здесь (решение Амира 29.09).
   ========================================================================== */

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Medium.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Bold.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

/* base.css задаёт шрифт каждому элементу (*) — перекрываем внутри главной */
.home-v2,
.home-v2 * {
	font-family: "Inter", "kupitak", sans-serif;
}

.home-v2 .title {
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* Светлая «дорожка» под ползунком (calcPinkTrack приложения). Заливку
   рисует calculator.js инлайн-градиентом до «transparent» — незаполненная
   часть раньше была невидимой; дорожку кладём под ползунок псевдоэлементом,
   сам ползунок и его логика не меняются. top = высота плашки + отступ. */
.home-v2 .calculator-input-item::after {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	height: 3px;
	border-radius: 2px;
	pointer-events: none;
	z-index: 0;
}

.home-v2 .calculator-input-item input[type="range"] {
	position: relative;
	z-index: 1;
}

/* Панель расчёта — только после выбора региона (решение Амира 29.09).
   Класс calc-inactive ставит/снимает calculator.js (setTariff/deactivate),
   логика прежняя; раньше панель была видна размытой под подсказкой. */
.home-v2 .calculator-container.calc-inactive {
	display: none;
}

.home-v2 .hv2-calc-hint {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--gray);
}

.home-v2 .hv2-calc-hint svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* карточка калькулятора и окно — только телефон */
.hv2-calc-card-wrap,
.hv2-calc-close,
.hv2-calc-backdrop {
	display: none;
}

/* ==========================================================================
   ПК (≥769)
   ========================================================================== */
@media (min-width: 769px) {
	/* --- Калькулятор: белая карточка, шапка с иконкой слева --- */
	.home-v2 .calculator {
		scroll-margin-top: 144px; /* якорь #calculator — под шапкой (124 + 20) */
	}

	.home-v2 .calculator > .container > * {
		position: relative;
	}

	.home-v2 .hv2-calc-head {
		display: flex;
		align-items: center;
		gap: 18px;
		margin-bottom: 24px;
	}

	.home-v2 .hv2-calc-icon {
		width: 64px;
		height: 64px;
		border-radius: 20px;
		background: var(--card-lilac);
		color: var(--accent);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.home-v2 .hv2-calc-icon svg {
		width: 30px;
		height: 30px;
	}

	.home-v2 .hv2-calc-head .title {
		margin: 0;
		text-align: left;
	}

	.home-v2 .hv2-calc-sub {
		margin-top: 4px;
		font-size: 16px;
		color: var(--gray);
	}

	/* регионы — строками: логотип | регион | ›. На ПК две строки, как в
	   макете: неактивный «Дагестан — СКОРО» скрыт (решение Амира 29.09);
	   на телефоне он остаётся третьей карточкой, как в приложении. */
	.home-v2 .calc-regions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		margin-bottom: 14px;
	}

	.home-v2 .calc-region-btn[data-region="dagestan"] {
		display: none;
	}

	.home-v2 .calc-region-btn {
		flex-direction: row;
		justify-content: flex-start;
		gap: 16px;
		min-height: 88px;
		padding: 0 22px;
		border: 1.5px solid var(--card-lilac);
		border-radius: 20px;
		background: var(--white);
		position: relative;
	}

	.home-v2 .calc-region-btn:not(:disabled)::after {
		content: "";
		width: 9px;
		height: 9px;
		border-right: 2.4px solid var(--accent);
		border-top: 2.4px solid var(--accent);
		transform: rotate(45deg);
		margin-left: auto;
		flex-shrink: 0;
	}

	.home-v2 .calc-region-btn:hover:not(:disabled) {
		border-color: var(--accent-bright);
	}

	.home-v2 .calc-region-btn.active {
		border-color: var(--accent);
		background: #fbf6fd; /* светлее --card-lilac: выбранная строка как в макете */
	}

	.home-v2 .calc-region-btn:disabled {
		background: var(--light);
		opacity: 1;
	}

	.home-v2 .calc-region-sub,
	.home-v2 .calc-region-name {
		font-size: 16px;
		font-weight: 600;
		color: var(--black);
		text-align: left;
	}

	.home-v2 .calc-region-logo-kupitak {
		height: 26px;
	}

	.home-v2 .calc-region-logo-fincity {
		height: 24px;
	}

	.home-v2 .calc-region-active {
		text-align: left;
		margin: 4px 0 18px;
	}

	/* серая панель расчёта */
	.home-v2 .calculator-container {
		border-radius: 24px;
		padding: 36px 40px 30px;
		background: var(--light);
	}

	.home-v2 .calculator-inputs {
		gap: 36px;
		margin-bottom: 26px;
	}

	/* поле как «плашка» приложения: подпись слева, сумма справа */
	.home-v2 .calculator-input-item {
		gap: 0;
	}

	.home-v2 .calculator-input-item label {
		position: absolute;
		left: 18px;
		top: 0;
		height: 52px;
		display: flex;
		align-items: center;
		font-size: 14px;
		font-weight: 500;
		color: var(--label-gray);
		z-index: 2;
		pointer-events: none;
	}

	.home-v2 .calculator-input-item input[type="tel"] {
		height: 52px;
		border-radius: 16px;
		padding: 0 18px;
		text-align: right;
		font-size: 17px;
		font-weight: 700;
	}

	/* ползунки — розовые, как в приложении (calc_pink_parts.dart);
	   заливку рисует calculator.js через var(--accent) — переопределяем
	   переменную только у самих ползунков */
	.home-v2 .calculator-input-item input[type="range"] {
		--accent: var(--brand-purple);
		height: 3px;
		width: calc(100% - 16px);
		margin: 17px 8px 0;
	}

	.home-v2 .calculator-input-item input[type="range"]::-webkit-slider-thumb {
		width: 16px;
		height: 16px;
		background: var(--white);
		box-shadow: 0 0 0 1px var(--brand-purple);
	}

	.home-v2 .calculator-input-item input[type="range"]::-moz-range-thumb {
		width: 16px;
		height: 16px;
		background: var(--white);
		box-shadow: 0 0 0 1px var(--brand-purple);
	}

	.home-v2 .calc-with-snap .snap-mark {
		width: 9px;
		height: 9px;
		background: #e2dde6; /* на тон темнее дорожки — видна на серой панели */
		z-index: 2;
	}

	.home-v2 .calculator-input-item::after {
		top: 69px; /* 52 плашка + 17 отступ */
		background: #e9e6ec; /* дорожка на серой панели ПК */
	}

	.home-v2 .calculator-results {
		gap: 36px;
		margin-bottom: 8px;
	}

	.home-v2 .calculator-result-rata {
		font-size: 34px;
		font-weight: 700;
		letter-spacing: -0.02em;
	}

	.home-v2 .calculator-result-item h3 {
		font-size: 14px;
		font-weight: 400;
		color: var(--gray);
	}

	.home-v2 .calculator-action-button {
		height: 56px;
		border-radius: 18px;
		padding: 0 40px;
		font-size: 17px;
		font-weight: 600;
		background: var(--accent);
	}

	.home-v2 .calculator-action-button:hover {
		background: var(--accent-alternate);
	}

	/* --- Баннеры --- */
	.home-v2 .home-banner {
		border-radius: 28px;
	}

	/* --- Лента: карточка как в приложении (название → город → цена) --- */
	.home-v2 .new-posts .post-item {
		display: flex;
		flex-direction: column;
	}

	.home-v2 .new-posts .post-item-image {
		border-radius: 20px;
	}

	.home-v2 .new-posts .post-item-title {
		order: 1;
		margin-top: 12px;
		font-size: 16px;
		font-weight: 500;
	}

	.home-v2 .new-posts .post-item-location {
		order: 2;
	}

	.home-v2 .new-posts .post-item-pair {
		order: 3;
		margin-top: 6px;
	}

	.home-v2 .new-posts .post-item-price {
		font-size: 22px;
		font-weight: 700;
	}
}

/* ==========================================================================
   ТЕЛЕФОН (≤768) — как в приложении (home_screen.dart)
   ========================================================================== */
@media (max-width: 768px) {
	.home-v2 {
		background: var(--light);
	}

	/* низ шапки — светлый лист того же цвета, что и страница */
	.home-v2 .global-search.gs-v2::after {
		background: var(--light);
	}

	.home-v2 .title {
		text-align: left !important; /* у заголовка категорий инлайн-центр */
		font-size: 20px;
		line-height: 1;
		margin: 0 0 24px;
	}

	/* --- Категории: 2 + 2 + 3 + 3, карточки 80 px (_CategoryCards) --- */
	.home-v2 .categories {
		background: none;
		padding: 0;
		margin: 0 0 24px;
	}

	.home-v2 .categories-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 8px 10px;
		overflow: visible;
		padding: 0 20px;
	}

	.home-v2 .categories .container {
		padding: 0 20px;
	}

	.home-v2 .categories-grid .category-item {
		grid-column: span 2;
		min-width: 0;
		height: 80px;
		min-height: 0;
		padding: 10px 4px 10px 10px;
		border-radius: 14px;
	}

	.home-v2 .categories-grid .category-item:nth-child(-n + 4) {
		grid-column: span 3;
	}

	.home-v2 .categories-grid .category-item h3 {
		font-size: 12px;
		font-weight: 600;
		line-height: 14px;
		padding: 0;
	}

	.home-v2 .categories-grid .category-item img {
		height: 100%;
	}

	/* --- Карточка калькулятора (_CalcBlock) --- */
	.hv2-calc-card-wrap {
		display: block;
		padding: 0 20px;
		margin-bottom: 24px;
	}

	.hv2-calc-card {
		display: block;
		width: 100%;
		border: 0;
		background: var(--white);
		border-radius: 20px;
		padding: 20px;
		text-align: left;
		cursor: pointer;
		color: var(--black);
	}

	.hv2-calc-card-head {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.home-v2 .hv2-calc-icon {
		width: 48px;
		height: 48px;
		border-radius: 14px;
		background: rgb(149 55 180 / 8%);
		color: var(--accent);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.home-v2 .hv2-calc-icon svg {
		width: 26px;
		height: 26px;
	}

	.hv2-calc-card-title {
		display: block;
		font-size: 16px;
		font-weight: 700;
		line-height: 20px;
	}

	.hv2-calc-card-text {
		display: block;
		margin-top: 4px;
		font-size: 13px;
		line-height: 18px;
		color: rgb(22 14 24 / 50%);
	}

	.hv2-calc-card-btn {
		margin-top: 16px;
		padding: 14px;
		border-radius: 16px;
		background: var(--accent);
		color: var(--white);
		font-size: 14px;
		font-weight: 700;
		line-height: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
	}

	.hv2-calc-card-btn::after {
		content: "";
		width: 6px;
		height: 6px;
		border-right: 2px solid currentColor;
		border-top: 2px solid currentColor;
		transform: rotate(45deg);
	}

	/* --- Калькулятор = окно снизу --- */
	.hv2-calc-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 399;
		background: rgb(22 14 24 / 45%);
		opacity: 0;
		transition: opacity 0.25s;
	}

	.hv2-calc-backdrop[hidden] {
		display: none;
	}

	body.hv2-calc-open .hv2-calc-backdrop {
		opacity: 1;
	}

	body.hv2-calc-open {
		overflow: hidden;
	}

	.home-v2 .calculator {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 400;
		max-height: 90dvh;
		overflow-y: auto;
		margin: 0;
		background: var(--white);
		border-radius: 24px 24px 0 0;
		padding: 10px 0 max(20px, env(safe-area-inset-bottom));
		transform: translateY(105%);
		transition: transform 0.3s ease;
		visibility: hidden;
	}

	body.hv2-calc-open .home-v2 .calculator {
		transform: none;
		visibility: visible;
	}

	.home-v2 .calculator > .container {
		padding: 0 20px;
	}

	.home-v2 .calculator > .container::before {
		content: "";
		display: block;
		width: 36px;
		height: 5px;
		border-radius: 3px;
		background: var(--light-gray);
		margin: 0 auto 14px;
	}

	/* заголовок окна с крестиком закреплён: прежний скрипт после выбора
	   региона прокручивает окно к расчёту — крестик не должен уезжать */
	.home-v2 .hv2-calc-head {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 0 -20px 16px;
		padding: 6px 20px 10px;
		position: sticky;
		top: -10px;
		z-index: 20;
		background: var(--white);
	}

	.home-v2 .hv2-calc-head .hv2-calc-icon,
	.home-v2 .hv2-calc-sub {
		display: none;
	}

	.home-v2 .hv2-calc-head-text {
		flex-grow: 1;
	}

	.home-v2 .hv2-calc-head .title {
		margin: 0;
		font-size: 20px;
	}

	.hv2-calc-close {
		display: flex;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		border: 0;
		background: var(--light);
		color: var(--gray);
		font-size: 20px;
		line-height: 1;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		flex-shrink: 0;
	}

	/* регионы — три карточки в ряд (CalcCompanyCard) */
	.home-v2 .calc-regions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		margin-bottom: 10px;
	}

	.home-v2 .calc-region-btn {
		flex-direction: column;
		justify-content: center;
		min-height: 84px;
		padding: 0 6px;
		gap: 8px;
		border: 1.5px solid var(--card-lilac);
		border-radius: 16px;
	}

	.home-v2 .calc-region-btn.active {
		border-color: var(--accent);
		background: var(--white);
	}

	.home-v2 .calc-region-logo-kupitak,
	.home-v2 .calc-region-logo-fincity {
		height: 22px;
	}

	.home-v2 .calc-region-sub,
	.home-v2 .calc-region-name {
		font-size: 11px;
		font-weight: 500;
		color: var(--black);
		text-align: center;
	}

	.home-v2 .calc-region-btn:disabled .calc-region-name {
		color: var(--label-gray);
	}

	.home-v2 .calc-region-soon {
		font-size: 10px;
		padding: 0;
		background: none;
		margin: 0;
	}

	.home-v2 .calc-region-active {
		text-align: left;
		font-size: 13px;
		margin: 0 0 12px;
	}

	/* панель расчёта: плашки 48 + ползунки, как CalcPinkRow/CalcPinkSlider */
	.home-v2 .calculator-container {
		background: none;
		padding: 0;
		border-radius: 0;
		overflow: visible;
		scroll-margin-top: 64px; /* прокрутка к расчёту — не под закреплённый заголовок */
	}

	.home-v2 .calculator-icon {
		display: none;
	}

	.home-v2 .calculator-inputs {
		gap: 0;
		margin-bottom: 4px;
	}

	.home-v2 .calculator-input-item {
		gap: 0;
	}

	.home-v2 .calculator-input-item label {
		position: absolute;
		left: 16px;
		top: 0;
		height: 48px;
		display: flex;
		align-items: center;
		font-size: 13px;
		font-weight: 500;
		color: var(--label-gray);
		z-index: 2;
		pointer-events: none;
	}

	.home-v2 .calculator-input-item input[type="tel"] {
		height: 48px;
		border-radius: 16px;
		background: var(--light);
		padding: 0 16px;
		text-align: right;
		font-size: 15px;
		font-weight: 700;
	}

	.home-v2 .calculator-input-item input[type="range"] {
		--accent: var(--brand-purple);
		height: 3px;
		width: calc(100% - 16px);
		margin: 16px 8px 17px;
	}

	.home-v2 .calculator-input-item input[type="range"]::-webkit-slider-thumb {
		width: 16px;
		height: 16px;
		background: var(--white);
		box-shadow: 0 0 0 1px var(--brand-purple);
	}

	.home-v2 .calculator-input-item input[type="range"]::-moz-range-thumb {
		width: 16px;
		height: 16px;
		background: var(--white);
		box-shadow: 0 0 0 1px var(--brand-purple);
	}

	.home-v2 .calc-with-snap .snap-mark {
		width: 9px;
		height: 9px;
		background: #e2dde6; /* как в приложении — точка чуть темнее дорожки */
		z-index: 2;
	}

	.home-v2 .calculator-input-item::after {
		top: 64px; /* 48 плашка + 16 отступ */
		background: #f3f5f7; /* calcPinkTrack приложения */
	}

	/* итоги — строками-плашками: «Ежемесячный платеж … ₽» */
	.home-v2 .calculator-results {
		gap: 8px;
		margin-bottom: 18px;
		padding: 0; /* у main.css на мобиле здесь 20px — строки выходили уже полей */
	}

	.home-v2 .calculator-result-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 48px;
		padding: 0 16px;
		border-radius: 16px;
		background: var(--light);
	}

	.home-v2 .calculator-result-item h3 {
		order: 0;
		margin: 0;
		font-size: 13px;
		font-weight: 500;
		color: var(--label-gray);
	}

	.home-v2 .calculator-result-rata {
		order: 1;
		font-size: 15px;
		font-weight: 700;
	}

	.home-v2 .calculator-actions .calculator-action-button {
		max-width: none;
		height: 52px;
		border-radius: 16px;
		font-size: 16px;
		font-weight: 700;
		background: var(--accent);
	}

	/* затемнение «Сначала выберите регион» — по размеру панели */
	.home-v2 .calc-overlay {
		border-radius: 16px;
	}

	/* --- Баннеры --- */
	.home-v2 .home-banners {
		padding: 0 0 24px;
	}

	.home-v2 .home-banner {
		border-radius: 22px;
	}

	/* --- Лента «Новые объявления» (FeedCard) --- */
	.home-v2 .new-posts .container {
		padding: 0 20px;
	}

	.home-v2 .new-posts .posts-grid {
		gap: 20px 8px;
	}

	.home-v2 .new-posts .post-item {
		display: flex;
		flex-direction: column;
	}

	.home-v2 .new-posts .post-item-image {
		aspect-ratio: 164 / 182;
		height: auto;
		border-radius: 24px;
	}

	.home-v2 .new-posts .post-item-title {
		order: 1;
		margin-top: 8px;
		font-size: 15px;
		font-weight: 500;
		line-height: 20px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.home-v2 .new-posts .post-item-location {
		order: 2;
		margin-top: 4px;
		font-size: 11px;
		line-height: 16px;
		color: rgb(22 14 24 / 40%);
	}

	.home-v2 .new-posts .post-item-pair {
		order: 3;
		margin-top: 8px;
	}

	.home-v2 .new-posts .post-item-price {
		font-size: 18px;
		font-weight: 700;
		line-height: 16px;
	}

	.home-v2 .new-posts .promo-mark {
		background: rgb(238 237 254 / 92%);
		color: #534ab7; /* как в FeedCard приложения */
		font-size: 11px;
		font-weight: 500;
		border-radius: 999px;
		padding: 6px 10px;
	}
}