/* ==========================================================================
   Главная (макеты 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 как в макете; уже 390 px кегль уменьшается пропорционально колонке,
   чтобы строки не рассыпались (на 360 px — 26,6 px). */
.home-hero__title {
  font-size: min(29px, (100vw - 32px) * 0.0811);
  font-weight: 500;
  line-height: 1.1035;
}

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

.home-hero__text {
  color: #fff;
  font-size: min(13px, (100vw - 32px) * 0.0363);
  line-height: 1.231;
}

/* Панель поиска на мобайле шире колонки текста: поля 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;
    max-width: 1015px;
    padding-bottom: 0;
  }

  /* Планшет: кегль по ширине колонки, чтобы заголовок оставался в две строки. */
  .home-hero__title {
    font-size: clamp(36px, (100vw - 100px) / 17.5, 58px);
    line-height: 1.052;
  }

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

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

  /* Подзаголовок набран Inter — решение заказчика (README, §8, вопрос 2). */
  .home-hero__text--inter {
    max-width: 680px;
    font-family: var(--font-inter);
    font-size: 17px;
    line-height: 27px;
  }

  .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-halls__grid,
.home-stories__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.home-halls__grid > li > *,
.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__list ol {
    display: grid;
    grid-template-columns: repeat(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) {
  .home-hero__title {
    font-size: 58px;
    line-height: 61px;
  }
}

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

/* ── Экспозиция выставки: карточки залов ─────────────────────────────────── */
.home-halls__grid {
  gap: 16px;
}

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

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

/* ── Материалы ───────────────────────────────────────────────────────────── */
.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;
  }
}