/* Афиша, после lounge.css (и venue.css). Появление — stagger из lounge.css:
   clip-path, visibility и нулевую высоту на самом списке не ставить. */

/* ---- список ---- */

.playbill {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--b-rule);
}
.playbill__empty { display: grid; gap: var(--s2); justify-items: start; padding-block: clamp(20px, 3vw, 32px); }

/* Ссылки «вся афиша» — под списком, по одной на заведение с событиями. */
.playbill__more {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s2x);
  margin-top: var(--s2);
}
.playbill__more:empty { display: none; }
.playbill__more .link-arrow { color: var(--b-accent-ink, var(--b-gold)); }

/* ---- строка события ----
   Три колонки на широком экране, ниже 860px — две. Дата остаётся слева
   столбиком, чтобы афиша читалась сверху вниз по числам. */

.gig {
  position: relative;
  display: grid;
  gap: var(--s2);
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  padding-block: clamp(22px, 2.8vw, 34px);
  border-bottom: 1px solid var(--b-rule);
}
@media (min-width: 720px) {
  .gig { grid-template-columns: 96px minmax(0, 1fr) minmax(160px, 210px); }
}

/* Дата: число крупным дисплеем, месяц и год под ним. Пока даты нет — вместо
   числа стоит названная причина, а не пустая клетка. */
.gig__when {
  display: grid; gap: 2px; align-content: start;
  grid-column: 1;
  font-family: var(--b-display);
  color: var(--b-ink);
}
.gig__day {
  font-size: clamp(30px, 3vw, 44px); font-weight: 600;
  line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--b-accent, var(--b-gold));
}
.gig__month { font-size: var(--fs-note); letter-spacing: .14em; text-transform: uppercase; color: var(--b-ink-2); }
.gig__year, .gig__time { font-size: var(--fs-note); color: var(--b-ink-3); font-variant-numeric: tabular-nums; }
.gig__when--tba {
  font-family: var(--b-text);
  font-size: var(--fs-note); line-height: 1.5;
  max-width: 14ch;
  padding-top: .2em;
}

/* Правило нужно именно здесь: .ph из lounge.css той же специфичности,
   а этот файл подключается позже. */
.gig__when--tba,
.gig__title.ph,
.gig__note.ph,
.gig__price.ph { color: var(--b-ink-3); }

/* Постер: тот же слот, что у фото по всему сайту, только вертикальный и
   узкий — подстановка картинки остаётся однострочной (srcset у <source>). */
.gig__poster {
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  border-radius: var(--b-radius-sm);
  background: color-mix(in oklab, var(--b-ground-2) 80%, transparent);
}
.gig__poster .slot__pending { font-size: 10px; letter-spacing: .1em; line-height: 1.3; }
@media (max-width: 719px) {
  .gig { gap: var(--s1) var(--s2); align-items: start; }
  .gig__poster { width: min(100%, 160px); margin-top: var(--s1); }
  .gig__side { grid-column: 2; width: 100%; }
  .gig__buy { width: 100%; justify-content: center; }
}

.gig__body { grid-column: 2; min-width: 0; display: grid; gap: var(--s2); align-items: center; }
.gig__summary { min-width: 0; display: grid; gap: var(--s1); }
@media (min-width: 720px) {
  .gig--has-poster .gig__body { grid-template-columns: minmax(0, 1fr) clamp(112px, 13vw, 176px); }
}
.gig__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s1); }
.gig__type {
  font-family: var(--b-display); font-size: var(--fs-note);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--b-accent-ink, var(--b-gold));
}
.gig__venue { font-size: var(--fs-note); color: var(--b-ink-3); }
.gig__venue::before { content: "·"; margin-inline-end: .7em; color: var(--b-ink-3); }
.gig__title {
  font-family: var(--b-display); font-weight: 600;
  font-size: var(--fs-h3); line-height: 1.18; letter-spacing: -.014em;
  overflow-wrap: anywhere;
  color: var(--b-ink);
}
.gig__title.ph { font-family: var(--b-text); font-size: var(--fs-lead); font-weight: 400; }
.gig__note { font-size: var(--fs-note); line-height: 1.55; color: var(--b-ink-2); max-width: 52ch; }

.gig__side { display: grid; gap: var(--s1); justify-items: start; align-content: start; }
@media (min-width: 720px) { .gig__side { grid-column: 3; justify-items: end; text-align: right; } }
.gig__price {
  font-family: var(--b-display); font-weight: 600;
  font-size: var(--fs-lead); font-variant-numeric: tabular-nums;
  color: var(--b-accent-ink, var(--b-gold));
}
/* Цены ещё нет: пропуск не должен весить как настоящая цена. */
.gig__price.ph { font-family: var(--b-text); font-size: var(--fs-note); font-weight: 400; }
/* Билетов нет — ссылка ведёт в телефон, а не в кассу. */
.gig__call { color: var(--b-ink-2); border-bottom-color: var(--b-accent-rule, var(--b-rule)); }
/* Кнопка продажи — компактная .btn акцентом строки; ведёт на сайт билетной
   системы. Звонок остаётся под ней тихой ссылкой. */
.gig__buy { padding: 13px 20px; font-size: 14px; }
.gig__buy-link { color: var(--b-accent-ink, var(--b-gold)); }


/* Прошедшее остаётся в афише, но тише живого и подписано словом. */
.gig__past {
  grid-column: 1 / -1;
  font-family: var(--b-display); font-size: var(--fs-note);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--b-ink-3);
}
.gig.is-past { opacity: .62; }
.gig.is-past .gig__day { color: var(--b-ink-2); }

/* На главной описание короче, афиша остаётся видна. */
.gig--compact { padding-block: clamp(18px, 2.2vw, 26px); }
.gig--compact .gig__day { font-size: clamp(26px, 2.4vw, 36px); }

@media (prefers-reduced-motion: reduce) {
  .gig__call svg { transition: none; }
}

/* ---- печать ----
   Наблюдатель появлений одноразовый: без этого всё, до чего не дошёл
   скролл, ушло бы на бумагу с opacity 0. */

@media print {
  .motion-on [data-reveal] .gig,
  .motion-on [data-reveal].playbill > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .playbill__more { display: none; }
  .gig { break-inside: avoid; }
}

/* ---- наведение ----
   Только для мыши: на телефоне :hover после касания залипает. */

@media (hover: hover) and (pointer: fine) {
  .gig__call:hover { color: var(--b-ink); }
}

.gig__poster img { object-fit: contain; }
.gig__poster:focus-visible { outline: 2px solid var(--b-gold); outline-offset: 4px; }

.gig__buy { min-height: 48px; white-space: normal; }
.gig__buy[aria-busy="true"] { cursor: progress; }
.gig__ticket-note, .gig__sales-state { max-width: 28ch; font-size: var(--fs-note); line-height: 1.5; color: var(--b-ink-2); }
.gig__fallback { min-height: 44px; max-width: 28ch; font-size: var(--fs-note); }
.gig__sales-state { color: var(--b-ink); }
.gig__side { min-width: 0; overflow-wrap: anywhere; }

.visit-rules { margin-top: var(--s2x); padding-block: var(--s2); border-block: 1px solid var(--b-rule); }
.visit-rules__title { font-family: var(--b-display); font-size: var(--fs-lead); margin-bottom: var(--s1); }
.visit-rules__list { padding-left: 1.2em; color: var(--b-ink-2); display: grid; gap: var(--s1); }
.events-archive { margin-top: var(--s3); }
.events-archive > h3 { margin-bottom: var(--s2); }
.photo-reports { margin-top: var(--s2x); }
.photo-reports__title { font-size: var(--fs-lead); margin-bottom: var(--s2); }
.reports-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.report-card { display: flex; flex-direction: column; align-self: start; border: 0; padding: 0; background: var(--b-ground-2); color: var(--b-ink); text-align: left; font: inherit; cursor: pointer; border-radius: 12px; overflow: hidden; }
.report-card__image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.report-card__body { display: grid; gap: var(--s1); padding: var(--s2); }
.report-card__date { color: var(--b-ink-2); font-size: var(--fs-note); }
.report-card__title { font-family: var(--b-display); font-size: var(--fs-lead); line-height: 1.2; }
.report-card__action { color: var(--b-ink-2); min-height: 24px; }
.report-card:focus-visible { outline: 2px solid var(--b-gold); outline-offset: 4px; }
.report-card:active { transform: translateY(2px); }
.report-card [hidden], .report-viewer [hidden] { display: none; }
.report-viewer { margin: auto; padding: var(--s2); width: min(1100px, calc(100% - 32px)); max-height: calc(100svh - 32px); overflow-y: auto; border: 1px solid var(--b-rule); border-radius: 16px; background: var(--b-ground); color: var(--b-ink); }
.report-viewer::backdrop { background: rgb(0 0 0 / .86); }
.report-viewer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
.report-viewer__title { font-family: var(--b-display); font-size: clamp(20px, 3vw, 32px); line-height: 1.15; }
.report-viewer__head .btn { flex-shrink: 0; }
.report-viewer__stage { position: relative; display: grid; place-items: center; }
.report-viewer__image { grid-area: 1 / 1; display: block; width: 100%; height: auto; max-height: 66svh; min-height: 0; object-fit: contain; }
.report-viewer__status { grid-area: 1 / 1; color: var(--b-ink-2); text-align: center; }
.report-viewer__stage .btn { grid-area: 1 / 1; align-self: end; }
.report-viewer__close { min-width: 48px; min-height: 48px; padding: 0; font-size: 28px; }
.report-viewer__controls { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s2); align-items: center; margin-top: var(--s2); }
.report-viewer__controls .btn { min-height: 48px; }
.report-viewer__position { color: var(--b-ink-2); font-variant-numeric: tabular-nums; }
html:has(.report-viewer[open]) { overflow: hidden; }
@media (hover: hover) and (pointer: fine) { .report-card:hover .report-card__action { color: var(--b-ink); text-decoration: underline; text-underline-offset: 4px; } }
@media (max-width: 899px) { .reports-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .reports-grid { grid-template-columns: minmax(0, 1fr); }
  .report-viewer { padding: 16px; width: calc(100% - 16px); max-height: calc(100svh - 16px); }
  .report-viewer__head { align-items: start; }
  .report-viewer__head .btn { padding: 0; }
  .report-viewer__image { max-height: 58svh; }
  .report-viewer__controls { gap: var(--s1); grid-template-columns: 1fr 1fr; }
  .report-viewer__position { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .report-viewer__controls .btn { padding-inline: 10px; font-size: 14px; }
}
@media print { .report-viewer { display: none; } .report-card { break-inside: avoid; } }
.report-viewer__source { display: inline-flex; align-items: center; min-height: 48px; margin-top: var(--s1); }