/* ==========================================================================
   Общие компоненты: карточки (экспонат, зал, материал, история), список
   материалов, вопрос FAQ,
   панель «Посещение», пагинация, цитата.

   Размеры, которые в макетах отличаются от страницы к странице (высота фото,
   кегль названия и т. п.), вынесены в CSS-переменные. Страница переопределяет
   их у своего контейнера, например:
     .hall-page__grid { --ec-photo-h: 200px; --ec-title-size: 15px; }
   ========================================================================== */

/* ── Карточка экспоната (компонент Wi6yx) ─────────────────────────────────
   .exhibit-card              компактная: фото слева (мобильные списки)
   .exhibit-card--vertical    вертикальная: фото сверху (десктопные сетки)
   .exhibit-card--auto        компактная до 768 px, вертикальная от 768 px */
.exhibit-card {
  --ec-photo-w: 120px;
  --ec-photo-h: 90px;
  --ec-photo-ratio: auto;          /* на ≥ 1200 вместо высоты, см. конец файла */
  --ec-tag-size: 9px;
  --ec-title-size: 13px;
  --ec-title-lh: 18px;
  --ec-title-lines: 2;              /* сколько строк места под название отведено всегда */
  --ec-title-max: 4;                /* длиннее — растёт до 4 строк, дальше многоточие (ТЗ 4.3) */
  --ec-more-size: 12px;
  display: flex;
  height: 100%;                     /* в сетке карточки ряда одной высоты */
  gap: 12px;
  padding: 10px;
  border-radius: var(--radius-10);
  background: var(--surface);
  color: var(--ink);
  transition: filter 0.15s ease;
}

.exhibit-card__photo {
  flex: none;
  width: var(--ec-photo-w);
  height: var(--ec-photo-h);
  aspect-ratio: var(--ec-photo-ratio);
  overflow: hidden;
  border-radius: var(--radius-10);
  background: var(--photo-placeholder);
}

.exhibit-card__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  padding: 4px 0;
}

.exhibit-card__top {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.exhibit-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.exhibit-card .tag {
  font-size: var(--ec-tag-size);
}

/* Название в одну строку и в четыре выглядит одинаково аккуратно: место под
   --ec-title-lines строк есть всегда, длиннее — до --ec-title-max строк. */
.exhibit-card__title {
  display: -webkit-box;
  min-height: calc(var(--ec-title-lh) * var(--ec-title-lines));
  overflow: hidden;
  font-size: var(--ec-title-size);
  font-weight: 300;
  line-height: var(--ec-title-lh);
  overflow-wrap: anywhere; /* слово без пробелов переносится, а не режется посреди буквы */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--ec-title-max);
  line-clamp: var(--ec-title-max);
}

.exhibit-card .more-link {
  font-size: var(--ec-more-size);
}

@media (hover: hover) {
  .exhibit-card:hover {
    filter: brightness(0.97);
  }
}

/* Вертикальный вид. */
.exhibit-card--vertical {
  --ec-photo-h: 172px;
  --ec-tag-size: 10px;
  --ec-title-size: 14.5px;
  --ec-title-lh: 19px;
  --ec-title-lines: 3;
  --ec-more-size: 12.5px;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border-radius: var(--radius-12);
}

.exhibit-card--vertical .exhibit-card__photo {
  width: 100%;
}

.exhibit-card--vertical .exhibit-card__body {
  justify-content: flex-start;
  gap: 12px;
  padding: 0;
}

/* «Подробнее» — внизу карточки: при длинном названии у соседа ряд остаётся ровным. */
.exhibit-card--vertical .more-link {
  margin-top: auto;
}

.exhibit-card--vertical .exhibit-card__top {
  gap: 8px;
}

@media (min-width: 768px) {
  .exhibit-card--auto {
    --ec-photo-h: 172px;
    --ec-tag-size: 10px;
    --ec-title-size: 14.5px;
    --ec-title-lh: 19px;
    --ec-title-lines: 3;
    --ec-more-size: 12.5px;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    border-radius: var(--radius-12);
  }

  .exhibit-card--auto .exhibit-card__photo {
    width: 100%;
  }

  .exhibit-card--auto .exhibit-card__body {
    justify-content: flex-start;
    gap: 12px;
    padding: 0;
  }

  .exhibit-card--auto .exhibit-card__top {
    gap: 8px;
  }

  .exhibit-card--auto .more-link {
    margin-top: auto;
  }
}

/* Сетка карточек: сама подстраивает число колонок под ширину. */
.card-grid {
  --grid-cols: 3;
  --grid-gap: 20px;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (max-width: 1199.98px) {
  .card-grid {
    --grid-cols: 2;
  }
}

@media (max-width: 767.98px) {
  .card-grid {
    --grid-cols: 1;
    --grid-gap: 12px;
  }
}

/* ── Карточка зала с экспонатами (DMGND мобайл / E4NxE десктоп) ──────────── */
.hall-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-10);
  background: var(--surface);
}

.hall-card__photo {
  display: block;
  height: 186px;
  overflow: hidden;
  border-radius: var(--radius-12);
  background: var(--photo-placeholder);
}

/* Название зала задают в админке: слово без пробелов переносится, а не распирает
   страницу (на телефоне) и не обрезается посреди буквы (от 768 px, где три строки). */
.hall-card__title {
  font-size: 23px;
  font-weight: 300;
  line-height: 23px;
  overflow-wrap: anywhere;
}

.hall-card__list-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* На заливке карточки --ink-2 слишком бледный для мелкого текста (3,8 : 1) —
   подпись и краткие описания темнее (4,9 : 1, WCAG AA). */
.hall-card__label {
  color: var(--ink-2-on-surface);
  font-size: 9.5px;
}

/* Строка экспоната: фото 56 px задаёт одинаковую высоту всех строк — и с кратким
   описанием, и без него (тогда название одно, по центру строки). */
.hall-card__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

/* Линия сверху — только у первой строки списка. */
.hall-card li:first-child > .hall-card__item {
  border-top: 1px solid var(--line);
}

.hall-card__item-photo {
  flex: none;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: var(--radius-8);
  background: var(--photo-placeholder);
}

.hall-card__item-text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Название и краткое описание — по одной строке, длиннее — «…» (правки заказчика).
   Полный текст — в разметке и в title. Название — обычное начертание, описание —
   мельче и приглушённое: в строке сразу видно, что главное. */
.hall-card__item-title,
.hall-card__item-lead {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hall-card__item-title {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.hall-card__item-lead {
  color: var(--ink-2-on-surface);
  font-size: 11px;
  font-weight: 400;
  line-height: 15px;
}

/* Зал без опубликованных экспонатов: подпись на месте списка, между линиями, как строка. */
.hall-card__empty {
  padding: 18px 0;
  border-block: 1px solid var(--line);
  color: var(--ink-2-on-surface);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.hall-card__item > .icon {
  color: var(--ink-2);
  transition: color 0.15s ease;
}

/* Кнопка прижата к низу карточки: в ряду карточки одной высоты, и при коротком
   списке экспонатов кнопка остаётся на одной линии с соседними. */
.hall-card__button {
  --btn-h: 46px;
  gap: 7px;
  margin-top: auto;
  color: var(--bg);
  font-size: 13px;
}

.hall-card__button .icon {
  width: 15px;
  height: 15px;
}

@media (min-width: 768px) {
  .hall-card {
    border-radius: var(--radius-12);
  }

  .hall-card__photo {
    height: 236px;
  }

  /* Название — минимум две строки, чтобы карточки в ряду были ровными.
     С номером зала («Зал 1. …») длинное название на 768–1300 px занимает
     три строки — тогда растёт, а не обрезается. */
  .hall-card__title {
    display: -webkit-box;
    min-height: 55px;
    overflow: hidden;
    font-size: 26px;
    line-height: 27px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .hall-card__label {
    font-size: 10px;
  }

  /* Строка 76 px, как в макете: 56 фото + 2 × 9.5 отступа + линия. */
  .hall-card__item {
    padding: 9.5px 0;
  }

  .hall-card__item-title {
    font-size: 13px;
    line-height: 18px;
  }

  .hall-card__item-lead {
    font-size: 12px;
    line-height: 16px;
  }

  .hall-card__button {
    --btn-h: 50px;
    font-size: 13.5px;
  }
}

/* Ровные ряды (от 768 px, где карточки стоят в ряд): в одном ряду сетки фото,
   названия, списки экспонатов и кнопки соседних карточек — на одних линиях,
   даже если название зала в одной карточке в две строки, а в соседней в три
   или если у зала меньше шести экспонатов. Сетку помечает класс .hall-card-grid
   (главная, «Экспозиция выставки», «О центре»); карточка лежит в ней прямо
   или в <li>. Без subgrid карточки просто одной высоты, кнопка прижата к низу. */
.hall-card-grid > li {
  display: flex;
  flex-direction: column;
}

.hall-card-grid > li > .hall-card {
  flex: 1 0 auto;
}

/* В одной колонке карточка занимает только высоту содержимого: короткий или
   пустой список не оставляет место до кнопки. Перекрывает height: 100% главной. */
@media (max-width: 767.98px) {
  .hall-card-grid {
    align-items: start;
  }

  .hall-card-grid .hall-card {
    height: auto;
  }

  .hall-card-grid > li > .hall-card {
    flex: none;
  }

  .hall-card-grid .hall-card__button {
    margin-top: 0;
  }
}

@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .hall-card-grid > li {
      display: grid;
      grid-row: span 4;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    .hall-card-grid .hall-card {
      display: grid;
      grid-row: span 4;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: subgrid;
      row-gap: 12px;
      height: auto;
    }

    /* Список прижат к верху своей строки, кнопка — всегда в последней. */
    .hall-card-grid .hall-card__list-block {
      align-self: start;
    }

    .hall-card-grid .hall-card__button {
      grid-row: 4;
      align-self: end;
      margin-top: 0;
    }
  }
}

@media (hover: hover) {
  .hall-card__item:hover .hall-card__item-title,
  .hall-card__item:hover > .icon,
  .hall-card__title a:hover {
    color: var(--accent);
  }
}

/* ── Карточка материала (HnnTg) ──────────────────────────────────────────── */
.material-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-12);
  background: var(--surface);
  transition: filter 0.15s ease;
}

.material-card__cover {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 180px;
  overflow: hidden;
  background: var(--photo-placeholder);
  color: var(--accent-40);
}

.material-card__cover .icon {
  width: 46px;
  height: 46px;
}

.material-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 16px;
}

.material-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.material-card__date {
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 300;
  white-space: nowrap;
}

.material-card__title {
  display: -webkit-box;
  max-height: 42px;
  overflow: hidden;
  font-size: 16px;
  line-height: 21px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.material-card__lead {
  display: -webkit-box;
  height: 38px; /* всегда две строки — карточки одной высоты */
  overflow: hidden;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 300;
  line-height: 19px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* «Подробнее» прижата к низу, чтобы карточки в ряду были ровными. */
.material-card .more-link {
  margin-top: auto;
}

@media (min-width: 768px) {
  .material-card__cover {
    height: 200px;
  }

  .material-card__cover .icon {
    width: 52px;
    height: 52px;
  }

  .material-card__body {
    gap: 10px;
    padding: 20px;
  }

  .material-card__date {
    font-size: 10.5px;
  }

  .material-card__title {
    max-height: 44px;
    font-size: 17px;
    line-height: 22px;
  }

  .material-card__lead {
    height: 38px;
    font-size: 12.5px;
  }
}

@media (hover: hover) {
  .material-card:hover {
    filter: brightness(0.97);
  }
}

/* ── Список материалов (правки заказчика: списком, а не карточками) ─────────
   Главная, блок «Материалы», и страница «Материалы». Строка — ссылка целиком:
   дата · тип · обложка (если есть) · заголовок и одна строка краткого описания.
   Строки разделены линиями, как список «Немного о центре» и строки карточки зала.
   < 768      дата и тип над заголовком, заголовок до двух строк;
   768–1199   дата и тип колонкой слева (друг под другом), заголовок в одну строку;
   ≥ 1200     дата, тип и текст — тремя колонками.
   Заголовок и описание длиннее строки — «…», полный текст в разметке и в title. */
.material-list {
  border-top: 1px solid var(--line);
}

.material-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "meta  arrow"
    "text  arrow";
  align-items: center;
  column-gap: 16px;
  row-gap: 10px;
  min-height: 64px; /* удобно попасть пальцем и в строку без описания */
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.material-row__meta {
  display: flex;
  grid-area: meta;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}

.material-row__date {
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 300;
  white-space: nowrap;
}

.material-row__content {
  display: flex;
  grid-area: text;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.material-row__photo {
  display: block;
  flex: none;
  width: 84px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-8);
}

.material-row__text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* На телефоне заголовок — до двух строк, дальше «…» (в одну строку влезает мало). */
.material-row__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  overflow-wrap: anywhere; /* слово без пробелов не распирает строку */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.material-row__lead {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 300;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-row__arrow {
  grid-area: arrow;
  width: 18px;
  height: 18px;
  color: var(--ink-2);
  transition: color 0.15s ease;
}

@media (min-width: 768px) {
  .material-row {
    grid-template-columns: 168px minmax(0, 1fr) auto;
    grid-template-areas: "meta text arrow";
    align-items: start; /* дата и тип — на линии заголовка, а не посередине строки */
    column-gap: 24px;
    min-height: 91px; /* как у строки с описанием: 20 + 24 + 6 + 20 + 20 + линия */
    padding: 20px 0;
  }

  .material-row__meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .material-row__content {
    gap: 24px;
  }

  .material-row__photo {
    width: 120px;
  }

  /* Строка даты высотой со строку заголовка (24 px): дата стоит на одной линии с ним. */
  .material-row__date {
    font-size: 11px;
    line-height: 24px;
  }

  /* От 768 — заголовок и описание по одной строке; строки списка одной высоты. */
  .material-row__title {
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    font-size: 17px;
    line-height: 24px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .material-row__lead {
    font-size: 13px;
    line-height: 20px;
  }

  .material-row__arrow {
    align-self: center;
    width: 20px;
    height: 20px;
  }
}

@media (min-width: 1200px) {
  .material-row {
    grid-template-columns: 290px minmax(0, 1fr) auto;
    column-gap: 32px;
    min-height: 95px; /* 22 + 24 + 6 + 20 + 22 + линия */
    padding: 22px 0;
  }

  /* Дата и тип — в ряд, дата фиксированной ширины: типы стоят ровной колонкой.
     Оба по центру строки заголовка (24 px). */
  .material-row__meta {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    min-height: 24px;
  }

  .material-row__date {
    flex: none;
    width: 140px;
    font-size: 11.5px;
  }

  /* Очень широкий экран: описание не тянется во всю колонку 1760 px. */
  .material-row__text {
    max-width: 1040px;
  }
}

@media (hover: hover) {
  .material-row:hover .material-row__title,
  .material-row:hover .material-row__arrow {
    color: var(--accent);
  }
}

/* Печать: на бумаге «…» не раскрыть — заголовки и описания строк материалов и
   экспонатов печатаются полностью; фильтр по типу и страницы списка не печатаются. */
@media print {
  .material-row__title,
  .material-row__lead,
  .hall-card__item-title,
  .hall-card__item-lead {
    display: block;
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal;
    -webkit-line-clamp: none;
    line-clamp: none;
  }

  .home-filter,
  .materials-filter,
  .pagination {
    display: none !important;
  }
}

/* ── Карточка истории (yhvQ1) ─────────────────────────────────────────────
   .story-card          светлая (страница «Истории», «Другие истории»)
   .story-card--dark    на тёмной полосе главной */
.story-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgb(0 0 0 / 0.3);
  border-radius: var(--radius-10);
  background: var(--surface);
  color: var(--ink);
  transition: filter 0.15s ease;
}

/* В макетах анонсы разбиты на строки вручную; balance даёт такие же переносы. */
.story-card__title {
  font-size: 15px;
  line-height: 17px;
  text-wrap: balance;
}

.story-card__divider {
  height: 1px;
  background: var(--line);
}

.story-card__author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.story-card__portrait {
  flex: none;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--photo-placeholder);
}

.story-card__who {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.story-card__name {
  font-size: 12px;
  line-height: 16px;
}

.story-card__role {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 9.5px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-card__go {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
}

.story-card__go .icon {
  width: 12px;
  height: 12px;
}

@media (min-width: 768px) {
  .story-card {
    gap: 22px;
    padding: 28px;
    border-color: transparent;
    border-radius: var(--radius-12);
  }

  .story-card__title {
    font-size: 24px;
    line-height: 30px;
  }

  .story-card__author {
    gap: 14px;
  }

  .story-card__portrait {
    width: 60px;
    height: 60px;
  }

  .story-card__who {
    gap: 5px;
  }

  .story-card__name {
    font-size: 15.5px;
    line-height: 20px;
  }

  .story-card__role {
    font-size: 12.5px;
  }

  .story-card__go {
    width: 40px;
    height: 40px;
  }

  .story-card__go .icon {
    width: 16px;
    height: 16px;
  }
}

.story-card--dark {
  border: 0;
  border-radius: var(--radius-12);
  background: var(--fill-on-dark);
  color: var(--cream);
}

.story-card--dark .story-card__title {
  line-height: 20px;
}

.story-card--dark .story-card__divider {
  background: var(--line-on-dark-strong);
}

.story-card--dark .story-card__author {
  gap: 12px;
}

.story-card--dark .story-card__portrait {
  width: 44px;
  height: 44px;
}

.story-card--dark .story-card__name {
  font-size: 12.5px;
  line-height: normal;
}

.story-card--dark .story-card__role {
  color: var(--cream-60);
  font-size: 10px;
}

.story-card--dark .story-card__go {
  width: 28px;
  height: 28px;
  color: var(--cream);
}

.story-card--dark .story-card__go .icon {
  width: 13px;
  height: 13px;
}

@media (min-width: 768px) {
  .story-card--dark {
    gap: 20px;
    padding: 26px;
  }

  /* В макете анонс в две строки; если строк больше — карточка растёт, текст не обрезается. */
  .story-card--dark .story-card__title {
    min-height: 66px;
    font-size: 26px;
    line-height: 33px;
  }

  .story-card--dark .story-card__author {
    gap: 14px;
  }

  .story-card--dark .story-card__portrait {
    width: 64px;
    height: 64px;
  }

  .story-card--dark .story-card__who {
    gap: 5px;
  }

  .story-card--dark .story-card__name {
    font-size: 16px;
    line-height: 21px;
  }

  .story-card--dark .story-card__role {
    font-size: 12.5px;
  }

  .story-card--dark .story-card__go {
    width: 36px;
    height: 36px;
  }

  .story-card--dark .story-card__go .icon {
    width: 16px;
    height: 16px;
  }
}

@media (hover: hover) {
  .story-card:hover {
    filter: brightness(0.97);
  }

  .story-card--dark:hover {
    filter: brightness(1.15);
  }
}

/* ── Вопрос FAQ (спецификация AiEy6) ─────────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  border-radius: var(--radius-10);
  background: var(--surface);
}

/* Фокус с клавиатуры — обводка 2 px вокруг всего вопроса, отступ 3, радиус 14. */
.faq-item:has(.faq-item__toggle:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.faq-item__toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border-radius: var(--radius-10);
  text-align: left;
}

.faq-item__toggle:focus-visible {
  outline: none;
}

.faq-item__question {
  flex: 1 1 0;
  font-size: 13px;
  line-height: 18px;
}

.faq-item__sign {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-8);
  background: var(--bg);
  color: var(--accent);
}

.faq-item__sign .icon {
  width: 15px;
  height: 15px;
}

.faq-item__sign .icon--minus,
.faq-item.is-open .faq-item__sign .icon--plus {
  display: none;
}

.faq-item.is-open .faq-item__sign .icon--minus {
  display: block;
}

.faq-item.is-open .faq-item__sign {
  background: var(--accent);
  color: var(--cream);
}

.faq-item__answer {
  margin-top: -4px; /* между вопросом и ответом 10 px, как в макете */
  padding: 0 14px 14px;
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 300;
  line-height: 18px;
}

/* Абзацы ответа (через пустую строку в админке) — с отступом примерно в полстроки. */
.faq-item__answer > p + p {
  margin-top: 0.8em;
}

@media (min-width: 768px) {
  .faq-item__toggle {
    gap: 16px;
    padding: 16px 18px;
  }

  .faq-item__question {
    font-size: 14.5px;
    line-height: 20px;
  }

  .faq-item__sign {
    width: 30px;
    height: 30px;
    color: var(--ink);
  }

  .faq-item__sign .icon {
    width: 16px;
    height: 16px;
  }

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

  .faq-item__answer {
    padding: 0 18px 16px;
    font-size: 13px;
    line-height: 21px;
  }
}

/* При печати все ответы раскрыты, кнопки раскрытия не печатаются. */
@media print {
  .faq-item__answer {
    display: block !important;
  }

  .faq-item__sign {
    display: none !important;
  }
}

/* ── Панель «Посещение» (главная, «Частые вопросы») ──────────────────────── */
.visit-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius-10);
  background: var(--brown);
  color: var(--bg);
}

.visit-panel__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  background: var(--line-on-dark);
  font-size: 10.5px;
  white-space: nowrap;
}

.visit-panel__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.visit-panel__row {
  display: flex;
  gap: 12px;
}

.visit-panel__row + .visit-panel__row {
  padding-top: 16px;
  border-top: 1px solid var(--line-on-dark);
}

.visit-panel__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--fill-on-dark);
  color: #d8c9bf;
}

.visit-panel__icon .icon {
  width: 17px;
  height: 17px;
}

.visit-panel__text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
}

.visit-panel__label {
  color: var(--muted-on-dark);
  font-size: 9.5px;
  font-weight: 300;
  letter-spacing: 0.4px;
}

.visit-panel__value {
  font-size: 13px;
  line-height: 18px;
}

.visit-panel__note {
  color: var(--muted-on-dark);
  font-size: 10.5px;
  font-weight: 300;
  line-height: 15px;
}

.visit-panel__button {
  --btn-h: 50px;
  font-size: 14px;
  font-weight: 400;
}

@media (min-width: 768px) {
  .visit-panel {
    gap: 18px;
    padding: 24px;
    border-radius: var(--radius-12);
  }

  .visit-panel__badge {
    padding: 7px 12px;
    font-size: 11.5px;
  }

  .visit-panel__row {
    gap: 13px;
  }

  .visit-panel__row + .visit-panel__row {
    padding-top: 18px;
  }

  .visit-panel__icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-10);
  }

  .visit-panel__icon .icon {
    width: 18px;
    height: 18px;
  }

  .visit-panel__label {
    font-size: 10px;
  }

  .visit-panel__value {
    font-size: 14px;
    line-height: 20px;
  }

  .visit-panel__note {
    font-size: 11px;
    line-height: 16px;
  }

  .visit-panel__button {
    --btn-h: 52px;
  }
}

/* ── Пагинация ───────────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pagination__item {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-8);
  background: var(--surface);
  font-size: 13px;
}

/* «…» между номерами — без подложки и уже кнопки. */
.pagination__ellipsis {
  width: 20px;
  background: none;
  color: var(--ink-2);
}

/* Телефон: «‹ 1 … 5 6 7 … 40 ›» помещается в колонку и на 320 px. */
@media (max-width: 400px) {
  .pagination {
    gap: 4px;
  }

  .pagination__item:not(.pagination__ellipsis) {
    width: 36px;
  }
}

@media (max-width: 360px) {
  .pagination {
    gap: 2px;
  }

  .pagination__item:not(.pagination__ellipsis) {
    width: 32px;
  }
}

.pagination__item[aria-current="page"] {
  background: var(--accent);
  color: var(--cream);
  font-weight: 600;
}

.pagination__arrow {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--accent);
}

.pagination__arrow .icon {
  width: 17px;
  height: 17px;
}

/* Неактивная стрелка бледнее. */
.pagination__arrow[aria-disabled="true"] {
  color: var(--line);
  pointer-events: none;
}

@media (min-width: 768px) {
  .pagination {
    gap: 10px;
  }

  .pagination__item {
    width: 46px;
    height: 46px;
    font-size: 14px;
  }

  .pagination__arrow .icon {
    width: 18px;
    height: 18px;
  }
}

/* ── Пустой список (components/empty_state.html) ──────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  border-radius: var(--radius-12);
  background: var(--surface);
  text-align: center;
}

.empty-state__title {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 24px;
}

.empty-state__text {
  max-width: 460px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 20px;
}

.empty-state__button {
  margin-top: 8px;
}

@media (min-width: 768px) {
  .empty-state {
    padding: 56px 32px;
  }

  .empty-state__title {
    font-size: 24px;
    line-height: 28px;
  }
}

/* ── Цитата во врезке (страницы 02, 07, 10, 12) ──────────────────────────── */
.quote {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  overflow: hidden;
  border-radius: var(--radius-12);
  background: var(--brown);
  color: var(--cream);
}

.quote__mark {
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.quote__text {
  font-size: 15px;
  font-weight: 300;
  line-height: 23px;
}

.quote__divider {
  height: 1px;
  background: var(--line-on-dark);
}

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

.quote__emblem {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--cream);
}

.quote__emblem .icon {
  width: 15px;
  height: 15px;
}

.quote__who {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.quote__name {
  color: var(--bg);
  font-size: 11.5px;
  font-style: normal;
}

.quote__role {
  color: var(--muted-on-dark);
  font-size: 9.5px;
  font-weight: 300;
}

/* Десктоп: по центру колонки 960 px, текст крупнее, без разделителя. */
@media (min-width: 768px) {
  .quote {
    align-items: center;
    gap: 28px;
    width: min(960px, 100%);
    margin-inline: auto;
    padding: 48px 56px;
    text-align: center;
  }

  .quote__mark {
    width: 32px;
    height: 32px;
  }

  .quote__text {
    font-size: 26px;
    line-height: 38px;
  }

  .quote__divider {
    display: none;
  }

  .quote__author {
    gap: 12px;
    text-align: left;
  }

  .quote__emblem {
    width: 36px;
    height: 36px;
  }

  .quote__emblem .icon {
    width: 17px;
    height: 17px;
  }

  .quote__who {
    gap: 4px;
  }

  .quote__name {
    font-size: 14px;
  }

  .quote__role {
    font-size: 12px;
  }
}

/* ── Фото на широком экране ──────────────────────────────────────────────────
   Колонка на десктопе шире макетной (до 1760 px), поэтому фото в карточках
   держат пропорции макета 1440 (ширина / высота оттуда), а не высоту в px. */
@media (min-width: 1200px) {
  .exhibit-card--vertical,
  .exhibit-card--auto {
    --ec-photo-h: auto;
    --ec-photo-ratio: 277 / 172;
  }

  .hall-card__photo {
    height: auto;
    aspect-ratio: 389 / 236;
  }

  .material-card__cover {
    height: auto;
    aspect-ratio: 413 / 200;
  }
}

/* ── Предпросмотр черновика сотрудником (docs/ADMIN.md, 3.0) ────────────────
   Плашка над шапкой: «Черновик — эту страницу видят только сотрудники». Посетитель
   её не видит никогда (черновик ему не открывается). Прилипает к верху окна,
   чтобы при прокрутке было понятно, что это не опубликованная страница. */
.staff-preview {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 16px;
  padding: 10px var(--gutter-mobile);
  background: var(--accent);
  color: var(--cream);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.staff-preview__text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.staff-preview__text .icon {
  flex: none;
  width: 16px;
  height: 16px;
}

.staff-preview__link {
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media print {
  .staff-preview {
    position: static;
  }
}