/* ==========================================================================
   events — «Интересные события / Главное на Форуме» (БАЗА 1920, БЕЗ @media).
   Figma: Section 8 / 79:2262. get_design_context 79:2262.
   Полноширинная тёмная карта c-dark r24 с фоновым силуэтом (op .2). 4 карточки
   (h300, r10.95): база + уникальный арт (перекрывает) + градиент → свой цвет
   (accent/blue/violet/green) + подпись Cochin 32/40 white внизу слева.
   ========================================================================== */

.s-events {
  background: var(--c-bg);
}

.s-events__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 32px;
  /* Figma Section 8: высота 571 (1440) / 591 (1920) — низ симметричен верху (120).
     Было 39 (из старого файла 79:*), новый файл 105:941 даёт 120. */
  padding: 120px 40px 120px;
  border-radius: var(--r-24);
  background: var(--c-dark);
  color: #fff;
}

/* Фоновый силуэт (79:2295): image 35, flipX, opacity .2 */
.s-events__bg {
  position: absolute;
  inset: 0;
  /* Figma 1920/1440: силуэт — ПЕРЕДНИЙ слой (Image последний в Section 8), op .2
     поверх карточек → приглушает их. На ≤768 он позади (z-index сброшен в @media). */
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.s-events__bg img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1280px;
  max-width: none;
  transform: translate(-50%, -50%) scaleX(-1);
  opacity: 0.2;
  object-fit: cover;
}

/* ---------- Заголовок (79:2263): 378 ---------- */
.s-events__title {
  position: relative;
  z-index: 1;
  width: 378px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.s-events__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}

/* ---------- Карточки (79:2268): 4 в ряд, gap 16 ---------- */
.s-events__cards {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Флекс-ячейки — это <li>; карточка-ссылка тянется на 100% ширины ячейки */
.s-events__cards > li {
  flex: 1 0 0;
  min-width: 0;
}

.s-events__item {
  position: relative;
  display: block;
  width: 100%;
  height: 300px;
  border-radius: 10.95px;
  overflow: hidden;
}

/* База карточки (Rectangle 1) */
.s-events__item-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Уникальный арт — перекрывает, центр по горизонтали, выходит за верх */
.s-events__item-art {
  position: absolute;
  left: 50%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

/* Градиент-плашка снизу (прозрачный → цвет категории) */
.s-events__item-grad {
  position: absolute;
  left: 0;
  top: 158.9px;
  width: 100%;
  height: 141.1px;
}

/* Подпись категории */
.s-events__item-label {
  position: absolute;
  left: 21.66px;
  top: 201.37px;
  width: 280px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  text-transform: uppercase;
  color: #fff;
}

/* --- Категория 1: деловая (accent) --- */
.s-events__item--business .s-events__item-art {
  width: 546.114px;
  height: 364.076px;
  top: -27.05px;
  transform: translateX(calc(-50% + 7.51px)) scaleX(-1);
}
.s-events__item--business .s-events__item-grad {
  background: linear-gradient(to bottom, rgba(9, 30, 37, 0), #c43a1e);
}

/* --- Категория 2: культурная (blue) --- */
.s-events__item--culture .s-events__item-art {
  width: 507.534px;
  height: 338.356px;
  top: -45.21px;
  transform: translateX(calc(-50% + 2.05px));
}
.s-events__item--culture .s-events__item-grad {
  background: linear-gradient(to bottom, rgba(9, 30, 37, 0), #1e9ac4);
}

/* --- Категория 3: выставочная (violet) --- */
.s-events__item--expo .s-events__item-art {
  width: 581.507px;
  height: 387.671px;
  top: -43.84px;
  transform: translateX(calc(-50% + 7.53px));
}
.s-events__item--expo .s-events__item-grad {
  background: linear-gradient(to bottom, rgba(9, 30, 37, 0), #711ec4);
}

/* --- Категория 4: пресс (green) --- */
.s-events__item--press .s-events__item-art {
  width: 581.507px;
  height: 387.671px;
  top: -64.38px;
  transform: translateX(calc(-50% + 32.19px));
}
.s-events__item--press .s-events__item-grad {
  background: linear-gradient(to bottom, rgba(9, 30, 37, 0), #107d06);
}

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

/* ---- ≤1440: карточки резиновые (aspect 448:300); градиент и подпись — от низа ---- */
@media (max-width: 1919px) {
  /* Фоновый силуэт по 1440 (Figma 105:975): 1440×960, центр со сдвигом вверх 55.5px
     (база 1920×1280 — только для 1920). */
  .s-events__bg img {
    width: 1440px;
    height: 960px;
    top: calc(50% - 55.5px);
  }
  .s-events__heading {
    font-size: 32px;
    line-height: 40px;
  }
  .s-events__item {
    height: auto;
    aspect-ratio: 448 / 300;
  }
  .s-events__item-grad {
    top: auto;
    bottom: 0;
    height: 48%;
  }
  /* Подпись в 2 строки: ширина 189 (Figma 105:954), Cochin 20/28, низ 16 → верх 147 */
  .s-events__item-label {
    top: auto;
    bottom: 16px;
    left: 16px;
    width: 189px;
    font-size: 20px;
    line-height: 28px;
  }
  /* Арт по 1440-размерам (Figma image 38 каждой карточки), а не 1920-кегли */
  .s-events__item--business .s-events__item-art {
    width: 399px;
    height: 266px;
    top: -20px;
    transform: translateX(calc(-50% + 5.5px)) scaleX(-1);
  }
  .s-events__item--culture .s-events__item-art {
    width: 371px;
    height: 247px;
    top: -33px;
    transform: translateX(calc(-50% + 1.5px));
  }
  .s-events__item--expo .s-events__item-art {
    width: 425px;
    height: 283px;
    top: -32px;
    transform: translateX(calc(-50% + 5.5px));
  }
  .s-events__item--press .s-events__item-art {
    width: 425px;
    height: 283px;
    top: -47px;
    transform: translateX(calc(-50% + 23.5px));
  }
}

/* ---- ≤768: сетка 2×2 ---- */
@media (max-width: 1023px) {
  /* На ≤768 силуэт уходит за карточки (Figma 768/360: Image — первый слой) */
  .s-events__bg {
    z-index: 0;
  }
  .s-events__card {
    padding: 60px 40px;
  }
  .s-events__cards {
    flex-wrap: wrap;
  }
  .s-events__cards > li {
    flex: 0 0 calc((100% - 16px) / 2);
  }
}

/* ---- ≤360: горизонтальная строка-скролл, карточки 280 ---- */
@media (max-width: 767px) {
  .s-events__card {
    padding: 40px 16px;
    /* Figma 105:2838: заголовок(низ 100)→карточки(132) зазор 32, не 24. */
    gap: 32px;
  }
  .s-events__heading {
    font-size: 20px;
    line-height: 28px;
  }
  .s-events__cards {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .s-events__cards > li {
    flex: 0 0 280px;
    scroll-snap-align: start;
  }
  /* Радиус карточки на 360: Figma 105:2849 = 6.829px (база/1440 даёт 10.95) */
  .s-events__item {
    border-radius: 6.829px;
  }
  /* Градиент-плашка на 360: Figma 105:2852 top 99.02 / h 87.927 на карте 186.951
     (≈47.03% от низа), база/1440 даёт 48% → 90px. Переопределяем. */
  .s-events__item-grad {
    height: 47.03%;
  }
  /* Сабтайтл секции на 360 мельче: 12/16 (Figma 105:2844), а не общий 14/20 */
  .s-events .section-label__text {
    font-size: 12px;
    line-height: 16px;
  }
  /* Подпись категории 16/24, ширина ~161 → заголовок в 2 строки (Figma 105:2853) */
  .s-events__item-label {
    left: 16px;
    width: 161px;
    font-size: 16px;
    line-height: 24px;
  }
}