/* ============================================================
   events.css — секция «События и расписание». Владеет таск 07.
   Фон поверх колоды задаётся усиленным селектором (контракт таска 05):
   section[data-section=events][data-stack] — иначе перебьёт stacking.css.
   ============================================================ */

section[data-section='events'][data-stack] {
  background: var(--theme-surface-base);
  /* Состояния счётчика мест (спецификация заказчика, волна 4).
     Зелёного в палитре нет: «норма» — спокойный микс золота с текстом;
     FOMO — тёплый бордово-красный, локальная переменная секции;
     «мест нет» — приглушённый серый токен. */
  --events-seats-ok: color-mix(in srgb, var(--color-accent-primary) 70%, var(--color-text-primary));
  --events-seats-fomo: #C4525C;
  --events-seats-out: var(--color-text-secondary);
}

.events-head {
  margin-bottom: var(--rhythm-lead);
}

.events-head__eyebrow {
  color: var(--color-accent-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

.events-head__title {
  max-width: 24ch;
}

/* --- Чипы городов --- */
.events-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.events-chip {
  min-height: var(--tap-target-min);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-text-secondary);
  border-radius: var(--button-radius);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--motion-duration) var(--motion-ease),
              transform var(--motion-duration) var(--motion-ease);
}

.events-chip:hover { transform: translateY(-2px); }

.events-chip[aria-pressed='true'] {
  border-color: var(--color-accent-primary);
  color: var(--color-surface-base);
  background: var(--color-accent-primary);
}

/* --- Сетка карточек --- */
.events-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-grid);
}

@media (min-width: 769px) {
  .events-grid { grid-template-columns: repeat(2, 1fr); }
}

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

.events-state {
  grid-column: 1 / -1;
  color: var(--color-text-secondary);
}

.events-state .btn { margin-top: var(--space-2); }

/* --- Карточка события --- */
.event-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--card-pad);
  background: var(--theme-surface-card);
  outline: 1px solid color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
}

.event-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.event-card__date {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-accent-primary);
}

.event-card__badges {
  display: inline-flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.event-card__badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-surface-base);
  background: var(--color-text-secondary);
  padding: 4px var(--space-1);
}

/* Бейдж категории (СОРЕВНОВАНИЯ / МАСТЕР-КЛАСС / СБОРЫ) */
.event-card__cat {
  font-size: var(--text-xs);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-primary);
  border: 1px solid var(--color-accent-primary);
  padding: 4px var(--space-1);
  white-space: nowrap;
}

/* Тег выезда (city_tag) рядом с городом */
.event-card__tag {
  display: inline-block;
  margin-left: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
  border: 1px solid color-mix(in srgb, var(--color-text-secondary) 60%, transparent);
  padding: 4px var(--space-1);
}

.event-card__title {
  font-size: var(--text-lg);
  margin: 0;
}

.event-card__meta {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.event-card__program {
  margin: 0;
  padding-left: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.event-card__program li { margin-bottom: 4px; }

.event-card__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.event-card__price-old {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.event-card__price-byn {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
}

.event-card__price-rub {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

/* Событие без своей цены: стоимость определяет выбранная услуга */
.event-card__price-note {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-style: italic;
}

/* --- Места: счётчик + тонкий прогресс-бар --- */
.event-card__seats {
  margin-top: auto;
}

.event-card__seats-label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
}

/* Три состояния счётчика: норма / FOMO (≤2 или ≤15%) / мест нет */
.event-card__seats-label--ok { color: var(--events-seats-ok); }
.event-card__seats-label--fomo { color: var(--events-seats-fomo); font-weight: 600; }
.event-card__seats-label--out { color: var(--events-seats-out); }

.event-card__bar {
  height: 2px;
  background: color-mix(in srgb, var(--color-text-secondary) 35%, transparent);
  overflow: hidden;
}

.event-card__bar-fill {
  height: 100%;
  transform-origin: 0 50%;
  transition: transform var(--motion-duration) var(--motion-ease);
}

.event-card__bar-fill--ok { background: var(--events-seats-ok); }
.event-card__bar-fill--fomo { background: var(--events-seats-fomo); }
.event-card__bar-fill--out { background: var(--events-seats-out); }

.event-card__cta { align-self: flex-start; }

/* Highlighted-кнопка у FOMO-события: рамка-ореол, radius 0, без новых цветов */
.event-card__cta--fomo {
  outline: 1px solid var(--color-accent-primary);
  outline-offset: 3px;
}

/* --- Попап листа ожидания: модал живёт в body (контракт таска 04),
       слой — токен --z-modal, скругления 0 --- */
.events-wl {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  /* Модал живёт в body — переменная секции booking сюда не достаёт,
     поэтому цвет ошибок объявлен локально (тот же тон, что --booking-error). */
  --events-wl-error: #E4A0A0;
}

.events-wl__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-surface-base) 78%, transparent);
}

.events-wl__dialog {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100vh - 2 * var(--gutter));
  overflow-y: auto;
  padding: var(--space-4);
  background: var(--color-surface-card);
  outline: 1px solid var(--color-accent-primary);
}

.events-wl__x {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  width: var(--tap-target-min);
  height: var(--tap-target-min);
  border: none;
  background: none;
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
  cursor: pointer;
}

.events-wl__eyebrow {
  color: var(--color-accent-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin: 0 0 var(--space-1);
}

.events-wl__title {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
}

.events-wl__note {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.events-wl__label {
  display: block;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
  margin: var(--space-2) 0 var(--space-1);
}

.events-wl__input {
  width: 100%;
  min-height: var(--tap-target-min);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface-base);
  color: var(--color-text-primary);
  border: 1px solid color-mix(in srgb, var(--color-text-secondary) 55%, transparent);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
}

.events-wl__input:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 1px;
  border-color: var(--color-accent-primary);
}

.events-wl__consent {
  display: flex;
  gap: var(--space-1);
  align-items: flex-start;
  font-size: var(--text-sm);
  margin: var(--space-2) 0;
  cursor: pointer;
}

.events-wl__consent input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--color-accent-primary);
  flex: none;
}

.events-wl__error {
  color: var(--events-wl-error);
  font-size: var(--text-sm);
  margin: var(--space-1) 0 0;
}

.events-wl__submit { width: 100%; margin-top: var(--space-1); }