/* Блок «Мероприятия» на главной (#events). Карточки собирает events-feed.js из ленты events/events.json.
   Обложка — тот же синий фон за «рифлёным стеклом», что у первого экрана лендинга события (events/event.css),
   только статичный CSS, без WebGL. Цвета и радиусы — как у карточек главной (.card, .btn-lime). */

.evf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-bottom: 56px; }
.evf-all {
  display: inline-flex; align-items: center; gap: 8px; flex: none; border-radius: 8px;
  font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink, #0A0F0B); text-decoration: none;
}
.evf-all span { position: relative; }
.evf-all span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.evf-all:hover span::after { transform: scaleX(1); }
.evf-all svg { width: 18px; height: 18px; flex: none; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.evf-all:hover svg { transform: translateX(3px); }
.evf-all:focus-visible { outline: 2px solid var(--ink, #0A0F0B); outline-offset: 4px; }

.evf-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }

/* ---------- карточка: вся — одна ссылка ---------- */
.evf-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: #fff; border: 1px solid var(--line, rgba(10,15,11,.08)); border-radius: 28px;
  color: var(--ink, #0A0F0B); text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 24px 48px -28px rgba(10,20,15,.10);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.evf-card:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 32px 56px -28px rgba(10,20,15,.24); }
.evf-card:focus-visible { outline: 3px solid var(--ink, #0A0F0B); outline-offset: 4px; }

/* обложка: дата крупно на тёмно-синей панели */
.evf-cover {
  position: relative; flex: none; display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  aspect-ratio: 16 / 10; padding: 24px; color: #fff;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.07) 46px, rgba(0,0,0,.22) 52px, rgba(255,255,255,0) 54px),
    radial-gradient(70% 95% at 80% 100%, #A9C4FF 0, #2A3CFF 34%, #33279E 58%, #090B33 82%);
}
.evf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.evf-chip {
  display: block; height: 30px; max-width: 100%; min-width: 0; padding: 0 12px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff; font-size: 13px; font-weight: 600; line-height: 30px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* слишком длинная подпись — с многоточием, а не за краем */
}
.evf-chip--kind { background: var(--lime, #C6F24E); color: var(--ink, #0A0F0B); }
.evf-day { display: block; font-size: 76px; font-weight: 600; letter-spacing: -0.045em; line-height: .9; }
.evf-date { display: block; margin-top: 12px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.evf-time { display: block; margin-top: 4px; font-size: 15px; line-height: 1.35; color: rgba(255,255,255,.75); }

/* текст */
.evf-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 24px 24px 26px; }
.evf-title, .evf-sub {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%;
  text-wrap: balance; overflow-wrap: break-word;
}
.evf-title { -webkit-line-clamp: 3; line-clamp: 3; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.22; }
.evf-sub { -webkit-line-clamp: 2; line-clamp: 2; margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--ink-2, #4B5550); }
.evf-who { display: flex; align-items: center; gap: 12px; min-height: 44px; max-width: 100%; margin-top: 20px; }
.evf-who img {
  width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; object-position: center 20%;
  background: var(--bg-2, #EFEEE8);
}
.evf-who__txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.evf-who__name { font-size: 15px; font-weight: 600; overflow-wrap: break-word; }
.evf-who__role { font-size: 14px; color: var(--ink-2, #4B5550); overflow-wrap: break-word; }
.evf-act { margin-top: auto; padding-top: 24px; }
.evf-cta {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--lime, #C6F24E); color: var(--ink, #0A0F0B); font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 24px -10px rgba(130,170,30,.55);
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.evf-cta svg { width: 18px; height: 18px; flex: none; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.evf-card:hover .evf-cta { transform: translateY(-1px); }
.evf-card:hover .evf-cta svg { transform: translateX(3px); }

/* ---------- одно событие: широкая карточка, обложка слева ---------- */
.evf-list--1 .evf-cover { aspect-ratio: auto; min-height: 200px; }
@media (min-width: 768px) {
  .evf-list { gap: 24px; }
  .evf-list--2, .evf-list--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evf-list--1 .evf-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .evf-list--1 .evf-cover { min-height: 320px; padding: 32px; }
  .evf-list--1 .evf-day { font-size: 96px; }
  .evf-list--1 .evf-date { font-size: 19px; }
  .evf-list--1 .evf-body { justify-content: center; padding: 40px; }
  .evf-list--1 .evf-title { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.18; max-width: 640px; }
  .evf-list--1 .evf-sub { max-width: 600px; }
  .evf-list--1 .evf-act { margin-top: 0; padding-top: 28px; }
  .evf-list--2 .evf-cover { aspect-ratio: 2 / 1; }
  .evf-list--2 .evf-title, .evf-list--3 .evf-title { font-size: 21px; }
  /* три события на планшете: третья карточка — во всю ширину, обложка слева */
  .evf-list--3 .evf-card:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .evf-list--3 .evf-card:nth-child(3) .evf-cover { aspect-ratio: auto; min-height: 260px; }
}
@media (min-width: 1024px) {
  .evf-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .evf-list--3 .evf-card:nth-child(3) { grid-column: auto; display: flex; }
  .evf-list--3 .evf-card:nth-child(3) .evf-cover { aspect-ratio: 16 / 10; min-height: auto; }
  .evf-list--3 .evf-title { font-size: 19px; }
}
@media (min-width: 1280px) {
  .evf-list--3 .evf-title { font-size: 20px; }
  .evf-list--3 .evf-day { font-size: 80px; }
}
/* обложки в одном ряду — одной высоты: если у одной карточки чипы ушли на вторую строку, растут все три
   (карточка занимает две строки сетки списка — обложка и текст — через subgrid) */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .evf-list--2, .evf-list--3 { row-gap: 0; }
    .evf-list--2 .evf-card, .evf-list--3 .evf-card {
      display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 2; row-gap: 0;
    }
    .evf-list--2 .evf-cover, .evf-list--3 .evf-cover { align-self: stretch; justify-self: stretch; }
    /* планшет: третья карточка — отдельной строкой во всю ширину, со своей сеткой */
    .evf-list--3 .evf-card:nth-child(3) {
      grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: 24px;
    }
  }
  @media (min-width: 1024px) {
    .evf-list--3 .evf-card:nth-child(3) {
      display: grid; grid-row: span 2; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); margin-top: 0;
    }
  }
}

@media (max-width: 767px) {
  .evf-head { flex-direction: column; align-items: flex-start; margin-bottom: 32px; }
  .evf-all { font-size: 16px; }
  .evf-cover { padding: 20px; }
  .evf-day { font-size: 72px; }
  .evf-body { padding: 22px 20px 24px; }
  .evf-title { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .evf-card, .evf-cta, .evf-cta svg, .evf-all svg, .evf-all span::after { transition: none; }
  .evf-card:hover, .evf-card:hover .evf-cta, .evf-card:hover .evf-cta svg, .evf-all:hover svg { transform: none; }
}