/* ============================================================================
   Страница «Мероприятия» — archive-tandem_event.php (/meropriyatiya/)
   ----------------------------------------------------------------------------
   Источник: specs/inner-events-list.md (Figma 1071:23647 — 1920 × 6071,
   моб. 1077:27010 — 360 × 8031, пагинация 1074:26572).
   Карточка — общая с главной (template-parts/event-card.php, стили
   .events__card в sections/events.css); здесь только сетка, фон, пагинация
   и мобильный вид карточки (§4.2).
   ========================================================================== */

/* Шапка фиксированная — контент начинается под ней (секция в макете с y 100) */
.events-page { padding-block-start: var(--header-h); }

.events-list {
  /* ── Вертикаль (спека §3.1). Заголовок с line-height: 1 — капитель 28
     в строке 40, по 6 px сверху/снизу, поэтому 200 − 6 и 100 − 6 ────── */
  --el-pt:         clamp(56px, 10.104vw, 194px);   /* 200 − 6 */
  --el-title-gap:  clamp(28px, 4.792vw, 92px);     /* 100 − 6 − 2 (сдвиг заголовка) */
  --el-gap:        clamp(12px, 1.458vw, 28px);     /* между карточками */
  --el-ctrl-gap:   clamp(24px, 2.083vw, 40px);     /* карточки → пагинация */
  --el-form-gap:   clamp(100px, 10.417vw, 200px);  /* низ блока → форма (видимые) */
  /* Форма заявки наезжает на секцию так же, как на главной (form.css, --fm-overlap) */
  --el-form-overlap: clamp(40px, 5.208vw, 100px);

  position: relative;
  z-index: 1;
  isolation: isolate;
  padding-block: var(--el-pt) calc(var(--el-form-gap) + var(--el-form-overlap));
  background-color: var(--c-white);
  color: var(--c-black);
  overflow: clip;
}

/* ── Фон: две одинаковые плитки размытых пятен (спека §5) ──────────────
   vw — от 1920, чтобы пятна масштабировались вместе с сеткой.
   Плитка 2 белая и лежит поверх плитки 1: закрывает её свечение ниже 2538. */
.events-list__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--c-white);
}

.events-list__tile {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100vw;
  block-size: 126.094vw;                       /* 2421 */
}

.events-list__tile.is-2 {
  z-index: 1;
  inset-block-start: 132.182vw;                /* 2537.94 */
  inset-inline-start: 1.615vw;                 /* 31 */
  background-color: var(--c-white);
}

.events-list__blob {
  position: absolute;
  border-radius: 50%;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

/* Матрицы сняты из SVG-экспорта Figma (у эллипсов небольшой skew) */
.events-list__blob.is-blue-big {
  inset-inline-start: 47.313vw;
  inset-block-start: 71.979vw;
  inline-size: 50.646vw;
  block-size: 57.354vw;
  transform: translate(-50%, -50%) matrix(.968646, .248444, -.305946, .952049, 0, 0);
  background-color: var(--c-blue);
  filter: blur(18.229vw);                      /* 350 */
}

.events-list__blob.is-orange-top {
  inset-inline-start: 68.203vw;
  inset-block-start: 4.354vw;
  inline-size: 17.786vw;
  block-size: 20.141vw;
  transform: translate(-50%, -50%) matrix(.968646, .248444, -.305946, .952049, 0, 0);
  background: radial-gradient(36.7% 34.1% at 40.1% 80.7%, rgba(255, 70, 51, .1) 0%, var(--c-orange) 100%);
  filter: blur(5.208vw);                       /* 100 */
}

.events-list__blob.is-pink-stripe {
  inset-inline-start: 14.839vw;
  inset-block-start: 61.672vw;
  inline-size: 14.145vw;
  block-size: 66.757vw;
  transform: translate(-50%, -50%) matrix(-.580321, -.814388, .869247, -.494377, 0, 0);
  background: radial-gradient(39.7% 33.8% at 40.1% 80.7%, var(--c-white) 0%, var(--c-orange) 100%);
  opacity: .5;
  filter: blur(5.208vw);                       /* 100 */
}

.events-list__blob.is-blue-mid {
  inset-inline-start: 22.656vw;
  inset-block-start: 35.323vw;
  inline-size: 20.31vw;
  block-size: 23vw;
  transform: translate(-50%, -50%) matrix(.968646, .248444, -.305946, .952049, 0, 0);
  background-color: var(--c-blue);
  filter: blur(7.813vw);                       /* 150 */
}

.events-list__inner {
  position: relative;
  z-index: 1;
}

/* ── Заголовок: стиль «Заг.2» (40 / Medium / капс), по центру контейнера ── */
.events-list__title {
  font-size: var(--fs-h2);
  line-height: 1;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: center;
  /* Капитель в макете на 2 px ниже, чем даёт строка 40 */
  padding-block-start: clamp(0px, 0.104vw, 2px);
}

/* ── Сетка 3 × 3: 3 × 528 + 2 × 28 = 1640 ─────────────────────────────── */
.events-list__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--el-gap);
  margin-block-start: var(--el-title-gap);
}

/* Карточки ряда одной высоты, кнопка прижата к низу (margin-top: auto в events.css) */
.events-list__item { display: flex; }

/* Уточнения карточки для страницы списка (на главной не трогаем):
   • в Figma обводка карточки внутренняя и не съедает отступ фото —
     498 = 528 − 2 × 15, поэтому inset 15 − 1 px обводки;
   • плашка статуса фиксированной ширины 253 (в макете у всех трёх вариантов). */
.events-list .events__card--list {
  --ev-inset: clamp(7px, 0.729vw, 14px);
}

.events-list .events__card--list .events__status { min-inline-size: clamp(150px, 13.177vw, 253px); }

.events-list__empty {
  margin-block-start: var(--el-title-gap);
  font-size: var(--fs-20);
  text-align: center;
}

/* ── Пагинация (спека §6): квадраты 40 × 40, радиус 10, шаг 5.
   Размеры не масштабируются — это тач-цель, на 360 в макете те же 40. ── */
.events-list__pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-block-start: var(--el-ctrl-gap);
}

.events-list .pagination__page,
.events-list .pagination__arrow {
  display: inline-grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid var(--c-blue);
  border-radius: 10px;
  /* Цифры — Montserrat Medium 18, как в макете (шрифт подключён 22.09.2026) */
  font-family: var(--font-pagination);
  font-size: 18px;
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--c-blue);
  transition:
    background-color var(--t-fast) var(--e-out),
    color var(--t-fast) var(--e-out);
}

/* Текущая страница и нажатие/наведение — заливка (Frame 117) */
.events-list .pagination__page.is-current,
.events-list a.pagination__page:hover,
.events-list a.pagination__page:active,
.events-list a.pagination__page:focus-visible,
.events-list a.pagination__arrow:hover,
.events-list a.pagination__arrow:active,
.events-list a.pagination__arrow:focus-visible {
  background-color: var(--c-blue);
  color: var(--c-white);
}

.events-list a.pagination__page:focus-visible,
.events-list a.pagination__arrow:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
}

/* Многоточие при большом числе страниц — без обводки (в макете не нарисовано) */
.events-list .pagination__page.is-dots { border-color: transparent; }

/* Крайняя страница — стрелка не нажимается, но выглядит как в макете
   (17:5590): неактивного вида у стрелок там нет */
.events-list .pagination__arrow.is-disabled { pointer-events: none; }

/* Шеврон 7.07 × 14.14 в квадрате 40 */
.events-list .pagination__icon {
  inline-size: 7px;
  block-size: 14px;
}

/* Иконка нарисована в боксе 11 × 22 и ужата до 7 × 14 — штрих 2 px как в макете */
.events-list .pagination__icon path { stroke-width: 3.14; }

/* ============================================================================
   Адаптив
   ========================================================================== */

/* Две колонки */
@media (max-width: 1024px) {
  .events-list {
    --el-gap: 20px;
  }

  .events-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* В две колонки секция длиннее плитки 1 — белая плитка 2 резала бы фон
     видимой ступенькой (на 1920 её закрывает форма). Здесь она прозрачная. */
  .events-list__tile.is-2 { background-color: transparent; }

  .events-list__blob.is-blue-big { filter: blur(160px); }
}

/* Одна колонка — мобильная карточка (спека §4.2, 1077:28988, 320 × 497) */
@media (max-width: 768px) {
  .events-list {
    /* Вертикаль моб. макета (§9): заголовок с line-height 1.3 — верх
       капители 80 = 74 + полуинтерлиньяж 6 */
    --el-pt:        74px;
    --el-title-gap: 34px;                      /* 160 − 126 (низ строки заголовка) */
    --el-gap:       60px;
    --el-ctrl-gap:  40px;
    --el-form-gap:  100px;
  }

  .events-list__title { line-height: 1.3; }

  /* В моб. макете перенос после первого слова */
  .events-list__title-line { display: block; }

  .events-list__grid {
    grid-template-columns: minmax(0, 1fr);
    max-inline-size: 528px;
    margin-inline: auto;
  }

  .events-list__pagination { justify-content: center; }

  /* Плитка 360 × 1370 (1077:28976): без skew, розовая полоса без прозрачности.
     Блюр — как в макете (350 / 100 / 100 / 150 px): при меньшем пятна
     становятся плотными и не похожи на макет. */
  .events-list__tile { block-size: 380.556vw; }
  .events-list__tile.is-2 {
    inset-block-start: 512.231vw;
    inset-inline-start: 0;
    background-color: var(--c-white);            /* как в моб. макете (1077:29903) */
  }

  .events-list__blob.is-blue-big {
    inset-inline-start: 43.72vw;
    inset-block-start: 211.97vw;
    inline-size: 134.27vw;
    block-size: 167.28vw;
    transform: translate(-50%, -50%) rotate(16.0185deg);
    filter: blur(97.222vw);
  }

  .events-list__blob.is-orange-top {
    inset-inline-start: 82.67vw;
    inset-block-start: 24.08vw;
    inline-size: 71.53vw;
    block-size: 89.12vw;
    transform: translate(-50%, -50%) rotate(16.0185deg);
    background: radial-gradient(36.8% 34% at 40.1% 80.7%, rgba(255, 70, 51, .1) 0%, var(--c-orange) 100%);
    filter: blur(27.778vw);
  }

  .events-list__blob.is-pink-stripe {
    inset-inline-start: 46.78vw;
    inset-block-start: 141.97vw;
    inline-size: 40.57vw;
    block-size: 182.57vw;
    transform: translate(-50%, -50%) rotate(-122.481deg);
    background: radial-gradient(39.5% 33.8% at 40.1% 80.7%, var(--c-white) 0%, var(--c-orange) 100%);
    opacity: 1;
    filter: blur(27.778vw);
  }

  .events-list__blob.is-blue-mid {
    inset-inline-start: 6.79vw;
    inset-block-start: 99.94vw;
    inline-size: 53.84vw;
    block-size: 67.08vw;
    transform: translate(-50%, -50%) rotate(16.0185deg);
    filter: blur(41.667vw);
  }

  /* Мобильная карточка — общая с главной, её стили в sections/events.css */
}

@media (max-width: 480px) {
  /* Поля 20 по макету (токен --gutter здесь даёт 16) */
  .events-list__inner { --gutter: 20px; }

  .events-list__title { font-size: 20px; }
}