/* ==========================================================================
   Н-ИНФО — секции главной и подвал
   ========================================================================== */

/* --- Городской дашборд первого экрана -----------------------------------
   Погода, главный материал и отключения выше сгиба: это три причины, по
   которым в городской портал заходят повторно.
   ------------------------------------------------------------------------ */

.dash {
	padding-top: var(--sp-6);
	padding-bottom: var(--sp-8);
}

.dash__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.62fr) minmax(300px, 0.88fr);
	gap: var(--sp-4);
	align-items: stretch;
}

.dash__side {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: var(--sp-4);
	min-width: 0;
}

.dash__heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-5);
}

.dash__title {
	margin-top: var(--sp-2);
	font-size: var(--fs-3xl);
}

.dash__scope-note {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-2);
	color: var(--text-muted);
	font-size: var(--fs-sm);
}

.dash__scope-note .icon {
	width: 15px;
	height: 15px;
	color: var(--brand);
}

/* --- Погодная карточка -------------------------------------------------- */

.weather-card {
	display: grid;
	gap: var(--sp-4);
	padding: var(--sp-5);
	border-radius: var(--r-lg);
	background: linear-gradient(155deg, #1d3a5c, #0f2138 60%, #132a45);
	color: #fff;
	overflow: hidden;
	position: relative;
	isolation: isolate;
}

.weather-card::before {
	content: '';
	position: absolute;
	top: -70px;
	right: -50px;
	z-index: -1;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(245, 165, 36, 0.42),
		transparent 68%
	);
}

.weather-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-3);
}

.weather-card__place {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	color: rgba(255, 255, 255, 0.76);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.weather-card__place .icon {
	width: 15px;
	height: 15px;
}

.weather-card__icon {
	width: 44px;
	height: 44px;
	color: #ffc766;
	stroke-width: 1.5;
}

.weather-card__now {
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
}

.weather-card__temp {
	font-size: 54px;
	font-weight: 750;
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

.weather-card__cond {
	display: grid;
	gap: 2px;
}

.weather-card__cond b {
	font-size: var(--fs-md);
	font-weight: 650;
}

.weather-card__cond span {
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--fs-sm);
}

.weather-card__details {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-4);
	padding-top: var(--sp-3);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--fs-sm);
}

.weather-card__details .meta__item .icon {
	opacity: 0.75;
}

.weather-card__week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--sp-1);
}

.weather-card__day {
	display: grid;
	justify-items: center;
	gap: var(--sp-1);
	padding: var(--sp-2) 2px;
	border-radius: var(--r-xs);
	background: rgba(255, 255, 255, 0.07);
	font-size: var(--fs-2xs);
	font-variant-numeric: tabular-nums;
}

.weather-card__day .icon {
	width: 17px;
	height: 17px;
	color: rgba(255, 255, 255, 0.8);
}

.weather-card__day-label {
	color: rgba(255, 255, 255, 0.62);
	text-transform: capitalize;
}

.weather-card__day b {
	font-weight: 700;
}

.weather-card__day i {
	color: rgba(255, 255, 255, 0.55);
	font-style: normal;
}

.weather-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	color: #ffc766;
	font-size: var(--fs-sm);
	font-weight: 650;
}

/* --- Отключения --------------------------------------------------------- */

.outages {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-5);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: inset 0 0 0 1px var(--border);
}

.outages__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
}

.outages__title {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-md);
}

.outages__title .icon {
	color: var(--accent-warning);
}

.outages__updated {
	color: var(--text-muted);
	font-size: var(--fs-xs);
}

.outages__list {
	display: grid;
	gap: var(--sp-1);
	flex: 1;
}

.outage {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: var(--sp-3);
	align-items: start;
	padding: var(--sp-2);
	border-radius: var(--r-sm);
	transition: background var(--dur-fast) var(--ease-out);
}

.outage:hover {
	background: var(--surface-2);
}

.outage__icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: var(--r-xs);
}

.outage[data-kind='water'] .outage__icon {
	background: var(--accent-info-soft);
	color: var(--accent-info);
}

.outage[data-kind='power'] .outage__icon {
	background: var(--accent-warning-soft);
	color: var(--accent-warning);
}

.outage[data-kind='heat'] .outage__icon {
	background: var(--accent-danger-soft);
	color: var(--accent-danger);
}

.outage__body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.outage__title {
	font-size: var(--fs-sm);
	font-weight: 700;
}

.outage__where {
	color: var(--text-secondary);
	font-size: var(--fs-sm);
}

.outage__when {
	color: var(--text-muted);
	font-size: var(--fs-xs);
	font-variant-numeric: tabular-nums;
}

/* --- Быстрые действия --------------------------------------------------- */

.quick {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-3);
	margin-top: var(--sp-4);
}

/* --- Двухколоночный блок «Недвижимость + Авто» -------------------------- */

.market {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-8);
}

.market__col {
	min-width: 0;
}

/* --- Полоса охвата: как лестница превращается в трафик ------------------ */

.reach {
	display: grid;
	gap: var(--sp-4);
}

.reach__steps {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--sp-2);
}

.reach__step {
	display: grid;
	gap: var(--sp-2);
	padding: var(--sp-4);
	border-radius: var(--r-md);
	background: var(--surface);
	box-shadow: inset 0 0 0 1px var(--border);
	transition: box-shadow var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
}

.reach__step:hover {
	box-shadow: inset 0 0 0 1px var(--brand-soft-border), var(--shadow-2);
	transform: translateY(-2px);
}

.reach__step[data-current='true'] {
	background: var(--brand-soft);
	box-shadow: inset 0 0 0 1px var(--brand-soft-border);
}

.reach__step-icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: var(--r-xs);
	background: var(--surface-2);
	color: var(--text-muted);
}

.reach__step[data-current='true'] .reach__step-icon {
	background: var(--brand-fill);
	color: var(--text-on-brand);
}

.reach__step-level {
	color: var(--text-muted);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

.reach__step-name {
	font-size: var(--fs-base);
	font-weight: 700;
}

.reach__step-reach {
	color: var(--text-muted);
	font-size: var(--fs-xs);
	font-variant-numeric: tabular-nums;
}

.reach__step-url {
	margin-top: var(--sp-1);
	padding: 3px var(--sp-2);
	border-radius: var(--r-xs);
	background: var(--surface-2);
	color: var(--text-muted);
	font-size: 11px;
	font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- Лента новостей (news.html) -----------------------------------------
   Разделитель ступени показывает, где заканчивается выбранная география
   и начинается расширение наружу.
   ------------------------------------------------------------------------ */

.feed-controls {
	display: grid;
	gap: var(--sp-3);
	margin-bottom: var(--sp-6);
}

.feed-controls__row {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

.feed-controls__label {
	flex: none;
	color: var(--text-muted);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

.feed {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-6) var(--sp-4);
	align-items: start;
}

.feed__group {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-2);
}

.feed__group:first-child {
	margin-top: 0;
}

.feed__group-label {
	flex: none;
	color: var(--text-muted);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

.feed__group-line {
	flex: 1;
	height: 1px;
	background: var(--border);
}

@media (max-width: 1024px) {
	.feed {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.feed {
		grid-template-columns: 1fr;
		gap: var(--sp-5);
	}
}

/* --- Мягкое появление ---------------------------------------------------- */

.has-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--dur-slow) var(--ease-out),
		transform var(--dur-slow) var(--ease-out);
}

.has-reveal [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* --- Подвал ------------------------------------------------------------- */

.footer {
	margin-top: var(--sp-10);
	padding-top: var(--sp-10);
	background: var(--bg-subtle);
	box-shadow: inset 0 1px 0 var(--border);
}

.footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
	gap: var(--sp-8);
	padding-bottom: var(--sp-8);
}

.footer__brand {
	display: grid;
	gap: var(--sp-3);
	align-content: start;
}

.footer__tagline {
	color: var(--text-muted);
	font-size: var(--fs-sm);
	max-width: 34ch;
}

.footer__title {
	margin-bottom: var(--sp-3);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--text-muted);
}

.footer__list {
	display: grid;
	gap: var(--sp-2);
}

.footer__list a {
	color: var(--text-secondary);
	font-size: var(--fs-sm);
	transition: color var(--dur-fast) var(--ease-out);
}

.footer__list a:hover {
	color: var(--brand-text);
}

.footer__social {
	display: flex;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
}

.footer__social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--text-secondary);
	box-shadow: inset 0 0 0 1px var(--border);
	font-size: var(--fs-xs);
	font-weight: 700;
	transition: color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}

.footer__social a:hover {
	color: var(--brand-text);
	box-shadow: inset 0 0 0 1px var(--brand-soft-border);
}

.footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	flex-wrap: wrap;
	padding-block: var(--sp-5);
	box-shadow: inset 0 1px 0 var(--border);
	color: var(--text-muted);
	font-size: var(--fs-xs);
}

.footer__bottom a {
	color: var(--text-muted);
	transition: color var(--dur-fast) var(--ease-out);
}

.footer__bottom a:hover {
	color: var(--brand-text);
}

.footer__legal {
	display: flex;
	gap: var(--sp-4);
	flex-wrap: wrap;
}

/* --- Плашка прототипа --------------------------------------------------- */

.proto-flag {
	position: fixed;
	right: var(--sp-4);
	bottom: var(--sp-4);
	z-index: var(--z-toast);
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-4);
	border-radius: var(--r-full);
	background: var(--n-900);
	color: #fff;
	font-size: var(--fs-xs);
	font-weight: 650;
	box-shadow: var(--shadow-4);
}

.proto-flag .icon {
	width: 15px;
	height: 15px;
	color: var(--brand-400);
}

/* --- Адаптив ------------------------------------------------------------ */

@media (max-width: 1180px) {
	.reach__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.market {
		gap: var(--sp-6);
	}
}

@media (max-width: 1024px) {
	.dash__grid {
		grid-template-columns: 1fr;
	}

	.dash__side {
		grid-template-rows: none;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.market {
		grid-template-columns: 1fr;
		gap: var(--sp-8);
	}

	.footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-6);
	}
}

@media (max-width: 760px) {
	.dash {
		padding-top: var(--sp-4);
		padding-bottom: var(--sp-6);
	}

	.dash__side {
		grid-template-columns: 1fr;
	}

	.dash__heading {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--sp-2);
	}

	.dash__title {
		font-size: var(--fs-2xl);
	}

	.quick {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.reach__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.weather-card {
		padding: var(--sp-4);
	}

	.weather-card__temp {
		font-size: 44px;
	}

	.footer {
		margin-top: var(--sp-8);
		padding-top: var(--sp-8);
	}

	.footer__top {
		grid-template-columns: 1fr;
		gap: var(--sp-6);
	}

	.proto-flag {
		right: var(--sp-3);
		bottom: 66px;
	}
}

@media (max-width: 420px) {
	.quick {
		grid-template-columns: 1fr;
	}

	.reach__steps {
		grid-template-columns: 1fr;
	}
}