/* /events — хаб мероприятий: hero + «Ближайшие» (заглушка с подпиской)
   + сетка карточек прошедших конференций.

   Типографика только через классы UI-kit (.text-h2, .text-h3,
   .text-body-m) — размеры зашиты там по брейкпоинтам. Карточка
   `.events-card` повторяет визуальный контракт `.info-cards-2026-card`
   (белая карточка, hairline-граница, 16/20px радиус), но несёт свою
   структуру: статус + дата, заголовок, лид, чипы, CTA. */

/* Hero background — capsule pattern (тот же SVG, что на /contacts;
   компонент сам масштабирует его cover<1024 / contain≥1024). */
.page-events .hero-2026 {
  --hero-bg-image: url("/images/contacts/v2/hero-bg.svg");
  --hero-bg-image-sm: url("/images/contacts/v2/hero-bg.svg");
  --hero-bg-image-lg: url("/images/contacts/v2/hero-bg.svg");
}

/* Hero gradient blob — cyan → blue (свой оттенок страницы). */
.page-events .hero-2026-gradient {
  left: 35.76%;
  top: 18.71%;
  width: 84.03%;
  height: 87.14%;
  background: linear-gradient(71.76deg, #a2e6ee 20.38%, #4091f5 90.22%);
  opacity: 0.4;
  filter: blur(150px);
}

/* ======================= Секции страницы ======================= */

/* У hero-2026 нет margin-bottom — вертикальную шкалу задаёт секция
   (40 → 48@576 → 56@768 → 60@1024), как у `.contacts-section`. */
.events-section {
  margin-top: 40px;
  margin-bottom: 40px;
}

.events-section-title {
  margin: 0 0 24px;
}

/* Подсекции внутри раздела («Ближайшие» / «Прошедшие»). Модификатор
   `--gap` отбивает вторую подсекцию от предыдущего блока. */
.events-subsection-title {
  margin: 0 0 16px;
}

.events-subsection-title--gap {
  margin-top: 40px;
}

@media (min-width: 576px) {
  .events-section {
    margin-top: 48px;
    margin-bottom: 48px;
  }
}

@media (min-width: 768px) {
  .events-section {
    margin-top: 56px;
    margin-bottom: 56px;
  }

  .events-section-title {
    margin-bottom: 28px;
  }

  .events-subsection-title {
    margin-bottom: 20px;
  }

  .events-subsection-title--gap {
    margin-top: 48px;
  }
}

@media (min-width: 1024px) {
  .events-section {
    margin-top: 60px;
    margin-bottom: 60px;
  }

  .events-section-title {
    margin-bottom: 32px;
  }

  .events-subsection-title--gap {
    margin-top: 56px;
  }
}

/* CTA-заглушка «ближайших» стоит внутри раздела — свой внешний отступ
   ей не нужен, вертикаль держит `.events-section` и подсекции. */
.events-section .cta-banner-2026 {
  margin-top: 0;
  margin-bottom: 0;
}

/* ======================= Карточки мероприятий ======================= */

.events-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 576px) {
  .events-grid {
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .events-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

/* Карточка берёт фирменный цвет своей конференции — сплошную заливку
   из её page-CSS (`--conf-*-soft-bg`) — и её же декор-сетку. Цвет и
   сетка приходят модификатором, поэтому карточки в сетке различимы.
   Дефолт (без модификатора) — нейтральная капсульная подложка
   страницы, для будущих активностей без своей палитры. */
.events-card {
  --events-card-grid: url("/images/contacts/v2/hero-bg.svg");
  --events-card-bg: var(--brand-white);

  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--events-card-bg);
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: 16px;
  padding: 24px;
}

.events-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--events-card-grid);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  opacity: 0.6;
}

.events-card > * {
  position: relative;
  z-index: 1;
}

/* «ABM + AI-агенты» — фиолетовый (`--conf-violet-soft-bg` из
   event-ai-driven-abm.css), сетка /business оттуда же. */
.events-card--abm {
  --events-card-grid: url("/images/business/v2/hero-bg.svg");
  --events-card-bg: #f3eeff;
}

/* «AI-native компания» — зелёный (`--conf-green-soft-bg` из
   event-ai-native.css), сетка /index оттуда же. */
.events-card--ai-native {
  --events-card-grid: url("/images/index/v2/hero-bg.svg");
  --events-card-bg: #ecf5ee;
}

@media (min-width: 768px) {
  .events-card {
    padding: 28px;
    border-radius: 20px;
  }
}

@media (min-width: 1280px) {
  .events-card {
    padding: 32px;
  }
}

.events-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

/* Статус-бейдж: белая плашка с рамкой — читается на пастельной
   подложке и не конкурирует с заголовком. Размер шрифта — на
   `.text-caption`, здесь геометрия и заливка. */
.events-card-status {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 4px;
  background: var(--brand-white);
  color: var(--text-default);
}

.events-card-title {
  margin: 0 0 12px;
}

.events-card-text {
  margin: 0 0 20px;
  color: var(--text-default);
}

/* Стек аватарок спикеров — тот же приём, что на страницах самих
   конференций (`.conf-event-avatars`): перекрытие −10px и белая
   обводка, чтобы лица читались на пастельной подложке. */
.events-card-people {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}

.events-card-avatars {
  display: flex;
  flex: none;
}

.events-card-avatars img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--brand-white);
  object-fit: cover;
  background: #e7e8e9;
}

.events-card-avatars img + img {
  margin-left: -10px;
}

.events-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.events-card-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: 999px;
  background: var(--brand-white);
}

@media (min-width: 1280px) {
  .events-card-chip {
    height: 36px;
  }
}

/* CTA прижат к низу карточки — соседние карточки выравниваются
   по кнопке независимо от длины заголовка и лида. */
.events-card-link {
  margin-top: auto;
  align-self: flex-start;
}