/* ==========================================================================
   Публичная страница волонтёрского сбора /event/CODE/.
   Рендерится внутри чрома сайта (header/footer), где глобальный
   *{font-size:21px} раздувает всё — поэтому типографику и размеры задаём в px.
   Токены/классы vf-/ev- изолированы под .ev. Бренд leikozu 2026.
   ========================================================================== */
:root {
  --vf-red: #DA352C;
  --vf-dark-red: #AA1D1D;
  --vf-black: #141412;
  --vf-white: #fff;
  --vf-light-grey: #EFEFEF;
  --vf-border: #eaeaea;
  --vf-grey-2: #9a9a9a;
  --vf-grey-3: #6b6b6b;
  --vf-ink-55: rgba(20, 20, 18, 0.55);
  --vf-ink-82: rgba(20, 20, 18, 0.82);
  --vf-r-card: 30px;
  --vf-r-pill: 50px;
  --vf-r-sm: 18px;
  --vf-sh-card: 0 4px 15px rgba(0, 0, 0, 0.05);
  --vf-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

.ev { font-family: 'TT Fors', Arial, sans-serif; color: var(--vf-black); }
.ev *, .ev *::before, .ev *::after { box-sizing: border-box; }
/* Сетка — общий .wrapper сайта (style.css): поля страницы совпадают с шапкой и подвалом. */

/* ── Кнопки ── */
.ev .vf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 24px; border-radius: var(--vf-r-pill); background: var(--vf-red); color: var(--vf-white); border: 1px solid transparent; font-family: inherit; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; cursor: pointer; transition: all 0.25s var(--vf-ease); }
.ev .vf-btn:hover { background: var(--vf-dark-red); }
.ev .vf-btn--ghost { background: none; color: var(--vf-black); border-color: var(--vf-black); }
.ev .vf-btn--ghost:hover { background: var(--vf-black); color: var(--vf-white); }
.ev .vf-btn--block { display: flex; width: 100%; }

/* Любое display-правило с классом (.vf-btn--block и т.п.) перебивает браузерное
   [hidden]{display:none} — без этого кнопка «Поддержать» не прячется и форма
   раскрывается прямо под ней. */
.ev [hidden] { display: none !important; }

/* ── Крошки ──
   Разметка и типографика — штатный .fbl-breadcrumb сайта, здесь только отступы:
   его margin-bottom вместе с margin-top героя давал двойной провал. */
.ev .fbl-breadcrumb { margin: 20px 0 0; }

/* ── Hero ── */
.ev-hero { position: relative; height: 460px; border-radius: var(--vf-r-card); overflow: hidden; margin-top: 28px; }
.ev-hero--nocover { height: auto; background: var(--vf-black); }
.ev-hero__media { position: absolute; inset: 0; }
.ev-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,18,0) 35%, rgba(20,20,18,0.85) 100%); }
.ev-hero__body { position: relative; padding: 40px; color: var(--vf-white); }
.ev-hero--nocover .ev-hero__body { padding: 44px 40px; }
.ev-hero:not(.ev-hero--nocover) .ev-hero__body { position: absolute; left: 0; right: 0; bottom: 0; }
.ev-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ev-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--vf-r-pill); background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28); color: var(--vf-white); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; backdrop-filter: blur(4px); }
.ev-hero__title { font-size: clamp(34px, 4vw, 50px); line-height: 1.04; text-transform: uppercase; font-weight: 400; margin: 0; max-width: 20ch; }
.ev-hero__org { display: flex; align-items: center; gap: 11px; margin-top: 20px; }
.ev-hero__org-ava { width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.85); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--vf-dark-red); font-size: 17px; }
.ev-hero__org-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-hero__org-name { font-size: 16px; }
.ev-hero__org-name sub { display: block; font-size: 12px; opacity: 0.72; }

/* ── Раскладка ── */
/* Колонки прижаты к краям контейнера (1440): текст держим на читаемых 720px,
   лишняя ширина уходит в промежуток, а не в длину строки. */
.ev-grid { display: grid; grid-template-columns: minmax(0, 720px) 380px; justify-content: space-between; gap: 48px; margin: 40px 0 56px; align-items: start; }

/* ── Контент (рендер editor.js JSON→HTML) ── */
.ev-content > :first-child { margin-top: 0; }
.ev-content p { font-size: 17px; line-height: 1.6; color: var(--vf-ink-82); margin: 0 0 18px; }
.ev-content h2 { font-size: 26px; line-height: 1.2; text-transform: uppercase; font-weight: 400; margin: 32px 0 12px; }
.ev-content h3 { font-size: 21px; line-height: 1.25; font-weight: 600; margin: 28px 0 10px; }
.ev-content ul, .ev-content ol { font-size: 17px; line-height: 1.6; color: var(--vf-ink-82); margin: 0 0 18px; padding-left: 22px; }
.ev-content li { margin-bottom: 6px; }
.ev-content :is(b, strong, i, em, a, span, code) { font-size: inherit; }
.ev-content blockquote { border-left: 3px solid var(--vf-red); padding: 2px 0 2px 20px; margin: 26px 0; font-size: 20px; line-height: 1.42; color: var(--vf-black); }
.ev-content blockquote cite { display: block; font-size: 14px; font-style: normal; color: var(--vf-grey-3); margin-top: 8px; }
.ev-content figure { margin: 22px 0; }
.ev-content img { max-width: 100%; border-radius: var(--vf-r-sm); display: block; }
.ev-content figcaption { font-size: 13px; color: var(--vf-grey-2); margin-top: 7px; }
.ev-content hr { border: none; height: 1px; background: var(--vf-border); margin: 28px 0; }

/* ── Донат-блок (Этап 1 — заглушка) ── */
.ev-aside { position: sticky; top: 100px; }
.ev-donate { background: var(--vf-white); border: 1px solid var(--vf-border); border-radius: var(--vf-r-card); box-shadow: var(--vf-sh-card); padding: 24px; }
.ev-raise__label { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--vf-grey-2); }
/* Сумма — герой карточки: без цели ей не на что опереться, кроме кегля. */
.ev-raise__sum { font-size: 46px; line-height: 1; margin-top: 6px; }
/* Глобальный *{font-size} из style.css матчит вложенные теги напрямую, поэтому
   размер родителя до них не доходит — b/i/span внутри .ev задаём явно. */
.ev-raise__sum b { font-size: inherit; font-weight: 400; }
.ev-raise__sum i { font-size: inherit; font-style: normal; color: var(--vf-red); margin-left: 4px; }
.ev-raise__goal { font-size: 13px; color: var(--vf-grey-2); margin-top: 6px; }
.ev-progress { height: 8px; border-radius: 4px; background: var(--vf-light-grey); overflow: hidden; margin-top: 12px; }
.ev-progress__fill { height: 100%; border-radius: 4px; background: var(--vf-red); }
.ev-raise__meta { font-size: 12px; color: var(--vf-grey-3); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 10px; }
.ev-raise__meta b { font-size: inherit; color: var(--vf-black); }
.ev-raise__meta b.ev-raise__hit { color: var(--vf-red); }
/* Метрики: сетка 2×2 на общем фоне-бордере — линии рисует gap, а не border у плиток. */
.ev-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--vf-border); border: 1px solid var(--vf-border); border-radius: var(--vf-r-sm); overflow: hidden; margin-top: 18px; }
.ev-tile { background: var(--vf-white); padding: 13px 14px; }
.ev-tile--wide { grid-column: span 2; }
.ev-tile i { display: block; font-style: normal; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vf-grey-2); margin-bottom: 3px; }
.ev-tile b { font-size: 18px; font-weight: 400; }

.ev-divider { height: 1px; background: rgba(20,20,18,0.12); margin: 18px 0; }

/* Мероприятие с платным входом: начало, взнос и счётчик записавшихся.
   Кегль задаём явно — глобальный * { font-size } в style.css иначе сбивает его. */
.ev-event { margin-top: 18px; border: 1px solid var(--vf-border); border-radius: var(--vf-r-sm); overflow: hidden; }
.ev-event__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 14px; background: var(--vf-white); }
.ev-event__row + .ev-event__row { border-top: 1px solid var(--vf-border); }
.ev-event__row i { font-style: normal; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vf-grey-2); }
.ev-event__row b { font-size: 16px; font-weight: 400; text-align: right; }
.ev-stub { font-size: 13px; line-height: 1.4; color: var(--vf-grey-3); background: var(--vf-light-grey); border-radius: var(--vf-r-sm); padding: 12px 14px; margin-top: 10px; }
.ev-finished { background: var(--vf-light-grey); border-radius: var(--vf-r-sm); padding: 16px; }
.ev-finished b { display: block; font-size: 17px; margin-bottom: 6px; }
.ev-finished p { font-size: 14px; line-height: 1.5; color: var(--vf-grey-3); margin: 0 0 8px; }
.ev-finished p:last-child { margin-bottom: 0; }
.ev-finished__thanks { white-space: pre-line; }
.ev-share { margin-top: 10px; }

/* ── Лента донатов ── */
.ev-donors { margin: 0 0 56px; }
.ev-donors__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.ev-donors__title { font-size: 26px; line-height: 1.15; text-transform: uppercase; font-weight: 400; margin: 0; }
.ev-donors__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ev-dcard { display: flex; align-items: center; gap: 12px; background: var(--vf-white); border: 1px solid var(--vf-border); border-radius: var(--vf-r-sm); padding: 14px 16px; }
.ev-dcard__ava { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--vf-white); font-size: 14px; }
.ev-dcard__ava--1 { background: #DA352C; }
.ev-dcard__ava--2 { background: #8A6A5C; }
.ev-dcard__ava--3 { background: #2E7D52; }
.ev-dcard__ava--4 { background: #3F5E8C; }
.ev-dcard__ava--5 { background: #141412; }
.ev-dcard__who { font-size: 14px; line-height: 1.25; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-dcard__who span { display: block; font-size: 11px; color: var(--vf-grey-2); margin-top: 2px; }
.ev-dcard__sum { font-size: 17px; margin-left: auto; padding-left: 8px; white-space: nowrap; }
.ev-more { display: flex; width: 100%; align-items: center; justify-content: center; height: 48px; margin-top: 12px; border: 1px solid var(--vf-border); border-radius: var(--vf-r-pill); background: var(--vf-white); font-family: inherit; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vf-grey-3); cursor: pointer; transition: all 0.25s var(--vf-ease); }
.ev-more:hover { border-color: var(--vf-black); color: var(--vf-black); }
.ev-more[disabled] { opacity: 0.5; cursor: default; }
.ev-donors__empty { background: var(--vf-white); border: 1px dashed #dcdcd8; border-radius: var(--vf-r-card); padding: 30px 24px; text-align: center; }
.ev-donors__empty p { font-size: 15px; line-height: 1.5; color: var(--vf-grey-3); margin: 0 auto 16px; max-width: 52ch; }
.ev-donors__empty p:last-child { margin-bottom: 0; }

.ev-foot { border-top: 1px solid var(--vf-border); padding: 24px 0 40px; color: var(--vf-grey-2); font-size: 13px; line-height: 1.5; }

/* ── 404 ── */
.ev-404 { text-align: center; padding: 80px 0; }
.ev-404 h1 { font-size: 34px; text-transform: uppercase; font-weight: 400; margin: 0 0 12px; }
.ev-404 p { font-size: 16px; color: var(--vf-grey-3); margin: 0 auto 24px; max-width: 44ch; }

/* ── Адаптив ── */
@media (max-width: 900px) {
  .ev-grid { grid-template-columns: 1fr; gap: 28px; margin: 28px 0 40px; }
  .ev-aside { position: static; }
  .ev-hero { height: 320px; margin-top: 16px; }
  .ev-hero__body { padding: 22px; }
  .ev-hero__title { font-size: clamp(24px, 7vw, 32px); }
  .ev-donors { margin-bottom: 36px; }
  .ev-donors__title { font-size: 21px; }
  .ev-donors__grid { grid-template-columns: 1fr; }
  .ev-raise__sum { font-size: 38px; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .ev-donors__grid { grid-template-columns: repeat(2, 1fr); }
}