/* ============================================================================
   Страница конкурса — single-tandem_event.php, template-parts/event/*.php
   ----------------------------------------------------------------------------
   Макет: Figma «Страница конкурса» 17:2744 (1920 × 17130),
          «Mobil Страница конкурса» 17:1328 (360 × 14418),
          «Страница конкурса Завешен» 17:3017.
   Спеки: specs/inner-event-top.md, specs/inner-event-middle.md,
          specs/inner-misc.md (разделы 1–2).

   В макете у всех текстов включён text-box-trim (Figma меряет от верха
   заглавной буквы до базовой линии). Здесь trim не используется, поэтому
   отступы уже пересчитаны: «Figma − половина лишнего интерлиньяжа».
   Все значения — clamp(мин, X vw, макет), X = макет / 1920 × 100.

   Раскладка:
     .event__hero   первый экран (фото + H1 + 2 кнопки), белый лист наезжает на 100
     .event__sheet  белый лист со скруглёнными верхними углами
       .event__layout  сетка: навигация на всю ширину / разделы + боковая панель
   Залипают навигация и боковая панель — у предков нет overflow: hidden.
   ========================================================================== */

.event {
  /* Серая неактивная кнопка (Figma 1096:37946 «Заяки не принимаются»):
     r = g = b = 0.7816 → #C7C7C7. В tokens.css такого цвета нет. */
  --event-disabled: #C7C7C7;

  /* Высота залипшей полосы навигации: пилюля 60 + по 20 белого сверху и снизу */
  --event-nav-pill: clamp(40px, 3.125vw, 60px);
  --event-nav-pad:  20px;
  --event-nav-h:    calc(var(--event-nav-pill) + var(--event-nav-pad) * 2);

  /* Раздел → раздел: 200 в Figma (от низа контента до верха заглавной),
     194 — после пилюль и карточек. После текста с lh 40 — ещё −12. */
  --event-sec-gap:  clamp(97px, 10.156vw, 195px);
  --event-text-end: clamp(2px, 0.625vw, 12px);

  /* Текст 24/40 light (моб. 16/21) — абзацы, списки, реквизиты */
  --event-fs-text:  clamp(16px, 1.25vw, 24px);
  --event-lh-text:  clamp(21px, 2.083vw, 40px);

  display: block;
}

/* ── Неактивная кнопка ────────────────────────────────────────────────────
   Временная копия для этой страницы: общий .btn--disabled добавляется
   в components.css. Серая заливка, белый текст, без «зерна» и стрелки. */
.event .btn--disabled {
  background-color: var(--event-disabled);
  color: var(--c-white);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
  opacity: 1;
}
.event .btn--disabled::before,
.event .btn--disabled::after { display: none; }

.event__only-mobile { display: none; }

/* Положение ещё не загружено: кнопка голубая, как в макете, но не ссылка —
   без «зерна» наведения и без реакции на курсор */
/* Кнопка «Положение конкурса» без загруженного PDF: выглядит и ведёт себя
   как обычная (ховер и нажатие по макету), просто никуда не ведёт */
.event .event__btn-idle { cursor: default; opacity: 1; }

/* ══ 1. Первый экран ═════════════════════════════════════════════════════ */
.event__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  block-size: clamp(800px, 61.458vw, 1180px);
  background-color: var(--c-purple-deep);
  color: var(--c-white);
}

.event__hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* Фото в макете растянуто на 1920 × 1547 и сдвинуто на −229;
   62.4 % = 229 / (1547 − 1180). На телефоне сдвиг −47 по x: 7.4 % = 47 / (993 − 360). */
.event__hero-photo {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 7.4% 62.4%;
}

/* Затемнение под заголовком — один размытый эллипс «Ellipse 28» (918:12090):
   x −421, y −225, 1650 × 1109 в кадре 1920 × 1180, LAYER_BLUR 700 → blur(350px). */
.event__hero-shade {
  position: absolute;
  z-index: -1;
  inset-inline-start: -21.927%;
  inset-block-start: -19.068%;
  inline-size: 85.938%;
  block-size: 93.983%;
  border-radius: 50%;
  background-color: var(--c-purple-deep);
  filter: blur(350px);
  pointer-events: none;
}

.event__hero-inner {
  position: relative;
  /* H1: верх заглавной — y 231 (сверено попиксельно с рендером макета) */
  padding-block-start: clamp(85px, 11.458vw, 220px);
}

.event__hero-title {
  max-inline-size: 64.531vw;                /* 1239 из 1640 */
  font-size: var(--fs-h1);                   /* 34 → 110 */
  font-weight: var(--fw-medium);
  line-height: var(--lh-h1);
  letter-spacing: 0;                         /* в макете 0 (в base.css у h1 −0.01em) */
}

.event__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);                      /* 28 */
  margin-block-start: clamp(55px, 4.089vw, 78.5px); /* верх кнопок — y 628 */
}

/* ══ 2. Белый лист и сетка ═══════════════════════════════════════════════ */
.event__sheet {
  position: relative;
  z-index: var(--z-content);
  margin-block-start: calc(clamp(48px, 5.208vw, 100px) * -1);
  /* Снизу: форма заявки (−50 наезд) начинается на y 11701, через 200 после текста реквизитов */
  padding-block: clamp(73px, 5.208vw, 100px) clamp(88px, 12.344vw, 237px);
  border-start-start-radius: var(--r-sheet);
  border-start-end-radius: var(--r-sheet);
  background-color: var(--c-white);
  color: var(--c-black);
}

/* Колонки: 1084 + 167 + 389 = 1640 */
.event__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 20.26vw, 389px);
  grid-template-areas:
    "nav  nav"
    "main aside";
  column-gap: clamp(40px, 8.698vw, 167px);
  row-gap: clamp(55px, 4.948vw, 95px);       /* 101 в Figma до заглавных */
  align-items: start;
}

/* ══ 3. Якорная навигация ═══════════════════════════════════════════════
   В макете у ряда нет фона — при залипании под ним просвечивал бы текст,
   поэтому белая полоса. Её поля компенсированы отрицательными отступами:
   раскладка на 1920 не сдвигается. */
.event__nav {
  grid-area: nav;
  position: sticky;
  inset-block-start: var(--header-h);
  z-index: var(--z-sticky);
  margin: calc(var(--event-nav-pad) * -1) calc(var(--gutter) * -1);
  padding: var(--event-nav-pad) var(--gutter);
  background-color: var(--c-white);
}

.event__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(5px, 0.521vw, 10px);
}

.event__nav-link {
  /* «Зерно» наведения — как у .btn: круг Ø33 в левом нижнем углу
     (x −19, y 47 при высоте 60) разрастается и заливает пилюлю голубым. */
  --event-seed: clamp(26px, 1.719vw, 33px);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: var(--event-nav-pill);
  padding-inline: clamp(20px, 1.563vw, 30px);
  border: 2px solid var(--c-black);
  border-radius: var(--r-pill);
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  color: var(--c-black);
  transition:
    color var(--t-fast) var(--e-out),
    border-color var(--t-fast) var(--e-out),
    background-color var(--t-fast) var(--e-out);
}

.event__nav-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-start: calc(var(--event-seed) * -0.576);
  inset-block-start: calc(100% - var(--event-seed) * 0.394);
  inline-size: var(--event-seed);
  block-size: var(--event-seed);
  border-radius: 50%;
  background-color: var(--c-blue);
  transform: scale(0);
  transition: transform var(--t-slow) var(--e-out);
}

.event__nav-link:hover,
.event__nav-link:active,
.event__nav-link:focus-visible {
  border-color: var(--c-blue);
  color: var(--c-white);
}
/* ×24: круг Ø33 накрывает и самую широкую пилюлю «Возрастные категории»
   (при ×16 справа оставался незалитый серп — правка 28.09.2026) */
.event__nav-link:hover::before,
.event__nav-link:active::before,
.event__nav-link:focus-visible::before { transform: scale(24); }

/* Текущий раздел (Figma 920:12243 «Variant3») */
.event__nav-link.is-active {
  border-color: var(--c-blue);
  background-color: var(--c-blue);
  color: var(--c-white);
}

/* ══ 4. Боковая панель ═══════════════════════════════════════════════════ */
.event__aside {
  grid-area: aside;
  position: sticky;
  /* Под меню разделов. На невысоком экране (ноутбук) панель выше свободной
     области, а Chrome не закрепляет sticky-блок, который не влезает, — тогда
     event-page.js ставит inline top = высота окна − высота панели: панель
     прилипает нижним краем. Через custom property это не работает: Chrome
     не пересчитывает sticky-отступ при смене переменной. */
  --event-aside-top: calc(var(--header-h) + var(--event-nav-h) + 40px);
  inset-block-start: var(--event-aside-top);
  z-index: var(--z-content);
}

.event__facts {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 2.448vw, 47px);           /* 60 в Figma */
}

.event__fact-label {
  font-size: clamp(20px, 1.667vw, 32px);     /* Medium 32/34 */
  font-weight: var(--fw-medium);
  line-height: 1.0625;
  padding-block-start: 2px;                  /* верх заглавных — как в рендере макета */
}

.event__fact-value {
  margin-block-start: clamp(4px, 0.26vw, 5px); /* 20 в Figma */
  font-size: clamp(16px, 1.25vw, 24px);      /* Regular 24/1.3 */
  font-weight: var(--fw-regular);
  line-height: 1.3;
}

.event__aside-actions {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 1.458vw, 28px);
  margin-block-start: clamp(35px, 2.708vw, 52px); /* 60 в Figma */
}

.event__share { margin-block-start: clamp(36px, 3.802vw, 73px); } /* 80 в Figma */

/* Окно ниже макета: панель 790 px не помещается между меню разделов и низом
   окна, и закреплённая панель уезжает верхом под белую полосу меню. Сжимаем
   вертикальные зазоры панели, чтобы она помещалась целиком.
   Порог 1020: в макете окно 1080 (240 + 790 = 1030 — влезает), а у обычного
   окна браузера на экране 1080 высота ~940 — там уже нужен сжатый вариант. */
@media (min-width: 1025px) and (max-height: 1020px) {
  .event__facts { gap: 24px; }
  .event__aside-actions { margin-block-start: 28px; gap: 16px; }
  .event__share { margin-block-start: 28px; }
}
@media (min-width: 1025px) and (max-height: 760px) {
  .event__facts { gap: 16px; }
  .event__aside-actions { margin-block-start: 20px; gap: 12px; }
  .event__share { margin-block-start: 20px; }
  .event__fact-label { font-size: 24px; }
  .event__fact-value { font-size: 18px; }
}

.event__share-title {
  font-size: clamp(14px, 1.146vw, 22px);     /* Regular 22/1.3 */
  line-height: 1.3;
}

.event__share-list {
  display: flex;
  justify-content: space-between;
  margin-block-start: clamp(16px, 1.198vw, 23px); /* 30 в Figma */
}

/* Круглые кнопки «Поделиться»: обводка 2 px, «зерно» Ø11 в левом нижнем
   углу (x −1, y 50 при 60) — как у всех .icon-btn (components.css). */
.event__share-link {
  --icon-btn: clamp(50px, 3.125vw, 60px);
  border-width: 2px;
}

/* Глифы в круге 60: telegram 26.3, max 28, vk 31, whatsapp 28, ok 16.8 × 28 */
.event__share-link svg { inline-size: 46.7%; block-size: auto; }
.event__share-link--telegram svg { inline-size: 43.8%; }
.event__share-link--vk svg       { inline-size: 51.7%; }
.event__share-link--ok svg       { inline-size: 28%; }

/* Всплывающее «Ссылка скопирована» (MAX без публичного шаринга) */
.event__toast {
  position: fixed;
  inset-inline-start: 50%;
  inset-block-end: clamp(16px, 2.083vw, 40px);
  z-index: var(--z-modal);
  padding: 14px 24px;
  border-radius: var(--r-pill);
  background-color: rgba(20, 4, 49, .92);
  color: var(--c-white);
  font-size: var(--fs-16);
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-out);
}
.event__toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ══ 5. Разделы ══════════════════════════════════════════════════════════ */
.event__main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: var(--event-sec-gap);
  min-inline-size: 0;
}

/* Раздел кончается текстом с интерлиньяжем 40 — его «воздух» уже внизу строки */
.event__sec--text-end { margin-block-end: calc(var(--event-text-end) * -1); }
/* Описание жюри 22/28: снизу ≈ 6 лишних */
.event__sec--jury     { margin-block-end: calc(clamp(3px, 0.417vw, 8px) * -1); }
/* После «Как оплатить участие?» до «Реквизитов» в рендере на 1 ближе */
.event__sec--conditions { margin-block-end: calc(clamp(2px, 0.677vw, 13px) * -1); }

/* Заголовки разделов фиксированы: Medium 40/100 %, прописные */
.event__sec-title {
  font-size: clamp(20px, 2.083vw, 40px);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: 0;                         /* в макете 0 (в base.css у h2 −0.01em) */
  text-transform: uppercase;
  /* Заглавные в браузере на ~1.5 px выше, чем в рендере макета */
  padding-block-start: 1px;
}

/* Заголовок → пилюли / карточки: 100 в Figma → 94; → текст 24/40: → 82 */
.event__sec-title + * { margin-block-start: clamp(37px, 4.792vw, 92px); }
.event__sec-title + .event__prose,
.event__sec-title + .event__reqs { margin-block-start: clamp(32px, 4.271vw, 82px); }

/* ── Текст из визуального редактора («О конкурсе», текст под ценами) ── */
.event__prose > * + *  { margin-block-start: clamp(30px, 1.927vw, 37px); }  /* 60 / 40 */
.event__prose > * + h3,
.event__prose > * + h2 { margin-block-start: clamp(28px, 4.323vw, 83px); }  /* 100 / 40 */
.event__prose h2 + *,
.event__prose h3 + *   { margin-block-start: clamp(3px, 0.625vw, 12px); }   /* 30 / 15 */

.event__prose p,
.event__prose li {
  font-size: var(--event-fs-text);
  font-weight: var(--fw-light);
  line-height: var(--event-lh-text);
}

.event__prose strong,
.event__prose b { font-weight: var(--fw-medium); }

.event__prose h2,
.event__prose h3 {
  font-size: clamp(20px, 1.667vw, 32px);     /* Medium 32/34 */
  font-weight: var(--fw-medium);
  line-height: 1.0625;
  letter-spacing: 0;
}

/* Список в макете набран «1. …» — номер текстом того же начертания
   (у маркера list-style пробел после точки шире, чем в макете) */
.event__prose ol,
.event__prose ul {
  margin-inline: 0;                          /* верхний отступ — из правил выше */
  padding: 0;
  list-style: none;
}
.event__prose ol { counter-reset: event-li; }
.event__prose ol > li { counter-increment: event-li; }
.event__prose ol > li::before { content: counter(event-li) ". "; }
.event__prose ul > li::before { content: "• "; }
.event__prose li { margin: 0; }

.event__prose a {
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Пилюли: номинации (сплошные) и формы / категории (с обводкой) ──── */
.event__tags--solid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.event__tags--solid .event__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 100px;                     /* и на десктопе, и на телефоне */
  /* Текст в макете — рамка 897 по центру пилюли 1084; поле 94 не оставляет
     браузеру запаса на первую строку, поэтому 80: строка та же, по центру */
  padding: 10px clamp(20px, 4.167vw, 80px);
  border-radius: var(--r-pill);
  background-color: var(--c-blue);
  color: var(--c-white);
  font-size: clamp(20px, 1.667vw, 32px);
  font-weight: var(--fw-medium);
  line-height: 1.05;
  text-align: center;
}

.event__tags--outline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(10px, 1.458vw, 28px);
  row-gap: clamp(10px, 1.302vw, 25px);       /* видимый зазор в макете 25 */
}

.event__tags--outline .event__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: clamp(60px, 5.208vw, 100px);
  padding: 6px 10px;
  border: 2px solid var(--c-blue);
  border-radius: var(--r-pill);
  color: var(--c-blue);
  font-size: clamp(20px, 1.667vw, 32px);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  text-align: center;
}

/* Строки сетки в макете 97 при пилюле 100: бокс сетки кончается на 3 выше
   низа пилюль, от него и считаются 200 до следующего раздела */
.event__tags--outline:last-child { margin-block-end: calc(clamp(1px, 0.156vw, 3px) * -1); }

/* Примечание под возрастными категориями: Light 24/40, абзацы через пустую строку */
.event__note { margin-block-start: clamp(35px, 4.479vw, 86px); }
.event__note p {
  font-size: var(--event-fs-text);
  font-weight: var(--fw-light);
  line-height: var(--event-lh-text);
}
.event__note p + p { margin-block-start: var(--event-lh-text); }

/* ── Призовой фонд ───────────────────────────────────────────────────── */
.event__prizes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.event__prize {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 82 в Figma от заглавных подписи до заглавных суммы. Содержимое в макете
     отцентровано по заглавным, а браузер центрирует строки: у суммы 76/1
     под базовой линией ~15 «воздуха» — сверху поле больше на 11 */
  gap: clamp(12px, 2.396vw, 46px);
  min-block-size: clamp(160px, 20.833vw, 400px);
  padding: clamp(16px, 1.406vw, 27px) 10px 16px;
  border-radius: clamp(25px, 2.604vw, 50px);
  background-color: var(--c-blue);
  color: var(--c-white);
  text-align: center;
  overflow: hidden;
}
.event__prize:nth-child(3n + 2) { background-color: var(--c-orange); }
.event__prize:nth-child(3n + 3) { background-color: var(--c-purple); }

/* В макете подпись набрана Gotham Medium — шрифт чужой для проекта,
   берём TT Firs Neue Medium того же кегля (спека, «Неясности» 1). */
.event__prize-label {
  font-size: clamp(20px, 1.667vw, 32px);
  font-weight: var(--fw-medium);
  line-height: 1;
}

.event__prize-sum {
  font-size: clamp(32px, 3.958vw, 76px);
  font-weight: var(--fw-demi);
  line-height: 1;
  white-space: nowrap;
}

/* ── Жюри ────────────────────────────────────────────────────────────── */
/* На десктопе лента slider.js — обычная сетка 2 колонки: прокрутки нет,
   поэтому стрелки не появляются. */
.event__jury-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(12px, 1.458vw, 28px);
  row-gap: clamp(40px, 3.802vw, 73px);
  align-items: start;
  overflow: visible;
  padding-block: 0;
  margin-block: 0;
  scroll-snap-type: none;
}

.event__jury-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-inline-size: 0;
  text-align: center;
}

.event__jury-photo {
  inline-size: 100%;
  aspect-ratio: 528 / 424;
  border-radius: clamp(25px, 2.083vw, 40px);
  overflow: hidden;
  background-color: var(--c-line-dark);
}
.event__jury-photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.event__jury-name {
  margin-block-start: clamp(37px, 2.917vw, 56px); /* 60 в Figma */
  font-size: clamp(20px, 2.083vw, 40px);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-transform: uppercase;
}

.event__jury-bio {
  margin-block-start: clamp(14px, 1.406vw, 27px); /* 40 в Figma */
  font-size: var(--fs-body-s);               /* Regular 22, шаг строк 28 */
  font-weight: var(--fw-regular);
  line-height: 1.27;
}

.event__jury-nav { display: none; }

/* ── Условия участия ─────────────────────────────────────────────────── */
.event__fees {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.458vw, 28px);
}

.event__fee {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-block-size: clamp(120px, 14.01vw, 269px);
  padding: 10px clamp(10px, 2.083vw, 40px);
  border-radius: clamp(25px, 2.083vw, 40px);
  background-color: var(--c-purple);
  color: var(--c-white);
  text-align: center;
  white-space: nowrap;
}

.event__fee-name {
  font-size: clamp(20px, 1.667vw, 32px);
  font-weight: var(--fw-medium);
  line-height: 1;
}

.event__fee-price {
  margin-block-start: clamp(12px, 1.458vw, 28px); /* 40 в Figma */
  font-size: clamp(32px, 2.5vw, 48px);
  font-weight: var(--fw-medium);
  line-height: 1;
}

.event__fee-note {
  margin-block-start: clamp(4px, 0.521vw, 10px);  /* 20 в Figma */
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: var(--fw-light);
  line-height: 1;
}

/* Карточки → текст: 100 в Figma → 88 */
.event__terms { margin-block-start: clamp(35px, 4.688vw, 90px); }

/* Между первыми абзацами в макете пустая строка (40 / моб. 21),
   перед строкой-акцентом «Внимание! …» — обычный отступ */
.event__terms > p + p { margin-block-start: var(--event-lh-text); }
.event__terms > p + p:has(> strong:first-child) { margin-block-start: clamp(30px, 1.927vw, 37px); }
/* «Внимание! …» в десктопном макете — Regular (17:2916), в мобильном — Medium (17:1504) */
.event__terms strong { font-weight: var(--fw-regular); }

/* ── Реквизиты ───────────────────────────────────────────────────────── */
/* Строка «ИП …» — Medium, метки — Regular, значения — Light; 24/40 */
.event__reqs p {
  font-size: var(--event-fs-text);
  font-weight: var(--fw-light);
  line-height: var(--event-lh-text);
}
.event__reqs p + p { margin-block-start: var(--event-lh-text); }
.event__reqs b      { font-weight: var(--fw-regular); }
.event__reqs strong { font-weight: var(--fw-medium); }
.event__reqs a { color: inherit; text-decoration: none; }

/* Якорь раздела не должен прятаться под шапкой при переходе без JS */
.event__sec { scroll-margin-block-start: calc(var(--header-h) + var(--event-nav-h) + 20px); }

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

/* Низкие экраны: панель сжимается (см. медиа-запросы выше) и прилипает
   нижним краем — top ставит event-page.js. Раньше здесь sticky отключался. */

@media (max-width: 1280px) {
  .event__prize-sum { white-space: normal; }
}

/* Одна колонка: панель → навигация → разделы (порядок мобильного макета).
   Точку перехода макет не задаёт — ниже 1024 колонка текста слишком узкая. */
@media (max-width: 1023px) {
  .event__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "aside"
      "nav"
      "main";
    row-gap: 0;
  }

  .event__aside {
    position: relative;
    inset-block-start: auto;
    margin-block-end: 60px;
  }

  .event__main { margin-block-start: 57px; }

  .event__aside-actions .btn { min-block-size: 50px; }

  /* На планшете колонка широкая: кнопки и «Поделиться» — по ширине панели десктопа */
  .event__aside-actions,
  .event__share-list { max-inline-size: 389px; }
}

@media (max-width: 767px) {
  .event__only-desktop { display: none; }
  .event__only-mobile  { display: inline; }
  .event__note.event__only-mobile { display: block; }

  /* Первый экран (931:13102): H1 4 строки на 318, кнопки столбиком 320 × 50 */
  .event__hero-title { max-inline-size: none; }
  .event__hero-inner { padding-block-start: 87px; }   /* верх заглавной — y 90 */
  .event__hero-actions {
    flex-direction: column;
    gap: 20px;
    margin-block-start: 53px;                          /* кнопки — y 276 */
  }
  .event__hero-btn { min-block-size: 50px; inline-size: 100%; }

  /* Подписи кнопок в мобильном макете — 16 px (в --fs-20 минимум 14) */
  .event__hero-btn,
  .event__aside-actions .btn { font-size: 16px; }

  /* Эллипс 933:14125: x −265, y 2, 853 × 574 в кадре 360 × 800 */
  .event__hero-shade {
    inset-inline-start: -73.611%;
    inset-block-start: 0.25%;
    inline-size: 236.944%;
    block-size: 71.75%;
    filter: blur(120px);
  }

  /* Навигация (17:1367): три ряда, как в макете; не залипает —
     три ряда пилюль под шапкой заняли бы четверть экрана. */
  .event__nav {
    position: relative;
    inset-block-start: auto;
    margin: 0;
    padding: 0;
  }
  .event__nav-list { gap: 5px; }
  /* Пилюли одного размера: в макете экземпляры были смасштабированы по-разному
     (14, 12 и 10.67 px), по правке заказчика 28.09.2026 — все одинаковые.
     13 px и поля 11 — при колонке 320 ряды складываются как в макете:
     2 + 2 + 3 пилюли (при 14 px выходило 5 рядов с одиночными пилюлями) */
  .event__nav-link {
    block-size: 40px;
    padding-inline: 11px;
    border-width: 1px;
    font-size: 13px;
  }

  .event__sec { scroll-margin-block-start: calc(var(--header-h) + 20px); }

  /* Панель (17:1346): подписи 20/28, значения 16/21 */
  .event__facts { gap: 27px; }
  .event__fact-label { line-height: 1.4; padding-block-start: 0; }
  .event__fact-value { margin-block-start: 5px; line-height: 21px; }
  .event__share { margin-block-start: 37px; }
  .event__share-list { margin-block-start: 15px; }
  .event__share-title { line-height: 1.3; }

  /* Вертикаль мобильного макета сверена попиксельно (рендер 17:1328):
     лист → «Дата проведения» 80, панель → навигация 60, навигация → «О конкурсе» 60,
     раздел → раздел 100 до заглавных. Поправки ниже — разница между рамкой
     строки браузера и обрезкой текста Figma для разных концовок разделов. */
  .event__sheet { padding-block: 74px 105px; }  /* снизу: форма заявки — y 8922 */
  .event__aside { margin-block-end: 61px; }
  .event__aside-actions { margin-block-start: 34px; }
  .event__main { margin-block-start: 57px; gap: 96px; }
  .event__sec--text-end { margin-block-end: -4px; }
  .event__tags--solid:last-child { margin-block-end: 1px; }
  .event__prizes:last-child { margin-block-end: 1px; }

  /* «УСЛОВИЯ УЧАСТИЯ И ПОРЯДОК ОПЛАТЫ» — 2 строки с шагом 26 */
  .event__sec-title {
    line-height: 1.3;
    margin-block: -3px;
  }
  .event__sec-title { padding-block-start: 0; }
  .event__sec-title + * { margin-block-start: 36px; }
  /* «Форма участия (количество человек)»: рамка текста в макете 28 при двух
     строках (26 + 14 = 40) — пилюли стоят на 12 ближе, чем у других разделов */
  .event__sec-title + .event__tags--solid,
  .event__sec-title + .event__prizes { margin-block-start: 37px; }
  .event__sec--forms .event__sec-title + * { margin-block-start: 25px; }
  .event__note { margin-block-start: 36px; }

  /* Текст редактора: 16/21, подзаголовки 20/28 */
  .event__prose h2,
  .event__prose h3 { line-height: 1.4; }

  /* Блоки в мобильном макете 318 при колонке 320 (примечание — 320) */
  .event__main { padding-inline-end: 2px; }
  .event__note { margin-inline-end: -2px; }
  .event__sec--jury { margin-block-end: 7px; }

  /* Номинации (17:1403): текст в рамке 258 (поля 30), шаг строк 26 = «auto» шрифта */
  .event__tags--solid .event__tag {
    padding-inline: 30px;
    line-height: normal;
  }

  .event__tags--outline { grid-template-columns: minmax(0, 1fr); }
  .event__tags--outline:last-child { margin-block-end: 1px; }

  /* Призы (17:1457): подпись 20 px в рамке 238 (две строки, шаг 24),
     сумма 32 px одной строкой (рамка 260 шире поля — поля 10) */
  .event__prize {
    gap: 11px;                               /* 20 в макете от базовой линии до заглавных */
    padding-inline: 10px;
  }
  .event__prize-label {
    max-inline-size: 238px;
    line-height: 1.2;
  }
  .event__prize-sum { white-space: nowrap; }

  /* Жюри — слайдер по одной карточке (933:14346): зазор 25, стрелки 50 */
  .event__jury-list {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .event__jury-card { flex: 0 0 100%; }
  .event__jury-name { margin-block-start: 38px; }
  .event__jury-bio {
    margin-block-start: 13px;
    font-size: 16px;
    font-weight: var(--fw-light);
    line-height: 1.3;
  }

  .event__jury-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-block-start: 39px;
  }
  /* Стрелки жюри — Component 42 / 43 (оранжевый круг, «зерно» Ø11
     голубое в левом нижнем углу). В разметке это картинка с уже
     нарисованным кругом, поэтому состояние собрано поверх неё:
     в покое видна картинка; на наведении и нажатии (на телефоне — тап)
     поверх разрастается голубое «зерно» (::before), а белый шеврон
     рисует ::after — как в варианте «2» макета. */
  .event__jury-btn { --icon-btn: 50px; }
  .event__jury-btn img { inline-size: 100%; }
  .event__jury-btn::before { z-index: 1; }
  .event__jury-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background-color: var(--c-white);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='m28.33 34.17-9.16-9.17 9.16-9.17' fill='none' stroke='%23000' stroke-width='1.667'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='m28.33 34.17-9.16-9.17 9.16-9.17' fill='none' stroke='%23000' stroke-width='1.667'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base) var(--e-out);
  }
  .event__jury-btn[data-slider-next]::after { transform: scaleX(-1); }
  .event__jury-btn:hover::after,
  .event__jury-btn:active::after,
  .event__jury-btn:focus-visible::after { opacity: 1; }
  /* В макете обе стрелки яркие — у крайней карточки не гасим и не заливаем */
  .event__jury-btn[disabled] { opacity: 1; }
  .event__jury-btn[disabled]::after { display: none; }

  .event__fees {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .event__fee { min-block-size: 120px; }

  .event__terms strong { font-weight: var(--fw-medium); }
  .event__terms { margin-block-start: 36px; }

}

@media (prefers-reduced-motion: reduce) {
  .event__nav-link::before { transition: none; }
}