/* ==========================================================================
   Главная (макеты 01: f4N1I мобайл, BKzKL десктоп).
   Сначала мобайл, затем ≥ 768 (десктопная структура) и ≥ 1200 (десктоп).
   ========================================================================== */

/* Цвета, которые встречаются только на главной и не вынесены в tokens.css. */
.home-page {
  --page-top: 0; /* страница начинается сразу с первого экрана */
  --home-graphite: #333333;           /* кнопка «Сканировать QR», заголовок «Частые вопросы» (мобайл) */
}

/* ── Первый экран ────────────────────────────────────────────────────────── */
.home-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* на мобильных — без учёта адресной строки */
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
}

.home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Затемнение: сверху под шапкой, светлее в середине, плотнее к низу под текстом. */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.25) 42%, rgb(0 0 0 / 0.85) 100%);
}

.home-hero__content {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: flex-end;
}

.home-hero__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 40px;
}

/* 29/32 px как в макете, но не шире колонки: самое длинное слово «пожарно-спасательного»
   (15,7 кегля) должно встать в строку целиком, без разрыва по дефису (на 390 px — 22,4 px). */
.home-hero__title {
  font-size: min(29px, (100vw - 2 * var(--gutter)) / 16);
  font-weight: 500;
  line-height: 1.1035;
}

.home-hero__br-d {
  display: none;
}

/* Панель поиска на мобайле шире колонки текста: поля 12 px вместо 16. */
.home-hero__search {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-inline: -4px;
  padding-bottom: 14px;
}

.home-search {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-10);
  background: var(--bg);
  color: var(--ink);
}

.home-search:has(.home-search__input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 0; /* контур вплотную к полю, без прозрачного зазора */
}

.home-search__form {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-search__sign,
.home-search__submit {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 11px;
}

.home-search__sign {
  background: var(--surface);
  font-size: 16px;
  white-space: nowrap;
}

.home-search__input {
  flex: 1 1 0;
  min-width: 0;
  height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  /* 16 px: с меньшим шрифтом Safari на iPhone увеличивает страницу при нажатии на поле.
     Подсказка в пустом поле — 13,5 px, как в макете. */
  font-size: 16px;
  font-weight: 300;
  outline: none;
}

.home-search__input::placeholder {
  color: var(--ink-2);
  font-size: 13.5px;
  opacity: 1;
}

.home-search__submit {
  background: var(--accent);
  color: var(--bg);
  transition: filter 0.15s ease;
}

.home-search__submit .icon {
  width: 19px;
  height: 19px;
}

.home-search__divider {
  height: 1px;
  background: var(--line);
}

.home-search__qr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 50px;
  border-radius: var(--radius-12);
  background: var(--home-graphite);
  color: #fff;
  font-size: 14px;
  white-space: nowrap;
  transition: filter 0.15s ease;
}

.home-search__qr .icon {
  width: 19px;
  height: 19px;
}

.home-hero__hint {
  color: var(--hero-hint);
  font-size: 10.5px;
  font-weight: 300;
  text-align: center;
}

@media (hover: hover) {
  .home-search__submit:hover,
  .home-search__qr:hover {
    filter: brightness(0.92);
  }
}

@media (min-width: 768px) {
  .home-hero {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .home-hero__content {
    gap: 20px;
    padding-bottom: 56px;
  }

  .home-hero__heading {
    gap: 20px;
    padding-bottom: 0;
  }

  /* Кегль по ширине колонки, до 58 px: заголовок в две строки — «Центр пропаганды» /
     «пожарно-спасательного дела» (19,1 кегля; запас — на полосу прокрутки). */
  .home-hero__title {
    font-size: min(58px, (100vw - 2 * var(--gutter)) / 19.6);
    line-height: 1.052;
  }

  .home-hero__br-d {
    display: initial;
  }

  .home-hero__search {
    max-width: 560px;
    margin-inline: 0;
    padding-bottom: 0;
  }

  /* Подсказка под полем (ТЗ 3.1) — на десктопе по левому краю поля, светлее и крупнее. */
  .home-hero__hint {
    padding-left: 16px;
    color: rgb(247 243 236 / 0.75);
    font-size: 12px;
    text-align: left;
  }

  .home-search {
    gap: 14px;
    padding: 10px 16px;
    border-radius: 14px;
  }

  .home-search__sign,
  .home-search__submit {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-10);
  }

  .home-search__input {
    height: 50px;
  }

  .home-search__submit .icon {
    width: 18px;
    height: 18px;
  }
}

/* ── Общее для разделов: заголовок, кнопки «Все …» ───────────────────────── */
.home-section {
  --home-section-gap: 22px;
  display: flex;
  flex-direction: column;
  gap: var(--home-section-gap);
}

.home-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.home-section__heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.home-section__title {
  font-size: 40px;
  font-weight: 400;
  line-height: normal;
}

.home-section__intro {
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 300;
  line-height: 19px;
}

/* Кнопка внизу раздела (мобайл): «Все экспонаты», «Больше материалов», «Больше историй». */
.home-section__bottom {
  --btn-h: 52px;
  font-size: 14px;
}

.home-section__bottom.btn--accent,
.home-section__more.btn--accent {
  color: var(--bg);
}

/* Сетки карточек: карточки в ряду одной высоты. */
.home-stories__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.home-stories__grid > li > * {
  height: 100%;
}

@media (min-width: 768px) {
  .home-section {
    --home-section-gap: 40px;
  }

  .home-section__head {
    gap: 32px;
  }

  .home-section__title {
    font-size: 54px;
    line-height: 54px;
  }

  .home-section__more {
    flex: none;
  }
}

/* ── Немного о центре ────────────────────────────────────────────────────── */
.home-about {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home-about__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home-about__title {
  font-size: 38px;
  line-height: 38px;
}

.home-about__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.home-about__lead {
  font-size: 14px;
  line-height: 21px;
}

.home-about__photo {
  height: 230px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--photo-placeholder);
}

.home-about__list {
  padding-top: 12px;
}

/* Высота пунктов — как в макете (74,5 px), текст прижат к верху. */
.home-about__list li {
  display: flex;
  gap: 14px;
  min-height: 74.5px;
  padding: 14px 0;
}

.home-about__list li + li {
  border-top: 1px solid var(--line);
}

/* Цифры одной ширины: текст пунктов «01», «02», «03» начинается на одной линии. */
.home-about__num {
  flex: none;
  color: var(--accent);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
  white-space: nowrap;
}

.home-about__item {
  flex: 1 1 0;
  font-size: 13.5px;
  line-height: 19px;
}

.home-about__button {
  --btn-h: 48px;
  width: 100%;
}

@media (min-width: 768px) {
  .home-about {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "intro photo"
      "button photo"
      "list list";
    column-gap: 40px;
    row-gap: 34px;
  }

  .home-about__intro {
    grid-area: intro;
    gap: 22px;
  }

  .home-about__title {
    font-size: 50px;
    line-height: 45px;
  }

  .home-about__facts {
    gap: 8px;
  }

  .home-about__lead {
    font-size: 16px;
    line-height: 25px;
  }

  .home-about__photo {
    grid-area: photo;
    height: 410px;
  }

  .home-about__button {
    grid-area: button;
    align-self: end;
    justify-self: start;
    width: auto;
    color: var(--bg);
  }

  .home-about__list {
    grid-area: list;
    padding-top: 0;
  }

  /* Число колонок задаёт шаблон (--home-about-cols): пунктов в админке сколько угодно. */
  .home-about__list ol {
    display: grid;
    grid-template-columns: repeat(var(--home-about-cols, 3), minmax(0, 1fr));
    gap: 28px;
  }

  /* Пункты в ряд: линия сверху, высота как в макете (16 + 85,5 px). */
  .home-about__list li,
  .home-about__list li + li {
    flex-direction: column;
    gap: 10px;
    min-height: 101.5px;
    padding: 16px 0 0;
    border-top: 1px solid var(--line);
  }

  .home-about__num {
    font-size: 13px;
    line-height: normal;
  }

  .home-about__item {
    flex: none;
    font-size: 15px;
    line-height: 22px;
  }
}


@media (min-width: 1200px) {
  /* Текст 540 px и фото 682 px при колонке 1280 — пропорционально. */
  .home-about {
    grid-template-columns: minmax(0, 540fr) minmax(0, 682fr);
    column-gap: 58px;
  }
}

/* ── Пожарно-техническая выставка: введение в экспозицию (правки по вёрстке) ──
   Заголовок и под ним текст из админки, рядом фото; ниже «На выставке представлено:» —
   залы карточками на подложке (--surface, как остальные карточки сайта), без номеров,
   «И многое другое…» и кнопка в экспозицию. Экспонатов нет.
   < 768   залы строками на подложке: миниатюра и название;
   ≥ 768   текст слева, фото справа; залы — карточками в ряд: фото сверху, название, описание. */
.home-expo {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home-expo__intro {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* «Пожарно-техническая» — длинное слово Unbounded: на телефоне кегль по ширине колонки,
   перенос — по дефису. */
.home-expo__title {
  font-size: min(38px, (100vw - 2 * var(--gutter)) / 10.6);
  line-height: 1.05;
}

.home-expo__lead {
  font-size: 14px;
  line-height: 21px;
}

.home-expo__photo {
  height: 230px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--photo-placeholder);
}

.home-expo__halls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 12px;
}

.home-expo__halls-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.home-expo__label {
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

.home-expo__more-btn {
  flex: none;
  color: var(--bg);
}

.home-expo__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Карточка зала — ссылка целиком, на подложке: миниатюра 64 × 64 и название. */
.home-expo__hall {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  border-radius: var(--radius-12);
  background: var(--surface);
  transition: filter 0.15s ease;
}

.home-expo__hall-photo {
  flex: none;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: var(--radius-8);
  background: var(--photo-placeholder);
}

.home-expo__hall-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.home-expo__hall-title {
  font-size: 14px;
  line-height: 19px;
  overflow-wrap: break-word; /* название из админки: посреди слова — только если слово не помещается */
  transition: color 0.15s ease;
}

/* Описание зала — только в карточках от 768 px. */
.home-expo__hall-lead {
  display: none;
}

/* «И многое другое…» — между тонкими линиями, как подпись в конце перечня. */
.home-expo__more {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 10px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}

.home-expo__more::before,
.home-expo__more::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--line);
}

.home-expo__more::before {
  flex: 0 0 24px;
}

.home-expo__button {
  --btn-h: 48px;
  width: 100%;
  color: var(--bg);
}

/* Наведение: карточка чуть темнеет, название — акцентом (без подъёма и тени). */
@media (hover: hover) {
  .home-expo__hall:hover {
    filter: brightness(0.97);
  }

  .home-expo__hall:hover .home-expo__hall-title {
    color: var(--accent);
  }
}

@media (min-width: 768px) {
  .home-expo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "intro photo"
      "halls halls"
      "button button";
    column-gap: 40px;
    row-gap: 40px;
  }

  .home-expo:not(:has(.home-expo__photo)) {
    grid-template-areas:
      "intro intro"
      "halls halls"
      "button button";
  }

  /* Кнопка — у подзаголовка залов: нижняя строка сетки не нужна (иначе лишний отступ снизу). */
  .home-expo:has(.home-expo__halls) {
    grid-template-areas:
      "intro photo"
      "halls halls";
  }

  .home-expo:has(.home-expo__halls):not(:has(.home-expo__photo)) {
    grid-template-areas:
      "intro intro"
      "halls halls";
  }

  /* Заголовок и сразу под ним текст. */
  .home-expo__intro {
    grid-area: intro;
    gap: 24px;
  }

  .home-expo__title {
    font-size: 50px;
    line-height: 1;
    letter-spacing: -0.015em;
  }

  .home-expo__lead {
    max-width: 34em;
    font-size: 18px;
    line-height: 29px;
    text-wrap: pretty;
  }

  .home-expo__photo {
    grid-area: photo;
    height: 410px;
  }

  .home-expo__halls {
    grid-area: halls;
    gap: 22px;
    padding-top: 0;
  }

  .home-expo__label {
    font-size: 22px;
    line-height: 28px;
  }

  /* Карточки залов в ряд, ровными рядами до трёх (колонки — из шаблона, --home-expo-cols). */
  .home-expo__list {
    display: grid;
    grid-template-columns: repeat(var(--home-expo-cols, 3), minmax(0, 1fr));
    gap: 20px;
  }

  /* Карточка: фото сверху во всю ширину, ниже название и описание на подложке. */
  .home-expo__hall {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: 100%;
    padding: 0;
    overflow: hidden;
  }

  .home-expo__hall-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 0;
  }

  .home-expo__hall-text {
    gap: 10px;
    padding: 20px 22px 24px;
  }

  .home-expo__hall-title {
    font-size: 19px;
    line-height: 25px;
    text-wrap: balance;
  }

  .home-expo__hall-lead {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ink-2-on-surface);
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .home-expo__more {
    padding-top: 18px;
    font-size: 17px;
  }

  .home-expo__more::before {
    flex: 1 1 0;
  }

  .home-expo__button {
    grid-area: button;
    justify-self: start;
    width: auto;
  }
}

/* Планшет: карточек залов в ряду не больше двух — в три колонки названиям тесно; заголовок
   блока меньше, чтобы «Пожарно-техническая» не упиралась в фото. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .home-expo__title {
    font-size: 40px;
  }

  .home-expo__list {
    grid-template-columns: repeat(min(var(--home-expo-cols, 3), 2), minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  /* Текст и фото — в тех же пропорциях, что «Немного о центре». */
  .home-expo {
    grid-template-columns: minmax(0, 540fr) minmax(0, 682fr);
    column-gap: 58px;
  }

  .home-expo__title {
    font-size: 58px;
  }

  .home-expo__photo {
    width: 100%;
    height: auto;
    max-height: 460px;
    aspect-ratio: 682 / 410;
  }
}

/* ── Материалы ───────────────────────────────────────────────────────────── */
.home-materials {
  --home-section-gap: 20px;
}

.home-materials__top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.home-filter__chip {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 300;
  white-space: nowrap;
  transition: background-color 0.15s ease, filter 0.15s ease;
}

.home-filter__chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--cream);
  font-weight: 600;
}

@media (hover: hover) {
  .home-filter__chip:hover {
    background-color: rgb(0 0 0 / 0.04);
  }

  .home-filter__chip[aria-pressed="true"]:hover {
    background-color: var(--accent);
    filter: brightness(1.1);
  }
}

/* Узкий телефон: чипы не переносятся, ряд прокручивается вбок до краёв экрана. */
@media (max-width: 767.98px) {
  .home-filter {
    flex-wrap: nowrap;
    margin: -5px calc(-1 * var(--gutter));
    padding: 5px var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .home-filter::-webkit-scrollbar {
    display: none;
  }

  .home-filter__chip {
    flex: none;
  }
}

/* Материалы — списком (components.css, .material-list). На мобайле в макете четыре
   материала; фильтр по типу показывает все подходящие. */
@media (max-width: 767.98px) {
  .home-materials__list:not([data-filtered]) > li:nth-child(n + 5) {
    display: none;
  }
}

@media (min-width: 768px) {
  .home-materials {
    --home-section-gap: 32px;
  }

  .home-materials__top {
    gap: 22px;
  }

  .home-filter__chip {
    padding: 9px 16px;
    font-size: 12.5px;
  }
}

/* ── Истории: тёмная полоса ──────────────────────────────────────────────── */
.home-stories__band {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 36px 20px;
  border-radius: 20px;
  background: var(--brown);
  color: var(--cream);
}

.home-stories .home-section__intro {
  color: var(--cream-70);
}

.home-stories__grid {
  gap: 10px;
}

@media (min-width: 768px) {
  .home-stories__band {
    gap: 36px;
    padding: 56px;
  }

  .home-stories__heading {
    gap: 14px;
  }

  .home-stories .home-section__intro {
    font-size: 14px;
    line-height: 22px;
  }

  .home-stories__grid {
    gap: 20px;
  }
}

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

/* ── Посещение и частые вопросы ──────────────────────────────────────────── */
.home-visit {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.home-visit__cols {
  display: flex;
  flex-direction: column;
  gap: var(--page-gap);
}

.home-visit__faq {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.home-visit__faq-title {
  color: var(--home-graphite);
  line-height: 40px;
}

/* На главной (мобайл) знак свёрнутого вопроса тёмный, раскрытого — светлый. */
.home-visit .faq-item__sign {
  color: var(--ink);
}

.home-visit .faq-item.is-open .faq-item__sign {
  color: var(--bg);
}

@media (min-width: 768px) {
  .home-visit {
    gap: 32px;
  }

  .home-visit__cols {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
  }

  /* Панель — треть колонки, как колонки подвала (405 px при 1280). */
  .home-visit__panel {
    flex: none;
    width: max(300px, (100% - 64px) / 3);
  }

  .home-visit__faq {
    flex: 1 1 0;
  }
}

/* Широкий экран: фото держат пропорции макета 1440, а не высоту в px. */
@media (min-width: 1200px) {
  /* Не выше 460 px, иначе между текстом и кнопкой слева остаётся пустота.
     width: 100% — чтобы ограничение высоты не сужало фото и правый край
     оставался по краю колонки. */
  .home-about__photo {
    width: 100%;
    height: auto;
    max-height: 460px;
    aspect-ratio: 682 / 410;
  }
}