/*
 *	districts.css — сетка плиток районов на витринах плановых отключений.
 *
 *	Кем используется:
 *		Areas/Lenenergo/Views/Categories/spb.phtml
 *		Areas/Lenenergo/Views/Categories/lo.phtml
 *		Areas/MskElektro/Views/Categories/spb.phtml
 *		Areas/MskElektro/Views/Categories/lo.phtml
 *	Подключается в Views/Shared/head_off.phtml, который тянут РОВНО два лэйаута —
 *	Views/Layouts/lenenergo-column.phtml и Views/Layouts/msk-energo-column.phtml,
 *	то есть радиус поражения ограничен этими двумя витринами.
 *
 *	Почему отдельный файл, а не правка существующих:
 *		- templates/styles/bundle.css собирается gulp'ом из Sources/Styles/Custom/main.scss;
 *		  правка исходника без пересборки до браузера не доедет, а пересборка перетрёт
 *		  расхождения собранного файла (он от 2021 года);
 *		- css/ui.css — сгенерированный файл, заканчивается ссылкой на карту исходников
 *		  (sourceMappingURL), дописывание после неё карту ломает; плюс он подключён
 *		  БЕЗ кэш-бастинга, и у вернувшегося посетителя стили бы не обновились.
 *	Новый файл подключается через assetVersion() и получает md5-кэш-бастинг из коробки.
 *
 *	Без препроцессора и без CSS-переменных: в Playwright-профиле есть webkit,
 *	держим совместимость со старыми движками.
 */


/* 1. Контейнер сетки. Это <ul>, поэтому маркеры и отступы сбрасываем явно. */
.district-grid {
	display: grid;
	gap: .5rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	/* База (до 576px): на 360px — одна колонка */
	grid-template-columns: 1fr;
}

/* Число колонок фиксированное, а НЕ auto-fill: на десктопе контейнер схлопывается
 * вдвое (col-lg-6), и auto-fill дал бы там 3 колонки по ~180px, куда не влезают
 * названия Россети МР длиной до 42 символов («Городское поселение Ступино (Ступино г.о.)»). */

/* Планшет портрет: контейнер ещё во всю ширину — две колонки */
@media (min-width: 576px) {
	.district-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 768px: col-lg-6 ещё НЕ включился, контейнер во всю ширину — влезают три колонки */
@media (min-width: 768px) {
	.district-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* 992px: включился col-lg-6 и контейнер стал ВДВОЕ УЖЕ, поэтому число колонок
 * здесь УМЕНЬШАЕТСЯ с трёх до двух. На страницу при этом приходится 4 плитки
 * в ряд — по 2 в каждой из двух половин (Санкт-Петербург / Ленинградская область). */
@media (min-width: 992px) {
	.district-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* 2. Сама плитка-ссылка */
.district-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	/* Требование к области нажатия пальцем — не ниже 44px */
	min-height: 44px;
	padding: .5rem .75rem;
	border: 1px solid #dee2e6;
	border-radius: .375rem;
	background: #fff;
	color: #212529;
	text-decoration: none;
	line-height: 1.25;
	/* Длинные названия переносятся, а НЕ обрезаются многоточием:
	 * посетителю нужно прочитать название района целиком */
	word-break: break-word;
	overflow-wrap: anywhere;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}


/* 3. Состояния */
.district-card:hover {
	border-color: #0d6efd;
	background: #f8f9fb;
	text-decoration: none;
}

/* Оба селектора сразу: :focus-visible не поддерживается Safari < 15.4,
 * а webkit-профиль в тестах есть. Браузер с поддержкой возьмёт более специфичный. */
.district-card:focus {
	outline: 2px solid #0d6efd;
	outline-offset: 2px;
}

.district-card:focus-visible {
	outline: 2px solid #0d6efd;
	outline-offset: 2px;
}

/* Чтобы у мыши рамка не мигала. Единственное место с outline: none,
 * и оно исключает ровно случай, когда рамка и не нужна. */
.district-card:focus:not(:focus-visible) {
	outline: none;
}


/* 4. Название района — занимает всё свободное место */
.district-card__name {
	flex: 1 1 auto;
}


/* 5. Счётчик актуальных отключений */
.district-card__count {
	flex: 0 0 auto;
	min-width: 1.75rem;
	padding: .1rem .4rem;
	border-radius: .75rem;
	background: #dc3545;
	color: #fff;
	font-size: .8125rem;
	font-weight: 600;
	text-align: center;
}


/* 6. Приглушённая плитка — актуальных отключений нет.
 * Намеренно БЕЗ opacity и без ухода цвета текста ниже контраста 4.5:1 к фону:
 * у Ленэнерго приглушены могут быть все районы разом, и страница не должна
 * превращаться в нечитаемое серое полотно. Hover и focus работают как у обычной. */
.district-card--quiet {
	background: #f8f9fa;
	border-color: #e9ecef;
	color: #495057;
}


/* 7. Заголовок региона — заменяет инлайновый font-size:22px */
.district-region-title {
	font-size: 1.375rem;
	margin: 0 0 .75rem;
}


/* 8. Текстовая подпись счётчика для скринридера.
 * Класс собственный, а не бутстраповский: bundle.css от 2021 года,
 * наличие .visually-hidden в нём не гарантировано. */
.visually-hidden-district {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* 9. Блок актуальных отключений на странице района.
 * Актуальные (offdate >= сегодня) выводятся первыми, прошедшие — ниже,
 * свёрнутыми в <details>. Разметка: Areas/{Lenenergo,MskElektro}/Views/Categories/products.list.phtml */
.outages-actual {
	margin: 0 0 1rem;
}


/* 10. Заголовок секции. Размер согласован с .district-region-title,
 * чтобы страница района и страница списка районов смотрелись одной витриной. */
.outages-heading {
	/* на узких экранах размер тянется по ширине, чтобы «Все отключения на Сентябрь 2026» влезало в строку */
	font-size: clamp(0.95rem, 4.2vw, 1.375rem);
	margin: 0 0 .75rem;
	white-space: nowrap;
}

@media (min-width: 576px) {
	.outages-heading {
		white-space: normal;
	}
}


/* 11. «Актуальных отключений нет».
 * Приглушение фоном, а НЕ opacity — то же правило, что у .district-card--quiet:
 * у Ленэнерго актуальных нет ни в одном районе, и этот текст виден всегда. */
.outages-empty {
	margin: 0;
	padding: .75rem;
	border: 1px solid #e9ecef;
	border-radius: .375rem;
	background: #f8f9fa;
	color: #495057;
	line-height: 1.35;
}


/* 12. Свёрнутый архив прошедших отключений.
 * Нативный <details>: содержимое физически остаётся в HTML-ответе и в DOM
 * (нужно поисковой выдаче), а раскрытие работает без единой строки JavaScript. */
.outages-archive {
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid #dee2e6;
}


/* 13. Кнопкоподобный заголовок архива.
 * display: block обязателен: у <summary> дефолтный display: list-item,
 * и в разных движках маркер снимается по-разному. */
.outages-archive > summary {
	display: block;
	position: relative;
	/* Область нажатия пальцем — не ниже 44px, как у .district-card */
	min-height: 44px;
	padding: .625rem 2.25rem .625rem .75rem;
	border: 1px solid #dee2e6;
	border-radius: .375rem;
	background: #fff;
	color: #212529;
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/* Длинный текст переносится, чтобы на 360px ничего не вылезало за вьюпорт */
	word-wrap: break-word;
	word-break: break-word;
	overflow-wrap: anywhere;
	transition: border-color .15s ease, background-color .15s ease;
}

/* Нативный маркер снимаем ОБЕИМИ формами: webkit понимает только первую,
 * Firefox/Chromium новых версий — вторую. */
.outages-archive > summary::-webkit-details-marker {
	display: none;
}

.outages-archive > summary::marker {
	content: "";
}

.outages-archive > summary:hover {
	border-color: #0d6efd;
	background: #f8f9fb;
}

/* Оба селектора сразу: :focus-visible не поддерживается Safari < 15.4,
 * а webkit-профиль в тестах есть. */
.outages-archive > summary:focus {
	outline: 2px solid #0d6efd;
	outline-offset: 2px;
}

.outages-archive > summary:focus-visible {
	outline: 2px solid #0d6efd;
	outline-offset: 2px;
}


/* 14. Собственный индикатор раскрытия.
 * Текстовый символ, а НЕ иконочный шрифт: не завязываемся на Font Awesome. */
.outages-archive > summary::after {
	content: "\25BC";
	position: absolute;
	top: 50%;
	right: .75rem;
	margin-top: -.5em;
	color: #005b9c;
	font-size: .75rem;
	line-height: 1;
}

.outages-archive[open] > summary::after {
	content: "\25B2";
}


/* 15. Раскрытое состояние отличается фоном — видно, что блок развёрнут */
.outages-archive[open] > summary {
	background: #f1f5f9;
	border-color: #cfd8e3;
}


/* 16. Содержимое архива */
.outages-archive__body {
	margin-top: 1rem;
}

/* 17. Переключатель периода: «весь месяц» / «только сегодня» — без JavaScript */
.outages-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.outages-filter__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.outages-filter__btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 8px 18px;
	border: 1px solid #c9d4e0;
	border-radius: 8px;
	background: #fff;
	color: #005b9c;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.outages-filter__btn:hover {
	border-color: #005b9c;
	background: #f2f7fc;
}

#outages-scope-month:checked ~ .outages-filter [for="outages-scope-month"],
#outages-scope-today:checked ~ .outages-filter [for="outages-scope-today"] {
	border-color: #005b9c;
	background: #005b9c;
	color: #fff;
}

.outages-filter__input:focus-visible ~ .outages-filter .outages-filter__btn {
	outline: 2px solid #0d6efd;
	outline-offset: 2px;
}

#outages-scope-today:checked ~ .row .outage-item:not(.outage-item--today) {
	display: none;
}

/* ============================================================================
   Резерв места под адаптивный RTB-баннер R-A-1585682-1 (борьба с CLS).

   Зачем: баннер догружается асинхронно и раздвигает страницу — контент прыгает
   вниз, PageSpeed штрафует за Cumulative Layout Shift. Обёртка .rtb-slot держит
   высоту заранее, а на время загрузки показывает нейтральную серую заглушку.

   ВЛАДЕЛЬЦУ: увидев фактическую высоту баннера на боевом сайте, поправьте два
   числа в блоке :root ниже — больше нигде менять ничего не нужно.

   Обёртку .rtb-slot используют 8 шаблонов:
     Areas/Lenenergo/Views/Categories/{index,details,widgetspb,widgetlo}.phtml
     Areas/MskElektro/Views/Categories/{index,details,widgetspb,widgetlo}.phtml
   Сам рекламный блок (его контейнер и вызов рендера РСЯ) стилями
   НЕ адресуется — правила РСЯ запрещают вмешиваться в код блока.
   ============================================================================ */

:root {
	/* Высота резерва под баннер. Правится ТОЛЬКО здесь. */
	--rtb-slot-min-h: 320px;          /* телефон: держится только пока баннера нет */
	--rtb-slot-min-h-desktop: 175px;  /* десктоп: измерено 170px */
}

/* isolation: isolate создаёт на обёртке свой контекст наложения — заглушка с
   z-index: -1 уходит под содержимое обёртки, но не проваливается под фоны
   родительских блоков. Так заглушка ложится под рекламу без единого стиля на
   самом рекламном блоке. */
.rtb-slot {
	position: relative;
	isolation: isolate;
	min-height: var(--rtb-slot-min-h);
}

@media (min-width: 768px) {
	.rtb-slot {
		min-height: var(--rtb-slot-min-h-desktop);
	}
}

/* Заглушка — чистый CSS, без JS. Пульсация анимирует background-color, а
   гашение — opacity/visibility: разные свойства выбраны намеренно, две анимации
   одного свойства конфликтуют по приоритету и «гаснет через 6 секунд» перестало
   бы работать предсказуемо. forwards фиксирует погашенное состояние — при
   отсутствии подходящих объявлений заглушка не пульсирует вечно. */
.rtb-slot::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;                /* longhand вместо inset — совместимость со старыми Safari */
	z-index: -1;            /* строго ПОД рекламой */
	border-radius: 6px;
	background-color: #eef1f4;
	animation: rtb-slot-pulse 1.4s ease-in-out infinite alternate,
	           rtb-slot-fade .5s ease-out 6s forwards;
}

@keyframes rtb-slot-pulse {
	to { background-color: #dfe4ea; }
}

@keyframes rtb-slot-fade {
	to { opacity: 0; visibility: hidden; }
}

/* Системная настройка «меньше анимации»: пульсацию убираем, самопогасание оставляем. */
@media (prefers-reduced-motion: reduce) {
	.rtb-slot::before {
		animation: rtb-slot-fade .5s ease-out 6s forwards;
	}
}

/* 19. Хлебные крошки на телефоне — одной строкой с прокруткой, без переноса */
@media (max-width: 767.98px) {
	.breadcrumb {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		white-space: nowrap;
	}

	.breadcrumb::-webkit-scrollbar {
		display: none;
	}

	.breadcrumb-item {
		flex: 0 0 auto;
	}

	.breadcrumb-item.active {
		text-overflow: ellipsis;
		overflow: hidden;
		max-width: 60vw;
	}
}

/* Баннер отрисован — резерв и заглушка больше не нужны: высоту задаёт сама реклама.
   Так место занято, пока блок пуст, и нет пустой дыры, когда пришёл невысокий баннер. */
.rtb-slot:has(iframe),
.rtb-slot:has([id^="yandex_rtb_"] > *) {
	min-height: 0;
}

.rtb-slot:has(iframe)::before,
.rtb-slot:has([id^="yandex_rtb_"] > *)::before {
	content: none;
}

/* 20. Блок «Что делать если нет электричества» */
.blackout-tip {
	background: #fff;
	border: 1px solid #dbe3ec;
	border-left: 4px solid #005b9c;
	border-radius: 12px;
	padding: 20px;
	margin: 16px 0;
	box-shadow: 0 1px 2px rgba(15, 27, 42, .05), 0 6px 20px rgba(15, 27, 42, .05);
}

.blackout-tip > p {
	margin: 0 0 14px;
	color: #41546b;
	font-size: 15px;
	line-height: 1.55;
}

.blackout-tip > p:last-child {
	margin-bottom: 0;
	margin-top: 14px;
}

.blackout-tip__title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 12px;
	color: #0f1b2a;
}

.blackout-tip__list {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
}

.blackout-tip__list + .blackout-tip__list {
	margin-top: 10px;
}

.blackout-tip__list li {
	position: relative;
	padding: 0 0 0 26px;
	margin-bottom: 10px;
	line-height: 1.5;
}

.blackout-tip__list li:last-child {
	margin-bottom: 0;
}

.blackout-tip__list li::before {
	content: "";
	position: absolute;
	left: 8px;
	top: .62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #005b9c;
}

.blackout-tip a {
	color: #00406e;
	font-weight: 600;
}

.blackout-tip a[href^="tel:"] {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
	.blackout-tip {
		padding: 16px 14px;
		border-radius: 10px;
	}

	.blackout-tip__title {
		font-size: 17px;
	}

	.blackout-tip a[href^="tel:"] {
		display: inline-block;
		padding: 2px 0;
	}
}