/*
 * Афиша на сайте. Цвета и размеры взяты из приложения
 * (packages/ui/src/tokens.ts), чтобы список выглядел одинаково.
 *
 * Все правила — внутри .afisha и с собственными именами классов: страница
 * принадлежит теме сайта, и плагин не должен переопределять её стили.
 * Тёмной темы здесь нет: приложение зафиксировано светлым.
 */

.afisha {
  --afisha-bg: #ffffff;
  --afisha-raised: #f5f5f7;
  --afisha-border: #d8d8de;
  --afisha-text: #111114;
  --afisha-muted: #5b5b66;
  --afisha-accent: #1f5fd1;
  --afisha-accent-soft: #e8effc;
  --afisha-bad: #b3261e;
  --afisha-warm: #ffd84d;
  --afisha-warm-hot: #f5c518;
  --afisha-warm-line: #e0ac00;

  max-width: 760px;
  margin: 0 auto;
  color: var(--afisha-text);
  font-size: 17px;
  line-height: 1.45;
}

.afisha *,
.afisha *::before,
.afisha *::after { box-sizing: border-box; }

.afisha-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ── Периоды и кнопка шторки ─────────────────────────────────────────── */

/* Кнопка шторки и периоды — один ряд чипов */
.afisha-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}


.afisha-chip {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--afisha-border);
  border-radius: 999px;
  font-size: 15px;
  line-height: 1.2;
  color: var(--afisha-text);
  text-decoration: none;
  background: var(--afisha-bg);
  cursor: pointer;
}

.afisha-chip:hover { border-color: var(--afisha-accent); }

.afisha-chip.is-on {
  background: var(--afisha-accent-soft);
  border-color: var(--afisha-accent);
  color: var(--afisha-accent);
  font-weight: 600;
}

/* ── Форма и шторка ──────────────────────────────────────────────────── */

.afisha-form { margin: 0 0 12px; }

.afisha-search {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.afisha-search input[type="search"] {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 8px 14px;
  font: inherit;
  font-size: 16px; /* меньше — и Safari на телефоне увеличивает страницу */
  color: var(--afisha-text);
  background: var(--afisha-bg);
  border: 1px solid var(--afisha-border);
  border-radius: 10px;
}

.afisha-button {
  min-height: 44px;
  padding: 8px 18px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background: var(--afisha-accent);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.afisha-button:hover { background: #17499f; }

.afisha-plain {
  font-size: 14px;
  color: var(--afisha-muted);
  text-decoration: underline;
}

/*
 * Кнопка шторки жёлтая: в ряду она единственная не переключает период,
 * а открывает панель, и цвет отделяет её от чипов дат.
 */
.afisha-chip--filters {
  background: var(--afisha-warm);
  border-color: var(--afisha-warm-line);
  font-weight: 600;
  user-select: none;
}

.afisha-chip--filters:hover {
  background: var(--afisha-warm-hot);
  border-color: var(--afisha-warm-line);
}

.afisha-toggle:checked ~ .afisha-bar .afisha-chip--filters {
  background: var(--afisha-warm-hot);
}

/* Сам чекбокс скрыт, поэтому рамку фокуса рисуем на кнопке:
   иначе с клавиатуры не видно, где находишься */
.afisha-toggle:focus-visible ~ .afisha-bar .afisha-chip--filters {
  outline: 2px solid var(--afisha-accent);
  outline-offset: 2px;
}

/*
 * Выбранное значение — чипом с крестиком рядом с кнопкой фильтров.
 * Снимает один фильтр за одно нажатие, не открывая шторку. Это ссылка
 * на тот же адрес без этого значения, поэтому работает и без скриптов.
 */
.afisha-chip--drop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--afisha-accent);
  background: var(--afisha-accent-soft);
  border-color: var(--afisha-accent);
}

.afisha-chip--drop:hover {
  color: #ffffff;
  background: var(--afisha-accent);
  border-color: var(--afisha-accent);
}

.afisha-chip__x {
  font-size: 12px;
  line-height: 1;
  opacity: 0.7;
}

.afisha-chip--drop:hover .afisha-chip__x { opacity: 1; }

.afisha-sheet__body {
  display: none;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--afisha-border);
  border-radius: 14px;
  background: var(--afisha-raised);
}

.afisha-toggle:checked ~ .afisha-sheet__body { display: block; }

.afisha-group {
  margin: 0 0 14px;
  padding: 0;
  border: none;
}

.afisha-group legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--afisha-muted);
}

.afisha-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.afisha-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 15px;
  background: var(--afisha-bg);
  border: 1px solid var(--afisha-border);
  border-radius: 999px;
  cursor: pointer;
}

.afisha-option:has(input:checked) {
  background: var(--afisha-accent-soft);
  border-color: var(--afisha-accent);
  color: var(--afisha-accent);
  font-weight: 600;
}

/* Запасной вариант для браузеров без :has — рамка чекбокса остаётся видна */
.afisha-option input { accent-color: var(--afisha-accent); margin: 0; }

.afisha-sheet__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ── Итог и сообщения ────────────────────────────────────────────────── */

.afisha-summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--afisha-muted);
}

.afisha-note {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--afisha-muted);
}

.afisha-empty {
  margin: 24px 0;
  text-align: center;
  color: var(--afisha-muted);
}

.afisha-error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--afisha-bad);
  border-radius: 10px;
  font-size: 15px;
  color: var(--afisha-bad);
}

/* ── Список ──────────────────────────────────────────────────────────── */

.afisha-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.afisha-card { border-bottom: 1px solid var(--afisha-border); }

.afisha-card__link {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
}

.afisha-card__link:hover .afisha-card__title { color: var(--afisha-accent); }

/*
 * Размер задаёт рамка, картинка лежит внутри неё.
 *
 * Селектор из двух классов не для красоты: тема сайта переопределяет
 * object-fit у картинок внутри .entry-content, и правило в один класс
 * до картинки не доживает — поля вокруг афиши остаются серыми.
 */
.afisha-card__frame {
  position: relative;
  flex: none;
  width: 104px;
  height: 104px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--afisha-raised);
}

.afisha-card__frame--empty {
  border: 1px dashed var(--afisha-border);
  background: none;
}

.afisha .afisha-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* в списке это миниатюра, обрезка на ней незаметна */
}

/* Размытая подложка нужна только плиткам — см. блок ниже */
.afisha .afisha-card__blur { display: none; }

.afisha-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.afisha-card__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.afisha-card__when {
  font-size: 13px;
  font-weight: 600;
  color: var(--afisha-accent);
}

.afisha-badge {
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: var(--afisha-bad);
  border-radius: 999px;
}

.afisha-card__title {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}

/* Две строки описания, как в карточке приложения */
.afisha-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  color: var(--afisha-muted);
}

.afisha-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
  font-size: 15px;
}

.afisha-card__fact { color: var(--afisha-muted); }

.afisha-card__money,
.afisha-card__place {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.afisha-card__place {
  /* Длинный адрес переносится внутри строки, а не уносит значок на строку
     выше: со значком в отдельной строке место читается как две разные вещи */
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 5px;
  color: var(--afisha-muted);
}

.afisha-pin {
  flex: none;
  margin-top: 0.15em;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
  opacity: 0.75;
}

/* Ценник: значок и цена в одной плашке — как в приложении */
.afisha-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--afisha-border);
  border-radius: 8px;
  background: var(--afisha-raised);
}

.afisha-price__icon {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

@media (max-width: 480px) {
  .afisha-card__frame { width: 84px; height: 84px; }
  .afisha-card__title { font-size: 18px; }
}

/* ── Плитки на широком экране ────────────────────────────────────────────
 *
 * На телефоне события идут списком, как в приложении. На широком экране
 * тот же список растягивается в строки во весь экран и выглядит пустым,
 * поэтому карточки превращаются в плитки: фотография сверху, подпись под
 * ней. Колонок столько, сколько помещается: две на планшете, три и четыре
 * дальше.
 *
 * Шире 1100 пикселей не растём намеренно: тема сайта (pubnews-pro)
 * ограничивает .entry-content этой величиной, и всё, что шире, всё равно
 * обрезается — max-width больше был бы обманом.
 */
@media (min-width: 640px) {
  .afisha { max-width: 1100px; }

  .afisha-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  /* Плитка — карточка в рамке: разделительной линии списка больше нет,
     её роль играет граница */
  .afisha-card {
    border: 1px solid var(--afisha-border);
    border-radius: 16px;
    background: var(--afisha-bg);
  }

  .afisha-card:hover { border-color: var(--afisha-accent); }

  .afisha-card__link {
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    height: 100%;
  }

  /* Рамка у всех плиток одной формы: иначе подписи в ряду начинаются
     на разной высоте и ряд выглядит рваным */
  .afisha-card__frame {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
  }

  /*
   * Афиши приходят трёх разных форм: широкие кадры, квадраты из инстаграма
   * и вытянутые постеры. Обрезать их под общую рамку нельзя — на постере
   * под нож идут дата и название, а это половина смысла картинки.
   * Поэтому афиша вписывается целиком, а поля закрывает увеличенная
   * и размытая копия её же: вместо серых полос — фон в цвет афиши.
   * Копия берётся по тому же адресу, так что лишней загрузки нет.
   */
  .afisha .afisha-card__photo {
    object-fit: contain;
    z-index: 1;
  }

  .afisha .afisha-card__blur {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Без запаса по краям размытие выцветает в прозрачность и даёт кайму */
    transform: scale(1.2);
    filter: blur(14px);
  }

  .afisha-card__when { font-size: 15px; }

  /*
   * Заголовок не длиннее трёх строк.
   *
   * Площадки пишут названия как придётся: рядом с «DELIRIUM» стоит
   * «Андрей Мучник. "Нью-Йорк в американской литературе: от Эдит Уортон
   * до хоррора". Лекция из цикла…» на семь строк. Без ограничения одна
   * такая карточка растягивает весь ряд, а остальные висят пустыми.
   */
  .afisha-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 19px;
  }

  .afisha-card__excerpt { font-size: 16px; }

  /* Заголовки разной длины оставляли бы цену и площадку на разной высоте,
     и ряд выглядел бы рваным. Прижимаем нижний блок к низу плитки */
  .afisha-card__body { flex: 1; gap: 6px; }

  .afisha-card__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    margin-top: auto;
    padding-top: 12px;
    font-size: 16px;
    border-top: 1px solid var(--afisha-border);
  }

  /* На плитке цена — обычная строка, плашка тут лишняя: она нужна была
     в списке, где цена стояла в один ряд с типом и площадкой */
  .afisha-price {
    padding: 0;
    font-size: 17px;
    font-weight: 700;
    border: none;
    background: none;
  }

  .afisha-price__icon { display: none; }

  .afisha-pin { width: 18px; height: 18px; }
}

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

/* Четвёртая колонка — только когда на неё есть место: в колонке 1100px
   это плитка 260 пикселей, а на экране поуже вышло бы 240 и меньше */
@media (min-width: 1200px) {
  .afisha-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Карточка события ────────────────────────────────────────────────────
 *
 * Две колонки. Слева то, ради чего открыли: афиша, название, рассказ.
 * Справа то, что нужно, чтобы пойти: когда, где, почём и как положить
 * в календарь. Правая колонка не уезжает при прокрутке длинного описания.
 *
 * До 900px всё в одну колонку, панели идут под текстом.
 */

.afisha-back { margin: 0 0 18px; }

.afisha-one {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.afisha-one__main { min-width: 0; }

.afisha-one__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

/* Категория события — обведённый чип, как у чипов периодов, но синий:
   это не переключатель, а подпись, и нажимать её незачем */
.afisha-one__kind {
  display: inline-block;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--afisha-accent);
  border: 1px solid var(--afisha-accent);
  border-radius: 999px;
}

.afisha-one__title {
  margin: 0 0 20px;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
}

.afisha-one__media { margin: 0 0 22px; }

/*
 * Афиша на карточке одна и главная: показываем её целиком и в своих
 * пропорциях. Общая рамка и размытая подложка нужны были ряду плиток,
 * чтобы он стоял ровно; здесь ровнять не с чем.
 *
 * Селекторы в два класса — иначе правило темы .entry-content img перебивает.
 */
.afisha--one .afisha-card__frame {
  /* В списке рамка — элемент флексбокса и блочная сама собой, здесь она
     лежит в обычном блоке, а у строчного <span> ширины нет */
  display: block;
  width: 100%;
  height: auto;
  /* Пропорция 4:3 досталась от плиток: под широкой афишей она оставляла
     пустоту, а высокий постер обрезала. Здесь рамка по картинке */
  aspect-ratio: auto;
  border-radius: 16px;
  background: none;
}

.afisha--one .afisha-card__photo {
  /* display: block убирает зазор под картинкой от строчного выравнивания */
  display: block;
  position: static;
  width: 100%;
  height: auto;
  max-height: none;
}

.afisha-one__text {
  font-size: 17px;
  line-height: 1.65;
}

/* ── Панели справа ──────────────────────────────────────────────────── */

.afisha-panel {
  padding: 18px 20px;
  border: 1px solid var(--afisha-border);
  border-radius: 16px;
  background: var(--afisha-bg);
}

.afisha-panel + .afisha-panel { margin-top: 16px; }

.afisha-panel__title {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

/* Строки «Дата», «Время», «Площадка» разделены линиями, как в макете */
.afisha-row {
  margin: 0;
  padding: 13px 0;
  font-size: 16px;
  line-height: 1.5;
}

.afisha-row + .afisha-row { border-top: 1px solid var(--afisha-border); }
.afisha-row:first-child { padding-top: 0; }
.afisha-row:last-child { padding-bottom: 0; }
.afisha-row b { font-weight: 700; }

.afisha-row__aside {
  display: block;
  font-size: 14px;
  color: var(--afisha-muted);
}

.afisha-panel__price {
  margin: 0 0 16px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

/* Непроставленная цена — не цена: набирать её крупным жирным значит
   выдавать отсутствие данных за содержание */
.afisha-panel__price--none {
  font-size: 16px;
  font-weight: 400;
  color: var(--afisha-muted);
}

/* У <a> нет ни выравнивания по центру, ни снятого подчёркивания,
   которые есть у <button>: кнопку-ссылку приходится собирать руками */
a.afisha-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.afisha-panel .afisha-button { width: 100%; }

.afisha-panel__extra {
  display: block;
  margin-top: 12px;
  text-align: center;
}

/* Ссылки «в календарь»: значок один на все службы, чужие логотипы
   тянут за собой их правила использования, а пользы не добавляют */
.afisha-cal {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-size: 15px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--afisha-border);
  border-radius: 12px;
}

.afisha-cal + .afisha-cal { margin-top: 10px; }

.afisha-cal:hover {
  border-color: var(--afisha-accent);
  color: var(--afisha-accent);
}

.afisha-cal svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  opacity: 0.7;
}

@media (max-width: 899px) {
  /* В одну колонку панели не должны быть шире текста и висеть вплотную */
  .afisha-one__side { margin-top: 4px; }
}

@media (min-width: 900px) {
  .afisha-one {
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
  }

  .afisha-one__main { flex: 1 1 auto; }

  /* Панели остаются на виду, пока читаешь длинное описание */
  .afisha-one__side {
    flex: 0 0 320px;
    position: sticky;
    top: 20px;
  }

  .afisha-one__title { font-size: 34px; }

  /* Мера строки: во всю колонку текст читается плохо */
  .afisha-one__text { max-width: 62ch; }
}

/* ── Выпадающие списки: город и период ───────────────────────────────────
 *
 * Оба устроены одинаково: чип с текущим значением, а по нажатию под ним
 * список. Раскрывается скрытым чекбоксом, как шторка фильтров, — без
 * скриптов и с клавиатуры. Список висит поверх страницы, а не раздвигает
 * её: это переключатель, а не раздел.
 *
 * Селектор города стоит отдельной строкой над всем: заголовок страницы
 * рисует тема сайта, дотянуться до него из шорткода нельзя.
 */
.afisha-menu { position: relative; }

/* Город и поиск стоят одной строкой: город задаёт, что вообще ищем */
.afisha-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
}

.afisha-top .afisha-city { flex: none; }

/* Поиск забирает остаток строки, но на узком экране уходит под город:
   320 пикселей — предел, ниже которого поле перестаёт быть полем */
.afisha-top .afisha-search {
  flex: 1 1 320px;
  min-width: 0;
  margin: 0;
}

.afisha-chip--city,
.afisha-chip--when {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  user-select: none;
}

.afisha-chip__caret {
  font-size: 12px;
  line-height: 1;
  opacity: 0.6;
}

.afisha-switch:checked ~ .afisha-chip {
  border-color: var(--afisha-accent);
  color: var(--afisha-accent);
}

/* Сам чекбокс скрыт, поэтому рамку фокуса рисуем на чипе */
.afisha-switch:focus-visible ~ .afisha-chip {
  outline: 2px solid var(--afisha-accent);
  outline-offset: 2px;
}

.afisha-menu__list {
  display: none;
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--afisha-border);
  border-radius: 14px;
  background: var(--afisha-bg);
  box-shadow: 0 12px 32px rgba(17, 17, 20, 0.14);
}

/* Периодов шесть и подписи короткие — широкий список смотрелся бы пустым */
.afisha-menu__list--when { min-width: 180px; }

.afisha-switch:checked ~ .afisha-menu__list { display: block; }

.afisha-menu__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  font-size: 16px;
  color: var(--afisha-text);
  text-decoration: none;
  border-radius: 10px;
}

a.afisha-menu__item:hover {
  background: var(--afisha-accent-soft);
  color: var(--afisha-accent);
}

.afisha-menu__item.is-on {
  font-weight: 700;
  background: var(--afisha-accent-soft);
  color: var(--afisha-accent);
}

/* Город без своей страницы: виден, но не ведёт на 404 */
.afisha-menu__item.is-off { color: var(--afisha-muted); }

.afisha-menu__soon {
  flex: none;
  font-size: 13px;
  font-style: normal;
  color: var(--afisha-muted);
  opacity: 0.8;
}

/* ── Короткий блок-анонс ─────────────────────────────────────────────────
 *
 * Врезка для главной: несколько ближайших событий мелкими карточками.
 * Шесть в строку на широком экране, дальше по убыванию до двух на телефоне.
 * Внутри только дата и название — на карточке шириной 170 пикселей
 * цена и площадка превращаются в кашу.
 */

.afisha-mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

@media (min-width: 820px) {
  .afisha-mini { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1040px) {
  .afisha-mini { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.afisha-mini__link {
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.afisha-mini__link:hover .afisha-mini__title { color: var(--afisha-accent); }

/* Рамка та же, что на плитках, но своей формы и на всех ширинах:
   в короткий блок телефонная миниатюра 104×104 не годится */
.afisha--compact .afisha-card__frame {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
}

.afisha--compact .afisha-card__photo {
  object-fit: contain;
  z-index: 1;
}

.afisha--compact .afisha-card__blur {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2);
  filter: blur(10px);
}

.afisha-mini__when {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--afisha-accent);
}

/* Три строки названия: короткие карточки иначе разъезжаются по высоте */
.afisha-mini__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.afisha-mini__more {
  margin: 18px 0 0;
  font-size: 16px;
}

.afisha-mini__more a {
  font-weight: 600;
  color: var(--afisha-accent);
  text-decoration: none;
}

.afisha-mini__more a:hover { text-decoration: underline; }

/* Пока сервер считает новый отбор, прежний список приглушён: иначе
   непонятно, нажалось ли вообще — ответ приходит не мгновенно */
.afisha-results.is-loading {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.12s ease-out;
}

/* ── Тизер афиши ─────────────────────────────────────────────────────────
 *
 * Две строки по восемь плиток, прокручиваются вбок. Восемь в колонку
 * не помещаются намеренно: обрезанная справа плитка сама говорит, что
 * список длиннее, чем видно, — и это дешевле любой подписи или стрелки.
 *
 * Плитки те же, что на титульной странице афиши, только примерно на треть
 * мельче: тизер стоит в начале чужой страницы и не должен перетягивать
 * её на себя. Плиточные правила здесь свои, а не наследуются от титульной:
 * там они включаются только от 640px, а тизеру сетка нужна на любой ширине.
 */

/* Тизер стоит в потоке чужой страницы, и следующий раздел иначе
   прилипает прямо к полосе прокрутки */
.afisha--teaser { margin-bottom: 32px; }

.afisha--teaser .afisha-list {
  display: grid;
  grid-template-columns: repeat(8, 172px);
  grid-template-rows: repeat(2, auto);
  gap: 16px 14px;
  margin: 0;
  padding: 0 0 10px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}

/* Плитка прилипает к левому краю: прокрутка останавливается на целой,
   а не на половине */
.afisha--teaser .afisha-card { scroll-snap-align: start; }

/* Полосу прокрутки оставляем видимой, но тонкой: без неё на настольном
   браузере непонятно, что строку можно тянуть */
.afisha--teaser .afisha-list::-webkit-scrollbar { height: 6px; }

.afisha--teaser .afisha-list::-webkit-scrollbar-thumb {
  background: var(--afisha-border);
  border-radius: 999px;
}

/* ── Плитка тизера: та же, но мельче ─────────────────────────────────── */

.afisha--teaser .afisha-card {
  border: 1px solid var(--afisha-border);
  border-radius: 12px;
  background: var(--afisha-bg);
}

.afisha--teaser .afisha-card:hover { border-color: var(--afisha-accent); }

.afisha--teaser .afisha-card__link {
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  height: 100%;
}

.afisha--teaser .afisha-card__frame {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
}

.afisha--teaser .afisha-card__photo {
  object-fit: contain;
  z-index: 1;
}

.afisha--teaser .afisha-card__blur {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2);
  filter: blur(10px);
}

.afisha--teaser .afisha-card__body { flex: 1; gap: 4px; }

.afisha--teaser .afisha-card__when { font-size: 12px; }

.afisha--teaser .afisha-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.3;
}

.afisha--teaser .afisha-card__meta {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 13px;
  border-top: 1px solid var(--afisha-border);
}

.afisha--teaser .afisha-price {
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  border: none;
  background: none;
}

.afisha--teaser .afisha-price__icon { display: none; }


/* ── Стрелки листания тизера ─────────────────────────────────────────────
 *
 * Появляются только вместе со скриптом (класс is-ready) и только если
 * строка вправду длиннее видимой части: кнопка, которая никуда не ведёт,
 * хуже, чем её отсутствие.
 */
/* Шапка стоит всегда: в ней заголовок и ссылка на всю афишу.
   Прячутся только стрелки — см. ниже */
.afisha-teaser__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 14px;
}

.afisha-teaser__heading {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

/* «Всё» стоит вплотную к заголовку, а не в конце строки: это его
   продолжение, а не отдельная кнопка где-то справа */
.afisha-teaser__all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 600;
}

.afisha-teaser__arrows {
  display: none;
  gap: 8px;
  margin-left: auto;
}

.afisha--teaser.is-ready.is-scrollable .afisha-teaser__arrows { display: flex; }

.afisha-arrow {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--afisha-text);
  background: var(--afisha-bg);
  border: 1px solid var(--afisha-border);
  border-radius: 999px;
  cursor: pointer;
}

.afisha-arrow:hover:not(:disabled) {
  color: var(--afisha-accent);
  border-color: var(--afisha-accent);
}

/* Дошли до края — кнопка гаснет, но остаётся на месте: иначе вторая
   прыгала бы вбок при каждом листании */
.afisha-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}