/* ==========================================================================
   Главная страница
   Подключается только в templates/pages/home.html через {% block page_css %}.
   Общие компоненты (кнопки, карточки, сетки) живут в main.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Полоса важных объявлений — над героем
   -------------------------------------------------------------------------- */

/* Полоса объявлений всегда красная — она должна цеплять взгляд независимо
   от типа баннера. Текст, ссылку и сам факт показа редактор задаёт
   в админке (AlertBanner). */
.alert-strip__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  padding-block: 0.75rem;
  font-size: var(--fs-sm);
  background: var(--danger-bg);
  border-bottom: 1px solid rgba(210, 35, 30, 0.25);
  color: #8c1714;
}

.alert-strip__item a {
  color: #8c1714;
}

.alert-strip__item strong {
  font-weight: 700;
}

.alert-strip__item a {
  margin-left: auto;
  font-weight: 600;
  text-decoration: underline;
}

/* Классы вида .alert-strip__item--<тип> остаются в разметке: если позже
   понадобится разделить полосы по цвету (аварийное / плановые / тариф),
   достаточно дописать здесь правила — трогать шаблон не придётся. */

/* --------------------------------------------------------------------------
   Герой
   Мобильный: картинка сверху, текст под ней.
   С 1024px: две колонки, справа фото со скруглённым срезом и жёлтой дугой —
   мотив логотипа, но своей геометрии.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  color: var(--text-inverse);
  /* Подложка на случай, если у слайда нет фото: фирменный градиент
     с тонкой сеткой — читается как схема сети, а не как пустое пятно. */
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 56px),
    linear-gradient(135deg, var(--brand-darker), var(--brand) 55%, var(--brand-light));
}

.hero__slides {
  position: relative;
}

.hero__slide {
  display: none;
}

.hero__slide[data-active="true"] {
  display: block;
  /* Плавное появление — без него смена слайда происходит скачком
     и выглядит как перезагрузка блока */
  animation: hero-fade 550ms ease both;
}

@keyframes hero-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- фон слайда: фото грузится в админке (HeroSlide.desktop_image) --- */

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* <picture> — обычный inline-элемент с высотой auto, и height:100%
   у картинки считался от него, а не от блока фона: снимок не дотягивался
   до низа и под ним оставалась полоса подложки. */
.hero__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Затемнение поверх фото — сила настраивается в админке
   полем overlay_strength и приезжает инлайновой переменной --overlay */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Два слоя: ровная подложка по всей площади и вертикальный градиент.
     Только градиента не хватало — заголовок приходится на светлое небо
     в середине кадра, а темнеет при этом низ. */
  background:
    linear-gradient(
      180deg,
      rgba(5, 39, 72, calc(var(--overlay, 55) / 100 * 0.55)),
      rgba(5, 39, 72, calc(var(--overlay, 55) / 100 * 1.1))
    ),
    rgba(5, 39, 72, calc(var(--overlay, 55) / 100 * 0.5));
}

/* --- содержимое: по центру, поверх фона --- */

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  padding-block: 3rem 4rem;   /* снизу больше: там лежат точки-переключатели */
  text-align: center;
}

.hero__eyebrow {
  display: inline-block;
  margin-bottom: 0.85rem;
  padding: 0.3rem 0.75rem;
  background: var(--accent);
  border-radius: var(--radius-sm);
  color: var(--brand-darker);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hero h1 {
  max-width: 20ch;
  margin-bottom: 1rem;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(5, 39, 72, 0.35);
}

.hero__lead {
  max-width: 52ch;
  margin-bottom: 1.75rem;
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, 0.9);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* Точки-переключатели лежат поверх фотографии, у нижнего края.

   Раньше они занимали отдельную строку под слайдом. Подложка слайда её
   не покрывала, и снизу оставалась полоса фирменного градиента —
   на светлом снимке она читалась как синий прямоугольник. */
.hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.1rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  list-style: none;
}

.hero__dots button {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background var(--transition), transform var(--transition);
}

.hero__dots button:hover {
  background: rgba(255, 255, 255, 0.75);
}

.hero__dots button[aria-selected="true"] {
  background: var(--accent);
  transform: scale(1.35);
}

@media (min-width: 768px) {
  .hero__content {
    min-height: 460px;
    padding-block: 4.5rem;
  }
}

@media (min-width: 1200px) {
  .hero__content {
    min-height: 540px;
  }
}

/* --------------------------------------------------------------------------
   Полоса метрик — «КРЭК в цифрах»
   Горизонтальная прокрутка на мобильном, сетка на десктопе.
   -------------------------------------------------------------------------- */

.metrics {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

/* Бесконечная лента: две одинаковые группы едут влево, вторая подхватывает
   первую без стыка. Ручных стрелок нет — полоса крутится сама. */
.metrics__marquee {
  display: flex;
  gap: 2.5rem;
  overflow: hidden;
  padding-block: 2rem;
  /* Края растворяются, чтобы лента не обрывалась резко */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.metrics__group {
  display: flex;
  flex-shrink: 0;
  gap: 2.5rem;
  min-width: 100%;
  justify-content: space-around;
  align-items: flex-start;
  list-style: none;
  animation: metrics-scroll 45s linear infinite;
}

@keyframes metrics-scroll {
  to {
    transform: translateX(calc(-100% - 2.5rem));
  }
}

.metrics__marquee:hover .metrics__group,
.metrics__marquee:focus-within .metrics__group {
  animation-play-state: paused;
}

/* Без анимации лента превращается в обычную прокручиваемую полосу */
@media (prefers-reduced-motion: reduce) {
  .metrics__marquee {
    overflow-x: auto;
  }

  .metrics__group {
    animation: none;
  }

  .metrics__group + .metrics__group {
    display: none;
  }
}

.metric {
  flex-shrink: 0;
  text-align: center;
  padding-inline: 0.5rem;
}

.metric__value {
  display: block;
  font-size: var(--fs-3xl);
  font-weight: 800;
  line-height: 1;
  color: var(--brand);
  letter-spacing: -0.03em;
  /* «14 000 км» не должно разрываться по пробелу — иначе едет вся полоса */
  white-space: nowrap;
}

@media (min-width: 768px) {
  .metric__value {
    font-size: var(--fs-4xl);
  }
}

.metric__unit {
  font-size: var(--fs-xl);
  color: var(--brand-light);
}

.metric__label {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.scroller {
  position: relative;
}

.scroller__btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand);
  place-items: center;
  box-shadow: var(--shadow-sm);
}

.scroller__btn:hover {
  border-color: var(--brand);
  background: var(--brand-lighter);
}

.scroller__btn svg {
  width: 20px;
  height: 20px;
}

.scroller__btn--prev { left: -8px; }
.scroller__btn--next { right: -8px; }

@media (min-width: 1024px) {
  .scroller__btn { display: grid; }
}

/* --------------------------------------------------------------------------
   О компании: фотография, текст и карточка обращения
   -------------------------------------------------------------------------- */

.about__grid {
  display: grid;
  /* Явная колонка обязательна: без неё неявная растягивается по содержимому
     и блок вылезает за край на узком экране. */
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

@media (min-width: 900px) {
  .about__grid {
    /* Фото занимает примерно треть, текст — остальное */
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 3rem;
    align-items: stretch;
  }
}

/* --- фотографии: один снимок или коллаж из трёх --- */

.about__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0;
  /* align-content: start не даёт сетке растянуть строки по высоте колонки —
     иначе заданные соотношения сторон перебиваются и квадраты «плывут». */
  align-content: start;
}

.about__photo {
  display: block;
  width: 100%;
  /* height не задаём: высоту диктует соотношение сторон */
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface-sunk);
}

/* Крупный снимок — во всю ширину колонки */
.about__photo--main {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 10;
  object-position: center 30%;   /* лица бригады выше геометрического центра */
}

/* Пара нижних — ровные квадраты */
.about__photo:not(.about__photo--main) {
  aspect-ratio: 1 / 1;
}

/* Единственный снимок занимает колонку целиком и стоит вертикально */
.about__photo--main:only-child {
  aspect-ratio: 4 / 5;
}

/* Декоративной полосы здесь нет намеренно: она ложилась поверх снимка
   и читалась как дефект. Акцент в блоке даёт подчёркивание заголовка. */

/* --- текст и карточка --- */

.about__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.about__lead {
  max-width: 62ch;
  font-size: var(--fs-lg);
  color: var(--text-muted);
}

.about__body .cluster {
  margin: 0;
}

/* Кнопки блока одной ширины и по левому краю своего контейнера.
   min-width не годился: у кнопок разной длины текста ширина всё равно
   расходилась. Здесь обе тянутся до общего предела, а на узком экране
   сжимаются вместе с колонкой и ничего не выпирает. */
/* Обе кнопки блока одной ширины. Предел задан и обёртке, и самой кнопке:
   первая лежит во flex-контейнере .cluster и без этого получала ширину
   по содержимому, а вторая тянулась до предела — они расходились. */
.about__body .cluster,
.about__body .btn {
  width: 100%;
  max-width: 20.5rem;
}

.about__body .cluster .btn {
  max-width: none;
}

.leader-card {
  width: 100%;
  margin-top: auto;      /* карточка прижата к низу колонки, вровень с фото */
  padding: 1.75rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand-darker), var(--brand));
  color: var(--text-inverse);
}

.leader-card__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.leader-card__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-inverse);
}

.leader-card__icon svg {
  width: 26px;
  height: 26px;
}

.leader-card h2 {
  font-size: var(--fs-xl);
  text-transform: uppercase;
}

.leader-card p {
  margin-bottom: 1.25rem;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------------------------
   Быстрые сервисы — сетка карточек с иконками
   -------------------------------------------------------------------------- */

.services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

@media (min-width: 768px) {
  .services__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 1.5rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.service-card:hover {
  border-color: var(--brand-light);
  box-shadow: var(--shadow);
  text-decoration: none;
  transform: translateY(-2px);
}

.service-card__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: var(--brand-lighter);
  color: var(--brand);
}

.service-card:hover .service-card__icon {
  background: var(--brand);
  color: var(--text-inverse);
}

.service-card__icon svg {
  width: 28px;
  height: 28px;
}

.service-card__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

@media (min-width: 768px) {
  .service-card__title {
    font-size: var(--fs-base);
  }
}

/* --------------------------------------------------------------------------
   Новости
   -------------------------------------------------------------------------- */

.news__grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .news__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Две колонки: документы и плановые отключения
   -------------------------------------------------------------------------- */

.digest__grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  .digest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
}

/* Колонка: список тянется, кнопка прижата к низу — обе колонки
   заканчиваются на одной линии независимо от числа записей */
.digest {
  display: flex;
  flex-direction: column;
}

.digest__more {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 0;
}

.digest-list {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  list-style: none;
}

.digest-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--transition), box-shadow var(--transition);
}

a.digest-item:hover {
  border-color: var(--brand-light);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

/* Значок формата файла */
.digest-item__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* Плашка с датой отключения: число крупно, месяц подписью */
.digest-item__date {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  padding-block: 0.35rem;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--text-inverse);
  line-height: 1.1;
}

.digest-item__day {
  font-size: var(--fs-lg);
  font-weight: 800;
}

.digest-item__month {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}

.digest-item__body {
  min-width: 0;
}

.digest-item__title {
  display: block;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

a.digest-item:hover .digest-item__title {
  color: var(--brand);
}

.digest-item__meta {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Информационные баннеры
   -------------------------------------------------------------------------- */

.promo {
  display: grid;
  /* Без явной колонки неявная растягивается по содержимому, и на узком
     экране карточка становилась шире окна — появлялась прокрутка вбок. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .promo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.promo-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  min-height: 180px;
  padding: 1.75rem;
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--text-inverse);
}

/* Жёлтая карточка: кнопка на ней должна выглядеть один в один с кнопкой
   на синей — белая рамка и белый текст. Чтобы белый на жёлтом читался,
   фон карточки взят на тон глубже чистого --accent. */
.promo-card--accent {
  background: linear-gradient(135deg, #e0a800, var(--accent));
  color: var(--brand-darker);
}

.promo-card--accent .btn--white {
  color: var(--surface);
  border-color: var(--surface);
}

.promo-card--accent .btn--white:hover {
  background: var(--surface);
  color: var(--brand-darker);
}

.promo-card h3 {
  font-size: var(--fs-xl);
  text-transform: uppercase;
}

.promo-card p {
  font-size: var(--fs-sm);
  opacity: 0.9;
}

.promo-card .btn {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Партнёры — бегущая лента

   Едет средствами CSS, как и полоса метрик: это надёжнее самодельной
   прокрутки на JS и само отключается при отключённых анимациях.
   -------------------------------------------------------------------------- */

.partners__marquee {
  display: flex;
  gap: 1rem;
  overflow: hidden;
  /* Края растворяются, чтобы лента не обрывалась резко */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.partners__group {
  display: flex;
  flex-shrink: 0;
  gap: 1rem;
  list-style: none;
  animation: partners-scroll 38s linear infinite;
}

@keyframes partners-scroll {
  to {
    transform: translateX(calc(-100% - 1rem));
  }
}

.partners__marquee:hover .partners__group,
.partners__marquee:focus-within .partners__group {
  animation-play-state: paused;
}

/* Без анимации лента превращается в обычную прокручиваемую полосу */
@media (prefers-reduced-motion: reduce) {
  .partners__marquee {
    overflow-x: auto;
  }

  .partners__group {
    animation: none;
  }

  .partners__group + .partners__group {
    display: none;
  }
}

.partner {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 220px;
  min-height: 104px;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.partner:hover {
  border-color: var(--brand-light);
  box-shadow: var(--shadow-sm);
  color: var(--brand);
  text-decoration: none;
}

/* Логотип вписываем по высоте, не растягивая */
.partner img {
  max-height: 56px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter var(--transition), opacity var(--transition);
}

.partner:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Призыв к обращению
   -------------------------------------------------------------------------- */

.cta {
  background: linear-gradient(135deg, var(--brand-darker), var(--brand));
  color: var(--text-inverse);
}

.cta__inner {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3rem;
  }
}

.cta h2 {
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.cta p {
  opacity: 0.85;
  max-width: 55ch;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Логотип в карточке: вписываем по высоте, не растягивая. Названия без
   логотипа остаются текстом — размер карточки от этого не меняется. */
.partner img {
  max-height: 56px;
  width: auto;
  object-fit: contain;
}