/* ==========================================================================
   uchastie.css — страница «Стать участником» (раздел «Участникам»), /uchastie.html.
   Десктоп-база — 1920 (макет Figma 2301:187339, файл 7l7aBv3fBz3HXfvsqtvypK).
   Мобильных макетов у страницы НЕТ — ступени ≤1919/≤1023/≤767 адаптированы по
   лесенке проекта (эталон поведения — accreditation.css / partner.css).
   Переиспользует: base.css (section-label, btn), participate-page.css
   (.pacc / .pac — аккордеон «Как стать участником»). Здесь — только новые блоки.
   Всё скоупится под .uch (на <main>), чтобы не спорить с чужим адаптивом.

   Тела карточек — чистые p/ul/li без классов (просьба интегратора):
   стилизуются контекстно (.uch-why__card p, .uch-pkg__list li, .af-contact__lines p).
   ========================================================================== */

/* без висячих слов */
.uch-hero__lead, .uch-why__card p, .uch-pkg__list li, .uch-max__card p, .af-contact__lines p { text-wrap: pretty; }
.uch-hero__title, .uch-h2, .uch-pkg__name, .uch-max__card h3, .uch-news h2 { text-wrap: balance; }

/* ==========================================================================
   HERO — светлый (Figma 2301:187360). Полоса табов и баннер во всю ширину окна;
   гасим гаттер контейнера отрицательным полем (как на «Стать партнером»).
   Дата-блок и заголовок «XII…» — HTML (по правке заказчика: вынесены из
   картинки, чтобы масштабировались и выравнивались по левому краю с H1).
   Справа — KV-коллаж (беж #f0dcc5 в нём совпадает с фоном страницы, бесшовно).
   ========================================================================== */
.uch .ptabs,
.uch .uch-hero {
  margin-inline: calc(var(--gutter) * -1);
}
/* Наезд баннера на полосу табов (Figma: полоса 190, hero y=140 → 50px).
   Сам механизм — .ptabs--flow (page-tabs.css: pb 73 + mb -50); там он
   таргетит .arr-hero, здесь герой свой — дублируем адресно для .uch-hero. */
.uch .ptabs--flow + .uch-hero { margin-top: 0; }

.uch-hero {
  position: relative;
  margin-top: 28px;
  height: clamp(480px, 32.29vw, 620px);
  border-radius: var(--r-24);
  overflow: hidden;
  /* Фон — полный коллаж макета (текстура на всю ширину + KV справа,
     Figma 2301:187361; запечённая дата заретуширована — она теперь HTML).
     right center: при сужении срезается левая текстура, KV остаётся целым. */
  background: url(../../img/uchastie/hero-bg.webp) right center / cover no-repeat var(--c-bg);
}
/* Отдельная KV-картинка — только для узких экранов (мобильная схема
   «по образцу О Форуме»); на десктопе KV уже в фоне. */
.uch-hero__kv { display: none; }

/* Дата-блок: две плашки (Figma 2301:187381), слева-сверху, left 88 top 58 */
.uch-hero__dates {
  position: absolute;
  left: 88px;
  top: 58px;
  z-index: 1;
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.uch-date {
  display: flex;
  align-items: center;
  padding: 13px 17px;
  background: rgba(214, 191, 163, .2);
  border: 1px solid rgba(1, 31, 39, .2);
  border-radius: var(--r-8);
}
.uch-date--days {
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.uch-date__days {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.uch-date__d {
  font: 400 24px/32px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.uch-date__dash { width: 67px; height: 12px; color: var(--c-text); opacity: .2; }
.uch-date__place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font: 400 12px/20px var(--font-text);
  color: var(--c-text);
  text-align: center;
}
.uch-date--title {
  width: 468px;
}
.uch-date--title span {
  font: 400 24px/32px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}

/* Текстовый блок (section-label + H1 + лид + кнопка), left 88, низ 60 */
.uch-hero__inner {
  position: absolute;
  left: 88px;
  bottom: 60px;
  z-index: 1;
  width: 720px;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}
.uch-hero__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.uch-hero__title {
  font: 400 64px/72px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
/* Лид — 3 строки (правка №1): ширина под 3 строки + типографика (nbsp в HTML) */
.uch-hero__lead {
  max-width: 720px;
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
}

/* ==========================================================================
   Общий заголовок секции H2 (на этой странице единый 40/48).
   ========================================================================== */
.uch-h2 {
  font: 400 40px/48px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}

/* ==========================================================================
   ПОЧЕМУ СТОИТ ПРИНЯТЬ УЧАСТИЕ? — 5 карточек (Figma 2301:187404), ряд 2 + ряд 3.
   Карточка: белая 50% на беже, рамка line, r24, px57 py33, номер Cochin 72/80
   accent (w65) + текст 16/1.6, gap 24, вертикальное центрирование.
   ========================================================================== */
.uch-why { margin-top: 80px; }

.uch-why__grid {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.uch-why__row {
  display: flex;
  gap: 16px;
}
.uch-why__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 33px 57px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-24);
  background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)), var(--c-bg);
}
.uch-why__num {
  flex: none;
  width: 65px;
  font: 400 72px/80px var(--font-display);
  color: var(--c-accent);
}
.uch-why__card p {
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-text);
}

/* ==========================================================================
   ВАРИАНТЫ УЧАСТИЯ — горизонтальный аккордеон из 3 пакетов (Figma 2301:187446).
   Нативные <details name="uch-pkgs"> (по §9 ТЗ — аккордеоны на <details>):
   раскрытый пакет = 2 колонки (тёмная левая + светлая правая), свёрнутые —
   узкие тёмные корешки 161px с вертикальным заголовком (<summary>). Эксклюзивность
   и раскрытие — нативные (атрибут name), работает БЕЗ JS. Первый пакет — open.
   ========================================================================== */
.uch-variants { margin-top: 80px; }

.uch-pkgs {
  margin-top: 32px;
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.uch-pkg {
  position: relative;
  flex: 0 0 161px;
  min-width: 0;
  /* Высота НЕ фикс: 560 по макету — минимум, при плотном контенте (напр.
     список «Партнера» на ~1200) слайд растёт, соседние корешки тянутся
     флексом ряда (align-items: stretch). */
  min-height: 560px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-24);
  overflow: hidden;
  transition: flex-basis .35s ease, flex-grow .35s ease;
}
.uch-pkg[open] {
  flex: 1 1 auto;
  /* Колонка: единственный видимый ребёнок (контент details) растягивается
     на всю высоту слайда независимо от ::details-content-обёртки Chrome. */
  display: flex;
  flex-direction: column;
}

/* Корешок (свёрнутое состояние) = <summary>: тёмный, вертикальный заголовок */
.uch-pkg__spine {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 56px;
  background: var(--c-dark);
  cursor: pointer;
  list-style: none;
}
.uch-pkg__spine::-webkit-details-marker { display: none; }
.uch-pkg__spine::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.uch-pkg__name {
  position: relative;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font: 400 40px/48px var(--font-display);
  text-transform: uppercase;
  color: #fff;
}
/* В раскрытом пакете вертикальный корешок не нужен (заголовок — в левой колонке) */
.uch-pkg[open] > .uch-pkg__spine { display: none; }

/* Раскрытое состояние: 2 колонки (видно, когда <details open>) */
/* Chrome 131+ оборачивает контент <details> в ::details-content (height auto) —
   прокидываем flex-рост через обёртку, чтобы колонки заполняли слайд по
   высоте И могли его растить. Старые браузеры селектор игнорируют — там
   .uch-pkg__full сам является flex-ребёнком details. */
.uch-pkg::details-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.uch-pkg__full {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

/* Левая тёмная колонка */
.uch-pkg__left {
  position: relative;
  flex: none;
  width: 610px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 60px 56px;
  background: var(--c-dark);
  overflow: hidden;
}
.uch-pkg__left::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.uch-pkg__left > * { position: relative; }

/* Кадры — экспорт макетных collage.png по каждому состоянию (Figma 2301:187620,
   слайды 1-3): затемнение уже запечено в арт, поэтому без opacity. На десктопе
   окно совпадает с кадром 1:1 (корешок 159×559, панель 610×559) — пиксель в
   пиксель как в макете; при сужении cover сохраняет объект по центру. */
.uch-pkg:nth-child(1) .uch-pkg__spine::before { background-image: url(../../img/uchastie/pkg-spine-uchastnik.webp); }
.uch-pkg:nth-child(2) .uch-pkg__spine::before { background-image: url(../../img/uchastie/pkg-spine-partner.webp); }
.uch-pkg:nth-child(3) .uch-pkg__spine::before { background-image: url(../../img/uchastie/pkg-spine-smi.webp); }
.uch-pkg:nth-child(1) .uch-pkg__left::before { background-image: url(../../img/uchastie/pkg-open-uchastnik.webp); }
.uch-pkg:nth-child(2) .uch-pkg__left::before { background-image: url(../../img/uchastie/pkg-open-partner.webp); }
.uch-pkg:nth-child(3) .uch-pkg__left::before { background-image: url(../../img/uchastie/pkg-open-smi.webp); }
.uch-pkg__lname {
  font: 400 40px/48px var(--font-display);
  text-transform: uppercase;
  color: #fff;
}
.uch-pkg__left p {
  font: 400 16px/1.6 var(--font-text);
  color: rgba(255, 255, 255, .8);
}
/* Мини-блок «Как стать партнером?» в левой колонке (пакет Партнёр) */
.uch-pkg__sub {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.uch-pkg__sub h3 {
  font: 400 20px/28px var(--font-display);
  text-transform: uppercase;
  color: #fff;
}
.uch-pkg__sub p { color: #fff; }
.uch-pkg__sub a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.uch-pkg__sub a:hover { text-decoration: none; }
.uch-pkg__cta { align-self: flex-start; }

/* Правая светлая колонка */
.uch-pkg__right {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 60px 56px;
  background: rgba(255, 255, 255, .3);
}
.uch-pkg__rtitle {
  font: 400 40px/48px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.uch-pkg__rtitle--sm { font: 400 32px/40px var(--font-display); text-transform: uppercase; color: var(--c-text); }
.uch-pkg__right p {
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
}
/* Блок из двух свободных абзацев (пакет СМИ): шаг 4 внутри, 28 — от заголовка
   даёт родительский gap. Отдельная обёртка, чтобы gap:28 не разводил абзацы. */
.uch-pkg__stext { display: flex; flex-direction: column; gap: 4px; }

/* Список «пакет включает / что получает партнер» — чистые ul/li */
.uch-pkg__list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.uch-pkg__list li {
  position: relative;
  padding-left: 32px;
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
}
.uch-pkg__list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 9px;
  width: 10px;
  height: 10px;
  background: var(--c-accent);
  transform: rotate(45deg);
}
.uch-pkg__list li span {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  color: var(--c-secondary);
  opacity: .82;
}
.uch-pkg__note {
  margin-top: auto;
  padding: 19px 25px;
  background: rgba(255, 255, 255, .42);
  border: 1px solid var(--c-line);
  border-radius: var(--r-12);
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-secondary);
}

/* ==========================================================================
   КАК СТАТЬ УЧАСТНИКОМ ФОРУМА? — .pacc/.pac из participate-page.css.
   Правка №4: блок относится к пакету «Участник» — виден, только когда активен
   первый пакет; при выборе «Партнер»/«СМИ» скрывается. Fallback: без :has()
   блок остаётся видимым (база display:block).
   ========================================================================== */
.uch .pacc { margin-top: 80px; }
.uch-variants:has(.uch-pkg:nth-child(2)[open]) ~ .pacc,
.uch-variants:has(.uch-pkg:nth-child(3)[open]) ~ .pacc { display: none; }

/* Правка №5: в шаге 1 две кнопки — «Подать заявку» + «У меня еще нет ЕЛК» */
.pac__ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
/* Вторичная кнопка на светлом (Figma 2301:187526): белёсая заливка + бордер и
   текст Nile Blue. .btn базовый даёт форму, здесь — цвета. */
.btn--outline {
  background: rgba(255, 255, 255, .4);
  border: 1px solid var(--c-secondary);
  color: var(--c-secondary);
}
.btn--outline:hover { background: rgba(255, 255, 255, .6); }
.btn--outline .icon { stroke: currentColor; }

/* Правка №6: линия-тире перед подзаголовками внутри шага (Figma 2301) */
.uch .pac__sub { display: flex; align-items: center; gap: 12px; }
.pac__sub-dash { flex: none; width: 34px; height: 12px; color: var(--c-accent); fill: currentColor; }

/* Красный инлайн-акцент в телах шагов (правка заказчика 22.07). Голый <b> —
   тела остаются чистыми p/ul/li для редактора Битрикса. */
.uch .pac__body b { font-weight: 500; color: var(--c-accent); }

/* Правка №7: список шага 4 — ромбы accent (не нумерация) */
.pac__diamonds { margin: 6px 0 16px; display: flex; flex-direction: column; gap: 12px; }
.pac__diamonds li { position: relative; padding-left: 32px; opacity: .9; }
.pac__diamonds li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 9px;
  width: 10px;
  height: 10px;
  background: var(--c-accent);
  transform: rotate(45deg);
}

/* ==========================================================================
   КАК ПОЛУЧИТЬ МАКСИМУМ ПОЛЬЗЫ? — 3 тёмные карточки (Figma 2301:187533).
   Тёмная #091e25, border-top line, r24, px56 pt33 pb32; заголовок Cochin 32/40
   white, текст 16/1.6 beige, кнопка снизу.
   ========================================================================== */
.uch-max { margin-top: 80px; }

.uch-max__grid {
  margin-top: 48px;
  display: flex;
  gap: 16px;
  align-items: stretch;
}
.uch-max__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 33px 56px 32px;
  border-top: 1px solid var(--c-line);
  border-radius: var(--r-24);
  background: var(--c-dark);
}
.uch-max__card h3 {
  font: 400 32px/40px var(--font-display);
  text-transform: uppercase;
  color: #fff;
}
.uch-max__card p {
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-bg);
}
.uch-max__card .btn { margin-top: auto; align-self: flex-start; }
/* «Скоро будет доступно» на тёмной карте: в base .btn--light текст тёмный —
   тут по макету белый (правка заказчика «текст в кнопке белый») */
.uch-max__card .btn--light { color: #fff; }

/* ==========================================================================
   СЛЕДИТЕ ЗА НОВОСТЯМИ — section-label + h2 + 4 карточки (Figma 2301:187565).
   Карточки 1-2 тёмные, 3-4 светлые. Контент — чистые p.
   ========================================================================== */
/* Правки №8/№10: карточки — тот же компонент .af-contact, что на «О Форуме»
   (единообразные компактные кнопки + готовый адаптив). Стили скопированы из
   about-page.css, чтобы не тянуть весь файл (в нём глобальные .crumbs). */
.uch-news { margin-top: 80px; }
.uch-news__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.uch-news h2 {
  font: 400 40px/48px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.af-contacts__grid { margin-top: 24px; display: flex; gap: 16px; align-items: stretch; }
.af-contact {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 49px 57px;
  border-radius: var(--r-24);
}
.af-contact--dark { background: var(--c-dark); border: 1px solid var(--c-dark); }
.af-contact--light { background: rgba(255, 255, 255, .5); border: 1px solid var(--c-line); }
.af-contact__top { display: flex; flex-direction: column; gap: 16px; }
.af-contact__cap { font: 400 16px/1.6 var(--font-text); color: var(--c-secondary); opacity: .7; }
.af-contact__cap--muted { color: rgba(255, 255, 255, .6); opacity: 1; }
.af-contact__lines { display: flex; flex-direction: column; gap: 6px; font: 400 16px/1.6 var(--font-text); }
.af-contact--dark .af-contact__lines { color: #f0dcc5; }
.af-contact--light .af-contact__lines { color: var(--c-text); }
.af-contact__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.af-contact--dark .btn--ghost { background-color: transparent; }
.af-contact--dark .btn--ghost:hover { background-color: rgba(255, 255, 255, .12); }
.btn--sm-icon { gap: 6px; padding: 8px 24px; }
.btn--sm-icon .icon { fill: currentColor; stroke: none; }
.af-contact__ic { display: flex; flex-direction: column; gap: 2px; }
.af-contact__phone { font: 400 32px/40px var(--font-display); text-transform: uppercase; color: #f0dcc5; text-decoration: none; }
.af-contact__phone:hover { text-decoration: underline; text-underline-offset: 3px; }
.af-contact__mail { font: 400 18px/1.6 var(--font-text); color: var(--c-accent); word-break: break-word; }
.af-contact__social { display: flex; flex-direction: column; gap: 12px; }
.af-contact__social-list { display: flex; gap: 8px; }
.af-contact__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-8);
  overflow: hidden;
}
.af-contact__social-link img { width: 40px; height: 40px; display: block; }
.af-contact__cta { align-self: flex-start; }
/* Соцсети (переиспользуем footer-иконки 40px) */

/* ==========================================================================
   Отступ низа страницы (перед футером).
   ========================================================================== */
.uch { padding-bottom: 120px; }

/* ==========================================================================
   ≤1440 — пропорциональная ступень (значения не занижаем там, где их видит
   монитор 1920, — эталон accreditation.css).
   ========================================================================== */
@media (max-width: 1919px) {
  /* мин-высота 560, а не 480: на 1440 дата (сверху) и заголовок (снизу)
     пересекались при clamp-минимуме */
  .uch-hero { height: clamp(560px, 32.29vw, 620px); }
  .uch-hero__dates { left: 64px; top: 48px; }
  .uch-hero__inner { left: 64px; bottom: 56px; width: 680px; max-width: 680px; gap: 24px; }
  .uch-hero__title { font-size: 48px; line-height: 54px; }
  .uch-hero__lead { font-size: 16px; max-width: 680px; }

  .uch-why { margin-top: 64px; }
  .uch-why__grid { margin-top: 40px; }
  .uch-why__card { padding: 28px 40px; }

  /* Правка №11: на 1200–1440 правая часть не помещалась — ужимаем корешки,
     кегль заголовков пакетов и левую колонку, чтобы контенту справа хватало. */
  .uch-variants { margin-top: 64px; }
  .uch-pkg { flex: 0 0 128px; }
  .uch-pkg__name { font-size: 30px; line-height: 36px; }
  .uch-pkg__left { width: clamp(400px, 30vw, 520px); padding: 40px; gap: 20px; }
  /* левый паддинг НЕ обнулять — без него текст прилипал к тёмной колонке
     («исчез отступ», правка заказчика) */
  .uch-pkg__right { padding: 40px; }
  .uch-pkg__lname { font-size: 32px; line-height: 40px; }
  .uch-pkg__rtitle { font-size: 32px; line-height: 40px; }
  .uch-pkg__list li { font-size: 16px; }

  .uch-max { margin-top: 64px; }
  .uch-max__grid { margin-top: 40px; }
  .uch-max__card { padding: 32px 40px; }

  .uch-news { margin-top: 64px; }
  .af-contact { padding: clamp(32px, 2.55vw, 49px) clamp(40px, 2.97vw, 57px); }
  .af-contact__phone { font-size: clamp(28px, 1.667vw, 32px); line-height: clamp(34px, 2.083vw, 40px); }
}

/* ==========================================================================
   ≤1439 (1024–1439, «на 1200 слиплось»): при clamp-высоте контент наложения
   не помещался и текст заезжал на KV. Баннер выше фиксированно, фон влево
   (текст на спокойной текстуре, KV кадрируется правым краем), дата и текст
   разнесены с гарантированным зазором.
   ========================================================================== */
@media (max-width: 1439px) {
  .uch-hero { height: 560px; background-position: left center; }
  .uch-hero__dates { top: 40px; }
  .uch-hero__inner { bottom: 40px; width: 56%; max-width: none; }
  .uch-hero__lead { max-width: none; }
}

/* ==========================================================================
   ≤1279 (1024–1279, узкий десктоп): правой части слайдера не хватает ширины —
   список «Партнера» вытягивал слайд до ~1400px. Ужимаем корешки и левую
   колонку сильнее, чем на ступени ≤1919, чтобы правая колонка получила
   рабочую ширину и слайд остался соразмерным.
   ========================================================================== */
@media (max-width: 1279px) {
  .uch-pkg { flex: 0 0 96px; }
  .uch-pkg__spine { padding: 48px 24px; }
  .uch-pkg__name { font-size: 26px; line-height: 32px; }
  .uch-pkg__left { width: clamp(300px, 28vw, 380px); padding: 32px; }
  .uch-pkg__right { padding: 32px; }
  .uch-pkg__lname { font-size: 28px; line-height: 36px; }
  .uch-pkg__rtitle,
  .uch-pkg__rtitle--sm { font-size: 28px; line-height: 36px; }
}

/* ==========================================================================
   ≤768 — планшет: сетки в столбец, аккордеон пакетов раскрывается вертикально.
   ========================================================================== */
@media (max-width: 1023px) {
  /* Планшет и мобила — hero «по образцу О Форуме» (просьба заказчика):
     KV-коллаж первым на всю ширину, дата-плашка абсолютом в его левом-верхнем
     углу, ниже — плашка «XII…» крупно, затем label + H1 + лид + кнопка.
     display:contents распускает .uch-hero__dates, чтобы раскидать плашки
     по order без изменения разметки. */
  .uch-hero {
    height: auto;
    min-height: 0;
    padding: 0 0 32px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    background: var(--c-bg);
  }
  .uch-hero__kv {
    display: block;
    order: -1;
    width: 100%;
    height: auto;
  }
  .uch-hero__dates { display: contents; }
  /* Плашка дат — отдельный блок НАД KV на фоне страницы (как .af-hero__date
     на «О Форуме»), а не absolute-язычок поверх пустого угла картинки
     (правка «обрезалось и фон убежал — 768»). */
  .uch-date--days {
    order: -2;
    align-self: flex-start;
    margin: 0 24px;
    padding: 12px 14px;
  }
  .uch-date--title { order: 1; margin: 4px 24px 0; width: auto; }
  /* «Помельче название форума» (правка заказчика): подпись, а не заголовок —
     держим ниже H1 и даты. */
  .uch-date--title span { font-size: 24px; line-height: 32px; }
  .uch-hero__inner {
    position: static;
    order: 2;
    width: auto;
    max-width: none;
    margin: 0 24px;
    gap: 20px;
  }
  .uch-hero__title { font-size: 40px; line-height: 44px; }
  .uch-hero__lead { max-width: none; }

  .uch-why__row { flex-direction: column; }
  .uch-why__card { padding: 28px 32px; }

  /* Аккордеон пакетов → вертикальный: панели в столбец, корешки — горизонтальные.
     Вертикальные корешковые кадры в горизонтальной плашке дали бы мазню —
     подкладываем кадры открытых панелей (cover, центральная полоса с урной). */
  .uch-pkgs { flex-direction: column; }
  /* Позиции подобраны по полосам кадров (не середины объектов): арфа с
     веткой / валторна со скрипкой / стая птиц над листьями. */
  .uch-pkg:nth-child(1) .uch-pkg__spine::before { background-image: url(../../img/uchastie/pkg-open-uchastnik.webp); background-position: center 65%; }
  .uch-pkg:nth-child(2) .uch-pkg__spine::before { background-image: url(../../img/uchastie/pkg-open-partner.webp); background-position: center 40%; }
  .uch-pkg:nth-child(3) .uch-pkg__spine::before { background-image: url(../../img/uchastie/pkg-open-smi.webp); background-position: center 28%; }
  .uch-pkg { flex: none; height: auto; min-height: 0; }
  .uch-pkg:not([open]) { min-height: 88px; }
  .uch-pkg__spine { padding: 28px 32px; justify-content: flex-start; }
  .uch-pkg__name { writing-mode: horizontal-tb; transform: none; font-size: 28px; line-height: 34px; }
  .uch-pkg__full { flex-direction: column; }
  .uch-pkg__left { width: auto; padding: 40px 32px; gap: 24px; }
  .uch-pkg__right { padding: 40px 32px; }

  .uch-max__grid { flex-direction: column; }
  .uch-max__card { padding: 32px; }

  .af-contacts__grid { flex-wrap: wrap; }
  .af-contact { flex: 1 1 calc(50% - 8px); min-width: 260px; padding: 40px; }
}

/* ==========================================================================
   ≤360 — узкая мобила. Табы и баннер по контейнеру (full-bleed гасим).
   ========================================================================== */
@media (max-width: 767px) {
  .uch .ptabs,
  .uch .uch-hero { margin-inline: 0; }

  /* Мобильный аккордеон табов: в закрытом состоянии flow-подложки нет
     (page-tabs.css @767 гасит pb/mb) — герою возвращаем свой отступ;
     в открытом панель наезжает, как .arr-hero на партнерских страницах. */
  .uch .ptabs--flow + .uch-hero { margin-top: 28px; }
  .uch .ptabs--flow.is-open + .uch-hero { margin-top: 0; }

  /* Мобила: схема «по образцу О Форуме» уже включена со ступени ≤1023 —
     тут только поля и кегли. */
  .uch-hero { padding: 0 0 24px; gap: 16px; }
  .uch-date--days { margin: 0 16px; padding: 10px 12px; }
  .uch-date__d { font-size: 24px; line-height: 32px; }
  .uch-date__dash { width: 55px; }
  .uch-date__place { font-size: 10px; line-height: 14px; }
  .uch-date--title { margin: 0 16px; }
  /* «Помельче название форума»: 22px — мельче даты (24) и H1 (32); при таком
     кегле «САНКТ-ПЕТЕРБУРГСКИЙ» влезает без клампов, wrap — страховка. */
  .uch-date--title span {
    font-size: 22px;
    line-height: 1.3;
    overflow-wrap: break-word;
  }
  .uch-hero__inner { margin: 0 16px; gap: 16px; }
  .uch-hero__title { font-size: 32px; line-height: 36px; }
  .uch-hero__lead { font-size: 14px; }

  .uch-h2, .uch-news h2 { font-size: 28px; line-height: 34px; }

  .uch-why { margin-top: 40px; }
  .uch-why__grid { margin-top: 24px; gap: 12px; }
  .uch-why__row { gap: 12px; }
  .uch-why__card { padding: 20px; gap: 16px; }
  .uch-why__num { width: 48px; font-size: 52px; line-height: 60px; }
  .uch-why__card p { font-size: 14px; line-height: 20px; }

  .uch-variants { margin-top: 40px; }
  .uch-pkgs { margin-top: 24px; }
  .uch-pkg__spine { padding: 22px 20px; }
  .uch-pkg__name { font-size: 24px; line-height: 30px; }
  .uch-pkg__left, .uch-pkg__right { padding: 28px 20px; }
  .uch-pkg__lname, .uch-pkg__rtitle { font-size: 28px; line-height: 34px; }
  .uch-pkg__rtitle--sm { font-size: 24px; line-height: 30px; }
  .uch-pkg__list li { font-size: 16px; }

  .uch-max { margin-top: 40px; }
  .uch-max__grid { margin-top: 24px; }
  .uch-max__card { padding: 24px 20px; }
  .uch-max__card h3 { font-size: 24px; line-height: 30px; }

  .uch-news { margin-top: 40px; }
  .af-contact { flex: 1 1 100%; padding: 24px 20px; }
  .af-contact__cta { width: 100%; align-self: stretch; }
  .af-contact__btns { flex-wrap: nowrap; }
  .af-contact__btns .btn { flex: 1; min-width: 0; padding-inline: 8px; }

  .uch { padding-bottom: 72px; }
}