/* ==========================================================================
   main.css — СГЕНЕРИРОВАННЫЙ бандл стилей ФОК. Руками не править.
   Правки вносятся в пофайловые исходники (assets/fonts/fonts.css,
   assets/css/*.css, assets/css/sections/*.css), затем:
       python _build/build_bundle.py
   Порядок склейки и правила сборки — в _build/build_bundle.py (CSS_ORDER).
   Пути url() пересчитаны относительно assets/css/.
   ========================================================================== */

/* === ../fonts/fonts.css === */
/* ==========================================================================
   @font-face — локальные woff2, без CDN/Google Fonts
   --font-display: 'Cochin LT [Rus by me]' — ТОЛЬКО он, без фоллбеков
   --font-text:    'Inter Tight'
   ========================================================================== */

/* ---------- Cochin LT [Rus by me] — ЕДИНСТВЕННЫЙ display-шрифт, БЕЗ фоллбеков.
   Файл cochin-lt-*.woff2 = конвертированный [Rus by me] кат (содержит кириллицу,
   проверено). font-display:block — во время загрузки текст невидим (мгновение для
   локального woff2), затем Cochin; фоллбек-шрифт НЕ мелькает. ---------- */
@font-face {
  font-family: 'Cochin LT [Rus by me]';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/cochin-lt-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Cochin LT [Rus by me]';
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/cochin-lt-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cochin LT [Rus by me]';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('../fonts/cochin-lt-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Cochin LT [Rus by me]';
  font-style: italic;
  font-weight: 700;
  font-display: block;
  src: url('../fonts/cochin-lt-bolditalic.woff2') format('woff2');
}

/* ---------- Inter Tight (текст) ---------- */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-tight-cyrillic-d796a5.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-tight-cyrillic-ext-7ee957.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-tight-latin-1bf6b3.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-tight-latin-ext-37513b.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* === base.css === */
/* ==========================================================================
   base.css — токены, reset, типографика, общие классы (по контракту проекта)
   ========================================================================== */

/* ---------- Токены ---------- */
:root {
  /* Палитра */
  --c-dark: #091e25;
  --c-dark-soft: #2a3b45;
  --c-text: #011f27;
  --c-bg: #f0dcc5;
  --c-line: #bfb099;
  --c-accent: #c43a1e;
  --c-secondary: #1c3d52;
  --c-btn-gray: #415358;
  --c-photo-stub: #d9d9d9;

  /* Бордеры */
  --border-on-dark: rgba(255, 255, 255, 0.2);
  --border-on-light: rgba(9, 30, 37, 0.3);

  /* Прозрачности */
  --o-label: 0.7;
  --o-inactive: 0.5;
  --o-disabled: 0.4;
  --o-readmore: 0.6;

  /* Шрифты */
  --font-display: 'Cochin LT [Rus by me]';   /* ТОЛЬКО Cochin LT [Rus by me], без фоллбеков */
  --font-text: 'Inter Tight', Arial, sans-serif;

  /* Радиусы */
  --r-4: 4px;
  --r-8: 8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-24: 24px;

  /* Сетка */
  --container: 1920px;
  --gutter: 40px;

  /* Базовый gap карточек */
  --gap: 16px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
  margin: 0;
}

/* Типографика: без висячих слов (orphans) — глобально по сайту.
   Прогрессивное улучшение: старые браузеры игнорируют. */
p, li, blockquote, figcaption, dd, dt {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
}

/* ---------- Базовая типографика ---------- */
body {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 24px;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}

/* ---------- Сетка ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   Общие классы
   ========================================================================== */

/* ---------- Иконка (инлайн svg) ---------- */
.icon {
  display: inline-block;
  fill: currentColor;
  stroke: currentColor;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ---------- Кнопка ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 56px;
  padding: 8px 24px;
  border-radius: var(--r-8);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.btn .icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

.btn--primary {
  background-color: var(--c-accent);
}
.btn--primary:hover {
  opacity: 0.92;
}

.btn--dark {
  background-color: var(--c-dark);
}
.btn--dark:hover {
  opacity: 0.92;
}

.btn--light {
  background-color: rgba(255, 255, 255, 0.4);
  border: 1px solid #fff;
  color: var(--c-text);
  opacity: 0.8;
}
.btn--light:hover {
  background-color: rgba(255, 255, 255, 0.55);
}

/* Вторичная на тёмном (rgba .2 + белый бордер + белый текст, как «Подробнее») */
.btn--ghost {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid #fff;
  color: #fff;
}
.btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Малые кнопки (h40, текст 14/20, padding 8/16) — «Все партнеры», «Все новости» */
.btn--sm {
  height: 40px;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 20px;
}

.btn--gray {
  background-color: var(--c-btn-gray);
}
.btn--gray:hover {
  opacity: 0.92;
}

/* ---------- Лейбл секции «—◆— Текст» ----------
   Тире-ромб — accent (#c43a1e); текст — c-secondary, opacity .7.
   На тёмном фоне (--light) текст белый, тире остаётся accent. */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.section-label__dash {
  width: 68px;
  height: 12px;
  color: var(--c-accent);
  fill: currentColor;
  flex-shrink: 0;
}

.section-label__text {
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 28px;
  color: var(--c-secondary);
  opacity: var(--o-label);
}

.section-label--light .section-label__text {
  color: #fff;
}

/* ---------- Стрелки слайдера ---------- */
.slider-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.slider-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #fff;
  border-radius: var(--r-4);
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.slider-nav__btn:not([disabled]):hover {
  background: rgba(255, 255, 255, 0.55);
}

.slider-nav__btn .icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  transition: transform 0.2s ease;
}

.slider-nav__btn:not([disabled]):hover .icon {
  transform: translateX(2px);
}

.slider-nav__btn--prev .icon {
  transform: scaleX(-1);
}

.slider-nav__btn--prev:not([disabled]):hover .icon {
  transform: scaleX(-1) translateX(2px);
}

.slider-nav__btn[disabled] {
  opacity: var(--o-disabled);
  cursor: default;
}

/* Малые стрелки */
.slider-nav--sm .slider-nav__btn {
  width: 24px;
  height: 24px;
}
.slider-nav--sm .slider-nav__btn .icon {
  width: 14px;
  height: 14px;
}

/* Белые стрелки на тёмном */
.slider-nav--light .slider-nav__btn {
  border-color: var(--border-on-dark);
  color: #fff;
}

/* ---------- Cookie-плашка (вешается main.js → initCookie) ---------- */
.s-cookie {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 24px;
  width: calc(100% - 2 * var(--gutter));
  max-width: 1200px;
  padding: 18px 28px;
  border-radius: var(--r-12);
  background: var(--c-dark);
  color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 12px 40px rgba(9, 30, 37, 0.35);
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.s-cookie.is-shown {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.s-cookie.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  pointer-events: none;
}
.s-cookie__text {
  margin: 0;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 20px;
}
.s-cookie__link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.s-cookie__link:hover {
  text-decoration: none;
}
.s-cookie__btn {
  flex: none;
}

/* ==========================================================================
   Адаптив общих классов (дискретные ступени 1440 / 768 / 360)
   ========================================================================== */

/* ---- ≤1440: лейбл секции мельче (16/24) ---- */
@media (max-width: 1919px) {
  .section-label__text {
    font-size: 16px;
    line-height: 24px;
  }
}

/* ---- ≤360: узкая мобила ---- */
@media (max-width: 767px) {
  /* Боковой отступ страницы на мобилке — 16 (Figma 375: контент x=16, w=343).
     Токен нужен тем, кто верстает отступ через var(--gutter) (.ppage,
     news-detail): раньше он оставался 40 и контент был уже, чем должен. */
  :root { --gutter: 16px; }

  .container {
    padding-inline: 16px;
  }

  /* Кнопки сжимаются: h40, текст 14/20, иконка 16 */
  .btn {
    height: 40px;
    /* Figma 360: все контентные кнопки px-[24px] (было 16) */
    padding: 8px 24px;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
  }
  .btn .icon {
    width: 16px;
    height: 16px;
  }

  .section-label {
    gap: 16px;
  }
  .section-label__dash {
    width: 46px;
    height: 8px;
  }
  .section-label__text {
    font-size: 14px;
    line-height: 20px;
  }
  /* Часть секций на 360 имеет сабтайтл мельче — 12/16 (Figma: about/events/news/photobank — нода h16; greetings/participate/partnership/partners — h20, остаются 14/20). */
  .s-about .section-label__text,
  .s-events .section-label__text,
  .s-news .section-label__text,
  .s-photobank .section-label__text {
    font-size: 12px;
    line-height: 16px;
  }

  /* Cookie-плашка: в столбик, кнопка на всю ширину. Боковой отступ 16px. */
  .s-cookie {
    bottom: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
    width: calc(100% - 32px);
  }
  .s-cookie__btn {
    width: 100%;
  }
}

/* ==========================================================================
   Компактная кнопка с иконкой (.btn + .btn--sm-icon): контакты «О Форуме» и
   «Стать участником». Раньше правило дублировалось в about-page.css и
   uchastie.css; при развязке под общий бандл дубли схлопнуты сюда.
   Стоит ПОСЛЕ @media (max-width: 767px) намеренно: мобильный .btn там
   переопределяет gap, а у компактной кнопки он свой (6px) на всех ширинах —
   ровно как было, когда правило лежало в подключаемом позже файле страницы.
   ========================================================================== */
.btn--sm-icon {
  gap: 6px;
  padding: 8px 24px;
}
.btn--sm-icon .icon {
  fill: currentColor;
  stroke: none;
}

/* === layout.css === */
/* ==========================================================================
   layout.css — общий каркас: .page, хром на всю ширину
   Межсекционная вертикаль НЕ хардкодится тут — каждая секция задаёт свой
   padding из своей геометрии Figma.
   ========================================================================== */

/* Страховка от горизонтального скролла на всех брейкпоинтах */
html, body {
  overflow-x: clip;
}

/* Обёртка контента сайта (секции hero..photobank) */
.page {
  /* Дизайн рассчитан на 1920: на экранах шире — контент по центру, не тянется */
  position: relative;
  max-width: 1920px;
  margin-inline: auto;
  background: var(--c-bg);
  overflow-x: clip;
}

/* Шапка и подвал — на всю ширину, вне .page */
.header {
  width: 100%;
}

.footer {
  width: 100%;
}

/* === animations.css === */
/* ==========================================================================
   animations.css — reveal по скроллу, плавность слайдера/табов (мягко 4/10)
   ========================================================================== */

/* ---------- Reveal появление секций по скроллу ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* После завершения reveal снимаем will-change: оставленный will-change:transform
   держит элемент containing block'ом для fixed-потомков (и ест память GPU). */
[data-reveal].is-revealed { will-change: auto; }

/* Шапка: reveal ТОЛЬКО через opacity, без transform/will-change:transform.
   Внутри шапки живёт fixed-оверлей мега-меню (мобилка/планшет): transform или
   will-change:transform на предке делают шапку containing block для fixed —
   панель считает top/bottom от шапки и схлопывается в высоту 0. */
.header[data-reveal] {
  transform: none;
  will-change: opacity;
}

/* ---------- Стаггер карточных сеток ----------
   Родитель сетки объявляет шаг --stagger, карточки-потомки разбирают его по
   порядковому номеру. Влияет ТОЛЬКО на transition-delay: на лейаут, размеры и
   цвета — ноль. Глубина ограничена шестью карточками: низ длинных списков
   (новости, спикеры) не должен ждать полсекунды. */
.s-participate__list,
.arr-stats,
.contact-grid,
.visa-cases,
.mnt-cases,
.acc-cols,
.mobapp-adv__grid,
.uch-why__row,
.uch-max__grid,
.af-contacts__grid,
.pnr-benefits__row,
.pnr-status,
.dprog__list,
.mpr-speakers,
.smi-cards,
.news-list,
.related__grid {
  --stagger: 0.06s;
}

[data-reveal]:nth-child(2) { transition-delay: calc(var(--stagger, 0s) * 1); }
[data-reveal]:nth-child(3) { transition-delay: calc(var(--stagger, 0s) * 2); }
[data-reveal]:nth-child(4) { transition-delay: calc(var(--stagger, 0s) * 3); }
[data-reveal]:nth-child(5) { transition-delay: calc(var(--stagger, 0s) * 4); }
[data-reveal]:nth-child(6) { transition-delay: calc(var(--stagger, 0s) * 5); }

/* ---------- Слайдер: плавность трека ---------- */
[data-slider-track] {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.1, 1);
}

[data-slider-track].is-dragging {
  transition: none;
}

/* ---------- Табы: мягкое появление панели ---------- */
[data-tab-panel] {
  transition: opacity 0.3s ease;
}

[data-tab-panel][hidden] {
  display: none;
}

/* ==========================================================================
   Мягкие ховеры — централизованный слой.
   Список собран скриптом _build/hover_audit.py: интерактивные элементы, на
   которые не попадает ни одно :hover-правило проекта. Элементы со своим
   ховером (.btn, .slider-nav__btn, .arr-visa__card, .ncard, .feature, .rcard,
   .mpr-speaker, ссылки подвала и шапки…) здесь НЕ переопределяются.
   Разрешены только transform/opacity — ни размеров, ни отступов, ни цветов.
   ========================================================================== */

/* Ссылки без своего ховера — лёгкое затухание */
.af-contact__mail,
.af-contact__phone,
.af-contact__social-link,
.af-take__body a,
.smi-card__phone,
.detail__source a,
.mobapp-adv__badges > a {
  transition: opacity 0.25s ease;
}

.af-take__body a:hover,
.af-contact__mail:hover,
.af-contact__phone:hover,
.af-contact__social-link:hover,
.smi-card__phone:hover,
.detail__source a:hover,
.mobapp-adv__badges > a:hover {
  opacity: 0.72;
}

/* Служебные кнопки, тоггл-контролы и спина пакета — то же затухание, мягче */
.ptabs__toggle,
.mmenu__burger,
.dprog__select,
.dprog__clear,
.dprog__panel-reset,
.dprog__reset,
.uch-pkg__spine {
  transition: opacity 0.25s ease;
}

.ptabs__toggle:hover,
.mmenu__burger:hover,
.dprog__select:hover,
.dprog__clear:hover,
.dprog__panel-reset:hover,
.dprog__reset:hover,
.uch-pkg__spine:hover {
  opacity: 0.85;
}

/* Заголовок аккордеона Архитектуры программы (на FAQ свой ховер уже есть) */
.prog .pac__title {
  transition: opacity 0.25s ease;
}

.prog .pac__sum:hover .pac__title {
  opacity: 0.75;
}

/* Карточки-ссылки без ховера — подъём на 3px */
.s-events__item,
.prt .prt-logo__link,
.prt .prt-card__logo-link {
  transition: transform 0.25s ease;
}

.s-events__item:hover,
.prt .prt-logo__link:hover,
.prt .prt-card__logo-link:hover {
  transform: translateY(-3px);
}

/* Плитка партнёров — якорные ссылки на карточки ниже. Прокрутку смягчаем на
   уровне документа (scroll-behavior работает только на скролл-контейнере),
   поэтому цепляемся к странице через :has — на остальных страницах правило
   не срабатывает. Под reduce — обычный мгновенный переход. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.prt .prt-logo__link) {
    scroll-behavior: smooth;
  }
}

/* ==========================================================================
   prefers-reduced-motion — отключить трансформации, показать финал
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }

  [data-slider-track] {
    transition: none;
  }

  [data-tab-panel] {
    transition: none;
  }

  .slider-nav__btn .icon,
  .btn,
  .slider-nav__btn {
    transition: none;
  }

  /* Слой мягких ховеров: гасим переходы и подъём карточки */
  .af-contact__mail,
  .af-contact__phone,
  .af-contact__social-link,
  .smi-card__phone,
  .detail__source a,
  .mobapp-adv__badges > a,
  .ptabs__toggle,
  .mmenu__burger,
  .dprog__select,
  .dprog__clear,
  .dprog__panel-reset,
  .dprog__reset,
  .uch-pkg__spine,
  .prog .pac__title,
  .s-events__item,
  .prt .prt-logo__link,
  .prt .prt-card__logo-link {
    transition: none;
  }

  .s-events__item:hover,
  .prt .prt-logo__link:hover,
  .prt .prt-card__logo-link:hover {
    transform: none;
  }
}

/* === sections/header.css === */
/* ==========================================================================
   header.css — шапка сайта. БАЗА 1920 (десктоп), без @media.
   Источник значений: Figma node 63:4291 (Header / Platform=Wide Desktop, 1920×108).
   ========================================================================== */

.header {
  /* Фиксация шапки при скролле: прилипает к верху вьюпорта.
     overflow-x:clip на html/body не создаёт scroll-контейнер, поэтому sticky работает. */
  position: sticky;
  top: 0;
  z-index: 50; /* чтобы поповер «Личный кабинет» лёг поверх контента ниже */
  background-color: var(--c-dark-soft);
  color: #fff;
}

/* Внутренняя обёртка: контент 1872 при гуттерах 24 (логотипы x=24, правый край x=1896) */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1920px;
  margin-inline: auto;
  min-height: 108px;
  padding-inline: 24px;
}

/* --------------------------------------------------------------------------
   Левая зона: логотипы (63:4292)
   -------------------------------------------------------------------------- */
.header__logos {
  display: flex;
  align-items: center;
  align-self: stretch;
  /* FIT: не ужимать зону логотипов, когда бар (flex:1) забирает место — иначе
     на ~1024–1150 гербы переполняют свой бокс и 3-й герб наезжает на разделитель.
     Бар сам ужимается (min-width:0) и переносит нав. */
  flex-shrink: 0;
}

.header__logo {
  position: relative;
  display: block;
  width: 176px;
  height: 66px;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}
.header__logo:hover {
  opacity: 0.85;
}

/* Лого «Форум объединённых культур / Росконгресс» (85:2466, 176×66):
   слева цветной символ, справа словесный знак + подпись «Росконгресс».
   Доли в % от 176×66 — логотип масштабируется при смене размера контейнера. */
.header__logo img {
  position: absolute;
  display: block;
}
.header__logo-symbol { left: 0; top: 0; width: 22.75%; height: 60.65%; }
.header__logo-word { left: 27.53%; top: 0; width: 72.44%; height: 60.49%; }
.header__logo-sub { left: 27.30%; top: 72.77%; width: 51.97%; height: 27.22%; }

/* Вертикальный разделитель (63:4360 / 63:4528): 1px, во всю высоту, rgba(255,255,255,.2) */
.header__divider {
  width: 1px;
  align-self: stretch;
  background-color: var(--border-on-dark);
  margin-inline: 24px;
}

/* Гербы организаторов (63:4361, h=56) — заглушки */
.header__emblems {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 56px;
}

/* Гербы организаторов (85:2541): Правительство 63×56, МинКультуры 68×56, Спб 52×56.
   SVG/PNG экспортированы с preserveAspectRatio=none — задаём точные размеры по макету. */
.header__emblem {
  display: block;
  width: 63px;
  height: 56px;
}
.header__emblem--minkult {
  width: 68px;
}
.header__emblem--spb {
  width: 52px;
  object-fit: contain;
}
/* Временная заглушка для недоступного растрового герба СПб */
.header__emblem--stub {
  border-radius: var(--r-8);
  background-color: var(--c-photo-stub);
  opacity: 0.18;
}

/* EN-версия (сайт s2): единое начертание logo-mfok-en.svg вместо 3-частного локапа
   + англоязычные гербы. У EN-ассетов свои пропорции — масштабируем по высоте бокса,
   ширина авто, object-fit:contain (не растягиваем, как RU preserveAspectRatio=none). */
.header__logo--single img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.header__emblems--en .header__emblem {
  width: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Правая зона: две строки — кнопки и навигация (63:4529, 887×76, y=16)
   -------------------------------------------------------------------------- */
.header__bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

/* Верхний ряд утилитарных кнопок (63:4530, h=40).
   Растягивается на ширину ряда навигации; группы разведены по краям. */
.header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.header__actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   Кнопки шапки (h=40, r=8, текст Inter Tight Medium 14/20 белый)
   -------------------------------------------------------------------------- */
.header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 8px 14px;
  border-radius: var(--r-8);
  color: #fff;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.header__btn-text {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  white-space: nowrap;
}

.header__btn-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  flex-shrink: 0;
}

/* Серые кнопки (Скачать буклет, язык, Меню) — 63:4532 / 63:4535 / 63:4540 */
.header__btn--gray {
  background-color: var(--c-btn-gray);
}
.header__btn--gray:hover {
  opacity: 0.85;
}

/* Иконочная квадратная кнопка (язык, 63:4535, 40×40) */
.header__btn--icon {
  width: 40px;
  padding: 10px;
}

/* Акцентная кнопка «Войти в ЕЛК» (63:4538): bg #c43a1e, padding 8/20 */
.header__btn--accent {
  background-color: var(--c-accent);
  padding: 8px 20px;
}
.header__btn--accent:hover {
  opacity: 0.92;
}

/* --------------------------------------------------------------------------
   Подсказка о ЕЛК — всплывает при наведении на «Личный кабинет»
   (тёмная шапка → белая карточка-поповер, ссылки акцентным цветом)
   -------------------------------------------------------------------------- */
.header__account {
  position: relative;
  display: inline-block;
}
/* Иконка (i) внутри красной кнопки (справа от текста) — триггер подсказки.
   Расстояние от текста задаёт gap самой кнопки (.header__btn gap:8px). */
.header__account-info {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s ease;
}
.header__account-info:hover {
  color: #fff;
}
.header__account-info-icon {
  display: block;
  width: 18px;
  height: 18px;
}
.header__account-popover {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 60;
  /* прозрачный «мост» сверху — наведение не теряется в зазоре кнопка↔карточка.
     Контейнер (вместе с «мостом» и хит-зоной) НЕ анимируется и НЕ сдвигается:
     он на месте с момента :hover и сразу ловит курсор в коридоре между кнопкой
     и карточкой, поверх полосы мега-меню .mmenu__nav. Въезд — только у карточки. */
  padding-top: 12px;
  width: 360px;
  max-width: calc(100vw - 32px);
  opacity: 0;
  visibility: hidden;
  /* Скрытие с задержкой: короткий «проскок» курсора над .mmenu__nav не сбрасывает
     подсказку (visibility гаснет после того, как отработает opacity). */
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.header__account:hover .header__account-popover,
.header__account:has(:focus-visible) .header__account-popover,
.header__account-popover:hover {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s;
}
.header__account-card {
  padding: 24px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(9, 30, 37, 0.18);
  /* Въезд анимируем на самой карточке, а не на контейнере поповера */
  transform: translateY(-4px);
  transition: transform 0.2s ease;
}
.header__account:hover .header__account-card,
.header__account:has(:focus-visible) .header__account-card,
.header__account-popover:hover .header__account-card {
  transform: translateY(0);
}
.header__account-card p {
  margin: 0 0 16px;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 22px;
  color: var(--c-dark);
}
.header__account-link {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s ease;
}
.header__account-link:hover {
  opacity: 0.8;
}
.header__account-more {
  display: inline-block;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-accent);
  transition: opacity 0.2s ease;
}
.header__account-more:hover {
  opacity: 0.8;
}


/* --------------------------------------------------------------------------
   Переключатель языка Ru/En (тёмный пилюль, как в архиве / на проде)
   -------------------------------------------------------------------------- */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  padding: 4px;
  border-radius: var(--r-8);
  background: var(--c-btn-gray);
  flex: none;
}
.lang-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  background: transparent;
  font: 500 14px/20px var(--font-text);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lang-toggle__btn:hover {
  color: rgba(255, 255, 255, 0.85);
}
.lang-toggle__btn--active,
.lang-toggle__btn--active:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}


/* ==========================================================================
   Адаптив шапки
   ========================================================================== */

/* ---- ≤1440: уплотняем навигацию ---- */
@media (max-width: 1919px) {
  /* Бар тянется во всю ширину (flex:1) для корректного переноса нав на 2-ю строку,
     но сами пункты меню прижаты ВПРАВО (как в fok2), а не размазаны по ширине —
     иначе при динамическом Битрикс-меню из 2–3 пунктов они разъезжаются по краям. */
  .header__bar {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
}

/* FIT: нижняя часть десктоп-тира (1024–1279) — поджимаем зазор навигации,
   чтобы 6 пунктов с большей вероятностью держались в одну строку до переноса.
   Граница 1279 < дизайн-1440, поэтому на 1440/1920 ничего не меняется. */

/* ---- ≤768: двухрядная шапка (логотипы+кнопки на ряду 1 / навигация на всю
   ширину рядом 2). Цель: header ≈161 (ряд1 ≈108, ряд2 nav ≈52). ---- */
@media (max-width: 1023px) {
  .header__bar {
    display: contents;
  }
  .header__inner {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 12px;
    padding-block: 16px;
  }
  /* Логотипы и кнопки делят первый ряд: логотипы слева, кнопки прижаты вправо.
     Чуть поджимаем разделители, чтобы блок логотипов (505) + узкий стек кнопок
     (~224) уместились в контентную ширину 720 без горизонтального скролла. */
  .header__logos {
    order: 0;
  }
  .header__divider {
    margin-inline: 16px;
  }
  /* Кнопки — узкий 2-строчный стек, прижатый вправо рядом с логотипами:
     ряд1 = [Скачать буклет, язык], ряд2 = [Войти в ЕЛК, Меню]. ~224w / ~88h. */
  .header__actions {
    order: 0;
    margin-left: auto;
    width: auto;
    flex: 0 0 auto;
    /* На планшете кнопки [язык, Личный кабинет] идут в один ряд справа
       (как на проде), а не вертикальным стеком — иначе шапка «плывёт». */
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }
  .header__actions-group {
    flex: 0 0 auto;
    justify-content: flex-end;
  }
}


/* ---- ≤360: бургер; инлайн-навигация скрыта. Два ряда: лого+гербы (h40) /
   кнопки (h32). Цель: header ≈105–110. ---- */
@media (max-width: 767px) {
  /* FIX4: режем вертикальные паддинги — два ряда (логотипы h40 + кнопки h32)
     должны давать высоту шапки ≈105 вместо 128.67. */
  .header__inner {
    padding-inline: 16px;
    padding-block: 8px;
    row-gap: 8px;
    /* сброс десктопного min-height:108 — иначе align-content:stretch при wrap
       растягивает ряд логотипов с 40 до 41.5 и шапка 108 вместо Figma 105. */
    min-height: 0;
  }
  .header__logo {
    width: 106.67px;
    height: 40px;
  }
  /* Гербы показываем (Figma 360: лого + 3 герба, блок 165w), уменьшаем до h40.
     gap=17.14 (=24×0.714, как 1920-герб масштабирован в 360). */
  .header__emblems {
    height: 40px;
    gap: 17.14px;
  }
  .header__emblem {
    width: 45px;
    height: 40px;
  }
  .header__emblem--minkult {
    width: 48.57px;
  }
  .header__emblem--spb {
    width: 37.14px;
  }
  /* Ряд логотипов — во всю ширину шапки: лого у левого края, гербы у правого,
     разделитель ровно посередине между ними. space-between делит свободное
     место на РАВНЫЕ зазоры (лого→разделитель == разделитель→гербы), а
     margin-inline:24 ниже держит минимум из макета 360 на узких экранах. */
  .header__logos {
    flex: 1 1 100%;
    min-width: 0;
    justify-content: space-between;
  }
  /* Figma 360: разделитель отбит на 24px с каждой стороны (logo→24→divider→24→гербы). */
  .header__divider {
    margin-inline: 24px;
  }
  /* В макете 360 хвостового разделителя (после гербов) нет — нав ушла во 2-й ряд. */
  .header__logos > .header__divider:last-child {
    display: none;
  }
  /* Figma 360: иконкой только «Меню» (бургер). */
  .header__btn--gray:not(.header__btn--icon) .header__btn-text {
    display: none;
  }
  /* Кнопки h32 (Figma 360: ряд кнопок 48px, кнопки 32). Иконка 16, текст 12/16. */
  .header__btn {
    height: 32px;
    padding: 6px 12px;
  }
  /* Lang-toggle сжимаем под мобильные кнопки h32 (как fok2). */
  .lang-toggle {
    height: 32px;
    padding: 3px;
  }
  .lang-toggle__btn {
    height: 26px;
    min-width: 28px;
    padding: 0 8px;
    font-size: 13px;
  }
  .header__btn-icon {
    width: 16px;
    height: 16px;
  }
  .header__btn-text {
    font-size: 12px;
    line-height: 16px;
  }
  /* Акцент «Войти в ЕЛК» на 360: паддинг 16 по горизонтали (Figma 16+текст68+16=100). */
  .header__btn--accent {
    padding: 6px 16px;
  }
  .header__btn--icon {
    width: 32px;
    padding: 8px;
  }
  /* Кнопки переносятся на второй ряд во всю ширину; разделитель сверху.
     Сбрасываем колоночный стек из @768 обратно в горизонтальный ряд кнопок. */
  .header__actions {
    flex-basis: 100%;
    width: auto;
    margin-left: 0;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-on-dark);
  }
  /* justify-content здесь НЕ задаём: ниже по файлу top-level правило
     .header__actions{justify-content:space-between} перебивает медиазапрос
     (медиа не добавляет специфичности) — раскладку ряда держит группа ниже. */
  .header__actions-group {
    gap: 8px;
  }
  /* Ряд действий занимает всю ширину шапки: язык у левого края,
     [Личный кабинет + бургер] — у правого (Figma 2143:119573, шапка 375).
     Раньше группа была flex:0 0 auto и с буклетом, скрытым на ≤1023,
     весь ряд сбивался влево — справа зияла пустота ~80px. */
  .header__actions-group--b {
    flex: 1 1 auto;
    min-width: 0;
  }
  .header__account {
    margin-left: auto;
  }
}


/* ==========================================================================
   Обновление по Figma 2089 (07.07): кнопка «Скачать буклет», ряд нав 7 пунктов
   с активной точкой, буклет в рельсе для оверлея, бокс у кнопки «назад».
   ========================================================================== */
.header__actions { justify-content: space-between; }
/* Кнопка «Скачать буклет» временно скрыта: без неё правую группу (язык/ЕЛК)
   держим справа, а не растягиваем space-between. Убрать при возврате буклета. */
.header__actions--no-buklet { justify-content: flex-end; }
.header__bar { flex: 1 1 auto; min-width: 0; }
.header__btn--buklet { flex: none; }


@media (max-width: 1023px) {
  .header__btn--buklet { display: none; }
}

/* === sections/mega-menu.css === */
/* ==========================================================================
   МЕГА-МЕНЮ — отдельный элемент, только на главной.
   Figma W5Ia6hWt76d6KgUf5g6AQ2: 2089:55759 (1920), 55423 (1440),
   55541 (768), 55640 (365 L1), 55674 (365 L2).

   Живёт ВНУТРИ sticky .header (z-50): ряд навигации и панель позиционируются
   абсолютно относительно .header. Бургер — в ряду кнопок шапки (in-flow).

   ⚠️ УРОКИ ФРИЗА (не нарушать): полноширинную панель показываем/скрываем ТОЛЬКО
   через visibility — БЕЗ opacity/transform/filter/transition (любой триггер
   compositing-слоя на панели во всю ширину вешает GPU реального Chrome на 2K/
   ultrawide). Группы — grid с явным размещением, НЕ CSS columns. Стрелки —
   фиксированного размера, не анимируем width/height.
   ========================================================================== */

.mmenu { position: static; }

/* --------------------------------------------------------------------------
   Бургер — в .header__actions-group--b (планшет/мобилка). На десктопе скрыт.
   -------------------------------------------------------------------------- */
.mmenu__burger {
  display: none;
  width: 40px;
  height: 40px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-8);
  background: var(--c-btn-gray);
  color: #fff;
  cursor: pointer;
}
.mmenu__burger-ico { display: block; }
.mmenu__burger-ico--close { display: none; }
.mmenu__burger[aria-expanded="true"] .mmenu__burger-ico--open { display: none; }
.mmenu__burger[aria-expanded="true"] .mmenu__burger-ico--close { display: block; }

/* --------------------------------------------------------------------------
   Ряд навигации (десктоп ≥1024). 2-я строка правой зоны шапки, прижат вправо.
   Позиционируется как .header__inner: центр, max 1920, гуттер 24.
   -------------------------------------------------------------------------- */
.mmenu__nav {
  position: absolute;
  /* top:56 (сразу под рядом кнопок) — ряд занимает всю нижнюю часть шапки до её
     низа (y108 = верх панели). Пункты padding-block:16 → зона наведения БЕЗ
     разрыва до панели: ведёшь мышь вниз с текста — не выходишь из зоны, меню не
     закрывается. Гуттеры уменьшены на 10 (link padding-inline 10) — текст на x529. */
  top: 56px;
  left: 0;
  right: 0;
  z-index: 3;
  max-width: 1920px;
  margin-inline: auto;
  padding: 0 14px 0 519px;
  display: flex;
  align-items: stretch;
  justify-content: flex-start; /* ряд прижат ВЛЕВО — сразу за логотипами */
  gap: 48px;
}
.mmenu__nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-4, 4px);
  padding: 16px 10px;      /* увеличенная зона клика/наведения (текст остаётся y72–92) */
  color: #fff;
  opacity: 0.7;
}
.mmenu__nav-link:hover,
.mmenu__nav-link.is-current { opacity: 1; }
/* Точка-маркер текущей страницы отключена (по требованию): текущий пункт
   выделяется только полной непрозрачностью .is-current. */
.mmenu__nav-dot { display: none; }
.mmenu__nav-text {
  font: 400 14px/20px var(--font-text);   /* Figma 2089:55449 — Inter Tight Regular 14 */
  white-space: nowrap;
}
.mmenu__nav-chev { width: 16px; height: 16px; flex: none; }

/* --------------------------------------------------------------------------
   Панель. База — десктоп-дропдаун во всю ширину под шапкой.
   -------------------------------------------------------------------------- */
.mmenu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  background: var(--c-dark);
  color: #fff;
  border-top: 1px solid #2b3a3d;
  /* Полноширинную панель — БЕЗ opacity/transform (иначе фриз GPU на 2K/ultrawide).
     Только visibility, но с ЗАДЕРЖКОЙ на закрытие, чтобы контент успел затухнуть. */
  visibility: hidden;
  transition: visibility 0s linear 0.3s;
}
.mmenu.is-open .mmenu__panel {
  visibility: visible;
  transition-delay: 0s;
}

.mmenu__wrap {
  max-width: 1920px;
  margin-inline: auto;
  padding: 50px 40px;
  display: grid;
  grid-template-columns: 418px minmax(0, 1fr) 402px;
  gap: 60px;
  align-items: start;
  /* Плавное мягкое появление/скрытие — анимируем ВНУТРЕННИЙ контейнер (≤1920,
     центрирован), а не полноширинную панель → GPU-слой ограничен, не виснет. */
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mmenu.is-open .mmenu__wrap {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .mmenu__wrap { transition: none; }
}

/* ---- Рельс разделов (десктоп) ---- */
.mmenu__rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 43px;
  border-right: 1px solid var(--border-on-dark, #ffffff33);
}
.mmenu__buklet { display: none; }   /* буклет в рельсе — только планшет/мобилка */

.mmenu__sec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 48px;
  padding: 9px 19px 9px 25px;
  border: 1px solid transparent;
  border-radius: var(--r-8);
  color: #fff;
  transition: background-color 0.18s ease;
}
.mmenu__sec-text {
  font: 400 16px/1.6 var(--font-text);
  white-space: nowrap;
}
.mmenu__sec-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--color-white-40, #ffffff66);
  /* только цвет/фон — не анимируем размеры (layout-трэшинг на ховере) */
  transition: color 0.18s ease, background-color 0.18s ease;
}
.mmenu__sec-arrow svg { width: 20px; height: 20px; }
.mmenu__sec:hover { background: rgba(255, 255, 255, 0.06); }
.mmenu__sec.is-active {
  background: #ffffff29;
  border-color: #ffffff29;
}
.mmenu__sec.is-active .mmenu__sec-arrow {
  background: #a82f16;
  color: #fff;
}

/* ---- Контент: группы подменю ---- */
.mmenu__content { min-width: 0; }
.mmenu__back { display: none; }
.mmenu__lang { display: none; }

.mmenu__groups {
  display: grid;
  /* Колонки фиксированной ширины (как в Figma ~188–200): длинные ссылки
     ПЕРЕНОСЯТСЯ внутри колонки, а не растягивают её (иначе панель требует
     ~1468px и на 1440–1467 переполняется → overflow-x:clip ломает раскладку).
     Гуттер-колонки 69/80 под неравномерный питч Figma 1920: col1→col2=269,
     col2→col3=280 → col1 x518, col2 x787, col3 x1067. */
  grid-template-columns: 200px 69px 200px 80px 200px;
  column-gap: 0;
  row-gap: 30px;
  align-items: start;
}
/* Участие + Доступ делят колонку 1 (2 строки). Полезная (col2) и Сервисы (col3) —
   каждый в своей колонке, РАСТЯНУТ на обе строки (grid-row 1/3), чтобы их высота
   (у Сервисов 9 ссылок) НЕ раздувала общий трек строки-1 и не сталкивала «Доступ»
   вниз. align-items:start держит их прижатыми к верху. */
.mmenu__group:nth-child(1) { grid-column: 1; grid-row: 1; }
.mmenu__group:nth-child(2) { grid-column: 1; grid-row: 2; }
.mmenu__group:nth-child(3) { grid-column: 3; grid-row: 1 / 3; }
.mmenu__group:nth-child(4) { grid-column: 5; grid-row: 1 / 3; }

.mmenu__label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.mmenu__dash {
  display: inline-flex;
  flex: none;
  width: 60px;
  color: var(--c-accent);
}
.mmenu__dash svg { width: 60px; height: 12px; display: block; }
.mmenu__label-text {
  /* Заголовки групп меню — display-шрифт Cochin LT [Rus by me] (по просьбе; в
     Figma тут Inter Tight, но заголовки ведём единым display-шрифтом). */
  font: 400 12px/20px var(--font-text);
  color: #abaea7;
  /* Короткие подписи — в одну строку, как раньше (ширина = max-content); длинные
     («Резюме председателя XII …») переносятся, а не уезжают под промо-карточку. */
  flex: none;
  width: max-content;
  max-width: min(400px, calc(100vw - 140px));
}
/* Заголовок группы-ссылка (когда у раздела заполнено поле URL). */
a.mmenu__label-link { text-decoration: none; transition: color .15s; }
a.mmenu__label-link:hover { color: var(--c-accent); }
/* Группа «ссылки в строку» (флаг UF_MMENU_INLINE у раздела меню): короткие пункты —
   языковые версии и т.п. — идут рядом с переносом, а не столбиком по строке на пункт. */
.mmenu__group--inline .mmenu__links {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 0;          /* между пунктами хватает их собственного паддинга 8+8 */
  width: max-content;  /* колонка сетки 200px — строка выходит за неё, как и подпись */
  max-width: min(400px, calc(100vw - 140px));
}
.mmenu__links {
  display: flex;
  flex-direction: column;
  gap: 4px;                /* было 14; паддинг ссылок добирает шаг до прежнего */
  margin-left: -8px;       /* компенсируем горизонтальный паддинг — текст на месте */
}
.mmenu__links a {
  display: block;          /* кликабельна вся строка-«кнопка», не только текст */
  padding: 5px 8px;
  border-radius: 6px;
  font: 400 12px/20px var(--font-text);
  color: #fff;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.mmenu__links a:hover {
  color: rgba(255, 255, 255, 0.6);          /* приглушённый белый 60% */
  background: rgba(255, 255, 255, 0.05);    /* подсветка площади кнопки */
}

/* --------------------------------------------------------------------------
   .is-soon — раздел/страница ещё не готовы (нет реальной страницы): серым и
   некликабельно (pointer-events:none снимает и ховер, и клик, и drill/навигацию).
   Активными/белыми остаются только пункты с готовой страницей. Превью-состояние
   для fok-layout; в Bitrix у Афифе видимость/ссылки идут из инфоблока.
   -------------------------------------------------------------------------- */
.mmenu__nav-link.is-soon,
.mmenu__sec.is-soon,
.mmenu__links a.is-soon {
  pointer-events: none;
  cursor: default;
}
.mmenu__nav-link.is-soon { opacity: 0.3; }
.mmenu__sec.is-soon { color: rgba(255, 255, 255, 0.32); }
.mmenu__sec.is-soon:hover { background: transparent; }
.mmenu__sec.is-soon .mmenu__sec-arrow { color: rgba(255, 255, 255, 0.16); }
.mmenu__links a.is-soon,
.mmenu__links a.is-soon:hover { color: rgba(255, 255, 255, 0.3); background: transparent; }

/* ---- Промо «Нужна помощь?» (десктоп) ---- */
.mmenu__promo { min-width: 0; }
.mmenu__promo-media {
  aspect-ratio: 402 / 220;
  border-radius: var(--r-16);
  overflow: hidden;
  margin-bottom: 24px;
}
.mmenu__promo-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mmenu__promo-title {
  margin: 0 0 8px;
  /* ЕДИНСТВЕННЫЙ Cochin в меню — промо-заголовок (Figma 2089:55462, H Font). */
  font: 500 24px/32px var(--font-display);
  text-transform: uppercase;
  color: #fff;
}
.mmenu__promo-text {
  margin: 0 0 24px;
  /* Figma 2089:55463 — Inter Tight Medium 14/20, цвет #bfb099 (Malta) */
  font: 500 14px/20px var(--font-text);
  color: #bfb099;
}
.mmenu__promo-btns { display: flex; gap: 8px; }
.mmenu__pbtn {
  position: relative;
  /* Ширина = как при 4 кнопках в ряд (3 гэпа по 8px), не тянемся: при <4 иконках
     кнопки сохраняют тот же размер и прижаты влево, а не расплываются на всю ширину. */
  flex: 0 0 calc((100% - 24px) / 4);
  display: grid;
  place-items: center;
  height: 56px;
  /* Figma 2089:55768: фон white/20%, бордер 1px белый, radius 8 */
  border: 1px solid var(--color-white-solid, #fff);
  border-radius: var(--r-8);
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.mmenu__pbtn:hover { background: var(--c-accent); border-color: var(--c-accent); }
/* Плашка-тултип с контактом (телефон/почта), выезжает под кнопкой на 8px
   (Figma 2080:29534): белая, radius 8, padding 10, текст 14/20 тёмный.
   Маленький элемент — opacity/visibility безопасны (не полноширинная панель). */
.mmenu__pbtn-tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 4;
  padding: 10px;
  border-radius: var(--r-8);
  background: #fff;
  color: var(--c-btn-gray);   /* #415358 — текст плашки (Figma 2080:29535) */
  font: 400 14px/20px var(--font-text);
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(9, 30, 37, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.mmenu__pbtn:hover .mmenu__pbtn-tip { opacity: 1; visibility: visible; }

/* ==========================================================================
   Десктоп ≥1024 — раскладка шапки под мега-меню
   ========================================================================== */
@media (min-width: 1440px) {
  /* верхний ряд кнопок прижат к верху шапки, освобождая 2-ю строку для навигации */
  .has-mega .header__bar {
    align-self: flex-start;
    margin-top: 16px;
  }
}

/* ==========================================================================
   ≤1919 — десктоп 1440: группы 2×2, промо уже
   ========================================================================== */
@media (max-width: 1919px) {
  /* Явные гуттер-колонки 60/39 (Figma 1440): рельс 418 | 60 | контент (зона 468
     на 1440) | 39 | промо 375. Контент с x518, промо с x1025 — по макету, без
     переполнения (сумма ровно 1440 при vw=1440). */
  .mmenu__wrap {
    grid-template-columns: 418px 60px minmax(0, 1fr) 39px 375px;
    gap: 0;
  }
  .mmenu__rail { grid-column: 1; }
  .mmenu__content { grid-column: 3; }
  .mmenu__promo { grid-column: 5; }
  /* 1440: ряд навигации распределён по всей правой зоне [x529..правый край] —
     первый пункт прижат к x529 (как в Figma), не заходит под логотипы. */
  .mmenu__nav { justify-content: space-between; }
  /* 2 колонки: col1=[Участие,Доступ], col2=[Полезная,Сервисы]. Питч 268 ≈ Figma 269. */
  .mmenu__groups { grid-template-columns: repeat(2, 200px); column-gap: 68px; }
  .mmenu__group:nth-child(3) { grid-column: 2; grid-row: 1; }
  .mmenu__group:nth-child(4) { grid-column: 2; grid-row: 2; }
}

/* ==========================================================================
   ≤1023 — планшет: бургер-оверлей, 2 колонки [рельс | группы], без промо.
   ========================================================================== */
@media (max-width: 1439.98px) {
  .mmenu__nav { display: none; }
  .mmenu__burger { display: inline-flex; }

  .mmenu__panel {
    /* Мобилка/планшет: скрываем панель через display:none (а НЕ visibility).
       На реальных iOS/Android fixed-оверлей, спрятанный через visibility внутри
       sticky-шапки со скролл-локом, может остаться «в DOM, но не отрисован» —
       браузер реагирует на клик, но пользователь меню не видит. display:none/block
       железно: закрыто = элемента нет, открыто = полноценный reflow. */
    display: none;
    position: fixed;
    top: var(--mmt, 96px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 0;
    /* без анимации opacity/transform — она ломает рендер fixed-оверлея на мобильных */
    transition: none;
  }
  .mmenu.is-open .mmenu__panel { display: block; }

  .mmenu__wrap {
    max-width: none;
    grid-template-columns: minmax(300px, 331px) minmax(0, 1fr);
    gap: 60px;
    padding: 50px 40px;
    align-items: start;
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* сброс десктопных гуттер-колонок: контент — во 2-ю колонку планшетной сетки */
  .mmenu__content { grid-column: 2; }

  .mmenu__promo { display: none; }

  /* Рельс: буклет + разделы. Вертикальный разделитель справа (Figma 2089:55635,
     x≈370) + padding-right 31 → ширина айтемов 300 (Figma 2089:55625/55627). */
  .mmenu__rail {
    padding-right: 31px;
    border-right: 1px solid var(--border-on-dark, #ffffff33);
    gap: 4px;
  }
  .mmenu__buklet {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    margin-bottom: 10px;
    border-radius: var(--r-8);
    background: var(--c-accent);
    color: #fff;
    font: 500 16px/1 var(--font-text);
  }
  .mmenu__buklet svg { flex: none; }

  /* Группы в одну колонку, порядок по DOM (Участие → Доступ → Полезная → Сервисы) */
  .mmenu__groups {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .mmenu__group:nth-child(1), .mmenu__group:nth-child(2),
  .mmenu__group:nth-child(3), .mmenu__group:nth-child(4) {
    grid-column: 1;
    grid-row: auto;
  }

  /* Ru/En внизу рельса (Figma 2089:55637). На планшете Figma убирает язык из
     шапки и показывает его в панели — прячем дублирующий переключатель шапки. */
  .has-mega .lang-toggle { display: none; }
  .mmenu__lang {
    display: inline-flex;
    align-self: flex-start;   /* не растягиваться на всю ширину рельса — хаг 86px (Figma) */
    margin-top: 40px;
    margin-left: 25px;        /* под текст разделов (Figma 2089:55637 x65 = рельс 40 + 25) */
    padding: 4px;
    gap: 2px;
    border-radius: var(--r-8);
    background: rgba(255, 255, 255, 0.06);
  }
  .mmenu__lang-btn {
    min-width: 38px;
    height: 32px;
    padding: 0 10px;
    border-radius: var(--r-4);
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font: 500 14px/1 var(--font-text);
    cursor: pointer;
  }
  .mmenu__lang-btn.is-active { background: #ffffff29; color: #fff; }

  html.is-menu-open, body.is-menu-open { overflow: hidden; }
  /* Скролл-лок ломает sticky: overflow:hidden делает body scroll-контейнером,
     и шапка «прилипает» к верху ДОКУМЕНТА — при открытии меню со скролла она
     улетает на -scrollY вместе с крестиком, панель закрыть нечем (баг Татьяны
     с прода, 11.08). На время открытого меню шапка фиксируется к вьюпорту:
     в момент открытия sticky и так держит её на top:0 — прыжка нет. */
  html.is-menu-open .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
}

/* ==========================================================================
   1024–1439 — планшет-ландшафт / малый ноутбук: в правом блоке места хватает
   на 2 колонки, поэтому возвращаем раскладку 2×2 (как на десктопе ≤1919):
   col1 = [Участие, Полезная], col2 = [Доступ, Сервисы]. Ниже 1024 — 1 колонка.
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .mmenu__groups {
    grid-template-columns: repeat(2, minmax(0, 200px));
    column-gap: 68px;
    row-gap: 30px;
  }
  .mmenu__group:nth-child(1) { grid-column: 1; grid-row: 1; }
  .mmenu__group:nth-child(2) { grid-column: 1; grid-row: 2; }
  .mmenu__group:nth-child(3) { grid-column: 2; grid-row: 1; }
  .mmenu__group:nth-child(4) { grid-column: 2; grid-row: 2; }
}

/* ==========================================================================
   ≤767 — мобилка: drill-down. L1 = рельс (разделы), L2 = группы + «назад».
   ========================================================================== */
@media (max-width: 767px) {
  .mmenu__wrap {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 24px 16px 40px;
  }
  /* Мобилка: рельс — плоский список во всю ширину, БЕЗ планшетного разделителя/инсета. */
  .mmenu__rail { gap: 4px; border-right: 0; padding-right: 0; }
  .mmenu__buklet { margin-bottom: 12px; }

  /* На мобилке язык — в шапке (Figma 2089:55655): возвращаем шапочный
     переключатель и прячем панельный (в отличие от планшета). */
  .has-mega .lang-toggle { display: inline-flex; }
  .mmenu__lang { display: none; }

  /* Разделы — плоские строки (без капсулы), стрелка вправо. Высота 48 (Figma 2089:55666). */
  .mmenu__sec {
    height: 48px;
    padding: 8px 4px;
    border: 0;
    border-radius: 0;
  }
  .mmenu__sec.is-active { background: transparent; }
  .mmenu__sec.is-active .mmenu__sec-arrow { background: transparent; color: var(--color-white-40, #ffffff66); }
  .mmenu__sec:hover { background: transparent; }

  /* По умолчанию — уровень 1 (рельс). Контент скрыт до drill-in.
     grid-column:1 — сброс планшетной 2-й колонки в одноколоночной мобильной сетке. */
  .mmenu__content { display: none; grid-column: 1; }
  .mmenu.is-drill .mmenu__rail { display: none; }
  .mmenu.is-drill .mmenu__content { display: block; }

  /* «Назад» — верхняя строка-капсула уровня 2 */
  .mmenu__back {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    margin-bottom: 24px;
    /* Figma 2089:55698 — иконка отбита на 29px от левого края капсулы */
    padding: 0 16px 0 29px;
    border-radius: var(--r-8);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
  }
  .mmenu__back svg { flex: none; }
  /* Figma 2089:55700 — Inter Tight Medium 14/20 */
  .mmenu__back-text { font: 500 14px/20px var(--font-text); }

  /* Группы уровня 2 отбиты на 25px (Figma 2089:55701 x41 vs капсула x16) */
  .mmenu__groups { row-gap: 32px; padding-left: 25px; }
}

/* «О Форуме»: вторая группа («Резюме председателя») — во второй колонке рядом
   с «О Форуме», а не под ней. Только раздел about; ≤1023 — общая одна колонка.
   1440–1599: справа промо-карточка, колонке остаётся ~200px и длинная подпись
   рассыпается на 7 строк — там группа остаётся под «О Форуме». */
@media (min-width: 1024px) and (max-width: 1439.98px), (min-width: 1600px) {
  .mmenu__groups[data-mmenu-content="about"] .mmenu__group:nth-child(2) { grid-column: 2; grid-row: 1; }
}
@media (min-width: 1920px) {
  .mmenu__groups[data-mmenu-content="about"] .mmenu__group:nth-child(2) { grid-column: 3; }
}
/* Подпись группы шириной max-content (до 400px) уезжала под промо (1600–1919) и за
   край экрана (≤1439): вторая колонка забирает остаток ширины, подпись переносится
   внутри группы. На ≥1920 и 1440–1599 места хватает — там общее правило. */
@media (min-width: 1024px) and (max-width: 1439.98px), (min-width: 1600px) and (max-width: 1919px) {
  .mmenu__groups[data-mmenu-content="about"] { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 1439.98px), (min-width: 1600px) and (max-width: 1919px) {
  .mmenu__groups[data-mmenu-content="about"] .mmenu__group:nth-child(2) .mmenu__label-text {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }
}

/* === sections/hero.css === */
/* ==========================================================================
   hero.css — секция «hero» (десктоп 1920, БЕЗ @media).
   Figma: Section 1 / 79:2023. Снято с get_design_context 79:2026 + 79:2063.
   Левая колонка 1077 (padding 40, gap 96): дата-бокс + заголовок/кнопки + новости.
   H1 — Cochin 56/64; подзаголовок Inter Tight 18/28 (без opacity);
   дата-числа Cochin 56/56 в бордерном боксе 92px; карточка новости — #2a3b45,
   текст Inter Tight Medium; коллаж 826×800 с alpha-маской, прижат к правому краю.
   ========================================================================== */

.s-hero {
  background: var(--c-bg);
  color: var(--c-text);
  overflow: hidden; /* коллаж кадрируется фреймом, без гориз. скролла */
  /* Figma Section 1 (105:1919) = 940: хедер 108 + контент до 908 + 32 снизу.
     Без этого секция «О форуме» поднималась на 32px выше макета. */
  padding-bottom: 32px;
}

/* Флекс: гибкая левая колонка + фиксированный коллаж 826, прижатый вправо.
   На 1920: main = 1920 − 826 − 17 = 1077 (точно по макету). */
.s-hero__inner {
  display: flex;
  align-items: flex-start;
  gap: 17px;
  max-width: 1920px;
  margin-inline: auto;
}

/* ---------- Левая колонка (79:2026): padding 40, gap 96 ---------- */
.s-hero__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 96px;
  padding: 40px;
}

/* ---------- Текст: дата + заголовок (79:2027): row, gap 32 ---------- */
.s-hero__text {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
}

/* ---------- Дата — бордерный бокс, вертикальный стек (79:2028) ---------- */
.s-hero__date {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 92px;
  padding: 16px 8px 12px;
  border: 1px solid rgba(1, 31, 39, 0.2);
  border-radius: var(--r-8);
}

.s-hero__date time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.s-hero__date-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 56px;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-text);
}

.s-hero__date-dash {
  width: 67px;
  height: 12px;
  color: var(--c-text);
  opacity: 0.2;
}

.s-hero__date-when {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s-hero__date-month,
.s-hero__date-year {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: var(--c-text);
}

/* ---------- Заголовок + подзаголовок + кнопки (79:2035): col, gap 32 ---------- */
.s-hero__text-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.s-hero__title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.s-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  /* Текучий кегль (fok2-приём): 20px@360 → 40px@1440 → 56px@1920. Заменяет
     дискретные @media-кегли в десктоп-диапазоне, чтобы не «жидло» на 1600–1919. */
  font-size: clamp(20px, 3.333vw - 8px, 56px);
  line-height: clamp(28px, 3.333vw, 64px);
  text-transform: uppercase;
  color: var(--c-text);
  max-width: 873px;
}

.s-hero__subtitle {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--c-text);
  max-width: 421px;
}

/* ---------- Кнопки (79:2039): row, gap 8 ---------- */
.s-hero__buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.s-hero__buttons .btn .icon {
  transition: transform 0.2s ease;
}
.s-hero__buttons .btn:hover .icon {
  transform: translateX(2px);
}

/* ---------- Последние новости (79:2046): width 546, col gap 8 ---------- */
.s-hero__news {
  width: 546px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s-hero__news-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.s-hero__news-label {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-dark-soft);
  opacity: var(--o-label);
}

/* Стрелки навигации новостей — светлые 24×24 на светлом фоне (79:2049) */
.s-hero__news-nav {
  gap: 4px;
}
.s-hero__news-nav .slider-nav__btn {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid #fff;
  border-radius: var(--r-4);
  color: var(--c-text);
}
.s-hero__news-nav .slider-nav__btn .icon {
  width: 12px;
  height: 12px;
}

/* Окно слайдера новостей: показывает одну карточку 546 */
.s-hero__news-viewport {
  width: 546px;
  max-width: 100%;
  overflow: hidden;
}

.s-hero__news-track {
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-hero__news-slide {
  flex: 0 0 546px;
  max-width: 546px;
}

/* ---------- Карточка новости (79:2054): #2a3b45, padding 12, r12 ---------- */
.s-hero__news-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border-radius: var(--r-12);
  background: var(--c-dark-soft);
  transition: opacity 0.2s ease;
}
.s-hero__news-card:hover {
  opacity: 0.92;
}

.s-hero__news-image {
  flex: 0 0 auto;
  width: 240px;
  height: 160px;
  border-radius: var(--r-8);
  object-fit: cover;
}

.s-hero__news-body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  height: 160px;
  padding-block: 8px;
}

.s-hero__news-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  color: #fff;
}

.s-hero__news-date {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #fff;
  opacity: var(--o-readmore);
}

.s-hero__news-title {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-transform: none;
  color: #fff;
}

.s-hero__news-link {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  width: 100%;
  color: #fff;
  opacity: var(--o-readmore);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  transition: opacity 0.2s ease;
}
.s-hero__news-link:hover {
  opacity: 1;
}
.s-hero__news-link .icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

/* ---------- Правый коллаж 826×800 с alpha-маской (79:2063) ---------- */
.s-hero__media {
  flex: 0 0 826px;
  width: 826px;
  height: 800px;
  position: relative;
  overflow: hidden;
}

.s-hero__collage {
  position: absolute;
  left: -1.98px;
  top: -99px;
  width: 887px;
  height: 887px;
  max-width: none;
  object-fit: cover;
  -webkit-mask: url(../img/hero/collage-mask.svg) 4.152px 30.037px / 918.157px 842.276px no-repeat;
          mask: url(../img/hero/collage-mask.svg) 4.152px 30.037px / 918.157px 842.276px no-repeat;
}

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

/* ---- ≤1440: H1 40/48, подзаголовок 16/24, коллаж 762×738 (responsive-режим) ---- */
@media (max-width: 1919px) {
  /* padding-bottom:32px нужен ТОЛЬКО на 1920 (Section1=940). На 1440/768/360
     Section1 другой высоты (880/965/1114) и задаётся min-height — сбрасываем добавку,
     иначе всё ниже hero съезжает на 32px. */
  .s-hero {
    padding-bottom: 0;
  }

  /* Коллаж — оверлей справа, чтобы текстовая колонка была шире (Figma 1440:
     H1 ~724px / 3 строки, нарочно заходит под правый коллаж 762×738). */
  .s-hero__inner {
    display: block;
    position: relative;
    /* Figma Section1 1440 = 880 высотой (header 108 + 772): резервируем место под
       абсолютный коллаж 738, иначе он клипается overflow:hidden и about наезжает. */
    min-height: 772px;
  }
  .s-hero__main {
    width: 100%;
  }
  .s-hero__media {
    flex: 0 0 auto;
    /* На 1440 коллаж = 762 (дизайн). Ниже ~1380 сжимается, чтобы не наезжать
       на карточку новостей (она прижата влево, правый край ~586). fok2-приём:
       фикс-окно кэпится вьюпорт-относительной величиной. */
    width: min(762px, calc(100vw - 620px));
    height: 738px;
    position: absolute;
    /* .s-hero__inner уже идёт сразу под шапкой → top:0 (а не 108) */
    top: 0;
    right: 0;
  }
  /* H1 может дотягиваться до ~724px (новости 546 левее коллажа, без наезда) */
  .s-hero__text-col {
    max-width: 724px;
  }
  .s-hero__title {
    max-width: 724px;
  }
  .s-hero__collage {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    height: 100%;
    -webkit-mask: url(../img/hero/collage-mask.svg) center / 100% 100% no-repeat;
            mask: url(../img/hero/collage-mask.svg) center / 100% 100% no-repeat;
  }
  /* кегль заголовка — текучий clamp из base (= 40px на 1440), не дискретный */
  .s-hero__subtitle {
    font-size: 16px;
    line-height: 24px;
    /* Figma 1440 (105:716): ширина абзаца 372 → «развития» переносится на 3-ю строку */
    max-width: 372px;
  }
}

/* ---- ≤768: стек колонкой (коллаж сверху), карточка новости вертикальная ---- */
@media (max-width: 1023px) {
  .s-hero__inner {
    /* сброс оверлей-режима из @1440 (display:block / min-height / абсолютный коллаж
       протекают сюда, т.к. 768 < 1440) — возвращаем нормальный flex-стек колонкой */
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 40px;
    padding-inline: 40px;
  }
  /* коллаж — full-width стек сверху (упрощение). Figma 768 = 462×448 оверлей справа-
     сверху рядом с новостями 264 слева — точная раскладка требует отдельного прохода
     (узкие новости 264 + коллаж 462 справа + заголовок ниже), см. отчёт сверки. */
  .s-hero__media {
    order: 1;
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 826 / 800;
  }
  .s-hero__main {
    order: 2;
    width: 100%;
    gap: 40px;
    padding: 0;
  }
  .s-hero__title {
    font-size: 32px;
    line-height: 40px;
  }
  .s-hero__news,
  .s-hero__news-viewport {
    width: 100%;
  }
  /* Карточка новости — ПОД датой и заголовком, как на 360 и на десктопе.
     Раньше тут стоял order: -1 «выше даты+заголовка (Figma 768)»; по правке
     заказчика от 07.08.26 планшет выровнен с остальными ступенями. */
  .s-hero__news {
    order: 0;
  }
  .s-hero__news-slide {
    flex-basis: 100%;
    max-width: 100%;
  }
  /* карточка новости — вертикальная (фото сверху) */
  .s-hero__news-card {
    flex-direction: column;
  }
  .s-hero__news-image {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }
  .s-hero__news-body {
    height: auto;
    gap: 16px;
  }
}

/* ---- ≤360: дата горизонтальная, заголовок 20/28, кнопки в ряд ---- */
@media (max-width: 767px) {
  .s-hero__inner {
    padding-inline: 16px;
    /* сброс резерва под абсолютный коллаж из @768 (протекает сюда) — на 360 коллаж in-flow */
    padding-top: 0;
    /* Figma 360: низ коллажа (405) = верх даты (405) → зазор коллаж→main = 0 (не 40 из @768) */
    gap: 0;
  }
  /* Figma 360: блок текста(296)→новости зазор 40 (Text низ 701 = News верх 741). */
  .s-hero__main {
    gap: 40px;
  }
  /* Figma 360: дата(56)→заголовок зазор 16 (Date низ 56 = inner-Text верх 72). */
  .s-hero__text {
    flex-direction: column;
    gap: 16px;
  }
  /* Figma 360: заголовок-группа(160)→кнопки зазор 24 (Title низ 160 = Buttons верх 184). */
  .s-hero__text-col {
    gap: 24px;
  }
  .s-hero__date {
    width: auto;
    align-self: flex-start;
    /* Figma 105:2639: рамка-капсула (1px rgba(1,31,39,.2) + radius 8 из базы), padding 8 со всех сторон */
    padding: 8px;
  }
  /* новости — обратно ПОД заголовком (Figma 360 держит новости снизу) */
  .s-hero__news {
    order: 0;
  }
  /* коллаж 309.76, ПРАВЫЙ край вровень с краем вьюпорта x=360 (Figma 360: x=50, w=309.76,
     вылезает за правый 16px-гуттер), левый ≈50 */
  .s-hero__media {
    /* сброс абсолютного оверлея из @768 (протекает сюда, т.к. 360 < 768) — на 360 коллаж in-flow */
    position: static;
    top: auto;
    right: auto;
    width: 309.76px;
    height: auto;
    aspect-ratio: 826 / 800;
    margin-inline-start: auto;
    /* выезд за правый гуттер на 16px → правый край = край вьюпорта (Figma flush-right) */
    margin-inline-end: -16px;
  }
  .s-hero__date time {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .s-hero__date-num {
    font-size: 32px;
    line-height: 40px;
  }
  .s-hero__date-dash {
    width: 46px;
    /* Figma 105:2642: тире h8 (база — 12), на 360 ниже */
    height: 8px;
  }
  .s-hero__date-when {
    align-items: flex-start;
  }
  .s-hero__title {
    font-size: 20px;
    line-height: 28px;
  }
  /* лид 14/20 (Figma 360: 328w, 3 строки, h60) — переопределяем 16/24 из @1440 */
  .s-hero__subtitle {
    font-size: 14px;
    line-height: 20px;
  }
  .s-hero__buttons {
    width: 100%;
  }
  .s-hero__buttons .btn {
    flex: 1 1 0;
    min-width: 0;
  }
  /* Figma 105:2653/2656: текст кнопки в одну строку (на 160px иначе переносится в 2). */
  .s-hero__buttons .btn span {
    white-space: nowrap;
  }
  /* Дата: месяц/год 12/16 (Figma 105:2645/2646 h16, стопка 32 высотой). */
  .s-hero__date-month,
  .s-hero__date-year {
    font-size: 12px;
    line-height: 16px;
  }
  /* Карточка новостей компактнее (Figma 105:2666): заголовок 12/16 (2 строки h32,
     не 14/20→3 строки), ссылка «Читать далее» 12/16, стрелка 16. */
  .s-hero__news-title {
    font-size: 12px;
    line-height: 16px;
  }
  /* Figma 105:2667: фото карточки радиус 10.167 (база — 8). */
  .s-hero__news-image {
    border-radius: 10.167px;
  }
  /* Figma 105:2670: дата карточки 10/12 (на 360 мельче базовых 12/16). */
  .s-hero__news-date {
    font-size: 10px;
    line-height: 12px;
  }
  .s-hero__news-link {
    font-size: 12px;
    line-height: 16px;
  }
  .s-hero__news-link .icon {
    width: 16px;
    height: 16px;
  }
}

/* === sections/appeal.css === */
/* ==========================================================================
   appeal.css — секция «Приветствие» первого лица (главная, после hero).
   Тёмная карта c-dark r24: слева фото + имя/должность, справа — крупный
   заголовок обращения (Cochin) и кнопка «Подробнее». По клику — модалка на
   бежевом фоне с полным текстом обращения.
   Все переопределения — под скоупом .s-appeal (стили грузятся на всех
   страницах, изоляции нет).
   ========================================================================== */

.s-appeal {
  background: var(--c-bg);
  color: var(--c-text);
}

.s-appeal > .container {
  padding-block: 60px;
}

/* ---------- Тёмная карта ---------- */
.s-appeal__card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 120px;
  padding: 80px 80px;
  border-radius: var(--r-24);
  background: var(--c-dark);
  color: #fff;
}

/* ---------- Персона (левая колонка) ---------- */
.s-appeal__person {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 253px;
}

.s-appeal__photo {
  position: relative;
  width: 253px;
  height: 326px;
  border-radius: var(--r-16);
  overflow: hidden;
  background: var(--c-dark-soft);
}
.s-appeal__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: top center;
}

.s-appeal__ident {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.s-appeal__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  text-transform: uppercase;
  color: #fff;
}

.s-appeal__role {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  opacity: var(--o-inactive);
}

/* ---------- Заголовок + кнопка (правая колонка) ---------- */
.s-appeal__body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

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

/* ==========================================================================
   Модалка обращения
   ========================================================================== */
.s-appeal__modal {
  position: fixed;
  inset: 0;
  z-index: 999999500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(9, 30, 37, 0.72);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.s-appeal__modal[hidden] {
  display: none;
}

.s-appeal__dialog {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: auto;
  padding: 56px 64px;
  border-radius: var(--r-24);
  background: #f6efe1;
  color: var(--c-text);
}

.s-appeal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--c-text);
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.s-appeal__close:hover {
  opacity: 0.6;
}
.s-appeal__close .icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
}

.s-appeal__modal-head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}
.s-appeal__photo--modal {
  flex: 0 0 auto;
  width: 132px;
  height: 170px;
  border-radius: var(--r-12);
}
.s-appeal__modal-head .s-appeal__name {
  color: var(--c-text);
}
.s-appeal__modal-head .s-appeal__role {
  color: var(--c-text);
  opacity: var(--o-label);
}

.s-appeal__modal-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  text-transform: uppercase;
  color: var(--c-text);
  margin-bottom: 24px;
}

.s-appeal__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--c-text);
}
.s-appeal__sign {
  margin-top: 8px;
  font-weight: 600;
}

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

/* ---- ≤1440 ---- */
@media (max-width: 1919px) {
  .s-appeal__card {
    gap: 80px;
    padding: 64px 64px;
  }
  .s-appeal__title {
    font-size: 40px;
    line-height: 48px;
  }
}

/* ---- ≤1024: стек (персона → заголовок), кнопка ниже ---- */
@media (max-width: 1023px) {
  .s-appeal__card {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding: 48px 40px;
  }
  .s-appeal__person {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    width: 100%;
  }
  .s-appeal__photo {
    flex: 0 0 auto;
    width: 132px;
    height: 170px;
    border-radius: var(--r-12);
  }
  .s-appeal__title {
    font-size: 32px;
    line-height: 40px;
  }
  .s-appeal__dialog {
    padding: 48px 40px;
  }
}

/* ---- ≤768/≤360 ---- */
@media (max-width: 767px) {
  .s-appeal > .container {
    padding-block: 40px;
  }
  .s-appeal__card {
    padding: 32px 16px;
    gap: 32px;
  }
  .s-appeal__person {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .s-appeal__name {
    font-size: 22px;
    line-height: 28px;
  }
  .s-appeal__role {
    font-size: 14px;
    line-height: 20px;
  }
  .s-appeal__body {
    gap: 24px;
  }
  .s-appeal__title {
    font-size: 22px;
    line-height: 30px;
  }
  .s-appeal__more {
    width: 100%;
  }
  .s-appeal__modal {
    padding: 0;
  }
  .s-appeal__dialog {
    max-width: none;
    min-height: 100%;
    border-radius: 0;
    padding: 56px 16px 32px;
  }
  .s-appeal__close {
    top: 12px;
    right: 12px;
  }
  .s-appeal__modal-head {
    gap: 16px;
    margin-bottom: 24px;
  }
  .s-appeal__photo--modal {
    width: 96px;
    height: 124px;
  }
  .s-appeal__modal-title {
    font-size: 20px;
    line-height: 28px;
  }
  .s-appeal__text {
    font-size: 16px;
    line-height: 24px;
  }
}

/* === sections/about.css === */
/* ==========================================================================
   about.css — секция «О форуме» (десктоп 1920, БЕЗ @media).
   Figma: Section 2 / 79:2067. Снято с get_design_context 79:2068 + 79:2086.
   Верх: оверлап заголовка (600) и коллажа (575×596 на x490), справа текст (flex).
   H2 — Cochin 48/56; абзацы Inter Tight 18/28; статистика — число Cochin 72/80
   accent, подпись 16/24 c-secondary, дивайдеры 1px×102 c-line.
   ========================================================================== */

.s-about {
  background: var(--c-bg);
  color: var(--c-text);
}

.s-about__inner {
  padding-block: 60px;
}

/* ---------- Верх: фигура (заголовок+коллаж) + текст (79:2068), gap 24 ---------- */
.s-about__top {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

/* Оверлап-контейнер 1065×596 (79:2069) */
.s-about__figure {
  position: relative;
  flex: 0 0 1065px;
  width: 1065px;
  height: 596px;
}

/* Заголовок поверх коллажа (79:2073, w600) */
.s-about__head {
  position: relative;
  z-index: 1;
  width: 600px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.s-about__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
  text-transform: uppercase;
  color: var(--c-text);
  max-width: 600px;
}

/* Коллаж (79:2070, 575×596) — кадрируется фреймом, мягкие края маской */
.s-about__media {
  position: absolute;
  left: 490px;
  top: 0;
  z-index: 0;
  width: 575px;
  height: 596px;
  overflow: hidden;
}

.s-about__collage {
  position: absolute;
  left: -16px;
  top: 0;
  width: 588px;
  height: 588px;
  max-width: none;
  object-fit: cover;
  -webkit-mask: url(../img/about/collage-mask.svg) 14px -36px / 563px 616px no-repeat;
          mask: url(../img/about/collage-mask.svg) 14px -36px / 563px 616px no-repeat;
}

/* ---------- Текст справа (79:2078): flex 1, gap 40 ---------- */
.s-about__text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.s-about__paragraphs {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.s-about__paragraphs p {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--c-text);
}

/* ---------- Статистика (79:2086): row gap 20 ---------- */
.s-about__numbers {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin: 40px 0 0; /* блок цифр не «прилипает» к тексту выше */
}

/* Подпись-сноска под блоком статистики (период данных) */
.s-about__numbers-note {
  margin: 12px 0 0;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: right;
  opacity: 0.55;
}

.s-about__stat {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px 12px;
  border-radius: var(--r-8);
}

.s-about__stat-value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 72px;
  line-height: 80px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--c-accent);
}

.s-about__stat-label {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: var(--c-secondary);
}

.s-about__divider {
  flex: 0 0 auto;
  width: 1px;
  height: 102px;
  background: var(--c-line);
}

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

/* ---- ≤1440: фигура 785 (коллаж на x210, заголовок 390), H2 32/40 ---- */
@media (max-width: 1919px) {
  .s-about__figure {
    flex: 0 0 785px;
    width: 785px;
  }
  .s-about__head {
    width: 390px;
  }
  .s-about__media {
    left: 210px;
  }
  .s-about__collage {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-mask: url(../img/about/collage-mask.svg) center / 100% 100% no-repeat;
            mask: url(../img/about/collage-mask.svg) center / 100% 100% no-repeat;
  }
  .s-about__title {
    font-size: 32px;
    line-height: 40px;
  }
  .s-about__paragraphs p {
    font-size: 16px;
    line-height: 24px;
  }
  .s-about__stat-value {
    font-size: 56px;
    line-height: 56px;
  }
  .s-about__stat-label {
    font-size: 14px;
    line-height: 20px;
  }
}

/* ---- ≤768: фигура и текст в стек; статистика остаётся 4-колоночной ---- */
@media (max-width: 1023px) {
  .s-about__top {
    flex-direction: column;
    gap: 40px;
  }
  .s-about__figure {
    flex: 0 0 auto;
    width: 100%;
    height: 428px;
  }
  .s-about__head {
    width: 60%;
  }
  .s-about__media {
    left: auto;
    right: 0;
    width: 60%;
    height: 100%;
  }
  .s-about__text {
    width: 100%;
  }
  .s-about__stat-value {
    font-size: 48px;
    line-height: 48px;
  }
}

/* ---- ≤360: одна колонка (заголовок, коллаж, текст); статистика 2×2 ---- */
@media (max-width: 767px) {
  /* Figma 105:2675: Section py-[40px] — сверху и снизу 40 (в base было 60/60). */
  .s-about__inner {
    padding-top: 40px;
    /* Figma Section2-фрейм = 1181 (фикс. высота), контент кончается на 1161 →
       видимый нижний отступ 20 (хотя auto-layout номинал py-40). Матчим высоту фрейма. */
    padding-bottom: 20px;
  }
  /* Figma 105:2676 Text+Image — единая колонка gap 20 (Title/Image/Text) */
  .s-about__top {
    /* фигура→текст: 20px (Figma 105:2676 gap-20), не 40 из ≤768 */
    gap: 20px;
  }
  .s-about__figure {
    display: flex;
    flex-direction: column;
    /* заголовок→коллаж 20px (Figma 105:2676 gap-20), не 24 */
    gap: 20px;
    height: auto;
  }
  .s-about__head {
    position: static;
    width: 100%;
  }
  /* position: relative, а не static: коллаж внутри — absolute с width/height 100%,
     и на static-боксе он берёт за базу .s-about__figure и накрывает заголовок
     (видно после того, как reveal-анимация снимет transform с этого блока). */
  .s-about__media {
    position: relative;
    left: auto;
    top: auto;
    width: 231px;
    margin-left: auto;
    height: auto;
    aspect-ratio: 231 / 240;
  }
  .s-about__title {
    font-size: 20px;
    line-height: 28px;
  }
  /* Figma 105:2685 Text — паргарафы→кнопка 24px (не 40) */
  .s-about__text {
    gap: 24px;
  }
  /* Figma 105:2686 — абзацы 14/20, зазор 24px (переопределяем 16/24+32 из ≤1440) */
  .s-about__paragraphs {
    gap: 24px;
  }
  .s-about__paragraphs p {
    font-size: 14px;
    line-height: 20px;
  }
  /* Figma 105:2693 Numbers — сетка 2×2 с горизонт. дивайдером между рядами.
     row-gap 12: ряд1(104) →12→ линия(1) →12→ ряд2(84) = 213 (как в макете). */
  .s-about__numbers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 1px;
    margin-top: 40px;
    /* ячейки ряда тянутся до высоты трека (Figma: ряд по высшей ячейке,
       короткая top-aligned) → вертикальный hairline на всю высоту ряда. */
    align-items: stretch;
  }
  /* Вертикальный hairline — только у левых ячеек (1-я и 3-я .stat по типу). */
  .s-about__stat:nth-of-type(odd) {
    border-right: 1px solid var(--c-line);
  }
  /* Горизонтальный hairline на всю ширину — средний из трёх span-дивайдеров
     (между рядами); крайние скрыты. Figma 105:2704 (w328 h1, зазоры 12/12). */
  .s-about__divider {
    display: none;
  }
  .s-about__divider:nth-of-type(2) {
    display: block;
    grid-column: 1 / -1;
    width: auto;
    height: 1px;
    background: var(--c-line);
  }
  /* Figma 105:2695 — паддинг ячейки 12/8 (top 12, не 16) */
  .s-about__stat {
    padding: 12px 8px;
  }
  /* Figma 105:2696 — число 32/40 Cochin (не 40/40) */
  .s-about__stat-value {
    font-size: 32px;
    line-height: 40px;
  }
  /* Figma 105:2690: кнопка px-[24px] py-[8px] (глоб. @360 .btn даёт 8/16 →
     переопределяем горизонт. паддинг до 24, чтобы 1:1 с макетом). */
  .s-about__btn {
    width: 100%;
    padding: 8px 24px;
  }
}

.s-about__note {
  margin: 16px 0 0;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  text-align: right;
  color: #8c8c8c;
}

/* === sections/broadcast.css === */
/* ==========================================================================
   broadcast — «Трансляция пленарного заседания» (БАЗА 1920, БЕЗ @media).
   Figma: Section 3 / 79:2106 (контент 1440, центр). get_design_context 79:2106.
   H2 48/56 по центру; плеер c-dark 1220×686 r24; метка по центру:
   тире-ромб (белый op .2) / «Трансляция» (Inter Tight 16/24 белый op .7) / тире.
   ========================================================================== */

.s-broadcast {
  background: var(--c-bg);
  color: var(--c-text);
}

.s-broadcast__inner {
  max-width: 1440px;
  margin-inline: auto;
  padding: 60px 40px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.s-broadcast__title {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-text);
}

/* ---------- Плеер (79:2108): тёмная плашка 1220×686, r24 ---------- */
.s-broadcast__player {
  width: 1220px;
  max-width: 100%;
  height: 686px;
  border-radius: var(--r-24);
  background: var(--c-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-broadcast__player-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.s-broadcast__dash {
  width: 71px;
  height: 12px;
  color: #fff;
  opacity: 0.2;
}

.s-broadcast__player-text {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  opacity: var(--o-label);
}

/* ==========================================================================
   Адаптив broadcast
   ========================================================================== */
@media (max-width: 1919px) {
  .s-broadcast__title {
    font-size: 32px;
    line-height: 40px;
  }
  /* плеер становится резиновым по пропорции 1220:686 */
  .s-broadcast__player {
    width: 100%;
    max-width: 1132px;
    height: auto;
    aspect-ratio: 1220 / 686;
  }
}

@media (max-width: 1023px) {
  .s-broadcast__inner {
    padding: 40px 40px 60px;
  }
}

@media (max-width: 767px) {
  .s-broadcast__inner {
    padding: 40px 16px;
    /* Figma 105:2717: плеер на y128 → между title(низ 96) и плеером зазор 32 */
    gap: 32px;
  }
  .s-broadcast__title {
    font-size: 20px;
    line-height: 28px;
  }
  /* Figma 105:2717: плеер h184 фикс, r16 (НЕ r24 базы и НЕ aspect-ratio из @1440) */
  .s-broadcast__player {
    height: 184px;
    aspect-ratio: auto;
    border-radius: var(--r-16, 16px);
  }
  .s-broadcast__dash {
    width: 46px;
    height: 8px;
  }
  /* Лейбл «Трансляция» 12/16 (Figma 105:2720 w65 h16; группа лейбла h64, не 72). */
  .s-broadcast__player-text {
    font-size: 12px;
    line-height: 16px;
  }
}

/* === sections/greetings.css === */
/* ==========================================================================
   greetings.css — секция «Приветствия» (десктоп 1920, БЕЗ @media).
   Figma: Section 4 / 79:2113. get_design_context 79:2113.
   Полноширинная тёмная карта c-dark r24: слева заголовок (Cochin 48/56 white)
   + табы персон (Cochin 24/32, активный accent-underline + точка), справа —
   фото 163×210 r12 + имя 32/40 + должность 16/24 + цитата 18/28.
   ========================================================================== */

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

/* Карта во всю ширину (79:2113): bg dark, r24, padding 120/40, gap 323 */
.s-greetings__card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 323px;
  padding: 120px 40px;
  border-radius: var(--r-24);
  background: var(--c-dark);
  color: #fff;
}

/* Декоративная текстура слева (79:2114): окно 795×1015, картинка op .3 */
.s-greetings__texture {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 795px;
  height: 1015px;
  overflow: hidden;
}
.s-greetings__texture img {
  position: absolute;
  left: -1488px;
  top: -371px;
  width: 2467px;
  height: 1645px;
  max-width: none;
  opacity: 0.3;
  object-fit: cover;
}

/* ---------- Заголовок + навигация (79:2116): 607, gap 152 ---------- */
.s-greetings__main {
  position: relative;
  z-index: 1;
  flex: 0 0 607px;
  width: 607px;
  display: flex;
  flex-direction: column;
  gap: 152px;
}

.s-greetings__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

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

/* Навигация-табы (79:2122): col gap 24 */
.s-greetings__nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.s-greetings__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 0 8px 16px;
  border: 0;
  border-bottom: 1px solid var(--border-on-dark);
  background: none;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.s-greetings__tab-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  text-transform: uppercase;
  color: #fff;
  opacity: var(--o-inactive);
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.s-greetings__tab-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  opacity: 0;
}

.s-greetings__tab:hover .s-greetings__tab-name {
  opacity: 1;
}

.s-greetings__tab.is-active {
  border-bottom-color: var(--c-accent);
}
.s-greetings__tab.is-active .s-greetings__tab-name {
  opacity: 1;
}
.s-greetings__tab.is-active .s-greetings__tab-dot {
  opacity: 1;
}

/* ---------- Карточка персоны (79:2132): 752 ---------- */
.s-greetings__person {
  position: relative;
  z-index: 1;
  flex: 0 0 752px;
  width: 752px;
}

.s-greetings__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.s-greetings__panel[hidden] {
  display: none;
}

/* Фото персоны (79:2133): 163×210 r12, слои поверх #d9d9d9 */
.s-greetings__photo {
  position: relative;
  flex-shrink: 0;
  width: 163px;
  height: 210px;
  border-radius: var(--r-12);
  overflow: hidden;
  background: var(--c-photo-stub);
}
.s-greetings__photo-bg {
  position: absolute;
  left: -325px;
  top: -102px;
  width: 640px;
  height: 640px;
  max-width: none;
  object-fit: cover;
}
.s-greetings__photo-front {
  position: absolute;
  left: -58px;
  top: 11px;
  width: 253px;
  height: 258px;
  max-width: none;
  object-fit: cover;
  object-position: bottom;
}

/* Текст персоны (79:2137): col gap 24 */
.s-greetings__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  color: #fff;
}

.s-greetings__person-title {
  display: flex;
  flex-direction: column;
  width: 410px;
  max-width: 100%;
}

.s-greetings__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  text-transform: uppercase;
  color: #fff;
}

.s-greetings__role {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  opacity: var(--o-inactive);
}

.s-greetings__quote {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #fff;
  opacity: var(--o-label);
}

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

/* ---- ≤1440: уже gap, H2 32/40, табы 18/28, имя 24/32 ---- */
@media (max-width: 1919px) {
  .s-greetings__card {
    /* fit: на 1440 gap = 250 (как в Figma), ниже 1440 коллапсирует, чтобы
       main(440)+person(555) не вылезли за иннер карточки и не клипались. */
    gap: clamp(40px, calc(250px - (1440px - 100vw)), 250px);
  }
  .s-greetings__texture {
    width: 595px;
    height: 760px;
  }
  /* масштаб картинки пересчитан под суженное окно (эталон unitedcultures) —
     иначе текстура остаётся в размере 1920 и выглядит слишком крупной */
  .s-greetings__texture img {
    left: -1114px;
    top: -278px;
    width: 1847px;
    height: 1231px;
  }
  .s-greetings__main {
    flex: 0 1 440px;
    width: 440px;
    /* Figma 1440 (105:795): между заголовком и навигацией 152, не 100 — иначе из-за
       align-items:center всё внутри карточки центрируется выше макета. */
    gap: 152px;
  }
  .s-greetings__person {
    flex: 0 1 555px;
    width: 555px;
  }
  .s-greetings__title {
    font-size: 32px;
    line-height: 40px;
  }
  .s-greetings__tab-name {
    font-size: 18px;
    line-height: 28px;
  }
  .s-greetings__name {
    font-size: 24px;
    line-height: 32px;
  }
  .s-greetings__role {
    font-size: 14px;
    line-height: 20px;
  }
  .s-greetings__quote {
    font-size: 16px;
    line-height: 24px;
  }
}

/* ---- ≤768: стек (заголовок → персона → табы в ряд); персона photo|text ---- */
@media (max-width: 1023px) {
  .s-greetings__card {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding: 60px 40px;
  }
  .s-greetings__main {
    display: contents;
  }
  .s-greetings__head {
    order: 1;
    width: 100%;
  }
  .s-greetings__person {
    order: 2;
    flex: 0 0 auto;
    width: 100%;
  }
  .s-greetings__nav {
    order: 3;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 24px;
  }
  .s-greetings__tab {
    flex: 1 1 0;
    min-width: 0;
  }
  .s-greetings__tab-name {
    white-space: normal;
  }
  /* панель персоны — фото слева, текст справа */
  .s-greetings__panel {
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
  }
  .s-greetings__text {
    flex: 1 1 auto;
  }
}

/* ---- ≤360: табы 2×2, фото мельче, мелкий кегль ---- */
@media (max-width: 767px) {
  /* Figma 105:2722: padding top/bottom 40, между head→person→nav шаг 40 */
  .s-greetings__card {
    padding: 40px 16px;
    gap: 40px;
  }
  .s-greetings__title {
    font-size: 20px;
    line-height: 28px;
  }
  .s-greetings__photo {
    width: 109px;
    height: 140px;
    /* Figma 105:2732: rounded-[8px] (на десктопе/токене было 12). */
    border-radius: var(--r-8);
    grid-column: 1;
    grid-row: 1;
  }
  /* На мобилке фото заполняет бокс по object-fit (изображение из ИБ может быть
     любого размера) — без фикс-офсета 253×258, рассчитанного под исходный putin.png. */
  .s-greetings__photo-front {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
  /* Figma Frame66 @360: верхний ряд [фото | имя+должность], цитата на всю
     ширину ниже. Grid на панели + display:contents на .text растворяет
     обёртку, чтобы person-title и quote стали прямыми грид-элементами.
     Ряд имени ограничен 1fr (~203px) — без гориз. скролла; цитата 328 ниже. */
  .s-greetings__panel {
    display: grid;
    grid-template-columns: 109px 1fr;
    column-gap: 16px;
    /* Figma 105:2730: фото-ряд(140)→цитата зазор 16 (quote y156), person h376. */
    row-gap: 16px;
    align-items: start;
  }
  .s-greetings__text {
    display: contents;
  }
  /* Figma 105:2736 Title: w203 — снимаем ширину 410 из ≤768, иначе 1fr
     раздувается и грид/цитата уезжают за 328 (гориз. скролл). */
  .s-greetings__person-title {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: 0;
  }
  .s-greetings__quote {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
  }
  /* Figma 105:2740 Nav: сетка 2×2, ячейка 152, col-gap 24, row-gap 16.
     Каждый таб = имя (lh16) + pb16 + border-b 1px → ряд ~33px. */
  .s-greetings__nav {
    display: grid;
    grid-template-columns: 152px 152px;
    column-gap: 24px;
    row-gap: 16px;
    grid-auto-rows: auto;
    align-items: start;
  }
  /* Figma 105:2742/2745/2748/2750: таб сохраняет border-b + pb16, без px-8.
     Активный — accent-бордер (из не-@360 .is-active), остальные — on-dark. */
  .s-greetings__tab {
    flex: none;
    width: 152px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--border-on-dark);
  }
  .s-greetings__tab-name {
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
  }
  .s-greetings__name {
    font-size: 20px;
    line-height: 28px;
    overflow-wrap: anywhere; /* длинные имена не вылезают из узкой колонки */
  }
  /* Должность 12/16 (Figma 105:2738 h16, под именем). */
  .s-greetings__role {
    font-size: 12px;
    line-height: 16px;
  }
  /* Цитата 14/20 (Figma 105:2739 h220 = 11 строк lh20; иначе 16/24 → h312 и nav уезжает вниз). */
  .s-greetings__quote {
    font-size: 14px;
    line-height: 20px;
  }
}

/* === sections/participate.css === */
/* ==========================================================================
   participate.css — «Участникам / Почему стоит принять участие?» (БАЗА 1920).
   Figma: Section 5 / 79:2142. get_design_context 79:2142.
   Слева (910): заголовок Cochin 48/56 + подзаголовок 18/28 + 2 кнопки + коллаж
   910×435 (alpha-маска). Справа (910): 5 строк — верхняя линия c-line, номер
   Cochin 24/32 accent (w32), текст Inter Tight 18/28, gap 202, py 32.
   ========================================================================== */

.s-participate {
  background: var(--c-bg);
  color: var(--c-text);
}

.s-participate__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 120px;
  padding-bottom: 60px;
}

/* ---------- Левая колонка (79:2143): 910, gap 16 ---------- */
.s-participate__left {
  flex: 0 1 910px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* Текст + кнопки (79:2144): 526, gap 40 */
.s-participate__intro {
  width: 526px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.s-participate__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.s-participate__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
  text-transform: uppercase;
  color: var(--c-text);
}

.s-participate__subtitle {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--c-text);
}

.s-participate__buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Коллаж 910×435 (79:2158) — alpha-маска */
.s-participate__media {
  position: relative;
  width: 910px;
  max-width: 100%;
  height: 434.627px;
  overflow: hidden;
}

.s-participate__collage {
  position: absolute;
  left: 28.52px;
  top: 0;
  width: 842.391px;
  height: 473.845px;
  max-width: none;
  object-fit: cover;
  -webkit-mask: url(../img/participate/collage-mask.svg) 16.298px -48.896px / 820.358px 459.075px no-repeat;
          mask: url(../img/participate/collage-mask.svg) 16.298px -48.896px / 820.358px 459.075px no-repeat;
}

/* ---------- Правая колонка: список причин (79:2161): 910 ---------- */
.s-participate__list {
  flex: 0 1 910px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-participate__item {
  display: flex;
  align-items: center;
  gap: 202px;
  padding-block: 32px;
  border-top: 1px solid var(--c-line);
}
.s-participate__item:last-child {
  border-bottom: 1px solid var(--c-line);
}

.s-participate__num {
  flex: 0 0 32px;
  width: 32px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  text-transform: uppercase;
  color: var(--c-accent);
}

.s-participate__reason {
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--c-text);
}

/* ==========================================================================
   Адаптив participate
   ========================================================================== */
@media (max-width: 1919px) {
  .s-participate__left {
    flex: 0 1 670px;
  }
  .s-participate__intro {
    width: 436px;
  }
  .s-participate__media {
    width: 670px;
    height: 320px;
  }
  .s-participate__collage {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-mask: url(../img/participate/collage-mask.svg) center / 100% 100% no-repeat;
            mask: url(../img/participate/collage-mask.svg) center / 100% 100% no-repeat;
  }
  .s-participate__list {
    flex: 0 1 670px;
  }
  .s-participate__title {
    font-size: 32px;
    line-height: 40px;
  }
  .s-participate__subtitle {
    font-size: 16px;
    line-height: 24px;
  }
  .s-participate__num {
    font-size: 18px;
    line-height: 28px;
  }
  .s-participate__reason {
    font-size: 16px;
    line-height: 24px;
  }
}

@media (max-width: 1023px) {
  .s-participate__inner {
    flex-direction: column;
    gap: 60px;
    padding-top: 80px;
  }
  .s-participate__left {
    flex: 0 0 auto;
    width: 100%;
  }
  .s-participate__intro {
    width: 100%;
    max-width: 526px;
  }
  .s-participate__media {
    width: 100%;
    height: auto;
    aspect-ratio: 910 / 435;
  }
  .s-participate__list {
    flex: 0 0 auto;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .s-participate__inner {
    padding-top: 40px;
    padding-bottom: 40px;
    /* Figma 105:2752: блок Text+Image(низ 444.66)→список(464.66) зазор 20, не 40. */
    gap: 20px;
  }
  .s-participate__title {
    font-size: 20px;
    line-height: 28px;
  }
  .s-participate__intro {
    gap: 24px;
  }
  .s-participate__item {
    gap: 24px;
    padding-block: 16px;
  }
  /* Лид: 14/20 (Figma 105:2760 h60 = 3 строки lh20; иначе тянет 16/24 из @1440 → 4 строки). */
  .s-participate__subtitle {
    font-size: 14px;
    line-height: 20px;
  }
  .s-participate__reason {
    font-size: 14px;
    line-height: 20px;
  }
  .s-participate__buttons {
    width: 100%;
  }
  /* Figma 105:2757 — тире w-[47px] h-[8px]; base .section-label__dash @360 = 46×8 → 47. */
  .s-participate .section-label__dash {
    width: 47px;
  }
  /* Figma 105:2762 — flex-[1_0_0] (растягивается), 105:2765 — shrink-0 (по контенту).
     Оба px-[24px] py-[8px]: base .btn @360 даёт 8/16 → переопределяем на 8/24. */
  .s-participate__buttons .btn {
    padding: 8px 24px;
    min-width: 0;
  }
  .s-participate__buttons .btn:first-child {
    /* Figma flex-[1_0_0]; allow shrink (1 1 0) чтобы не было +1.3px overflow от метрик шрифта */
    flex: 1 1 0;
  }
  .s-participate__buttons .btn:last-child {
    flex: 0 0 auto;
  }
}

/* === sections/partnership.css === */
/* ==========================================================================
   partnership — «Партнёрам / Преимущества партнёрства» (БАЗА 1920, БЕЗ @media).
   Figma: Section 6 / 79:2177. get_design_context 79:2177.
   Контейнерная тёмная карта c-dark r24 (1840) с фоновым коллажем-грифоном
   (alpha-маска): слева заголовок Cochin 48/56 white + 2 кнопки (gap 8, primary +
   ghost), справа абзац Inter Tight 18/28 white op .7 (751). Внутр. gap 400, p 40.
   ========================================================================== */

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

.s-partnership__card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 400px;
  padding: 40px;
  border-radius: var(--r-24);
  background: var(--c-dark);
  color: #fff;
}

/* Фоновый коллаж-грифон (79:2178): окно 1840×541, alpha-маска */
.s-partnership__media {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 1840px;
  height: 541.176px;
  overflow: hidden;
}

.s-partnership__collage {
  position: absolute;
  left: -216.47px;
  top: -508.71px;
  width: 2635.868px;
  height: 1757.245px;
  max-width: none;
  object-fit: cover;
  -webkit-mask: url(../img/partnership/collage-mask.svg) 216.471px -611.529px / 1838.402px 3062.113px no-repeat;
          mask: url(../img/partnership/collage-mask.svg) 216.471px -611.529px / 1838.402px 3062.113px no-repeat;
}

/* ---------- Заголовок + кнопки (79:2181): 490, gap 144 ---------- */
.s-partnership__text {
  position: relative;
  z-index: 1;
  flex: 0 0 490px;
  width: 490px;
  display: flex;
  flex-direction: column;
  gap: 144px;
}

.s-partnership__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

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

.s-partnership__buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* ---------- Описание (79:2194): 751 ---------- */
.s-partnership__desc {
  position: relative;
  z-index: 1;
  flex: 0 1 751px;
  width: 751px;
  min-width: 0;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #fff;
  opacity: var(--o-label);
}

/* ==========================================================================
   Адаптив partnership
   ========================================================================== */
@media (max-width: 1919px) {
  .s-partnership__card {
    gap: 278px;
  }
  .s-partnership__text {
    flex: 0 0 361px;
    width: 361px;
  }
  .s-partnership__title {
    font-size: 32px;
    line-height: 40px;
  }
  .s-partnership__desc {
    flex: 0 1 555px;
    width: 555px;
    font-size: 16px;
    line-height: 24px;
  }
  /* коллаж-грифон заполняет карту (responsive) */
  .s-partnership__media {
    width: 100%;
    height: 100%;
  }
  .s-partnership__collage {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-mask: url(../img/partnership/collage-mask.svg) center / 100% 100% no-repeat;
            mask: url(../img/partnership/collage-mask.svg) center / 100% 100% no-repeat;
  }
}

@media (max-width: 1023px) {
  .s-partnership__card {
    flex-direction: column;
    gap: 32px;
    padding: 40px;
  }
  .s-partnership__text {
    display: contents;
  }
  .s-partnership__head {
    order: 1;
    width: 100%;
  }
  .s-partnership__desc {
    order: 2;
    width: 100%;
    max-width: 555px;
    flex: 0 0 auto;
  }
  .s-partnership__buttons {
    order: 3;
    width: auto;
  }
}

@media (max-width: 767px) {
  /* После display: contents у обёртки заголовок должен оставаться над фоном. */
  .s-partnership__head {
    position: relative;
    z-index: 1;
  }
  /* full-bleed: тёмная карта до краёв экрана (Figma: card x=0 w=360) */
  .s-partnership > .container {
    padding-inline: 0;
  }
  .s-partnership__card {
    padding: 40px 16px;
    /* full-bleed на 360: тёмная карта во всю ширину без скруглений у краёв экрана */
    border-radius: 0;
  }
  .s-partnership__title {
    font-size: 20px;
    line-height: 28px;
  }
  .s-partnership__desc {
    font-size: 14px;
    line-height: 20px;
  }
  .s-partnership__buttons {
    width: 100%;
  }
  /* Figma 360: кнопки не равной ширины — «Подать заявку» 177, «Подробнее» 143 (gap 8) */
  .s-partnership__buttons .btn {
    flex: 0 0 auto;
    min-width: 0;
  }
  .s-partnership__buttons .btn--primary {
    flex-basis: 177px;
  }
  .s-partnership__buttons .btn--ghost {
    flex-basis: 143px;
    /* Figma 360 (105:2802): вся ghost-кнопка opacity 80% */
    opacity: 0.8;
  }
  /* Figma 360 (105:2804): стрелка внутри ghost — доп. opacity 80% */
  .s-partnership__buttons .btn--ghost .icon {
    opacity: 0.8;
  }
  /* Figma 360: title→desc 16, desc→buttons 40 (вместо uniform gap 32 от @768) */
  .s-partnership__card {
    gap: 0;
  }
  .s-partnership__desc {
    margin-top: 16px;
  }
  .s-partnership__buttons {
    margin-top: 40px;
  }
  /* Правка 15.09.2026: на узкой карте коллаж-грифон растягивается на всю высоту,
     и его светлая часть «затирает» верхний левый угол — метка, заголовок и первые
     строки текста перестают читаться. Приглушаем картинку и кладём поверх неё
     скрим цвета карты, плотный сверху и прозрачный к низу. */
  .s-partnership__collage {
    opacity: 0.45;
  }
  .s-partnership__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(9, 30, 37, 0.92) 0%,
        rgba(9, 30, 37, 0.72) 45%,
        rgba(9, 30, 37, 0.35) 75%,
        rgba(9, 30, 37, 0) 100%);
  }
}

/* ==========================================================================
   Воздух под тёмной плашкой. Секция «Партнёрам» вплотную упирается в тёмную
   карточку «Главное на Форуме» (у .container здесь нет вертикальных отступов),
   и два тёмных блока читаются как один. Даём тот же нижний отступ, что у
   соседней секции «Участникам»: 60px, на ≤767 — 40px.
   ========================================================================== */
.s-partnership .container {
  padding-bottom: 60px;
}

@media (max-width: 767px) {
  .s-partnership .container {
    padding-bottom: 40px;
  }
}

/* === sections/partners.css === */
/* ==========================================================================
   partners.css — секция «Партнеры форума» (БАЗА 1920, БЕЗ @media).
   Figma: Section 7 / 79:2195. get_design_context 79:2195.
   py 120, gap 32. Заголовок (390) Cochin 48/56 + nav. Карточки: 5 в ряд (gap 16),
   логотип в белом боксе h120 r24, под ним подпись Inter Tight 16/24 c-text.
   ========================================================================== */

.s-partners {
  background: var(--c-bg);
  color: var(--c-text);
}

.s-partners__inner {
  padding-block: 120px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ---------- Заголовок + навигация (79:2196): items-end, space-between ---------- */
.s-partners__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.s-partners__title {
  width: 390px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

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

.s-partners__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Полноширинная кнопка «Все партнеры» под карточками — только мобайл ≤360 */
.s-partners__all-mobile {
  display: none;
}

/* ---------- Карточки (79:2211) ---------- */
.s-partners__viewport {
  width: 100%;
  overflow: hidden;
}

.s-partners__cards {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 5 карточек в ряд: (100% − 4×16) / 5 */
.s-partners__card {
  flex: 0 0 calc((100% - 64px) / 5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.s-partners__logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 120px;
  border-radius: var(--r-24);
  background: #fff;
  overflow: hidden;
}

/* Логотипы из админки приезжают в исходном размере (640px и крупнее) и без
   width/height в теге, поэтому раньше рисовались во всю ширину и обрезались
   боксом с overflow:hidden. Ограничиваем размер: object-fit вписывает по
   аспекту. Вертикальный запас в 24px — чтобы лого не прилипало к краям бокса;
   на макетной вёрстке лого мелкие и под ограничения не попадают. */
.s-partners__logo {
  display: block;
  max-width: 100%;
  max-height: calc(100% - 24px);
  object-fit: contain;
}

.s-partners__caption {
  width: 100%;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: var(--c-text);
}

/* ==========================================================================
   Адаптив partners
   ========================================================================== */
@media (max-width: 1919px) {
  .s-partners__heading {
    font-size: 32px;
    line-height: 40px;
  }
}

/* ≤768: 3 логотипа в ряд (остальные листаются) */
@media (max-width: 1023px) {
  .s-partners__card {
    flex: 0 0 calc((100% - 32px) / 3);
  }
}

/* ≤360: 2 в ряд, бокс ниже, заголовок 260 СЛЕВА + 2 стрелки 32px СПРАВА в ряд (Figma 105:2806) */
@media (max-width: 767px) {
  /* py 40 + gap 24 между блоками (Figma: Title y40, Cards y128, Btn y264 — gap 24) */
  .s-partners__inner {
    padding-block: 40px;
    gap: 24px;
  }
  /* Заголовок и nav в РЯД: title 260 слева, nav справа (Figma — НЕ колонка) */
  .s-partners__head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .s-partners__title {
    width: 260px;
  }
  .s-partners__heading {
    font-size: 20px;
    line-height: 28px;
    white-space: normal;
  }
  /* 2 стрелки навигации: 32×32 каждая, gap 4 (Figma 105:2812) */
  .s-partners__nav {
    gap: 4px;
  }
  .s-partners__nav .slider-nav__btn {
    width: 32px;
    height: 32px;
  }
  /* Карточки: items-center (Figma 105:2817 — НЕ flex-start) */
  .s-partners__cards {
    align-items: center;
  }
  .s-partners__card {
    flex: 0 0 calc((100% - 16px) / 2);
  }
  .s-partners__logo-box {
    height: 80px;
  }
  /* Figma 105:2819/2820: лого ВПИСАНО с отступами (~126/102w, ~26-29h в боксе 156×80),
     не на всю ширину. Ограничиваем размер — центрируется flex'ом бокса. */
  .s-partners__logo {
    /* явный бокс 80%×29 + object-fit:contain (из базы) вписывает каждый лого
       по своему аспекту (леттербокс), не растягивая; SVG без intrinsic-размера. */
    width: 80%;
    height: 29px;
  }
  /* Подпись карточки: 12/16 (Figma 105:2830 — text-[12px] leading-[16px]) */
  .s-partners__caption {
    font-size: 12px;
    line-height: 16px;
  }
  /* В head оставляем только стрелки слайдера, пилюлю «Все партнеры» прячем */
  .s-partners__nav .btn--sm {
    display: none;
  }
  /* «Все партнеры» — полноширинной кнопкой под карточками.
     Figma 105:2835: gap-[16px], opacity 1 (без затемнения), иконка size-[20px].
     Переопределяем .btn @360 (gap 8, icon 16) и .btn--light (opacity .8). */
  .s-partners__all-mobile {
    display: flex;
    width: 100%;
    gap: 16px;
    opacity: 1;
  }
  .s-partners__all-mobile .icon {
    width: 20px;
    height: 20px;
  }
}

/* === sections/events.css === */
/* ==========================================================================
   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 105:2159 Section 8: итоговая высота 591 (1920). В макете карточки сидят
     в слотах 219px (визуально 300 с overflow в паддинг). У нас карточки 300px в
     потоке, поэтому вертикальный паддинг = 80 (а не 120):
     80+80 + 100(тайтл) + 32(gap) + 300(карточки) ≈ 592 ≈ 591. */
  padding: 80px 40px;
  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%;
  /* Не уже карточки: на широких экранах фиксированная ширина оставляла
     по бокам полосы без фона (правка 24.09.2026). */
  width: max(1920px, 100%);
  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;
}

/* Уникальный арт — перекрывает, центр по горизонтали, выходит за верх */
.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);
}

/* --- Категория 5: региональная (золото) --- */
/* Арт у карточки пока не загружен (ждём ассет) — правила ниже сработают, как
   только контент-менеджер положит картинку в свойство ART; без неё карточка
   выводится градиентом и подписью. Геометрия — как у деловой, без зеркала. */
.s-events__item--regional .s-events__item-art {
  width: 546.114px;
  height: 364.076px;
  top: -27.05px;
  transform: translateX(calc(-50% + 7.51px));
}
.s-events__item--regional .s-events__item-grad {
  background: linear-gradient(to bottom, rgba(9, 30, 37, 0), #b0741e);
}

/* ==========================================================================
   Адаптив 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: max(1440px, 100%);
    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));
  }
  .s-events__item--regional .s-events__item-art {
    width: 399px;
    height: 266px;
    top: -20px;
    transform: translateX(calc(-50% + 5.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;
    /* Правка 15.09.2026: системная полоса прокрутки под карточками выглядела
       инородно. Тонкая скруглённая полоса в цветах тёмной карты. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.08);
  }
  /* Место под полосу, чтобы она не налезала на карточки. Селектор с тегом —
     сброс `ul[class] { padding: 0 }` из base.css специфичнее голого класса. */
  ul.s-events__cards {
    padding-bottom: 10px;
  }
  .s-events__cards::-webkit-scrollbar {
    height: 4px;
  }
  .s-events__cards::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
  }
  .s-events__cards::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
    border-radius: 999px;
  }
  .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): правило уже есть
     в base.css (@767, общий список .s-about/.s-events/.s-news/.s-photobank),
     дубль отсюда убран при развязке под бандл. */
  /* Подпись категории 16/24, ширина ~161 → заголовок в 2 строки (Figma 105:2853) */
  .s-events__item-label {
    left: 16px;
    width: 161px;
    font-size: 16px;
    line-height: 24px;
  }
}

/* ==========================================================================
   Ряд из двух или трёх карточек. Пиксельные размеры арта из макета рассчитаны
   на карточку 448/328 (ряд из четырёх); когда активных карточек меньше, она
   становится ШИРЕ арта и по бокам вылезает фотоподложка. Переводим арт на
   проценты от карточки: пропорции макета (арт ~122%/113% ширины, вылет за
   верх) держатся при любой ширине. Селектор срабатывает, когда второй или
   третий <li> — последний; на 4 карточках и на ≤767 (фикс. 280px и скролл) —
   всё как было.
   ========================================================================== */
@media (min-width: 768px) {
  .s-events__cards:is(:has(> li:nth-child(2):last-child), :has(> li:nth-child(3):last-child)) .s-events__item-art {
    height: auto;
  }
  .s-events__cards:is(:has(> li:nth-child(2):last-child), :has(> li:nth-child(3):last-child)) .s-events__item--business .s-events__item-art {
    width: 121.9%;
    top: -9.02%;
    transform: translateX(calc(-50% + 1.68%)) scaleX(-1);
  }
  .s-events__cards:is(:has(> li:nth-child(2):last-child), :has(> li:nth-child(3):last-child)) .s-events__item--culture .s-events__item-art {
    width: 113.29%;
    top: -15.07%;
    transform: translateX(calc(-50% + 0.46%));
  }
  .s-events__cards:is(:has(> li:nth-child(2):last-child), :has(> li:nth-child(3):last-child)) .s-events__item--expo .s-events__item-art {
    width: 129.8%;
    top: -14.61%;
    transform: translateX(calc(-50% + 1.68%));
  }
  .s-events__cards:is(:has(> li:nth-child(2):last-child), :has(> li:nth-child(3):last-child)) .s-events__item--press .s-events__item-art {
    width: 129.8%;
    top: -21.46%;
    transform: translateX(calc(-50% + 7.19%));
  }
  .s-events__cards:is(:has(> li:nth-child(2):last-child), :has(> li:nth-child(3):last-child)) .s-events__item--regional .s-events__item-art {
    width: 121.9%;
    top: -9.02%;
    transform: translateX(calc(-50% + 1.68%));
  }
}

/* ---- То же на базе 1920+: там карточка держит фиксированную высоту 300px,
   и на двух карточках (ширина ~912) получается сильно вытянутый прямоугольник —
   арт лезет крупным планом, композиция рушится. Возвращаем карточке пропорцию
   макета (448:300, как на ≤1919) и сажаем градиент с подписью на низ.
   Ряд ограничен контейнером 1840, так что карточка не растёт бесконечно. ---- */
@media (min-width: 1920px) {
  .s-events__cards:is(:has(> li:nth-child(2):last-child), :has(> li:nth-child(3):last-child)) .s-events__item {
    height: auto;
    aspect-ratio: 448 / 300;
  }
  .s-events__cards:is(:has(> li:nth-child(2):last-child), :has(> li:nth-child(3):last-child)) .s-events__item-grad {
    top: auto;
    bottom: 0;
    height: 48%;
  }
  .s-events__cards:is(:has(> li:nth-child(2):last-child), :has(> li:nth-child(3):last-child)) .s-events__item-label {
    top: auto;
    bottom: 24px;
  }
}

/* === sections/news.css === */
/* ==========================================================================
   news.css — секция «Новости / Последние новости» (БАЗА 1920, БЕЗ @media).
   Figma: Section 9 / 79:2297. get_design_context 79:2297.
   py 120, gap 32. Заголовок (400) Cochin 48/56 + пилюля «Все новости». 4 карточки
   (gap 16): фото 100%×299.5 r10.96 + дата 16/24 op .6 + заголовок Inter Tight 18/28
   + «Читать далее» Inter Tight Medium 16/24 accent.
   ========================================================================== */

.s-news {
  background: var(--c-bg);
  color: var(--c-text);
}

.s-news__inner {
  padding-block: 120px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ---------- Заголовок + ссылка (79:2298) ---------- */
.s-news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.s-news__title {
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

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

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

.s-news__card {
  flex: 0 0 calc((100% - 32px) / 3);
  min-width: 0;
}

.s-news__card-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  color: inherit;
}

.s-news__image {
  width: 100%;
  height: 299.543px;
  border-radius: 10.959px;
  object-fit: cover;
}

.s-news__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.s-news__date {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-text);
  opacity: var(--o-readmore);
}

.s-news__card-title {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  text-transform: none;
  color: var(--c-text);
}

.s-news__more {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-accent);
}
.s-news__more .icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}
.s-news__card-link:hover .s-news__more {
  text-decoration: underline;
}

/* Полноширинная кнопка «Все новости» — только для ≤360 (см. @media ниже) */
.s-news__all-mobile {
  display: none;
}

/* ==========================================================================
   Адаптив news
   ========================================================================== */
@media (max-width: 1919px) {
  /* Figma 1440/768/360 (ноды 105:990/991/993): карточка мельче базовой 1920 —
     дата 14/20, заголовок 16/24, «Читать далее» 14/20. Без этого текст плыл
     (lh 24/28 вместо 20/24 → карточка 361 вместо 347, «Читать далее» уезжал на 10px). */
  .s-news__date {
    font-size: 14px;
    line-height: 20px;
  }
  .s-news__card-title {
    font-size: 16px;
    line-height: 24px;
  }
  .s-news__more {
    font-size: 14px;
    line-height: 20px;
  }
  /* Заголовок карточки в Figma на y32 от верха текст-блока: при дате h20 зазор = 12
     (база 8 верна для 1920, где дата h24). Иначе заголовок уезжал на 4px вверх. */
  .s-news__text {
    gap: 12px;
  }
  .s-news__heading {
    font-size: 32px;
    line-height: 40px;
  }
  /* фото становится резиновым по пропорции (на 1440 → 328×219) */
  .s-news__image {
    height: auto;
    aspect-ratio: 448 / 299.543;
  }
}

/* ≤768: 2 карточки в ряд (2×2) */
@media (max-width: 1023px) {
  .s-news__cards {
    flex-wrap: wrap;
  }
  .s-news__card {
    flex: 0 0 calc((100% - 16px) / 2);
  }
  /* Figma Section13 @768: только 2 карточки в один ряд */
  .s-news__card:nth-child(n + 3) {
    display: none;
  }
}

/* ≤360: горизонтальная строка-скролл, карточки 280 */
@media (max-width: 767px) {
  /* Figma Section13: вертикальные паддинги 40 (база 120 → переопределяем) */
  .s-news__inner {
    padding-block: 40px;
    /* Figma: заголовок(низ 100)→карточки(124) и карточки→кнопка зазор 24, не 32. */
    gap: 24px;
  }
  .s-news__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .s-news__title {
    width: 100%;
  }
  .s-news__heading {
    font-size: 20px;
    line-height: 28px;
    white-space: normal;
  }
  .s-news__cards {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Правка 15.09.2026: см. events.css — та же тонкая полоса прокрутки,
       но в тёмных тонах под светлый фон секции. */
    scrollbar-width: thin;
    scrollbar-color: rgba(9, 30, 37, 0.25) rgba(9, 30, 37, 0.08);
  }
  /* Место под полосу; селектор с тегом — из-за сброса ul[class] в base.css. */
  ul.s-news__cards {
    padding-bottom: 10px;
  }
  .s-news__cards::-webkit-scrollbar {
    height: 4px;
  }
  .s-news__cards::-webkit-scrollbar-track {
    background: rgba(9, 30, 37, 0.08);
    border-radius: 999px;
  }
  .s-news__cards::-webkit-scrollbar-thumb {
    background: rgba(9, 30, 37, 0.25);
    border-radius: 999px;
  }
  .s-news__card {
    flex: 0 0 280px;
    scroll-snap-align: start;
  }
  /* Figma Section13 @360: радиус фото 6.829px (база 1440 = 10.959) */
  .s-news__image {
    border-radius: 6.829px;
  }
  /* CASCADE GUARD: @360 — горизонтальный скролл, возвращаем все 4 карточки */
  .s-news__card:nth-child(n + 3) {
    display: block;
  }
  .s-news__date {
    font-size: 14px;
    line-height: 20px;
  }
  .s-news__card-title {
    font-size: 16px;
    line-height: 24px;
  }
  /* «Читать далее» в Figma lh20/fs14 (Frame 43 h20, база 16/24) */
  .s-news__more {
    font-size: 14px;
    line-height: 20px;
  }
  /* пилюля «Все новости» в шапке скрыта, кнопка переезжает вниз на всю ширину */
  .s-news__head .btn--sm {
    display: none;
  }
  .s-news__all-mobile {
    display: flex;
    width: 100%;
    /* Figma Section13 @360 (105:2902): px 24 (база .btn@360 = 16 → переопределяем) */
    padding-inline: 24px;
  }
}

/* === sections/photobank.css === */
/* ==========================================================================
   photobank — «Фотобанк / Официальный фотобанк Форума» (БАЗА 1920, БЕЗ @media).
   Figma: Section 10 / 79:2341. get_design_context 79:2341.
   Контейнерная тёмная карта c-dark r24 (1840×445): слева текст (541, абс. left40
   top40, gap 80) + кнопка primary, справа коллаж 944×445 с alpha-маской.
   ========================================================================== */

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

.s-photobank__card {
  position: relative;
  overflow: hidden;
  height: 445px;
  border-radius: var(--r-24);
  background: var(--c-dark);
  color: #fff;
}

/* Коллаж справа (79:2342): окно 944×445, alpha-маска */
.s-photobank__media {
  position: absolute;
  right: 0;
  top: 0;
  width: 944.513px;
  height: 445px;
  overflow: hidden;
}

.s-photobank__collage {
  position: absolute;
  right: 0;
  top: -54px;
  /* 2000×1324: высота 540 → в окно 445 попадает купол и фотоаппарат целиком */
  width: 816px;
  height: 540px;
  max-width: none;
  object-fit: cover;
}

/* Левый край коллажа растворяется в тёмной карте (макет): без этого слоя
   картинка обрывается жёсткой вертикальной границей. Только для раскладки
   «текст слева / коллаж справа» — в стеке (≤1023) снимается. */
.s-photobank__media::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  /* профиль снят с макета: почти линейный, 40% ширины коллажа (340 из 849) */
  width: min(380px, 40%);
  pointer-events: none;
  background: linear-gradient(90deg, var(--c-dark), rgba(9, 30, 37, 0));
}

/* Текст + кнопка (79:2345): абс., left 40, top 40.51, 748, gap 80 */
.s-photobank__text {
  position: absolute;
  left: 40px;
  top: 40.51px;
  z-index: 1;
  width: 748px;
  max-width: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
}

.s-photobank__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 541px;
  max-width: 100%;
}

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

.s-photobank__subtitle {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #fff;
  opacity: var(--o-label);
}

/* ==========================================================================
   Адаптив photobank
   ========================================================================== */
@media (max-width: 1919px) {
  .s-photobank__card {
    height: 400px;
  }
  .s-photobank__text {
    width: 437px;
  }
  .s-photobank__head {
    width: 410px;
  }
  /* 849 — по макету 1440; уже 1440 коллаж не должен заходить под колонку
     текста (40 + 437), иначе растушёвка ложится поверх абзаца */
  .s-photobank__media {
    width: min(849px, calc(100% - 477px));
    height: 100%;
  }
  .s-photobank__media::before {
    width: min(340px, 40%);
  }
  /* Геометрия 1920, ужатая под высоту карты 400 (×400/445): 734×486,
     сдвиг вверх 49. Привязка к правому краю — на узких экранах
     обрезается левый (тёмный, растушёванный) край картинки. */
  .s-photobank__collage {
    right: 0;
    top: -49px;
    width: 734px;
    height: 486px;
  }
  .s-photobank__title {
    font-size: 32px;
    line-height: 40px;
  }
  .s-photobank__subtitle {
    font-size: 16px;
    line-height: 24px;
    /* Figma 105:1030: абзац 437 (шире заголовка 410) → 2 строки, не 3.
       Лежит внутри __head (410) — задаём явную ширину, выходит в колонку 437. */
    width: 437px;
  }
}

/* ≤768: стек (текст сверху, коллаж снизу) */
@media (max-width: 1023px) {
  .s-photobank__card {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .s-photobank__text {
    position: static;
    order: 1;
    width: 100%;
    max-width: 100%;
    padding: 40px;
  }
  .s-photobank__head {
    width: 100%;
    max-width: 541px;
  }
  .s-photobank__media {
    /* relative, не static: иначе картинка растягивается на всю карту под текст */
    position: relative;
    order: 2;
    width: 100%;
    height: 400px;
  }
  .s-photobank__media::before {
    content: none;
  }
  .s-photobank__collage {
    left: 0;
    right: auto;
    top: 0;
    width: 100%;
    height: 100%;
    /* фотоаппарат — в нижней правой части картинки */
    object-position: 50% 70%;
  }
}

/* ≤360: карта во всю ширину (360), коллаж full-bleed, текст инсет 16/328 */
@media (max-width: 767px) {
  /* Карта дотягивается до краёв экрана: снимаем паддинги контейнера */
  .s-photobank > .container {
    padding-inline: 0;
  }
  /* Текст инсет 16px (заголовок x=16, w=328), коллаж остаётся full-bleed.
     Figma 105:2909: gap Text↔Button = 24 (не 40, как на 768/1440) */
  .s-photobank__text {
    padding: 40px 16px;
    gap: 24px;
  }
  .s-photobank__title {
    font-size: 20px;
    line-height: 28px;
  }
  /* Figma 105:2915: описание 14/20 (3 строки h60), не 16/24 как на 1440 */
  .s-photobank__subtitle {
    font-size: 14px;
    line-height: 20px;
  }
  .s-photobank__media {
    height: 170px;
  }
  .s-photobank__text .btn {
    width: 100%;
    /* Figma 105:2916: px-[24px] (горизонт. паддинг 24, не 16 как глоб .btn@360).
       Кнопка full-width + justify-center → визуально не сдвигает, но значение точное по макету. */
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* === sections/footer.css === */
/* ==========================================================================
   footer.css — подвал (footer). База 1920, десктоп. Без @media.
   Ноды Figma: Section 10 79:2356 / Top 79:2357 / Bottom 79:2463.
   ========================================================================== */

.footer {
  /* Зазор body(фотобанк)→подвал — Figma Frame 68: 120px на 1920 (адаптив ниже) */
  margin-top: 120px;
  /* Figma 105:2253: фон #2a3b45 (--c-dark-soft); верхние углы скруглены 24px */
  background-color: var(--c-dark-soft);
  color: #fff;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}

.footer__inner {
  padding-top: 60px;
  padding-bottom: 24px;
}

/* ---------- Top: 4 равные колонки (лого · меню · контакты · соцсети) ----------
   Приём из эталона (unitedcultures.ru): обёртки .footer__logo-links и
   .footer__contacts-social «растворяем» через display:contents, чтобы их дети
   стали ПРЯМЫМИ колонками .footer__top и ровно распределились justify-between.
   Раньше обёртки были фикс-ширины (439/638) → space-between разводил только 2
   блока, внутренние колонки слипались, на не-1920 ширинах «уплывало». */
.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

/* ---------- Лого + меню — на десктопе растворяются в 2 колонки ---------- */
.footer__logo-links {
  display: contents;
}

/* Логотип — текст/placeholder (нода Logo 176×66) */
/* Логотип «Форум объединённых культур / Росконгресс» (нода Logo 105:2256, 176×66).
   Тот же бренд-знак, что в шапке — переиспользуем те же 3 SVG с тем же
   процентным позиционированием в боксе 176×66. */
.footer__logo {
  position: relative;
  display: block;
  width: 176px;
  height: 66px;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.footer__logo:hover {
  opacity: 0.85;
}

.footer__logo img {
  position: absolute;
  display: block;
}
.footer__logo-symbol { left: 0; top: 0; width: 22.75%; height: 60.65%; }
.footer__logo-word { left: 27.53%; top: 0; width: 72.44%; height: 60.49%; }
.footer__logo-roscongress { left: 27.30%; top: 72.77%; width: 51.97%; height: 27.22%; }

/* EN (сайт s2): единое начертание logo-mfok-en.svg вместо 3-частного локапа. */
.footer__logo--single img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Меню-ссылки (95px) */
.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 95px;
}

.footer__nav-link {
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 28px;
  color: #fff;
  opacity: var(--o-label);
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.footer__nav-link:hover {
  opacity: 1;
}

/* ---------- Контакты + соцсети — на десктопе растворяются в 2 колонки ---------- */
.footer__contacts-social {
  display: contents;
}

/* ---------- Контакты (по содержимому, gap 40) ---------- */
.footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 0 1 auto; /* ширина по содержимому: email — одна строка, не схлопывается */
  min-width: 0; /* колонка может ужиматься, email подстраивается через clamp */
  font-style: normal;
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__contact-label {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 24px;
  opacity: var(--o-label);
}

.footer__contact-value {
  font-family: var(--font-display);
  /* текучий размер: 24px на ≥1500, плавно вниз до 16px на узких десктопах —
     длинный e-mail остаётся в одну строку и не наезжает на соцсети */
  font-size: clamp(16px, 1.6vw, 24px);
  line-height: 1.33;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  /* крайний случай (очень длинный email на узком вьюпорте) — перенос, а не оверфлоу */
  overflow-wrap: anywhere;
  transition: opacity 0.2s ease;
}

a.footer__contact-value:hover {
  opacity: 0.85;
}

/* ---------- Соцсети / чат-боты (210px, gap 32) ---------- */
.footer__social {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 210px;
  flex-shrink: 0; /* иконки 40×40 не сжимаем */
}

.footer__social-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__social-title {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  text-transform: none;
  color: #fff;
}

.footer__social-list {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer__social-link {
  position: relative;
  /* flex, а не inline-flex: у inline-бокса базовая линия зависит от контента,
     и глиф-иконка 20×20 (Max) садилась на другую линию, чем самодостаточные
     40×40 (Telegram/соцсети) — Max-бокс уезжал вниз на ~3px. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-8);
  overflow: hidden;
  color: #fff;
  transition: opacity 0.2s ease;
}

.footer__social-link:hover {
  opacity: 0.85;
}

/* VK / Telegram — самодостаточный 40×40 SVG (бокс #415358 уже в файле) */
.footer__social-icon {
  display: block;
  width: 40px;
  height: 40px;
}

/* Rutube (Figma 105:2347): бокс #091e25, глиф 60×60 со сдвигом (видны нижние 40×40) */
.footer__social-link--rutube {
  background-color: var(--c-dark);
}
.footer__social-icon--rutube {
  position: absolute;
  left: 0;
  top: -20px;
  width: 60px;
  height: 60px;
  max-width: none;
}

/* Max-бот (Figma 105:2360): бокс #415358, глиф 20×20 по центру */
.footer__social-link--max {
  background-color: var(--c-btn-gray);
}
.footer__social-icon--glyph {
  display: block;
  width: 20px;
  height: 20px;
}

/* ---------- Bottom: копирайт + политики ---------- */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(214, 191, 163, 0.2);
}

.footer__copyright {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  opacity: 0.8;
  white-space: nowrap;
}

.footer__policies {
  display: flex;
  align-items: center;
  gap: 40px;
}

.footer__policy-link {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  color: #fff;
  opacity: var(--o-label);
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.footer__policy-link:hover {
  opacity: 1;
}

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

/* ≤1440: контакты уже, соцсети ближе (Figma 1440: contacts 440, social 210, gap 20 → 670) ---- */
@media (max-width: 1919px) {
  .footer {
    margin-top: 60px;
  }
  .footer__contacts {
    max-width: 440px;
  }
}

/* ≤768: колонка — лого + ссылки-ряд, ниже контакты + соцсети ---- */
@media (max-width: 1023px) {
  /* Планшет: как на проде unitedcultures.ru — top gap 80, nav-ряд gap 40,
     контакты+соцсети сгруппированы слева (gap 20), а не разведены space-between. */
  .footer__top {
    flex-direction: column;
    gap: 80px;
  }
  /* ≤1023 обёртки снова становятся боксами (на десктопе — display:contents) */
  .footer__logo-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
  }
  .footer__nav-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    gap: 40px;
  }
  .footer__contacts-social {
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: 20px;
  }
  .footer__contacts {
    width: 100%;
    max-width: 511px;
    flex: 1 1 auto;
  }
  .footer__social {
    flex-shrink: 0;
  }
}

/* ≤360: всё в один столбец ---- */
@media (max-width: 767px) {
  .footer {
    margin-top: 40px;
    /* фон и скругление верхних углов — теперь в базовом правиле .footer */
  }
  .footer__inner {
    padding-top: 40px;
  }
  /* Figma Logo+Links: лого h64 → Links y88, gap 24 (не 40 из 768) */
  .footer__logo-links {
    gap: 24px;
  }
  .footer__nav-list {
    flex-direction: column;
    gap: 24px;
  }
  /* Ссылки меню 16/24 (Figma 360: каждая h24, шаг 48 — не 18/28 из базы). */
  .footer__nav-link {
    font-size: 16px;
    line-height: 24px;
  }
  /* Figma: Contacts h216 → Social y256, gap 40 (не 32) */
  .footer__contacts-social {
    flex-direction: column;
    gap: 40px;
  }
  /* Figma: контакты на всю 328, между 3 блоками gap 24 (не 40 из десктопа) */
  .footer__contacts {
    width: 100%;
    gap: 24px;
  }
  /* email/телефон/адрес: на узком экране переносить, не растягивать вьюпорт
     (длинный e-mail с white-space:nowrap давал гориз. скролл +57px) */
  .footer__contact-value {
    font-size: 16px;
    line-height: 24px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* Figma Social: 2 группы [Соцсети | Чат-боты] РЯДОМ (по 148w), gap 32, на всю 328 */
  .footer__social {
    flex-direction: row;
    width: 100%;
    gap: 32px;
  }
  .footer__social-group {
    flex: 1 1 0;
    min-width: 0;
  }
  /* Figma Bottom: политики СНАЧАЛА, копирайт ПОСЛЕ; вертикальный стек, gap 24 */
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .footer__policies {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .footer__copyright {
    order: 2;
  }
  /* Figma 360 (нода 105:3031 Bottom): ссылки-политики opacity 0.8 (не 0.7 из базы) */
  .footer__policy-link {
    opacity: 0.8;
  }
}

/* === sections/page.css === */
/* ==========================================================================
   page.css — типовые внутренние страницы (по структуре сайта).
   Использует переменные из base.css.
   ========================================================================== */

.s-page {
  padding-block: 48px 80px;
}

.s-page__inner {
  max-width: 1280px;
  margin-inline: auto;
}

.s-page__breadcrumbs {
  margin-bottom: 24px;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.4;
  color: var(--c-secondary);
}
.s-page__breadcrumbs a { color: var(--c-secondary); text-decoration: none; }
.s-page__breadcrumbs a:hover { color: var(--c-accent); }
.s-page__breadcrumbs .sep { opacity: .5; margin-inline: 8px; }

.s-page__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.s-page__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.06;
  color: var(--c-text);
  margin: 0;
}

.s-page__content {
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-text);
}
/* Якорные блоки (например #venue, #contacts на /about/) не должны уезжать
   под липкую шапку при переходе по якорю из меню. */
.s-page__content [id] { scroll-margin-top: calc(var(--mmt, 96px) + 24px); }
.s-page__content > * + * { margin-top: 20px; }
.s-page__content h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.15;
  margin-top: 40px;
}
.s-page__content h3 { font-size: 22px; margin-top: 28px; }
.s-page__content ul { padding-left: 22px; list-style: disc; }
.s-page__content li + li { margin-top: 8px; }
.s-page__content a { color: var(--c-accent); }
.s-page__lead {
  font-size: 22px;
  line-height: 1.5;
  color: var(--c-secondary);
}

/* ---------- Список новостей (страница /novosti/) ---------- */
.s-page__news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 8px;
}
.s-page__news-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.s-page__news-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-12);
}
.s-page__news-card time { color: var(--c-secondary); opacity: var(--o-readmore); font-size: 15px; }
.s-page__news-card h3 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  margin: 0;
}
.s-page__news-card:hover h3 { color: var(--c-accent); }

.s-page__news-pager { margin-top: 40px; }

/* ---------- Детальная новость ---------- */
.s-page__detail-img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--r-16);
  margin-bottom: 28px;
}
.s-page__detail-date { color: var(--c-secondary); opacity: var(--o-readmore); }

/* ---------- Заглушка «в разработке» ---------- */
.s-page__stub {
  border: 1px solid var(--c-line);
  border-radius: var(--r-16);
  padding: 40px;
  color: var(--c-secondary);
}

/* ---------- Дропдаун фильтра по году (страница новостей) ---------- */
.yeardd > summary { list-style: none; }
.yeardd > summary::-webkit-details-marker { display: none; }
.yeardd[open] > summary svg { transform: rotate(180deg); }
.yeardd__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 180px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-8);
  box-shadow: 0 10px 28px rgba(9, 30, 37, .14);
  display: flex;
  flex-direction: column;
}
.yeardd__item {
  padding: 8px 12px;
  border-radius: var(--r-4);
  font: 400 15px/20px var(--font-text);
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
}
.yeardd__item:hover { background: var(--c-bg); }
.yeardd__item.is-active { background: var(--c-dark); color: #fff; }

/* ---------- Сообщение формы подписки ---------- */
.subscribe__msg {
  margin: 0 0 14px;
  font: 500 15px/22px var(--font-text);
}
.subscribe__msg--ok { color: #8fe3b0; }
.subscribe__msg--err { color: #ffc3b6; }

@media (max-width: 900px) {
  .s-page__news-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .s-page__news-grid { grid-template-columns: 1fr; }
  .s-page { padding-block: 32px 56px; }
}

/* === sections/news-page.css === */
/* ============================================================
   sections/news-page.css — страница «Новости форума» (листинг).
   Контент самодостаточный: не завязан на .page, переживает iframe
   визуального редактора Битрикса.
   Схема брейкпоинтов проекта (дискретные ступени):
     БАЗА            = дизайн 1920
     @max-width 1919 = дизайн 1440
     @max-width 1023 = дизайн 768
     @max-width 767  = дизайн 360
   Значения адаптива портированы из fok2 (pages/news.css), классы —
   архивные (без префикса .s-). Токены — base.css. overflow-x:clip
   задан глобально в layout.css — здесь не дублируем.
   ============================================================ */

/* GEN:NEUTRALIZE BEGIN — генерируется _build/scope_neutralize.py, руками не править */
/* источник утечек: arrival.css .crumbs -> .newspage */
.newspage .crumbs { flex-wrap: initial; margin-top: initial; }
/* GEN:NEUTRALIZE END */

/* Вертикальные поля страницы (между шапкой/подвалом и контентом) */
.newspage { padding-block: 56px 120px; }

/* ---------- Хлебные крошки ----------
   Вариант листинга новостей: 16/24 и без margin-top (канон arrival.css —
   16/22 + margin-top 32). Уводим под скоуп страницы: после склейки в один
   main.css канон грузится и здесь, скоуп даёт форку приоритет. Свойства,
   которые задаёт канон и не задаёт форк, гасит блок GEN:NEUTRALIZE выше. */
.newspage .crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 16px/24px var(--font-text);
  color: var(--c-secondary);
}
.newspage .crumbs a { opacity: .6; transition: opacity .2s; }
.newspage .crumbs a:hover { opacity: 1; }
.newspage .crumbs span { opacity: .35; }
.newspage .crumbs b { font-weight: 400; opacity: 1; color: var(--c-text); }

/* ---------- Шапка страницы ---------- */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-top: 36px;
}
.page-head__l {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.page-head__title {
  /* H1 текучий clamp как fok2: 72px@1920 → 56px@1440 (дизайн) → 28px на узкой мобиле */
  font: 400 clamp(28px, 8px + 3.333vw, 72px)/1.06 var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.page-head__count {
  font: 400 16px/24px var(--font-text);
  color: var(--c-secondary);
  opacity: .7;
  padding-bottom: 12px;
}

/* ---------- Панель фильтров ---------- */
.filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--c-line);
}
.filters__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border: 1px solid rgba(9, 30, 37, .2);
  border-radius: var(--r-8);
  font: 400 16px/24px var(--font-text);
  color: var(--c-text);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
.chip:hover { border-color: rgba(9, 30, 37, .5); }
.chip.is-active { background: var(--c-dark); border-color: var(--c-dark); color: #fff; }
.filters__year { position: relative; flex: none; }
.select {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(9, 30, 37, .2);
  border-radius: var(--r-8);
  font: 400 16px/24px var(--font-text);
  color: var(--c-text);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s;
}
.select:hover { border-color: rgba(9, 30, 37, .5); }
.select svg { width: 16px; height: 16px; opacity: .6; stroke: currentColor; fill: none; }

/* ---------- Главная (featured) новость ---------- */
.feature {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  margin-top: 56px;
  align-items: stretch;
}
.feature__media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 560px;
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.feature:hover .feature__media img { transform: scale(1.03); }
.feature__tag {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  background: var(--c-accent);
  font: 500 13px/20px var(--font-text);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
}
.feature__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 0;
  min-width: 0;
}
.feature__date { font: 400 14px/20px var(--font-text); color: var(--c-secondary); opacity: .7; }
.feature__title {
  margin-top: 22px;
  font: 400 40px/46px var(--font-display);
  text-transform: none;
  color: var(--c-text);
}
.feature__lead {
  margin-top: 24px;
  font: 400 20px/30px var(--font-text);
  color: var(--c-text);
  opacity: .85;
}
.feature__more {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  margin-top: 36px;
  padding: 0 28px;
  border-radius: var(--r-8);
  background: var(--c-accent);
  font: 400 16px/24px var(--font-text);
  color: #fff;
  transition: background-color .2s;
}
.feature__more .icon { transition: transform .2s; stroke: currentColor; fill: none; }
.feature__more:hover { background: #a93019; }
.feature__more:hover .icon { transform: translateX(4px); }

/* ---------- Сетка новостей ---------- */
.news-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 48px;
  margin-top: 80px;
}
.ncard { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ncard__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1.5 / 1;
  border-radius: 12px;
  overflow: hidden;
}
.ncard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ncard:hover .ncard__media img { transform: scale(1.04); }
.ncard__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  background: rgba(9, 30, 37, .72);
  backdrop-filter: blur(4px);
  font: 500 12px/16px var(--font-text);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
}
.ncard__date { font: 400 14px/20px var(--font-text); color: var(--c-secondary); opacity: .65; }
.ncard__title {
  font: 400 22px/28px var(--font-display);
  text-transform: none;
  color: var(--c-text);
  transition: color .2s;
}
.ncard:hover .ncard__title { color: var(--c-accent); }
.ncard__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font: 500 14px/20px var(--font-text);
  color: var(--c-accent);
}
.ncard__more .icon { transition: transform .2s; stroke: currentColor; fill: none; }
.ncard:hover .ncard__more .icon { transform: translateX(4px); }

/* ---------- Пагинация / показать ещё ---------- */
.pager { display: flex; flex-direction: column; align-items: center; gap: 32px; margin-top: 88px; }
.pager__more {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 32px;
  border: 1px solid rgba(9, 30, 37, .25);
  border-radius: var(--r-8);
  font: 400 16px/24px var(--font-text);
  color: var(--c-text);
  transition: border-color .2s, background-color .2s;
}
.pager__more:hover { border-color: var(--c-dark); background: rgba(9, 30, 37, .04); }
.pager__more.is-loading { opacity: .5; pointer-events: none; }
.pager__more .icon { stroke: currentColor; fill: none; }
.pager__nums { display: flex; align-items: center; gap: 6px; }
.pager__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border-radius: var(--r-8);
  font: 400 15px/20px var(--font-text);
  color: var(--c-text);
  opacity: .6;
  transition: background-color .2s, opacity .2s;
}
.pager__num:hover { opacity: 1; background: rgba(9, 30, 37, .06); }
.pager__num.is-active { background: var(--c-accent); color: #fff; opacity: 1; }
.pager__num--gap { opacity: .4; pointer-events: none; }
.pager__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(9, 30, 37, .25);
  border-radius: var(--r-8);
  transition: border-color .2s;
}
.pager__arrow:hover { border-color: var(--c-dark); }
.pager__arrow .icon { stroke: currentColor; fill: none; }
.pager__arrow--prev svg { transform: scaleX(-1); }

/* ---------- Подписка (нижняя плашка) ---------- */
.subscribe {
  position: relative;
  margin-top: 140px;
  border-radius: 24px;
  background: var(--c-dark);
  overflow: hidden;
  padding: 88px 96px;
}
.subscribe__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .22;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
  mask-image: linear-gradient(90deg, transparent, #000 60%);
  pointer-events: none;
}
.subscribe__inner { position: relative; max-width: 640px; }
.subscribe__title {
  margin-top: 18px;
  font: 400 40px/48px var(--font-display);
  text-transform: uppercase;
  color: #fff;
}
.subscribe__text { margin-top: 16px; font: 400 16px/24px var(--font-text); color: #fff; opacity: .7; }
.subscribe__form { display: flex; gap: 12px; margin-top: 32px; }
.subscribe__input {
  flex: 1 1 auto;
  height: 56px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--r-8);
  background: rgba(255, 255, 255, .06);
  font: 400 16px/24px var(--font-text);
  color: #fff;
}
.subscribe__input::placeholder { color: rgba(255, 255, 255, .5); }

/* ============================================================
   1440 — max-width:1919px
   ============================================================ */
@media (max-width: 1919px) {
  .newspage { padding-block: 40px 96px; }

  .page-head { margin-top: 28px; }
  .page-head__l { gap: 16px; }

  .filters { margin-top: 40px; padding-bottom: 24px; }
  .chip { height: 40px; padding: 0 20px; font-size: 15px; line-height: 20px; }
  .select { height: 40px; padding: 0 16px; font-size: 15px; line-height: 20px; }

  .feature { grid-template-columns: 768px 1fr; gap: 40px; margin-top: 48px; }
  .feature__media { height: 460px; }
  .feature__title { margin-top: 20px; font-size: 40px; line-height: 46px; }
  .feature__lead { font-size: 18px; line-height: 28px; }

  .news-list { gap: 40px; margin-top: 64px; }
  .ncard__title { font-size: 22px; line-height: 28px; }

  .pager { margin-top: 72px; }

  .subscribe { margin-top: 120px; padding: 64px 80px; }
  .subscribe__inner { max-width: 560px; }
  .subscribe__title { font-size: 32px; line-height: 40px; }
}

/* ============================================================
   1280–1024 — промежуточный (как fok2 @1279): фичер-грид резиновый,
   иначе фикс-медиа 768 режет заголовок статьи на 1100–1279.
   ============================================================ */
@media (max-width: 1279px) {
  .feature { grid-template-columns: minmax(0, 1.1fr) 1fr; gap: 32px; }
  .feature__media { height: 420px; }
  .feature__title { font-size: 34px; line-height: 40px; }
  .news-list { gap: 36px 32px; }
}

/* ============================================================
   768 — max-width:1023px
   ============================================================ */
@media (max-width: 1023px) {
  .newspage { padding-block: 32px 80px; }

  .filters { flex-wrap: wrap; }

  .feature { grid-template-columns: 1fr; gap: 28px; align-items: stretch; }
  .feature__media { height: 360px; }
  .feature__body { justify-content: flex-start; padding: 0; }
  .feature__title { font-size: 32px; line-height: 38px; }
  .feature__lead { font-size: 17px; line-height: 26px; margin-top: 18px; }
  .feature__more { margin-top: 28px; }

  .news-list { grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 48px; }

  .subscribe { margin-top: 96px; padding: 48px 40px; }
}

/* ============================================================
   360 — max-width:767px  (гаттер контейнера автоматически 16px)
   ============================================================ */
@media (max-width: 767px) {
  .newspage { padding-block: 24px 64px; }

  .page-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .page-head__count { padding-bottom: 0; }

  .filters { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 28px; padding-bottom: 20px; }
  .filters__tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -4px;
    padding: 0 4px 4px;
  }
  .filters__tags::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .filters__year { align-self: flex-start; }

  .feature { gap: 22px; margin-top: 36px; }
  .feature__media { height: 220px; }
  .feature__title { font-size: 28px; line-height: 32px; }
  .feature__lead { font-size: 16px; line-height: 24px; }
  .feature__more { width: 100%; justify-content: center; padding: 0 20px; }

  .news-list { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .ncard__media { aspect-ratio: 16 / 11; }
  .ncard__title { font-size: 20px; line-height: 26px; }

  .pager { margin-top: 56px; gap: 24px; }
  .pager__more { width: 100%; justify-content: center; }
  .pager__nums { gap: 4px; flex-wrap: wrap; justify-content: center; }

  .subscribe { margin-top: 72px; padding: 32px 24px; border-radius: 18px; }
  .subscribe__bg {
    opacity: .12;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 85%);
    mask-image: linear-gradient(180deg, transparent, #000 85%);
  }
  .subscribe__title { font-size: 24px; line-height: 30px; }
  .subscribe__form { flex-direction: column; gap: 12px; }
  .subscribe__input { width: 100%; }
  .subscribe__form .btn--primary { width: 100%; justify-content: center; }
}

/* ============================================================
   480 — узкая мобила (как fok2 @479)
   ============================================================ */
@media (max-width: 479px) {
  .feature__media { height: 190px; }
  .feature__title { font-size: 24px; line-height: 28px; }
  .feature__more { width: 100%; justify-content: center; padding: 0 20px; }
  .ncard__title { font-size: 19px; line-height: 25px; }
  .pager__nums { flex-wrap: wrap; justify-content: center; }
  .pager__more { width: 100%; justify-content: center; }
}

/* === sections/news-detail.css === */
/* ============================================================
   sections/news-detail.css — детальная страница новости.
   В стиле дизайн-системы МФОК. База = 1920, перекрытия
   :1919 (1440) → :1023 (768) → :767 (360). Контент — читаемая
   колонка по центру; гаттер контейнера (40 → 16 на мобайле).
   ============================================================ */

/* GEN:NEUTRALIZE BEGIN — генерируется _build/scope_neutralize.py, руками не править */
/* источник утечек: arrival.css .crumbs -> .detail */
.detail .crumbs { margin-top: initial; }
.detail__crumbs .crumbs { margin-top: initial; }
/* GEN:NEUTRALIZE END */

/* Читаемая колонка статьи */
.detail,
.related {
  width: 100%;
  max-width: calc(900px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.detail { padding-top: 56px; color: var(--c-text); }

/* Крошки вынесены из .detail (рендерятся компонентом bitrix:breadcrumb) —
   обёртка повторяет колонку статьи и берёт на себя верхний отступ. */
.detail__crumbs {
  width: 100%;
  max-width: calc(900px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-top: 56px;
}
.detail__crumbs + .detail { padding-top: 0; }

/* ---------- Хлебные крошки ----------
   Вариант детальной новости: 16/24, с переносом и без margin-top (канон
   arrival.css — 16/22 + margin-top 32). Скоуп страницы нужен для склейки в
   один main.css: там канон грузится и здесь. Крошки живут либо внутри
   .detail, либо в обёртке .detail__crumbs (битриксовый компонент). */
.detail .crumbs,
.detail__crumbs .crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font: 400 16px/24px var(--font-text);
  color: var(--c-secondary);
}
.detail .crumbs a,
.detail__crumbs .crumbs a { opacity: .6; transition: opacity .2s; }
.detail .crumbs a:hover,
.detail__crumbs .crumbs a:hover { opacity: 1; }
.detail .crumbs span,
.detail__crumbs .crumbs span { opacity: .35; }
.detail .crumbs b,
.detail__crumbs .crumbs b { font-weight: 400; opacity: 1; color: var(--c-text); }

/* ---------- Шапка статьи ---------- */
.detail__head { margin-top: 32px; }
.detail__meta { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.detail__cat {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  background: var(--c-accent);
  font: 500 13px/20px var(--font-text);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
}
.detail__date { font: 400 16px/24px var(--font-text); color: var(--c-secondary); opacity: .7; }
.detail__title {
  font: 400 clamp(28px, 8px + 2.5vw, 56px)/1.1 var(--font-display);
  text-transform: none;
  color: var(--c-text);
}

/* ---------- Hero ---------- */
.detail__hero { margin: 36px 0 0; }
.detail__hero-box {
  display: block;
  border-radius: 16px;
  overflow: clip;
  background: var(--c-photo-stub);
}
.detail__hero-box img { width: 100%; height: auto; display: block; }
.detail__hero figcaption {
  margin-top: 10px;
  font: 400 14px/20px var(--font-text);
  color: var(--c-secondary);
  opacity: .7;
}

/* ---------- Тело статьи ---------- */
.detail__body { margin-top: 40px; font: 400 19px/30px var(--font-text); color: var(--c-text); }
.detail__body > p { margin: 0 0 20px; }
.detail__lead { font-size: 22px; line-height: 32px; color: var(--c-text); }
.detail__body a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.detail__body a:hover { text-decoration: none; }

/* Цитата спикера */
.detail__quote { margin: 28px 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--c-accent); }
.detail__quote p { margin: 0; font: 400 21px/31px var(--font-text); color: var(--c-text); }
.detail__quote cite {
  display: block;
  margin-top: 12px;
  font: 500 15px/22px var(--font-text);
  font-style: normal;
  color: var(--c-secondary);
}

/* Источник + назад */
.detail__source {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
  font: 400 14px/22px var(--font-text);
  color: var(--c-secondary);
}
.detail__source a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.detail__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font: 500 16px/24px var(--font-text);
  color: var(--c-accent);
}
.detail__back .icon { width: 20px; height: 20px; transform: scaleX(-1); transition: transform .2s; }
.detail__back:hover .icon { transform: scaleX(-1) translateX(4px); }

/* ---------- Другие новости ---------- */
.related { padding-block: 88px 120px; }
.related__heading {
  margin-bottom: 32px;
  font: 400 40px/48px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.related__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.rcard { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.rcard__media {
  position: relative;
  width: 100%;
  height: 260px;
  border-radius: 12px;
  overflow: clip;
  background: var(--c-photo-stub);
}
.rcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.rcard:hover .rcard__media img { transform: scale(1.04); }
.rcard__date { font: 400 14px/20px var(--font-text); color: var(--c-secondary); opacity: .65; }
.rcard__title {
  font: 400 24px/30px var(--font-display);
  text-transform: none;
  color: var(--c-text);
  transition: color .2s;
}
.rcard:hover .rcard__title { color: var(--c-accent); }

/* ============================================================
   1440 — max-width:1919px
   ============================================================ */
@media (max-width: 1919px) {
  .detail { padding-top: 40px; }
  .detail__crumbs { padding-top: 40px; }
  .detail__body { font-size: 17px; line-height: 28px; }
  .detail__lead { font-size: 20px; line-height: 30px; }
  .detail__quote p { font-size: 19px; line-height: 29px; }

  .related { padding-block: 80px 96px; }
  .related__heading { font-size: 32px; line-height: 40px; }
  .rcard__media { height: 240px; }
  .rcard__title { font-size: 22px; line-height: 28px; }
}

/* ============================================================
   768 — max-width:1023px
   ============================================================ */
@media (max-width: 1023px) {
  .detail { padding-top: 32px; }
  .detail__crumbs { padding-top: 32px; }
  .related { padding-block: 64px 80px; }
  .rcard__media { height: 220px; }
}

/* ============================================================
   360 — max-width:767px  (гаттер 16px)
   ============================================================ */
@media (max-width: 767px) {
  .detail { padding-top: 24px; }
  .detail__crumbs { padding-top: 24px; }
  .detail__meta { flex-wrap: wrap; gap: 12px; }
  .detail__hero { margin-top: 24px; }
  .detail__hero-box { border-radius: 12px; }
  .detail__body { margin-top: 28px; font-size: 16px; line-height: 26px; }
  .detail__lead { font-size: 18px; line-height: 27px; }
  .detail__quote { margin: 22px 0; padding-left: 18px; }
  .detail__quote p { font-size: 18px; line-height: 27px; }

  .related { padding-block: 56px 72px; }
  .related__heading { font-size: 24px; line-height: 30px; }
  .related__grid { grid-template-columns: 1fr; gap: 28px; }
  .rcard__media { height: auto; aspect-ratio: 16 / 11; }
  .rcard__title { font-size: 20px; line-height: 26px; }
}

/* === sections/arrival.css === */
/* ==========================================================================
   arrival.css — страница «Прибытие в Санкт-Петербург» (логистика форума).
   Десктоп-база — 1920 (как вся главная). Архивный макет (1440) перенесён в
   ступень @media (max-width: 1919px). Стиль на токенах base.css.
   Лесенка брейкпоинтов проекта: 1920 (база) / 1440 / 768 / 360.
   ========================================================================== */

/* ---------- Типографика: без висячих слов на любой ширине ---------- */
.arr-intro__lead, .arr-intro__note, .transport__lead, .arr-visa__text,
.contact-card__addr, .contact-block__val, .contact-row {
  text-wrap: pretty;
}
.arr-hero__title, .transport__title, .contact-card__name, .arr-visa__title {
  text-wrap: balance;
}

/* ---------- Хлебные крошки ---------- */
.crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  font: 400 16px/22px var(--font-text);
  color: var(--c-secondary);
}
.crumbs a { opacity: .6; transition: opacity .2s; }
.crumbs a:hover { opacity: 1; }
.crumbs span { opacity: .35; }
/* некликабельный уровень структуры («Партнерам», «Партнеры») — как ссылка, но без неё */
.crumbs .crumbs__sec { opacity: .6; }
.crumbs b { font-weight: 400; opacity: 1; color: var(--c-text); }

/* ---------- Геро-баннер ---------- */
.arr-hero {
  position: relative;
  margin-top: 28px;
  height: clamp(480px, 32.29vw, 620px);
  border-radius: var(--r-24);
  overflow: hidden;
}
.arr-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.arr-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(9,30,37,.82) 0%, rgba(9,30,37,.45) 45%, rgba(9,30,37,.05) 100%);
}
.arr-hero__inner {
  position: absolute;
  left: 88px;
  bottom: 76px;
  max-width: 940px;
}
.arr-hero__title {
  margin-top: 24px;
  font: 400 84px/90px var(--font-display);
  text-transform: uppercase;
  color: #fff;
}

/* ---------- Интро: лид + статистика ---------- */
.arr-intro {
  display: grid;
  grid-template-columns: 1fr 660px;
  gap: 100px;
  align-items: center;
  margin-top: 88px;
}
.arr-intro__lead {
  font: 400 22px/32px var(--font-text);
  color: var(--c-text);
  opacity: .85;
}
.arr-intro__note {
  margin-top: 32px;
  padding: 24px 34px;
  border-left: 3px solid var(--c-accent);
  background: rgba(196, 58, 30, .06);
  border-radius: 0 var(--r-12) var(--r-12) 0;
  font: 400 18px/27px var(--font-text);
  color: var(--c-secondary);
}
.arr-stats {
  display: flex;
  flex-direction: column;
}
.arr-stat {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--c-line);
}
.arr-stat:last-child { border-bottom: 1px solid var(--c-line); }
.arr-stat__num {
  flex: none;
  width: 104px;
  font: 400 72px/80px var(--font-display);
  color: var(--c-accent);
}
.arr-stat__text {
  font: 400 20px/28px var(--font-text);
  color: var(--c-text);
}
.arr-stat__text b { font-weight: 600; }
.arr-stat__text span {
  display: block;
  color: var(--c-secondary);
  opacity: .7;
  font-size: 17px;
}

/* ---------- Транспортная секция ---------- */
.transport {
  margin-top: 140px;
}
.transport:last-of-type {
  margin-bottom: 152px;
}
.transport__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 1040px;
}
.transport__title {
  font: 400 58px/64px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.transport__lead {
  font: 400 22px/32px var(--font-text);
  color: var(--c-text);
  opacity: .85;
}
.transport__lead a { color: var(--c-accent); text-decoration: underline; }
.transport__lead a:hover { text-decoration: none; }

/* Ряд: фото + основная карточка */
.transport__main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
  margin-top: 56px;
}
.transport__media {
  border-radius: var(--r-16);
  overflow: hidden;
  min-height: 480px;
}
.transport__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Чипы вокзалов */
.station-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.station-chip {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(9,30,37,.2);
  border-radius: var(--r-8);
  font: 400 17px/22px var(--font-text);
  color: var(--c-text);
}
.station-chip--main {
  background: var(--c-dark);
  border-color: var(--c-dark);
  color: #fff;
}

/* ---------- Контактная карточка ---------- */
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-16);
}
.contact-card--filled {
  justify-content: center;
}
.contact-card__name {
  font: 400 32px/40px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.contact-card__addr {
  display: flex;
  gap: 10px;
  font: 400 18px/26px var(--font-text);
  color: var(--c-secondary);
}
.contact-card__addr svg { flex: none; margin-top: 4px; color: var(--c-accent); }
.contact-card__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Блоки с длинными подписями служб (подпись сверху, значения снизу) */
.contact-card__blocks {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-block__label {
  font: 400 15px/20px var(--font-text);
  color: var(--c-secondary);
  opacity: .65;
}
.contact-block__val {
  font: 400 18px/26px var(--font-text);
  color: var(--c-text);
}
.contact-block__val a { color: var(--c-text); transition: color .2s; }
.contact-block__val a:hover { color: var(--c-accent); }
.contact-block--codes {
  flex-direction: row;
  gap: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
}
.contact-block--codes .contact-block__val {
  font: 400 16px/22px var(--font-text);
  letter-spacing: .04em;
  color: var(--c-secondary);
}
.contact-row {
  display: flex;
  gap: 14px;
  font: 400 18px/26px var(--font-text);
  color: var(--c-text);
}
.contact-row__label {
  flex: none;
  width: 120px;
  color: var(--c-secondary);
  opacity: .65;
}
.contact-row__val { display: flex; flex-direction: column; gap: 2px; }
.contact-row__val a { color: var(--c-text); transition: color .2s; }
.contact-row__val a:hover { color: var(--c-accent); }
.contact-card__site {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  font: 500 18px/26px var(--font-text);
  color: var(--c-accent);
}
.contact-card__site .icon { transition: transform .2s; }
.contact-card__site:hover .icon { transform: translateX(4px); }
/* Кнопка «Схема аэропорта/вокзала» (PDF) — вид берёт у .arr-hero__btn (program.css);
   в колонке карточки не растягиваемся, отступ даёт gap карточки */
.contact-card .arr-map-btn {
  align-self: flex-start;
  margin-top: 0;
}

/* Сетка сервисных карточек */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 48px;
}
.contact-grid--two {
  grid-template-columns: repeat(2, 1fr);
}

/* ==========================================================================
   ≤1440 — архивный макет 1-в-1 (источник дизайна этой страницы).
   ========================================================================== */
@media (max-width: 1919px) {
  .crumbs { font-size: 14px; line-height: 20px; }

  /* высота .arr-hero — общий fluid clamp в базовом правиле */
  .arr-hero__inner { left: 64px; bottom: 56px; max-width: 720px; }
  .arr-hero__title { margin-top: 18px; font-size: 64px; line-height: 68px; }

  .arr-intro { grid-template-columns: 1fr 520px; gap: 80px; margin-top: 64px; }
  .arr-intro__lead { font-size: 18px; line-height: 28px; }
  .arr-intro__note { margin-top: 28px; padding: 20px 28px; font-size: 16px; line-height: 24px; }

  .arr-stat { gap: 20px; padding: 22px 0; }
  .arr-stat__num { width: 84px; font-size: 56px; line-height: 56px; }
  .arr-stat__text { font-size: 16px; line-height: 24px; }
  .arr-stat__text span { font-size: 15px; }

  .transport { margin-top: 112px; }
  .transport:last-of-type { margin-bottom: 120px; }
  .transport__head { gap: 16px; max-width: 820px; }
  .transport__title { font-size: 44px; line-height: 50px; }
  .transport__lead { font-size: 18px; line-height: 28px; }
  .transport__main { gap: 40px; margin-top: 44px; }
  .transport__media { min-height: 380px; }

  .station-chips { gap: 8px; }
  .station-chip { height: 36px; padding: 0 16px; font-size: 15px; line-height: 20px; }

  .contact-card { gap: 18px; padding: 32px; }
  .contact-card__name { font-size: 24px; line-height: 30px; }
  .contact-card__addr { font-size: 16px; line-height: 24px; }
  .contact-card__addr svg { margin-top: 3px; }
  .contact-card__blocks { gap: 16px; }
  .contact-block { gap: 3px; }
  .contact-block__label { font-size: 13px; line-height: 18px; }
  .contact-block__val { font-size: 16px; line-height: 24px; }
  .contact-block--codes { gap: 24px; padding-top: 14px; }
  .contact-block--codes .contact-block__val { font-size: 14px; line-height: 20px; }
  .contact-row { gap: 12px; font-size: 16px; line-height: 24px; }
  .contact-row__label { width: 96px; }
  .contact-card__site { font-size: 16px; line-height: 24px; }

  .contact-grid { gap: 40px; margin-top: 40px; }
}

/* ==========================================================================
   ≤768 — планшет. Макета мобилки нет — аккуратный стек по сетке проекта.
   ========================================================================== */
@media (max-width: 1023px) {
  .crumbs { margin-top: 24px; flex-wrap: wrap; }

  .arr-hero { height: 360px; border-radius: var(--r-16); }
  .arr-hero__inner { left: 32px; right: 32px; bottom: 32px; max-width: none; }
  .arr-hero__title { margin-top: 14px; font-size: 40px; line-height: 44px; }

  .arr-intro { grid-template-columns: 1fr; gap: 40px; margin-top: 48px; }
  .arr-intro__lead { font-size: 18px; line-height: 28px; }

  .transport { margin-top: 80px; }
  .transport:last-of-type { margin-bottom: 80px; }
  .transport__title { font-size: 36px; line-height: 42px; }
  .transport__main { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .transport__media { min-height: 280px; }

  .contact-grid,
  .contact-grid--two { grid-template-columns: 1fr; gap: 24px; }
}

/* ==========================================================================
   ≤360 — узкая мобила.
   ========================================================================== */
@media (max-width: 767px) {
  .arr-hero { height: 300px; margin-top: 20px; border-radius: var(--r-12); }
  .arr-hero__inner { left: 16px; right: 16px; bottom: 20px; }
  .arr-hero__title { margin-top: 10px; font-size: 28px; line-height: 32px; }

  .arr-intro { gap: 28px; margin-top: 36px; }
  .arr-intro__lead { font-size: 16px; line-height: 24px; }
  .arr-intro__note { margin-top: 20px; padding: 16px 18px; }

  .arr-stat { gap: 14px; padding: 18px 0; }
  .arr-stat__num { width: 56px; font-size: 40px; line-height: 40px; }
  .arr-stat__text { font-size: 16px; }

  .transport { margin-top: 56px; }
  .transport:last-of-type { margin-bottom: 56px; }
  .transport__title { font-size: 28px; line-height: 32px; }
  .transport__lead { font-size: 16px; line-height: 24px; }
  .transport__main { gap: 16px; margin-top: 24px; }
  .transport__media { min-height: 200px; border-radius: var(--r-12); }

  .station-chip { height: 32px; padding: 0 12px; font-size: 14px; }

  .contact-card { padding: 20px; gap: 14px; }
  .contact-card__name { font-size: 20px; line-height: 26px; }
  .contact-block--codes { flex-direction: column; gap: 6px; }

  .contact-grid,
  .contact-grid--two { gap: 16px; }
}

/* ============ Визовая поддержка ============ */
/* Визовый блок теперь в левой колонке интро — под врезкой, заполняет пустоту у статистики */
.arr-visa { margin-top: 40px; }
.arr-visa__card {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 32px 36px;
  border-radius: var(--r-24);
  background: rgba(196, 58, 30, .06);
  border: 1px solid transparent;
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.arr-visa__card:hover {
  background: rgba(255, 255, 255, .6);
  border-color: var(--c-line);
  box-shadow: 0 12px 32px rgba(9, 30, 37, .08);
}
.arr-visa__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.arr-visa__title {
  font: 400 32px/40px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.arr-visa__text {
  font: 400 20px/28px var(--font-text);
  color: var(--c-secondary);
}
.arr-visa__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  transition: transform .25s, background .25s;
}
.arr-visa__card:hover .arr-visa__arrow {
  background: #a82f16;
  transform: translateX(6px);
}
@media (max-width: 1919px) {
  .arr-visa__title { font-size: 24px; line-height: 30px; }
  .arr-visa__text { font-size: 16px; line-height: 24px; }
}
@media (max-width: 1023px) {
  .arr-visa { margin-top: 32px; }
  .arr-visa__card { gap: 24px; padding: 28px 32px; }
  .arr-visa__arrow { width: 56px; height: 56px; }
}
@media (max-width: 767px) {
  .arr-visa { margin-top: 24px; }
  .arr-visa__card { gap: 18px; padding: 24px 20px; }
  .arr-visa__title { font-size: 20px; line-height: 26px; }
  .arr-visa__text { font-size: 16px; line-height: 24px; }
  .arr-visa__arrow { width: 48px; height: 48px; }
  .arr-visa__arrow svg { width: 20px; height: 20px; }
}

/* === sections/participate-page.css === */
/* ============================================================
   sections/participate-page.css — страница «Стать участником».
   Дизайн: бежевый фон, Cochin uppercase, красный акцент, Inter Tight.
   База = дизайн 1920. Дискретные ступени как на главной:
   @1919px (=1440) → @1023px (=768) → @767px (=360).
   Значения адаптива портированы из fok2; классы — архивные.
   Контент самодостаточный (не завязан на .page) — переживает iframe
   визуального редактора Битрикса.
   ============================================================ */

/* GEN:NEUTRALIZE BEGIN — генерируется _build/scope_neutralize.py, руками не править */
/* источник утечек: arrival.css .crumbs -> .ppage; program.css .pac -> .ppage */
.ppage .crumbs { flex-wrap: initial; margin-top: initial; }
.ppage .pac[open] .pac__ic::after { display: initial; }
/* GEN:NEUTRALIZE END */

/* Читаемая колонка: контент + гаттер (var(--gutter) = 40 → 16 на мобайле) */
.ppage {
  width: 100%;
  /* Заполняем базу 1920 как остальные страницы (.container). Раньше колонка была
     капнута на 1320 (наследие fok2) — на широких экранах контент узкой полосой
     по центру. Теперь ширина = контейнер сайта (1920, гуттер 40). */
  max-width: var(--container);
  margin-inline: auto;
  padding: 56px var(--gutter) 140px;
  color: var(--c-text);
}

/* ---------- Хлебные крошки ----------
   Вариант раздела «Участникам»: 16/24 и без margin-top (канон arrival.css —
   16/22 + margin-top 32). Скоуп страницы нужен для склейки в один main.css:
   там канон грузится и здесь, а скоуп даёт форку приоритет. */
.ppage .crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 16px/24px var(--font-text);
  color: var(--c-secondary);
}
.ppage .crumbs a { opacity: .6; transition: opacity .2s; }
.ppage .crumbs a:hover { opacity: 1; }
.ppage .crumbs span { opacity: .35; }
.ppage .crumbs b { font-weight: 400; opacity: 1; color: var(--c-text); }

/* ---------- Заголовок, дата и город ---------- */
.ppage__head { margin: 36px 0 52px; }
.ppage__title {
  margin-bottom: 20px;
  /* Текучий H1: ≈80px@1920 → 64px@1440 (как на геро) */
  font: 400 clamp(64px, 4.17vw, 80px)/1.04 var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.ppage__dates { font: 400 20px/30px var(--font-text); color: var(--c-secondary); }

/* ============================================================
   Блок пакета — тёмная карточка + светлая панель
   ============================================================ */
.pkg {
  display: grid;
  grid-template-columns: 42% 58%;
  border: 1px solid var(--c-line);
  border-radius: var(--r-24);
  overflow: hidden;
}
.pkg__left {
  display: flex;
  flex-direction: column;
  padding: 60px 56px;
  background: var(--c-dark);
  color: #fff;
}
.pkg__right { padding: 60px 56px; background: rgba(255, 255, 255, .30); }
.pkg__title {
  margin-bottom: 28px;
  font: 400 40px/46px var(--font-display);
  text-transform: uppercase;
  color: #fff;
}
.pkg__title--dark { color: var(--c-text); }
.pkg__left p {
  margin-bottom: 18px;
  font: 400 18px/28px var(--font-text);
  color: rgba(255, 255, 255, .80);
}
.pkg__cta { margin-top: auto; align-self: flex-start; }

/* список «Ваш пакет включает» */
.pkg__list { display: flex; flex-direction: column; gap: 22px; margin-bottom: 28px; }
.pkg__list li { position: relative; padding-left: 32px; }
.pkg__list li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 10px;
  height: 10px;
  background: var(--c-accent);
  transform: rotate(45deg);
}
.pkg__list b { display: block; font: 400 18px/26px var(--font-text); color: var(--c-text); }
.pkg__list span {
  display: block;
  margin-top: 4px;
  font: 400 16px/23px var(--font-text);
  color: var(--c-secondary);
  opacity: .82;
}
.pkg__note {
  margin-bottom: 28px;
  padding: 18px 24px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-12);
  background: rgba(255, 255, 255, .42);
  font: 400 16px/24px var(--font-text);
  color: var(--c-secondary);
}
.pkg__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Вторичная кнопка (светлая на бежевом) ----------
   В base.css есть .btn/.btn--primary; .btn--secondary — локально. */
.btn--secondary {
  background: rgba(255, 255, 255, .4);
  border: 1px solid var(--c-secondary);
  color: var(--c-secondary);
}
.btn--secondary:hover { background: var(--c-secondary); color: #fff; }
.btn--secondary .icon { stroke: var(--c-accent); }
.btn--secondary:hover .icon { stroke: #fff; }

/* ============================================================
   Аккордеоны: шаги и частые вопросы.
   Свой компонент раздела «Участникам»: структура .pac > summary, рамка
   var(--c-line). В program.css живёт ДРУГОЙ .pac (структура .pac__sum,
   рамка rgba(1,31,39,.2)) — после склейки в один main.css оба окажутся на
   каждой странице, поэтому весь местный аккордеон уводим под скоуп .ppage.
   Утечки свойств из канона program.css гасит блок GEN:NEUTRALIZE выше.
   ============================================================ */
.ppage .pacc { margin-top: 104px; }
.ppage .pacc__eyebrow { margin-bottom: 16px; }
.ppage .pacc__head {
  margin-bottom: 28px;
  /* Текучий: ≈48px@1920 → 40px@1440 */
  font: 400 clamp(40px, 2.5vw, 48px)/1.12 var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.ppage .pac { border-top: 1px solid var(--c-line); }
.ppage .pac:last-child { border-bottom: 1px solid var(--c-line); }
.ppage .pac > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 4px;
  list-style: none;
  cursor: pointer;
  font: 400 28px/34px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
  transition: color .2s;
}
.ppage .pac--faq > summary { font-size: 24px; line-height: 30px; }
.ppage .pac > summary::-webkit-details-marker { display: none; }
.ppage .pac > summary:hover { color: var(--c-accent); }

/* иконка: закрыто = «+», открыто = «−» */
.ppage .pac__ic { position: relative; flex: none; width: 26px; height: 26px; }
.ppage .pac__ic::before,
.ppage .pac__ic::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--c-accent);
}
.ppage .pac__ic::before { width: 16px; height: 2px; }
.ppage .pac__ic::after { width: 2px; height: 16px; transition: transform .25s; }
.ppage .pac[open] .pac__ic::after { transform: translate(-50%, -50%) scaleY(0); }

.ppage .pac__body {
  max-width: 1000px;
  padding: 6px 4px 36px;
  font: 400 18px/28px var(--font-text);
  color: var(--c-text);
}
.ppage .pac__body p { margin: 0 0 16px; opacity: .88; }
.ppage .pac__body p:last-child { margin-bottom: 0; }
.ppage .pac__body a:not(.btn) { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.ppage .pac__body a:not(.btn):hover { text-decoration: none; }
.ppage .pac__sub {
  margin: 26px 0 10px;
  font: 500 14px/20px var(--font-text);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-secondary);
}
.ppage .pac__plain-list { margin: 6px 0 16px; display: flex; flex-direction: column; gap: 9px; }
.ppage .pac__plain-list li { position: relative; padding-left: 22px; opacity: .88; }
.ppage .pac__plain-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
}
.ppage .pac__num { margin: 6px 0 16px; counter-reset: pn; display: flex; flex-direction: column; gap: 12px; }
.ppage .pac__num li { position: relative; padding-left: 40px; opacity: .9; }
.ppage .pac__num li::before {
  counter-increment: pn;
  content: counter(pn);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  font: 400 14px/1 var(--font-text);
}
.ppage .pac__hint { display: block; margin-top: 5px; font-size: 14px; line-height: 20px; color: var(--c-secondary); opacity: .8; }
.ppage .pac__cta { margin-top: 12px; }

/* ============================================================
   1440 — max-width:1919px  (бывший «десктоп» fok: колонка 1180)
   ============================================================ */
@media (max-width: 1919px) {
  .ppage { padding: 48px var(--gutter) 110px; }   /* ширина = .container (на 1440 сам сузится) */
  .ppage__head { margin: 32px 0 46px; }
  .ppage__dates { font-size: 18px; line-height: 28px; }

  .pkg__left,
  .pkg__right { padding: 52px 48px; }
  .pkg__title { font-size: 34px; line-height: 40px; }

  .ppage .pacc { margin-top: 96px; }
  .ppage .pac > summary { font-size: 24px; line-height: 30px; }
  .ppage .pac--faq > summary { font-size: 22px; line-height: 28px; }
  .ppage .pac__body { max-width: 900px; font-size: 17px; line-height: 27px; }
}

/* ============================================================
   768 — max-width:1023px
   ============================================================ */
@media (max-width: 1023px) {
  .ppage { max-width: none; padding: 32px var(--gutter) 80px; }
  .ppage__title { font-size: 48px; line-height: 50px; }

  .pkg { grid-template-columns: 1fr; }
  .pkg__left,
  .pkg__right { padding: 40px; }

  .ppage .pacc { margin-top: 72px; }
  .ppage .pacc__head { font-size: 32px; line-height: 38px; }
}

/* ============================================================
   360 — max-width:767px  (гаттер контейнера автоматически 16px)
   ============================================================ */
@media (max-width: 767px) {
  .ppage { padding: 24px var(--gutter) 64px; }
  .ppage__head { margin: 28px 0 36px; }
  .ppage__title { font-size: 34px; line-height: 38px; }
  .ppage__dates { font-size: 16px; line-height: 24px; }

  .ppage .crumbs { font-size: 14px; line-height: 20px; flex-wrap: wrap; }

  .pkg__left,
  .pkg__right { padding: 28px 24px; }
  .pkg__title { font-size: 26px; line-height: 32px; }
  .pkg__actions { flex-direction: column; }
  .pkg__actions .btn { width: 100%; }

  .ppage .pacc__head { font-size: 26px; line-height: 32px; }
  .ppage .pac > summary { font-size: 19px; line-height: 25px; padding: 22px 4px; gap: 16px; }
  .ppage .pac--faq > summary { font-size: 18px; line-height: 24px; }
  .ppage .pac__body { font-size: 16px; line-height: 25px; }
}

/* Узкая мобила */
@media (max-width: 479px) {
  .ppage__title { font-size: 30px; line-height: 34px; }
}

/* === sections/visa.css === */
/* ==========================================================================
   visa.css — страница «Визовая поддержка» (раздел «Участникам»).
   Десктоп-база — 1920 (как вся главная). Исходный макет (1440) перенесён в
   ступень @media (max-width: 1919px). Стиль на токенах base.css.
   Хлебные крошки и геро-баннер переиспользуются из arrival.css.
   Лесенка брейкпоинтов проекта: 1920 (база) / 1440 / 768 / 360.
   ========================================================================== */

/* ---------- Светлый hero (Figma 2149:133909): светлая картинка,
   тёмный заголовок, без тёмной шторки. Геометрия — из arrival.css. ---------- */
.arr-hero--light .arr-hero__title {
  color: var(--c-text);
}

/* ---------- Типографика: без висячих слов на любой ширине ---------- */
.visa-choose__lead, .visa-case__sub, .visa-text, .visa-list li, .visa-bullets li,
.visa-step__text, .visa-substeps li, .visa-callout, .visa-note p, .visa-doc p,
.visa-note-foot, .visa-block__note {
  text-wrap: pretty;
}
.visa-case__title, .visa-choose__title, .visa-block__title, .visa-step__title,
.visa-consular__title {
  text-wrap: balance;
}

/* ---------- Общие маркированные списки (ромб ◆) ---------- */
.visa-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.visa-list li {
  position: relative;
  padding-left: 34px;
  font: 400 20px/28px var(--font-text);
  color: var(--c-text);
}
.visa-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 10px;
  height: 10px;
  background: var(--c-accent);
  transform: rotate(45deg);
}

/* ---------- Нужна / не нужна виза ---------- */
.visa-cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 88px;
}
.visa-case {
  display: flex;
  flex-direction: column;
  padding: 48px 56px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-24);
}
.visa-case__title {
  font: 400 32px/40px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.visa-case__sub {
  margin-top: 16px;
  margin-bottom: 28px;
  font: 400 17px/24px var(--font-text);
  color: var(--c-secondary);
  opacity: .7;
}
.visa-case--dark {
  background: var(--c-dark);
  border-color: var(--c-dark);
}
.visa-case--dark .visa-case__title { color: #fff; }
.visa-case--dark .visa-case__sub { color: rgba(255, 255, 255, .6); opacity: 1; }
.visa-case--dark .visa-list li { color: #fff; }

/* ---------- Какую визу оформить ---------- */
.visa-choose {
  margin-top: 120px;
}
.visa-choose__title {
  font: 400 58px/64px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.visa-choose__lead {
  margin-top: 20px;
  max-width: 1160px;
  font: 400 22px/32px var(--font-text);
  color: var(--c-text);
  opacity: .85;
}

/* ---------- Крупный визовый блок (тёмная шапка + тело) ---------- */
.visa-block {
  margin-top: 48px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-24);
  overflow: hidden;
}
.visa-block__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  padding: 56px;
  background: var(--c-dark);
}
.visa-block__title {
  max-width: 900px;
  font: 400 40px/48px var(--font-display);
  text-transform: uppercase;
  color: #fff;
}
.visa-block__note {
  flex: none;
  max-width: 280px;
  padding-top: 8px;
  font: 400 18px/26px var(--font-text);
  text-align: right;
  color: rgba(255, 255, 255, .6);
}
.visa-block__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  padding: 56px;
}

/* Группа: мини-лейбл + контент */
.visa-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.visa-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font: 500 15px/20px var(--font-text);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-secondary);
}
.visa-label::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--c-accent);
}
.visa-text {
  font: 400 20px/28px var(--font-text);
  color: var(--c-text);
}
.visa-text a { color: var(--c-accent); text-decoration: underline; }
.visa-text a:hover { text-decoration: none; }

/* Списки с круглым маркером внутри блока */
.visa-bullets {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.visa-bullets li {
  position: relative;
  padding-left: 26px;
  font: 400 20px/28px var(--font-text);
  color: var(--c-text);
}
.visa-bullets li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
}
.visa-bullets a { color: var(--c-accent); text-decoration: underline; }
.visa-bullets a:hover { text-decoration: none; }

/* Пронумерованные шаги */
.visa-steps {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 6px;
}
.visa-step {
  display: flex;
  gap: 28px;
  padding: 36px 40px;
  background: rgba(255, 255, 255, .45);
  border: 1px solid var(--c-line);
  border-radius: var(--r-16);
}
.visa-step__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  font: 500 20px/1 var(--font-text);
}
.visa-step__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 4px;
}
.visa-step__title {
  font: 400 32px/40px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.visa-step__text {
  font: 400 18px/27px var(--font-text);
  color: var(--c-text);
}
.visa-step__text a { color: var(--c-accent); text-decoration: underline; }
.visa-step__text a:hover { text-decoration: none; }

/* Плашка «Обратите внимание» */
.visa-note {
  display: flex;
  gap: 14px;
  padding: 20px 24px;
  background: rgba(196, 58, 30, .06);
  border-radius: var(--r-12);
}
.visa-note__icon {
  flex: none;
  margin-top: 2px;
  color: var(--c-accent);
}
.visa-note p {
  font: 400 18px/27px var(--font-text);
  color: var(--c-secondary);
}

.visa-substeps {
  counter-reset: substep;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.visa-substeps li {
  position: relative;
  padding-left: 30px;
  font: 400 18px/27px var(--font-text);
  color: var(--c-text);
}
.visa-substeps li::before {
  counter-increment: substep;
  content: counter(substep) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: var(--c-accent);
}

/* Кнопка «Посмотреть список документов» */
.visa-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 32px;
  border-radius: var(--r-8);
  background: var(--c-accent);
  color: #fff;
  font: 500 16px/1 var(--font-text);
  transition: background .2s;
}
.visa-btn:hover { background: #a82f16; }
.visa-btn .icon { transition: transform .2s; }
.visa-btn:hover .icon { transform: translateX(4px); }

/* Оранжевый callout (предупреждение) */
.visa-callout {
  padding: 24px 34px;
  border-left: 3px solid var(--c-accent);
  background: rgba(196, 58, 30, .06);
  border-radius: 0 var(--r-12) var(--r-12) 0;
  font: 400 18px/27px var(--font-text);
  color: var(--c-secondary);
}

/* ---------- При обращении в консульское учреждение ---------- */
.visa-consular {
  margin-top: 120px;
  margin-bottom: 152px;
}
.visa-consular__title {
  max-width: 1100px;
  font: 400 58px/64px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.visa-docs {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 48px;
}
.visa-doc {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 28px 32px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-16);
}
.visa-doc__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-12);
  background: var(--c-accent);
  color: #fff;
}
.visa-doc p {
  font: 400 18px/27px var(--font-text);
  color: var(--c-text);
}
.visa-doc a { color: var(--c-accent); text-decoration: underline; }
.visa-doc a:hover { text-decoration: none; }
.visa-note-foot {
  margin-top: 40px;
  font: 400 15px/24px var(--font-text);
  color: var(--c-secondary);
  opacity: .7;
}

/* ==========================================================================
   ≤1440 — исходный макет 1-в-1.
   ========================================================================== */
@media (max-width: 1919px) {
  .visa-list li { padding-left: 30px; font-size: 16px; line-height: 24px; }
  .visa-list li::before { top: 8px; width: 9px; height: 9px; }

  .visa-cases { gap: 32px; margin-top: 64px; }
  .visa-case { padding: 40px 44px; }
  .visa-case__title { font-size: 24px; line-height: 30px; }
  .visa-case__sub { margin-top: 14px; margin-bottom: 24px; font-size: 15px; line-height: 22px; }


  .visa-choose { margin-top: 96px; }
  .visa-choose__title { font-size: 44px; line-height: 50px; }
  .visa-choose__lead { margin-top: 16px; font-size: 18px; line-height: 28px; }

  .visa-block { margin-top: 40px; }
  .visa-block__head { gap: 40px; padding: 44px; }
  .visa-block__title { max-width: 720px; font-size: 32px; line-height: 40px; }
  .visa-block__note { max-width: 240px; font-size: 16px; line-height: 24px; }
  .visa-block__body { gap: 36px; padding: 44px; }

  .visa-label { font-size: 14px; }
  .visa-text { font-size: 16px; line-height: 24px; }
  .visa-bullets li { padding-left: 24px; font-size: 16px; line-height: 24px; }
  .visa-bullets li::before { top: 9px; }

  .visa-step { gap: 24px; padding: 32px; }
  .visa-step__num { width: 40px; height: 40px; font-size: 18px; }
  .visa-step__title { font-size: 24px; line-height: 30px; }
  .visa-step__text { font-size: 16px; line-height: 24px; }
  .visa-note { padding: 18px 20px; }
  .visa-note p { font-size: 16px; line-height: 24px; }
  .visa-substeps li { padding-left: 28px; font-size: 16px; line-height: 24px; }

  .visa-callout { padding: 20px 28px; font-size: 16px; line-height: 24px; }
  .visa-btn { height: 52px; padding: 0 28px; }

  .visa-consular { margin-top: 96px; margin-bottom: 120px; }
  .visa-consular__title { font-size: 44px; line-height: 50px; }
  .visa-docs { gap: 16px; margin-top: 40px; }
  .visa-doc { gap: 20px; padding: 24px 28px; }
  .visa-doc__icon { width: 44px; height: 44px; }
  .visa-doc p { font-size: 16px; line-height: 24px; }
  .visa-note-foot { margin-top: 32px; font-size: 14px; line-height: 20px; }
}

/* ==========================================================================
   ≤768 — планшет.
   ========================================================================== */
@media (max-width: 1023px) {
  .visa-cases { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
  .visa-case { padding: 32px; }
  .visa-case__title { font-size: 24px; line-height: 30px; }


  .visa-choose { margin-top: 72px; }
  .visa-choose__title { font-size: 36px; line-height: 42px; }

  .visa-block__head { flex-direction: column; gap: 16px; padding: 32px; }
  .visa-block__title { font-size: 28px; line-height: 34px; }
  .visa-block__note { text-align: left; max-width: none; padding-top: 0; }
  .visa-block__body { gap: 32px; padding: 32px; }

  .visa-step { padding: 28px; }

  .visa-consular { margin-top: 72px; margin-bottom: 80px; }
  .visa-consular__title { font-size: 36px; line-height: 42px; }
}

/* ==========================================================================
   ≤360 — узкая мобила.
   ========================================================================== */
@media (max-width: 767px) {
  /* Заголовок героя — всегда в 2 строки («Визовая / поддержка»): однострочный
     на ширинах ~420–540 налезал на тёмный свиток в правой части картинки и
     терялся на нём. min-content = ширина самого длинного слова. */
  .arr-hero--light .arr-hero__title { max-width: min-content; }

  .visa-cases { margin-top: 36px; }
  .visa-case { padding: 24px 20px; }
  .visa-case__title { font-size: 20px; line-height: 26px; }
  .visa-list li { font-size: 16px; }


  .visa-choose { margin-top: 56px; }
  .visa-choose__title { font-size: 28px; line-height: 32px; }
  .visa-choose__lead { font-size: 16px; line-height: 24px; }

  .visa-block { margin-top: 32px; }
  .visa-block__head { padding: 24px 20px; }
  .visa-block__title { font-size: 22px; line-height: 28px; }
  .visa-block__body { gap: 28px; padding: 24px 20px; }
  .visa-text { font-size: 16px; line-height: 24px; }
  .visa-bullets li { font-size: 16px; }

  .visa-step { flex-direction: column; gap: 16px; padding: 22px 20px; }
  .visa-step__num { width: 36px; height: 36px; font-size: 16px; }
  .visa-step__title { font-size: 20px; line-height: 26px; }

  .visa-callout { padding: 16px 18px; }
  .visa-note { padding: 16px 18px; gap: 12px; }
  .visa-btn { width: 100%; justify-content: center; }

  .visa-consular { margin-top: 56px; margin-bottom: 56px; }
  .visa-consular__title { font-size: 28px; line-height: 32px; }
  .visa-doc { gap: 16px; padding: 20px; }
  .visa-doc__icon { width: 40px; height: 40px; }
}

/* === sections/booking.css === */
/* ==========================================================================
   booking.css — страница «Бронирование гостиниц» (раздел «Участникам»).
   Figma 2149:135502. База 1920. Hero — из arrival.css (тёмный). Токены base.css.
   Лесенка брейкпоинтов проекта: 1920 (база) / 1440 / 768 / 360.
   ========================================================================== */

/* ---------- Двухколоночный блок: тёмная карточка + светлый callout ---------- */
.booking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
  margin-top: 88px;
}

/* Тёмная карточка «Проживание» */
.booking-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 40px 48px;
  border-radius: var(--r-24);
  background: var(--c-dark);
  color: #fff;
}
.booking-card__text {
  max-width: 640px;
  font: 400 18px/28px var(--font-text);
  color: #fff;
}
.booking-card__note {
  max-width: 480px;
  font: 400 12px/20px var(--font-text);
  color: var(--c-bg);
}
.booking-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  margin-top: auto;
  padding: 0 32px;
  border-radius: var(--r-8);
  background: var(--c-accent);
  color: #fff;
  font: 500 16px/1 var(--font-text);
  transition: background-color .2s ease;
}
.booking-card__btn:hover { background: #a82f16; }
.booking-card__btn .icon { transition: transform .2s ease; }
.booking-card__btn:hover .icon { transform: translateX(4px); }

/* Светлый callout «Ограниченные квоты» (визуально как visa-note) */
.booking-note {
  display: flex;
  gap: 16px;
  padding: 40px 44px;
  border-radius: var(--r-24);
  background: rgba(196, 58, 30, .06);
}
.booking-note__icon { flex: none; margin-top: 2px; color: var(--c-accent); }
.booking-note__body { display: flex; flex-direction: column; gap: 16px; }
.booking-note__title {
  font: 400 20px/28px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.booking-note__body p {
  font: 400 16px/24px var(--font-text);
  color: var(--c-secondary);
}

/* ---------- Блок «Контакты» (тёмная карточка с фоновым коллажем) ---------- */
.booking-contacts {
  position: relative;
  margin-top: 32px;
  margin-bottom: 152px;
  border-radius: var(--r-24);
  overflow: hidden;
  background: var(--c-dark);
  isolation: isolate;
}
.booking-contacts__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.booking-contacts__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
}
.booking-contacts__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 48px 56px;
  color: #fff;
}
.booking-contacts__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.booking-contacts__phone {
  font: 400 32px/40px var(--font-display);
  color: var(--c-bg);
  transition: opacity .2s ease;
}
.booking-contacts__phone:hover { opacity: .85; }
.booking-contacts__email {
  font: 400 18px/26px var(--font-text);
  color: var(--c-accent);
  text-decoration: none;
  transition: opacity .2s ease;
  width: fit-content;
}
.booking-contacts__email:hover { opacity: .8; }

/* ==========================================================================
   ≤1440
   ========================================================================== */
@media (max-width: 1919px) {
  .booking-grid { gap: 24px; margin-top: 64px; }
  .booking-card { padding: 36px 40px; }
  .booking-card__text { font-size: 17px; line-height: 26px; }
  .booking-note { padding: 32px 36px; }
  .booking-contacts { margin-bottom: 120px; }
  .booking-contacts__inner { padding: 40px 44px; }
  .booking-contacts__phone { font-size: 28px; line-height: 34px; }
}

/* ==========================================================================
   ≤768 — стек в одну колонку
   ========================================================================== */
@media (max-width: 1023px) {
  .booking-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
  .booking-card { padding: 32px; }
  .booking-note { padding: 28px 32px; }
  .booking-contacts { margin-top: 24px; margin-bottom: 80px; }
  .booking-contacts__inner { padding: 32px; }
}

/* ==========================================================================
   ≤360
   ========================================================================== */
@media (max-width: 767px) {
  .booking-grid { margin-top: 36px; }
  .booking-card { padding: 24px 20px; gap: 20px; }
  .booking-card__text { font-size: 16px; line-height: 24px; }
  .booking-card__btn { width: 100%; justify-content: center; }
  .booking-note { padding: 22px 20px; gap: 12px; }
  .booking-contacts { margin-bottom: 56px; }
  .booking-contacts__inner { padding: 24px 20px; }
  .booking-contacts__phone { font-size: 24px; line-height: 30px; }
  .booking-contacts__email { font-size: 16px; line-height: 24px; }
}

/* === sections/mobapp.css === */
/* ==========================================================================
   mobapp.css — страница «Мобильное приложение Roscongress» (раздел «Участникам»).
   Figma 2149:136888. База 1920. Токены base.css. Переиспользует:
   arrival.css (arr-hero, crumbs), visa.css (visa-case/list/block/group/label/
   bullets/callout). Собственные блоки: download-карточка, преимущества (2×2),
   сервис-карточка. Брейкпоинты проекта: 1920 / 1440(≤1919) / 768(≤1023) / 360(≤767).
   ========================================================================== */

/* ---------- Hero: заголовок 56/64 (по Figma, меньше стандартных 84) ---------- */
.arr-hero--app .arr-hero__title {
  margin-top: 30px;
  font: 400 56px/64px var(--font-display);
}
/* диагональная шторка снизу-слева (Figma linear-gradient 62.7°) */
.arr-hero--app .arr-hero__shade {
  background: linear-gradient(62.7deg,
      rgb(9, 30, 37) 4%,
      rgba(9, 30, 37, .45) 25%,
      rgba(9, 30, 37, .05) 55%);
}

/* ==========================================================================
   Download-карточка «Скачайте мобильное приложение»
   ========================================================================== */
.mobapp-dl { margin-top: 80px; }
.mobapp-dl__card {
  position: relative;
  overflow: hidden;
  min-height: 350px;
  padding: 40px;
  border-radius: var(--r-24);
  background: var(--c-dark);
  isolation: isolate;
}
.mobapp-dl__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.mobapp-dl__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}
/* скрим — прозрачный на десктопе, затемняет на мобиле для читаемости */
.mobapp-dl__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  pointer-events: none;
}
.mobapp-dl__grid {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 64px;
  height: 100%;
  min-height: 270px;
}
.mobapp-dl__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 534px;
}
.mobapp-dl__title {
  font: 400 56px/64px var(--font-display);
  text-transform: uppercase;
  color: #fff;
}
.mobapp-dl__aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  max-width: 751px;
  /* Figma 2149:136922: текст-столбец кончается на x1725 из 1840 — до правого края
     ~115px (40 pad + 74). Без этого space-between прижимает текст к падингу 40. */
  margin-right: 74px;
}
.mobapp-dl__text {
  font: 400 18px/1.6 var(--font-text);
  color: #fff;
}
.mobapp-dl__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 56px;
  padding: 0 24px;
  border-radius: var(--r-8);
  background: var(--c-accent);
  color: #fff;
  font: 400 16px/1.6 var(--font-text);
  transition: background-color .2s ease;
}
.mobapp-dl__btn:hover { background: #a82f16; }
.mobapp-dl__btn .icon { transition: transform .2s ease; }
.mobapp-dl__btn:hover .icon { transform: translateX(4px); }

/* ==========================================================================
   Преимущества «Оставайтесь на связи» — 2×2 тёмные карточки
   ========================================================================== */
.mobapp-adv { margin-top: 80px; }
.mobapp-adv__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
  max-width: 817px;
}
.mobapp-adv__title {
  font: 400 40px/48px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.mobapp-adv__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.mobapp-adv__card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 33px 56px;
  border-radius: var(--r-24);
  background: var(--c-dark);
  border-top: 1px solid var(--c-line);
}
.mobapp-adv__card:nth-child(n+3) { border-bottom: 1px solid var(--c-line); }
.mobapp-adv__card--badges { justify-content: space-between; align-items: center; }
.mobapp-adv__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobapp-adv__name {
  font: 400 32px/40px var(--font-display);
  text-transform: uppercase;
  color: #fff;
}
.mobapp-adv__text {
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-bg);
}
.mobapp-adv__text a { color: var(--c-accent); text-decoration: underline; }
.mobapp-adv__text a:hover { text-decoration: none; }
.mobapp-adv__badges {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mobapp-adv__badges a { display: block; }
.mobapp-adv__badges img {
  display: block;
  width: 108px;
  height: 32px;
}

/* ==========================================================================
   Возможности приложения — 3 светлые visa-карточки + сервис-карточка
   ========================================================================== */
.mobapp-caps { margin-top: 80px; }
.mobapp-caps__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  max-width: 817px;
}
/* три колонки вместо двух у visa-cases */
.mobapp-caps .visa-cases {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 0;
}
/* Figma 2149:136994: заголовок y49+40, список y113 → отступ 24px. На prilozhenie
   у карточек нет visa-case__sub, поэтому спейсинг заголовок→список схлопывался в 0. */
.mobapp-caps .visa-case__title { margin-bottom: 24px; }

/* Широкая тёмная карточка «Сервисы для организации вашего участия» */
.mobapp-services {
  display: flex;
  gap: 73px;
  margin-top: 16px;
  padding: 64px;
  border-radius: var(--r-24);
  background: var(--c-dark);
}
.mobapp-services__title {
  flex: none;
  width: 539px;
  font: 400 40px/48px var(--font-display);
  text-transform: uppercase;
  color: #fff;
}
.mobapp-services__cols {
  flex: 1;
  display: flex;
  gap: 138px;
}
.mobapp-services__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mobapp-services__col li {
  position: relative;
  padding-left: 34px;
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-bg);
}
.mobapp-services__col li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 10px;
  height: 10px;
  background: var(--c-accent);
  transform: rotate(45deg);
}

/* два примечания под списком идут плотнее (gap 8), чем блоки body (gap 44) */
.mobapp-meet__notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- визуальные правки visa-block под эту страницу ---------- */
.mobapp-page .visa-block { margin-top: 80px; }
.mobapp-page .visa-block:last-of-type { margin-bottom: 120px; }

/* ==========================================================================
   Блок скачивания — переход 2-колонка → стек
   Порог 1799, а НЕ 1919: 2-колонка (как в макете 1920) держится, пока текст-
   столбец не начинает наезжать на телефон в коллаже. При aside 751 + отступах
   это ~1745, ставим 1799 с запасом. Отдельный медиазапрос (не в общем @1919),
   иначе на мониторе 1920 вьюпорт ~1905 попадал в стек — коллаж затемнялся и
   заголовок с текстом сваливались в столбец («блок скукурузился»). См. память
   breakpoint-1919-reality. Ниже 1799 — стек с затемнением коллажа под текст.
   ========================================================================== */
@media (max-width: 1799px) {
  .mobapp-dl__card { padding: 36px; min-height: 0; }
  .mobapp-dl__card::before {
    background: linear-gradient(180deg, rgba(9, 30, 37, .6), rgba(9, 30, 37, .82));
  }
  .mobapp-dl__grid { flex-direction: column; justify-content: flex-start; gap: 28px; min-height: 0; }
  .mobapp-dl__head, .mobapp-dl__aside { max-width: none; margin-right: 0; }
  .mobapp-dl__aside { gap: 24px; }
  .mobapp-dl__title { font-size: 44px; line-height: 50px; }
  .mobapp-dl__text { font-size: 17px; max-width: 900px; }
}

/* ==========================================================================
   ≤1440
   ========================================================================== */
@media (max-width: 1919px) {
  .arr-hero--app .arr-hero__title { margin-top: 22px; font-size: 44px; line-height: 50px; }

  .mobapp-dl { margin-top: 64px; }

  .mobapp-adv { margin-top: 64px; }
  .mobapp-adv__head { margin-bottom: 40px; }
  .mobapp-adv__title { font-size: 32px; line-height: 40px; }
  .mobapp-adv__card { padding: 28px 40px; }
  .mobapp-adv__name { font-size: 28px; line-height: 34px; }

  .mobapp-caps { margin-top: 64px; }
  .mobapp-services { margin-top: 16px; gap: 48px; padding: 48px; }
  .mobapp-services__title { width: 420px; font-size: 32px; line-height: 40px; }
  .mobapp-services__cols { gap: 64px; }

  .mobapp-page .visa-block { margin-top: 64px; }
  .mobapp-page .visa-block:last-of-type { margin-bottom: 100px; }
}

/* ==========================================================================
   ≤768
   ========================================================================== */
@media (max-width: 1023px) {
  .arr-hero--app .arr-hero__title { margin-top: 16px; font-size: 34px; line-height: 40px; }

  .mobapp-dl { margin-top: 48px; }
  .mobapp-dl__card { padding: 32px; }
  /* коллаж уводим в фон и затемняем, контент — в колонку */
  .mobapp-dl__card::before {
    background: linear-gradient(180deg, rgba(9, 30, 37, .55), rgba(9, 30, 37, .82));
  }
  .mobapp-dl__grid { flex-direction: column; gap: 32px; min-height: 0; }
  .mobapp-dl__head, .mobapp-dl__aside { max-width: none; }
  .mobapp-dl__title { font-size: 36px; line-height: 42px; }

  .mobapp-adv { margin-top: 48px; }
  .mobapp-adv__head { margin-bottom: 32px; }
  .mobapp-adv__title { font-size: 28px; line-height: 34px; }
  .mobapp-adv__grid { grid-template-columns: 1fr; }
  .mobapp-adv__card:nth-child(n+3) { border-bottom: none; }
  .mobapp-adv__card { padding: 28px 32px; }

  .mobapp-caps { margin-top: 48px; }
  .mobapp-caps .visa-cases { grid-template-columns: 1fr; gap: 20px; }
  .mobapp-services { flex-direction: column; gap: 28px; margin-top: 20px; padding: 40px; }
  .mobapp-services__title { width: auto; font-size: 28px; line-height: 34px; }
  .mobapp-services__cols { gap: 40px; }

  .mobapp-page .visa-block { margin-top: 48px; }
  .mobapp-page .visa-block:last-of-type { margin-bottom: 80px; }
}

/* ==========================================================================
   ≤360
   ========================================================================== */
@media (max-width: 767px) {
  .arr-hero--app .arr-hero__title { margin-top: 12px; font-size: 26px; line-height: 30px; }

  .mobapp-dl { margin-top: 40px; }
  .mobapp-dl__card { padding: 24px 20px; }
  .mobapp-dl__grid { gap: 24px; }
  .mobapp-dl__title { font-size: 28px; line-height: 32px; }
  .mobapp-dl__text { font-size: 16px; }
  .mobapp-dl__btn { width: 100%; }

  .mobapp-adv { margin-top: 40px; }
  .mobapp-adv__title { font-size: 24px; line-height: 30px; }
  .mobapp-adv__card { padding: 24px 20px; gap: 20px; }
  .mobapp-adv__card--badges { flex-direction: column; align-items: flex-start; }   /* столбиком — тело/бейджи по левому краю */
  .mobapp-adv__name { font-size: 24px; line-height: 30px; }

  .mobapp-caps { margin-top: 40px; }
  .mobapp-services { gap: 24px; padding: 24px 20px; }
  .mobapp-services__title { font-size: 24px; line-height: 30px; }
  .mobapp-services__cols { flex-direction: column; gap: 16px; }

  .mobapp-page .visa-block { margin-top: 40px; }
  .mobapp-page .visa-block:last-of-type { margin-bottom: 56px; }
}

/* === sections/page-tabs.css === */
/* ==========================================================================
   page-tabs.css — таб-меню раздела («TUB Buttons», Figma 2205:85843).
   Спец-меню страницы: пилюли-переключатели в карточке-обёртке.
   ≤767 — аккордеон (Figma 2205:85064 закрыт / 2205:85115 открыт):
   красная шапка с активным пунктом + список, контент страницы при
   раскрытии съезжает вниз (список в потоке, не оверлей).
   ========================================================================== */

/* Карточка-обёртка (Figma: bg Akaroa 20%, бордер c-line, радиус 24) */
.ptabs {
  margin: 24px 0 0; /* авторский отступ от крошек (в макете меню сразу под шапкой) */
  padding: 32px 40px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-24);
  background: rgba(214, 191, 163, 0.2); /* Akaroa 20% (2205:85843) */
}

/* Мобильная шапка-аккордеон — на десктопе скрыта */
.ptabs__toggle { display: none; }

.ptabs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

/* Пилюля (TUB Buttons: 12/20 Inter Tight, радиус 8, паддинг 8/16) */
.ptabs__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--c-btn-gray);
  border-radius: 8px;
  background: none;
  font: 400 12px/20px var(--font-text);
  color: var(--c-btn-gray);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ptabs__tab:hover { border-color: var(--c-accent); color: var(--c-accent); } /* авторский hover */
.ptabs__tab.is-active {
  border-color: var(--c-accent); /* в Figma актив без рамки; рамка в цвет фона — чтобы высоты пилюль совпадали */
  background: var(--c-accent);
  color: #fff;
}
.ptabs__tab.is-active:hover { color: #fff; }

/* Вариант «перетекает в hero» (Figma 2205:84995, стр. Бронирование гостиниц):
   скругление только сверху, pb 73, баннер наезжает на низ карточки на 50px
   (нижняя кромка прячется под hero, ширины совпадают — контейнер). */
.ptabs--flow {
  border-radius: var(--r-24) var(--r-24) 0 0;
  border-bottom: 0;
  padding-bottom: 73px;
  margin-bottom: -50px;
}
.ptabs--flow + .arr-hero { margin-top: 0; } /* наезд ровно 50 (у hero свой mt 28) */

/* Во всю ширину окна: в макетах полоса --flow (article) и следующий за ней hero
   идут x=0 w=1920, контентные секции ниже — в контейнере. Страницы со своим
   скоупом (.acc/.prog/.pnr/.mnt/.uch) гасят gutter у себя; страницам без своего
   CSS-скоупа (Гостиницы/Прибытие/Виза) вешаем класс .bleed-flow на <main>.
   На ≤767 — назад в контейнер (мобильный блок ниже). */
.bleed-flow .ptabs--flow,
.bleed-flow .ptabs--flow + .arr-hero {
  margin-inline: calc(var(--gutter) * -1);
}

/* ---------- @767 — мобилка: аккордеон ---------- */
@media (max-width: 767px) {
  .ptabs {
    margin-top: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  /* Открытое состояние — панель Almond Card (Figma 2205:85115).
     Правка 14.08.2026 (п.10): паддинг 60 снизу оставлял «пустую полосу» под
     последним пунктом, а срезанные нижние углы выглядели незавершённо —
     панель теперь компактная и скруглена со всех сторон. Вариант --flow
     (перетекание в hero) держит свои pb 60 / скругление сверху ниже. */
  .ptabs.is-open {
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), var(--c-bg);
    border-radius: 24px;
    padding-bottom: 16px;
  }

  /* Красная шапка = активный пункт + шеврон (Figma 2205:85064) */
  .ptabs__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 16px;
    border: 0;
    border-radius: 8px;
    background: var(--c-accent);
    font: 400 12px/20px var(--font-text);
    color: #fff;
    text-align: left;
    cursor: pointer;
  }
  .ptabs__chev { flex: none; transition: transform 0.25s ease; }
  .ptabs.is-open .ptabs__chev { transform: rotate(180deg); }
  /* Раздел с единственным пунктом (is-single ставит page-tabs.js, ОШ-11):
     раскрывать нечего — прячем шеврон, курсор обычный */
  .ptabs.is-single .ptabs__chev { display: none; }
  .ptabs.is-single .ptabs__toggle { cursor: default; }

  /* Список: столбец без рамок, зазор до шапки 2px (gap/2 в макете) */
  .ptabs__list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 2px;
  }
  .ptabs.is-open .ptabs__list { display: flex; }

  .ptabs__tab {
    justify-content: flex-start;
    border: 0;
    padding: 8px 16px;
    color: var(--c-secondary);
    white-space: normal;
  }
  .ptabs__tab:hover { color: var(--c-accent); }
  /* Активный пункт вынесен в шапку — в списке не дублируется (как в 2205:85115) */
  .ptabs__tab.is-active { display: none; }

  /* «Перетекание» в hero на мобилке (Figma 2205:85109): закрытый тоггл —
     обычный зазор до баннера; открытая панель прячет низ (pb 60) под hero
     на 40px — видимый просвет от последнего пункта до баннера ~20px,
     без «пустой полосы» между списком и hero. */
  .ptabs--flow { margin-bottom: 0; padding-bottom: 0; }
  .ptabs--flow.is-open { padding-bottom: 60px; margin-bottom: -40px; border-radius: 24px 24px 0 0; }
  .ptabs--flow + .arr-hero { margin-top: 28px; }
  .ptabs--flow.is-open + .arr-hero { margin-top: 0; }

  /* мобилка — полоса и баннер назад в контейнер (full-bleed только десктоп/планшет) */
  .bleed-flow .ptabs--flow,
  .bleed-flow .ptabs--flow + .arr-hero { margin-inline: 0; }
}

/* === sections/about-page.css === */
/* ==========================================================================
   about-page.css — страница «О Форуме» (o-forume.html). БАЗА 1920.
   Figma EBZFdmKspCpXqt3urZ1y1p, фрейм 2195:139289. Токены base.css.
   Ступени адаптива: @1919 (=1440) → @1023 (=768) → @767 (=360).
   Namespace .af-*.
   ========================================================================== */

/* GEN:NEUTRALIZE BEGIN — генерируется _build/scope_neutralize.py, руками не править */
/* источник утечек: arrival.css .crumbs -> .af-page */
.af-page .crumbs a { opacity: initial; }
.af-page .crumbs a:hover { opacity: initial; }
.af-page .crumbs b { opacity: initial; }
.af-page .crumbs span { opacity: initial; }
.af-page .crumbs { flex-wrap: initial; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; margin-top: initial; }
/* GEN:NEUTRALIZE END */

.af-page { padding-top: 0; padding-bottom: 0; }

/* Общий вертикальный ритм секций: 80px между блоками (Figma) */
.af-page > section { margin-top: 80px; }
.crumbs + .af-hero { margin-top: 0; }
/* Футер идёт сразу за контентом; зазор contacts→footer ровно 80 (Figma 5627→5707).
   Переопределяет глобальный .footer{margin-top:120} только на этой странице. */
.af-page + .footer { margin-top: 80px; }

/* Кегль рубрик — глобальные 16 из base.css. Ревизия макета 04.08 давала 18
   (2624:41901/42090/42199 h=29), но дизайнер завернул: «кегль шрифта у рубрик
   стоит больше, чем нужно» (правка 17.08.26). Скоупного переопределения больше
   нет — вместе с ним ушел и мобильный откат на 16. */

/* ==========================================================================
   Хлебные крошки. Полоса: pt 24 / pb 32, горизонт. отступ даёт .container
   (40 → 16 на ≤767). Флаги стран-участниц убраны по правке дизайнера 03.08.26.
   ========================================================================== */
/* Модель у страницы своя (полоса с паддингами, цвет вместо opacity), канон
   arrival.css другой — уводим под скоуп страницы: после склейки в один
   main.css канон грузится и здесь. Что он задаёт, а этот форк нет, —
   гасит блок GEN:NEUTRALIZE выше. */
.af-page .crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 0 32px;
  line-height: 20px; /* полоса 24+20+32=76 (Figma 2195:139291 h=76) */
  color: var(--c-btn-gray); /* Limed Spruce #415358 — приглушённые крошки (Figma) */
}
.af-page .crumbs a { color: inherit; transition: color .2s; }
.af-page .crumbs a:hover { color: var(--c-text); }
.af-page .crumbs b { font-weight: 400; color: var(--c-text); } /* активная крошка — Daintree */

/* ==========================================================================
   Таб-меню раздела (Figma 2474:76472). Полоса идёт во всю ширину окна сразу
   под крошками, скругление только сверху — hero начинается от её нижней кромки.
   Сам компонент — общий .ptabs (page-tabs.css), здесь только привязка к странице.
   ========================================================================== */
.af-page .ptabs {
  margin: 0;
  margin-inline: calc(var(--gutter) * -1);
  border-radius: var(--r-24) var(--r-24) 0 0;
}
.af-page .ptabs + .af-hero { margin-top: 0; }

/* ==========================================================================
   HERO (2195:139293)
   ========================================================================== */
.af-hero {
  position: relative;
  padding-top: 48px;
  min-height: 635px; /* Figma hero 2195:139293 h=635 */
}
.af-hero__main {
  position: relative;
  z-index: 2;
  width: 870px;
  max-width: 870px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.af-hero__badges {
  display: flex;
  gap: 20px;
  align-items: stretch;
}
.af-hero__date,
.af-hero__title-box {
  background: var(--c-bg);
  border: 1px solid rgba(1, 31, 39, 0.2); /* Figma Daintree 20% */
  border-radius: var(--r-8);
}
.af-hero__date {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 13px 9px;
}
.af-hero__date-num {
  font: 400 48px/56px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.af-hero__date-dash {
  width: 67px;
  height: 12px;
  color: var(--c-accent);
  fill: currentColor;
  opacity: 0.2;
}
.af-hero__date-when {
  font: 400 14px/20px var(--font-text);
  text-align: center;
  color: var(--c-text);
}
.af-hero__title-box {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 17px 17px 13px;
}
.af-hero__title {
  margin: 0;
  min-width: 0; /* флекс-потомок: без этого min-width:auto держит ширину по самому
                   длинному слову и заголовок вылезает за рамку бокса на узких */
  font: 400 48px/56px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.af-hero__lead {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 862px;
}
.af-hero__lead p {
  /* правка 14.08.2026 (п.5): основной набор страницы единый — 16/1.6, как у карточек
     «Как принять участие», площадок и контактов (было 18/24, разнобой с 18/28 у фестиваля) */
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-text);
}
.af-hero__kv {
  position: absolute;
  right: 0;
  top: -6px;
  width: 769px;
  z-index: 1;
  pointer-events: none;
}
.af-hero__kv img {
  display: block;
  width: 100%;
  aspect-ratio: 769 / 651; /* точный аспект KV по Figma 2195:139294 (769×651) */
  height: auto;
  object-fit: cover;
}

/* ==========================================================================
   ПРОГРАММА (Figma 2624:41881, ревизия 04.08) — светлая плашка «Программа
   Форума» с запеченным коллажем + сетка 10 тематических секций + плашка
   фестиваля. Правые декоры обеих плашек — единые webp-кропы из макета
   (коллаж + кольца + градиент), в кропе уже запечен подмес фона карточки.
   ========================================================================== */
.af-program { display: flex; flex-direction: column; gap: 48px; }

/* плашка (2624:41894): pl 57 / остальные 33, радиус 24 */
.af-program__band {
  position: relative;
  overflow: clip;
  padding: 33px 33px 33px 57px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-24);
  background: rgba(255, 255, 255, 0.5);
}
/* коллаж прижат к правой кромке, тянется на всю высоту плашки; его левый
   край запечен в цвет фона карточки — при росте высоты шов не виден */
.af-program__collage {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  z-index: 0;
  pointer-events: none;
}
/* Коллаж тянется по высоте плашки, а она ниже 1920 растет от переносов текста —
   картинка ползла влево и наезжала на лид (на 1200 текст не читался). Гасим её
   под текстом тем же приемом, что и сам макет: вуалью цвета карточки (там это
   запеченный в кроп Rectangle 19). Сплошная до правого края лида (57 + 758 =
   815), растворяется к 855 — а на 1905/1920 коллаж начинается на 861/879, то
   есть вуаль до него не достает и десктоп остается ровно макетным. */
.af-program__band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit; /* иначе прямой угол вуали ложится на скругление плашки */
  background: linear-gradient(90deg, #f8eee2 0 815px, rgba(248, 238, 226, 0) 855px);
  pointer-events: none;
}
.af-program__intro { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; }
.af-program__title {
  margin: 16px 0 0;
  font: 400 40px/48px var(--font-display); /* 2624:41902: макет 1920 с 1440-ными кеглями */
  text-transform: uppercase;
  color: var(--c-text);
}
.af-program__lead {
  margin: 24px 0 0;
  max-width: 758px; /* 2624:41903 */
  font: 400 16px/1.6 var(--font-text); /* правка 14.08.2026 (п.5): единый основной набор */
  color: var(--c-text);
}
.af-program__actions { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; }

/* сетка секций (2624:41919): плитки 362×180, зазор 8; лейбл над сеткой на 32 */
.af-program__secs { display: flex; flex-direction: column; gap: 8px; }
.af-program__secs > .section-label { margin-bottom: 24px; } /* 8 (gap) + 24 = макетные 32 */
.af-secs {
  display: grid;
  /* правка 14.08.2026 (п.2): ровно 5 в ряд — 10 плиток дают два ряда без «хвоста».
     Прежний auto-fill/minmax(320) на промежуточных ширинах собирал 4 колонки,
     и появлялся третий ряд из двух плиток с пустотой. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.af-sec {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
  min-height: 180px;
  padding: 33px 31px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-24);
  background: rgba(255, 255, 255, 0.5);
  color: var(--c-text);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* Ховер (2624:41970): плитка не просто краснеет — коробка вырастает с 361×180 до
   381×196 вокруг того же центра и наезжает на соседей. Содержимое при этом НЕ
   масштабируется: в макете иконка и текст тех же размеров, сместились ровно на
   половину прироста (+10 / +8). Поэтому не transform: scale (он тянул бы текст и
   давал неравномерные 1.055 × 1.089), а подложка-псевдоэлемент с отрицательными
   инсетами: размер точный, сетка не пересчитывается, соседи не съезжают. */
.af-sec::before {
  content: "";
  position: absolute;
  inset: -8px -10px;
  border-radius: var(--r-24);
  background: var(--c-accent);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.af-sec:hover::before { opacity: 1; }
/* ::before — позиционированный потомок, он бы лег поверх строчного содержимого */
.af-sec__ic, .af-sec__txt, .af-sec__arrow { position: relative; z-index: 1; }
.af-sec:hover { z-index: 2; background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
/* иконка не наследует цвет текста: в макете (2624:41921) она бежевая #bfb099,
   и только на красной плитке становится белой (2624:41936) */
/* красим через color, а не fill: у <symbol> в спрайте страницы стоит
   presentation-атрибут fill="currentColor", он перебивает fill, заданный на <svg> */
.af-sec__ic { flex: none; width: 48px; height: 48px; color: var(--c-line); fill: currentColor; transition: color 0.2s ease; }
.af-sec:hover .af-sec__ic { color: #fff; }
.af-sec__txt { flex: 1; min-width: 0; font: 400 16px/1.6 var(--font-text); }
.af-sec__arrow { flex: none; } /* i-arrow — stroke currentColor */

/* фестиваль (2624:41976): та же плашка, коллаж узкой полосой справа */
.af-fest {
  position: relative;
  overflow: clip;
  padding: 33px 33px 33px 57px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-24);
  background: rgba(255, 255, 255, 0.5);
}
/* арт-слой (2801:33883): коллаж кругов прижат к правому-нижнему углу,
   Медный всадник (382×387 на 1920, низ режется overflow плашки) поверх;
   между ними — растворение левого края коллажа (2801:33884).
   Слой тянется на всю высоту плашки (как старый коллаж), геометрия детей
   в процентах от бокса 675×258 — на подросшей плашке (перенос текста
   на ≤~1500) всё масштабируется пропорционально, вуаль ::before гасит
   наезд на текст */
.af-fest__art {
  position: absolute;
  right: 0;
  bottom: -1px;
  z-index: 0;
  width: 675px;
  height: 258px;
  pointer-events: none;
}
.af-fest__art-collage { position: absolute; inset: 0; width: 100%; height: 100%; }
.af-fest__art::after {
  content: "";
  position: absolute;
  top: 0;
  left: 19.111%;
  width: 16%;
  height: 100%;
  background: linear-gradient(90deg, #f7ede2, rgba(240, 220, 197, 0));
}
.af-fest__art-horse { position: absolute; left: 0; top: 1.938%; z-index: 1; width: 56.593%; height: 150%; }
/* та же вуаль, что у плашки программы: сплошная до правого края заголовка
   (57 + 895 = 952), растворяется к 1032; коллаж на 1905/1920 начинается на
   1049/1064 — десктоп не задет */
.af-fest::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(90deg, #f8eee2 0 952px, rgba(248, 238, 226, 0) 1032px);
  pointer-events: none;
}
.af-fest__inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; }
.af-fest__title {
  margin: 0;
  max-width: 895px;
  font: 400 32px/40px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.af-fest__text {
  margin: 8px 0 0;
  /* первая строка макета при ките 18px занимает ~653px (в макете слой Arial 17.4/28 —
     нормализовано к киту): 670 держит её целиком, чтобы текст лежал в 2 строки */
  max-width: 670px;
  font: 400 18px/28px var(--font-text);
  color: var(--c-text);
}
.af-fest__cta { margin-top: 32px; }

/* ==========================================================================
   КАК ПРИНЯТЬ УЧАСТИЕ (2195:139386) — 2 карточки
   ========================================================================== */
.af-take { display: flex; flex-direction: column; gap: 24px; }
/* ревизия 04.08 (2624:41997): левая светлая фикс 571, правая тёмная — остаток */
.af-take__grid {
  display: flex;
  gap: 40px;
  align-items: stretch;
}
.af-take__card--light { flex: 0 1 571px; min-width: 0; }
.af-take__card--dark { flex: 1; min-width: 0; }
.af-take__card {
  position: relative;
  overflow: clip;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 49px 57px;
  border-radius: var(--r-24);
}
.af-take__card--light {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--c-line);
}
.af-take__card--dark {
  background: var(--c-dark);
  border: 1px solid var(--c-dark);
  justify-content: space-between;
}
/* Текстура — готовый экспорт ноды 2624:42022 (1229×474 = ровно бокс карточки на
   1920, прозрачность уже запечена). Раньше кроп задавался процентами от бокса,
   а проценты по X и Y разные (310.09/320.8) — на любой другой пропорции карточки
   картинку тянуло (правка дизайнера 12.08.26 «фоновая картинка поплыла»).
   cover от левого-верхнего угла: на 1920 совпадает с макетом 1:1, ниже —
   подрезается по краю, но не искажается. */
.af-take__texture {
  position: absolute;
  inset: 0;
  background: url(../img/o-forume/take-texture.webp) left top / cover no-repeat;
  pointer-events: none;
}
.af-take__dark-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; }
.af-take__title {
  margin: 0;
  font: 400 32px/40px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.af-take__title--light { color: #fff; }
.af-take__body { display: flex; flex-direction: column; gap: 16px; font: 400 16px/1.6 var(--font-text); color: var(--c-text); }
.af-take__body--light { color: rgba(255, 255, 255, 0.75); } /* 2624:42026: white 75% */
.af-take__body--light a { color: var(--c-accent); }
.af-take__cta { align-self: flex-start; margin-top: auto; }
.af-take__card--dark .af-take__cta { position: relative; z-index: 1; }

/* ==========================================================================
   ОРГАНИЗАТОРЫ (2195:139425) — dark-soft карточка
   ========================================================================== */
.af-org {
  display: flex;
  align-items: center;
  gap: 115px;
  padding: 64px;
  border-radius: var(--r-32, 32px);
  background: var(--c-dark-soft);
}
.af-org__head { width: 817px; flex: none; display: flex; flex-direction: column; gap: 16px; }
.af-org__title {
  margin: 0;
  font: 400 32px/40px var(--font-display);
  text-transform: uppercase;
  color: #f0dcc5;
}
.af-org__text {
  flex: none;
  width: 633px; /* Figma 2474:76624 */
  font: 400 16px/1.6 var(--font-text);
  color: #f0dcc5;
}
/* .section-label--light .section-label__text { color: #fff } — дубль base.css,
   убран при развязке под бандл (base грузится раньше, значение то же). */
.af-org .section-label__text { color: #f0dcc5; }

/* ==========================================================================
   ПЛОЩАДКИ ФОРУМА (2195:139479)
   ========================================================================== */
.af-venue { display: flex; flex-direction: column; gap: 40px; }
.af-venue__grid {
  display: flex;
  gap: 32px;
  align-items: stretch;
  justify-content: space-between; /* Figma 2195:139487: колонки разнесены по краям */
}
.af-venue__list-card {
  flex: none;
  display: flex;
  gap: 12px;
  padding: 32px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-32, 32px);
  background: rgba(255, 255, 255, 0.5);
}
.af-venue__list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 415px;
}
/* Figma 2474:76681: список площадок — карточки-переключатели, неактивные
   приглушены до 50%; выбор меняет описание, карту и подпись на ней */
.af-venue__addrs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.af-venue__addr {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 18px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-8);
  background: #fff;
  opacity: 0.5;
  text-align: left;
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.af-venue__addr:hover { opacity: 0.8; }
.af-venue__addr.is-active { opacity: 1; cursor: default; }
/* иконка живет в колонке 20×43 (Figma 2474:76683) — верхняя строка + запас */
.af-venue__addr-ic { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--c-accent); }
.af-venue__addr-text { display: flex; flex-direction: column; }
.af-venue__addr-name { font: 400 16px/1.6 var(--font-text); color: var(--c-secondary); }
.af-venue__addr-line { font: 400 13px/28px var(--font-text); color: #8c8c8c; }
.af-venue__list-cta { margin-top: 20px; align-self: flex-start; }

.af-venue__descr {
  flex: none;
  width: 491px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 0;
}
.af-venue__descr-top { display: flex; flex-direction: column; gap: 24px; }
.af-venue__title { margin: 0; font: 400 32px/40px var(--font-display); text-transform: uppercase; color: var(--c-text); }
.af-venue__text { display: flex; flex-direction: column; gap: 16px; font: 400 16px/1.6 var(--font-text); color: var(--c-text); }
.af-venue__place { font-size: 18px; color: var(--c-accent); } /* Figma 2474:76708 */
.af-venue__descr-cta { align-self: flex-start; }

.af-venue__map {
  position: relative;
  flex: 0 1 678px; /* Figma 2624:42126: 678×430 */
  min-width: 0;
  align-self: stretch;
  min-height: 430px; /* ревизия 04.08: карта стала ниже (была 519) */
  overflow: clip;
  border: 1px solid var(--c-line);
  border-radius: var(--r-16);
  background:
    repeating-linear-gradient(45deg, rgba(9,30,37,.05) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-45deg, rgba(9,30,37,.05) 0 1px, transparent 1px 46px),
    #e7d8bf;
}
.af-venue__map-note {
  position: absolute;
  top: 20px;
  right: 24px;
  font: 400 12px/1 var(--font-text);
  letter-spacing: 1px;
  color: var(--c-accent);
  opacity: 0.75;
}
.af-venue__map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  width: 30px;
  height: 38px;
  background: var(--c-accent);
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
}
.af-venue__map-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  background: #fff;
  border-radius: 50%;
}
/* Figma 2474:76715: карточка-подпись у нижней кромки карты (17.5 слева, 18 снизу) */
.af-venue__map-tip {
  position: absolute;
  left: 18px;
  bottom: 18px;
  max-width: calc(100% - 36px);
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-8);
  background: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}
.af-venue__map-tip-name { font: 400 18px/1.6 var(--font-text); color: var(--c-secondary); }
.af-venue__map-tip-addr { font: 400 13px/28px var(--font-text); color: #8c8c8c; }

/* Живая Яндекс-карта (venue-map.js). Канва — первым ребёнком контейнера,
   оверлеи (note/tip) позиционированы и в DOM позже → рисуются поверх без
   z-index. Тонировка тайлов под беж макета; CSS-пин прячем — на карте свой
   Placemark тем же силуэтом. */
.af-venue__map-canvas {
  position: absolute;
  inset: 0;
  filter: saturate(0.5) sepia(0.18) brightness(1.03);
}
.af-venue__map.is-live .af-venue__map-pin { display: none; }
/* Промо-кнопки «Как добраться»/«Доехать на такси» (suppressMapOpenBlock их
   не убирает). Копирайт/логотип Яндекса не трогаем — требование условий API. */
.af-venue__map-canvas [class*="gotoymaps"],
.af-venue__map-canvas [class*="gototaxi"],
.af-venue__map-canvas [class*="copyrights-promo"] { display: none !important; }

/* ==========================================================================
   ИТОГИ (2195:139647)
   ========================================================================== */
.af-stats { display: flex; flex-direction: column; gap: 59px; }
.af-stats__head { display: flex; flex-direction: column; gap: 16px; }
.af-stats__title { margin: 0; font: 400 32px/40px var(--font-display); text-transform: uppercase; color: var(--c-text); }
/* Figma 2195:139655: justify-between, 4 числа w-383, разделители 1×122 отдельными элементами */
.af-stats__row { display: flex; align-items: flex-start; justify-content: space-between; }
.af-stat {
  flex: none;
  width: 383px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.af-stat__div { flex: none; width: 1px; height: 122px; background: var(--c-line); }
.af-stat__num { font: 400 72px/80px var(--font-display); text-transform: uppercase; color: #a82f16; }
.af-stat__label { font: 400 16px/1.6 var(--font-text); color: var(--c-text); }
.af-stats__foot { align-self: flex-end; font: 400 14px/20px var(--font-text); color: var(--c-btn-gray); opacity: 0.7; }

/* ==========================================================================
   ФОТОГАЛЕРЕЯ (2195:139672) — тёмная карточка
   ========================================================================== */
.af-photo {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 64px;
  border-radius: var(--r-32, 32px);
  background: var(--c-dark);
}
.af-photo__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.af-photo__intro { display: flex; flex-direction: column; gap: 16px; }
.af-photo__title { margin: 0; font: 400 32px/40px var(--font-display); text-transform: uppercase; color: #f0dcc5; }
.af-photo .section-label__text { color: #f0dcc5; }
.af-photo__actions { display: flex; gap: 8px; flex: none; }
/* «Программа 2025» (2195:139682): фон white/40% + opacity 0.8 (не 0.2 базового .btn--ghost) */
.af-photo .btn--ghost { background-color: rgba(255, 255, 255, 0.4); opacity: 0.8; }
.af-photo .btn--ghost:hover { opacity: 1; }
.af-photo__big { border-radius: var(--r-16); overflow: hidden; }
.af-photo__big img { width: 100%; height: 100%; object-fit: cover; }
.af-photo__small { border-radius: var(--r-16); overflow: hidden; }
.af-photo__small img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ревизия 04.08 (2624:42205): фото — готовые кропы-экспорты из макета
   (gallery-*.webp), точечные object-position больше не нужны.
   Высота фиксирована по большому фото: иначе малые фото при загрузке
   распирают 1fr-строки и секция растёт. */
.af-photo__grid {
  display: grid;
  grid-template-columns: 754px 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  height: 310px;
}
.af-photo__big { grid-column: 1; grid-row: 1 / 3; width: auto; height: 310px; }
.af-photo__small:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.af-photo__small:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.af-photo__small:nth-of-type(4) { grid-column: 2; grid-row: 2; }
.af-photo__small:nth-of-type(5) { grid-column: 3; grid-row: 2; }

/* ==========================================================================
   КОНТАКТЫ (Figma 2474:76797) — три ряда карточек:
   1) широкая тёмная (инфоцентр + чат-бот), 2) две тёмные (партнёры / СМИ),
   3) три светлые (сообщества / приложение / инфописьма)
   ========================================================================== */
.af-contacts { display: flex; flex-direction: column; gap: 24px; }
.af-contacts__title { margin: 0; font: 400 32px/40px var(--font-display); text-transform: uppercase; color: var(--c-text); }
/* шапка секции даёт свой зазор 16 (label→h2), ряды идут через 24 */
.af-contacts__row { display: flex; gap: 16px; align-items: stretch; }
.af-contacts__head { display: flex; flex-direction: column; gap: 16px; }
.af-contact {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 49px 57px;
  border-radius: var(--r-24);
  overflow: clip; /* коллажи-подложки режутся по кромке карточки */
}
.af-contact--dark { background: var(--c-dark); border: 1px solid var(--c-dark); }
.af-contact--light { background: rgba(255, 255, 255, 0.5); border: 1px solid var(--c-line); }
/* широкая карточка: две колонки — инфоцентр (798) и чат-бот (остаток), зазор 130 */
.af-contact--wide { flex-direction: row; align-items: flex-start; gap: 130px; }
.af-contact__col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.af-contact__col--info { flex: none; width: 798px; }
.af-contact__col--bot { flex: 1; min-width: 0; gap: 24px; }
/* карточка сообществ ужимается по контенту (Figma 2474:76861 w=205) */
.af-contact--soc { flex: none; }

/* Коллажи-подложки. Боксы и прозрачность — по Figma; внутри бокса растр
   вписан cover, поэтому берём background-size: cover с нужной привязкой. */
.af-contact__art {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
}
/* 2474:76813: 2042×855, left −203, низ вровень с низом карточки, opacity 60 */
.af-contact__art--info {
  left: -203px;
  bottom: -1px;
  width: 2042px;
  height: 855px;
  opacity: 0.6;
  background-image: url(../img/o-forume/contacts-info.webp);
  background-position: center bottom;
}
/* 2474:76814: градиент-затемнение поверх коллажа, от 578px до правой кромки */
.af-contact__art--info::after {
  content: "";
  position: absolute;
  left: 781px; /* 578 + 203 (сдвиг бокса) */
  right: 0;
  bottom: 1px;
  height: 277px;
  background: linear-gradient(270deg, rgba(12, 29, 34, 0) 1.16%, rgba(12, 29, 34, 0.8) 36.87%, rgba(18, 26, 27, 0.9) 63.85%, rgba(9, 30, 37, 0) 80.06%);
}
/* Ревизия 12.08.26: в макете (2624:42267, «image 94» 704×659, left 528 при
   карточке 912, opacity 40) кроп ДРУГОЙ — здание с фонарем, а не книга с
   колосьями из прошлой версии. Кладем готовый экспорт видимой части (383×211 =
   правая зона карточки на 1920, прозрачность запечена), прижатый к правой
   кромке: так кроп не зависит от того, как карточка меняет размер ниже 1920. */
.af-contact__art--partner {
  right: 0;
  top: 0;
  width: 383px;
  height: 100%;
  background-position: right center;
  background-image: url(../img/o-forume/contacts-partner.webp);
}
/* Ревизия 18.08.26: в макете (2801:32220 «image 72» 616×347, left 659 при
   карточке 912) кроп другой — купол убран, композиция сдвинута. Как и у
   --partner, кладём готовый экспорт видимой правой зоны (253×211, снят 2x,
   opacity запечена), прижатый к правой кромке: кроп не зависит от того, как
   карточка меняет размер ниже 1920. */
.af-contact__art--media {
  right: 0;
  top: 0;
  width: 253px;
  height: 100%;
  background-position: right center;
  background-image: url(../img/o-forume/contacts-media.webp);
}

.af-contact__top { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.af-contact__cap { font: 400 16px/1.6 var(--font-text); color: var(--c-secondary); opacity: 0.7; }
.af-contact__cap--plain { opacity: 1; } /* «Сообщества» (2474:76863) — без приглушения */
.af-contact__cap--muted { color: rgba(255, 255, 255, 0.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__hint { font-size: 12px; line-height: 20px; color: rgba(9, 30, 37, 0.3); }
.af-contact__btns { position: relative; z-index: 1; display: flex; gap: 8px; flex-wrap: wrap; }
/* MAX (2474:76831): прозрачный фон + белая рамка (не заливка 0.2 базового .btn--ghost) */
.af-contact--dark .btn--ghost { background-color: transparent; }
.af-contact--dark .btn--ghost:hover { background-color: rgba(255, 255, 255, 0.12); }
/* .btn--sm-icon (+ .icon) переехал в base.css — общий модификатор кнопки,
   дублировался здесь и в uchastie.css. */

.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; }
.af-contact__mail { font: 400 22px/1.5 var(--font-text); color: var(--c-accent); word-break: break-word; }
.af-contact__social { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; }
/* Figma 2474:76864: иконки столбиком по центру карточки, зазор 8 */
.af-contact__social-list { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* соц-иконки — композитные 40×40 SVG с плиткой внутри (Figma 2474:76865) */
.af-contact__social-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-8);
  background: transparent; /* плитка #415358 внутри SVG */
  overflow: hidden;
}
.af-contact__social-link img { width: 40px; height: 40px; display: block; }
/* Rutube: тёмная плитка #091e25 + иконка 60×60 со сдвигом (Figma 2474:76866) */
.af-contact__social-link--rutube { background: #091e25; }
.af-contact__social-link--rutube img { position: absolute; left: 0; top: -20px; width: 60px; height: 60px; max-width: none; }
.af-contact__cta { position: relative; z-index: 1; align-self: flex-start; }

/* ==========================================================================
   АДАПТИВ. Ступени: @1919 (1440), @1023 (768), @767 (360).
   Figma-фреймов для этих ширин у страницы нет — раскладка авторская
   (по договорённости: дизайнер даст ревью).
   ========================================================================== */

/* ---------- @1919 — от 1440 до «монитора 1920» ----------
   ⚠️ ЭТА СТУПЕНЬ — ОСНОВНАЯ ДЛЯ ДЕСКТОПА, а не промежуточная: монитор 1920 даёт
   вьюпорт ~1905 (скроллбар) и попадает сюда, поэтому заказчик сверяет макет 1920
   именно с ней. Значения макета здесь НЕ занижаем ступенькой — берём clamp() от
   vw (в vw скроллбар входит → на мониторе 1920 это ровно 1920 и ровно макет),
   а к 1440 они уезжают плавно. См. ревью Джулии 2026-07-15. */
@media (max-width: 1919px) {
  .af-page { padding-bottom: 0; }
  .af-page > section { margin-top: 64px; }

  /* Общая типошкала: 1920 → значение базы, 1440 → уменьшенное */
  .af-take__title, .af-venue__title, .af-stats__title,
  .af-photo__title, .af-contacts__title, .af-org__title, .af-contact__phone {
    font-size: clamp(28px, 1.667vw, 32px);
    line-height: clamp(34px, 2.083vw, 40px);
  }

  /* HERO */
  .af-hero { padding-top: 32px; min-height: 0; display: flex; align-items: center; gap: 32px; }
  .af-hero__main { width: auto; flex: 1; min-width: 0; gap: 32px; max-width: none; }
  /* Правка дизайнера 03.08.26: «на 1200 картинку увеличить, а заголовок уменьшить».
     Обе формулы держат значение ступени на 1905 неизменным (там претензий не было)
     и расходятся только к узкому краю тира: заголовок 47.6 → 32, KV 620 → 570. */
  .af-hero__title,
  .af-hero__date-num {
    font-size: clamp(32px, calc(2.213vw + 5.45px), 48px);
    line-height: clamp(40px, calc(2.213vw + 13.45px), 56px);
  }
  .af-hero__kv {
    position: static;
    flex: none;
    width: clamp(520px, calc(7.1vw + 485px), 620px);
    max-width: none;
  }

  /* ПРОГРАММА: кегли плашек в макете уже 1440-ные (40/48, 32/40) — ступень
     их не трогает; ужимается только текстовая колонка, коллаж остается
     прижатым к правой кромке и мягко уходит под запеченный градиент */
  .af-program__lead { max-width: clamp(560px, calc(14.06vw + 488px), 758px); }
  /* плитки секций: 5 в ряд держим и здесь — колонка ужимается к 1440
     (265px), поэтому кегль/паддинги/зазор плавно съезжают клампами,
     чтобы «Путь объединенных культур…» не сыпался по слову в строке */
  .af-sec { gap: clamp(12px, calc(1.667vw - 12px), 20px); padding: 33px clamp(17px, calc(2.917vw - 25px), 31px); }
  .af-sec__txt { font-size: clamp(14px, calc(0.417vw + 8px), 16px); }
  /* текст фестиваля НЕ ужимаем клампом: колонка должна держать 2 строки макета
     на всех ширинах (иначе плашка растет на 3-ю строку); наезд арта гасит вуаль */
  /* арт фестиваля: если плашка все же подросла от переносов — слой
     масштабируется по её высоте (дети в %), без кремового шва сверху */
  .af-fest__art { width: auto; height: calc(100% + 2px); aspect-ratio: 675 / 258; }

  /* УЧАСТИЕ / карточки. Паддинг 57 держим: по нему выравнивается текст
     «Организаторов» под тёмной карточкой (Figma: 1037 ≈ 1036). */
  .af-take__card { padding: clamp(32px, 2.55vw, 49px) clamp(40px, 2.97vw, 57px); }

  /* ОРГАНИЗАТОРЫ */
  .af-org {
    gap: clamp(60px, 5.99vw, 115px);
    padding: clamp(40px, 3.33vw, 64px);
  }
  /* ширины макета оставляем, но разрешаем ужиматься: на вьюпорте без классического
     скроллбара (1024) ступень @1023 ещё не включается, а 817+115+633 туда не влезает */
  .af-org__head { width: auto; flex: 0 1 clamp(560px, 42.55vw, 817px); min-width: 0; }
  .af-org__text { width: auto; flex: 0 1 clamp(420px, 32.97vw, 633px); min-width: 0; }

  /* ПЛОЩАДКИ — 3 колонки макета сохраняем, они лишь ужимаются (карта уезжает
     во 2-й ряд только ниже 1440, см. ступень @1439) */
  .af-venue__grid { gap: clamp(24px, 4.375vw, 84px); }
  .af-venue__list-card { flex: 0 1 504px; min-width: 0; }
  .af-venue__list { width: auto; flex: 1; min-width: 0; }
  .af-venue__descr { flex: 0 1 491px; width: auto; min-width: 0; }
  .af-venue__map { flex: 0 1 678px; }

  /* ФОТО: большая колонка ужимается от макетных 754 к 1440, сетка ниже */
  .af-photo { padding: 56px; }
  .af-photo__grid {
    grid-template-columns: clamp(548px, calc(42.92vw - 70px), 754px) 1fr 1fr;
    height: clamp(260px, calc(10.42vw + 110px), 310px);
  }

  /* СТАТИСТИКА */
  /* 4×383 + разделители = 1535 — на 1920 влезает с зазорами, к 1440 контейнер
     сужается до ~1345, поэтому колонки должны ужиматься, а не резаться клипом */
  .af-stat { flex: 0 1 383px; width: auto; min-width: 0; }
  .af-stat__num { font-size: clamp(60px, 3.75vw, 72px); line-height: clamp(68px, 4.167vw, 80px); }

  /* КОНТАКТЫ */
  .af-contact { padding: clamp(32px, 2.55vw, 49px) clamp(40px, 2.97vw, 57px); }
  /* колонка инфоцентра «дышит»: 798 на 1920, ниже ужимается вместе с зазором */
  .af-contact--wide { gap: clamp(40px, 6.77vw, 130px); }
  .af-contact__col--info { flex: 0 1 798px; width: auto; min-width: 0; }
}

/* ---------- @1439 — таблетно-ноутбучная полоса ---------- */
@media (max-width: 1439px) {
  /* СЕКЦИИ: пять плиток в ряд уже не влезают — две колонки (10 = 5 рядов, без «хвоста») */
  .af-secs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ПЛОЩАДКИ — карта уезжает на 2-й ряд во всю ширину (3 колонки не влезают) */
  .af-venue__grid { flex-wrap: wrap; gap: 32px; }
  .af-venue__list { width: auto; }
  .af-venue__list-card { flex: 1 1 340px; }
  .af-venue__descr { flex: 1 1 340px; width: auto; }
  .af-venue__map { flex: 1 1 100%; min-height: 420px; }
  /* Карта уехала под колонку описания: её нижний паддинг 32 складывался с
     gap'ом 32 и давал разрыв 64 («очень большое расстояние», правка 17.08.26).
     Убираем паддинг — остаётся ровно gap, кнопка встаёт вровень с низом
     соседней карточки списка. */
  .af-venue__descr { padding-bottom: 0; }

  /* «Как стать»: фикс 571 не влезает рядом с текстовой колонкой — поровну */
  .af-take__card--light { flex: 1 1 0; }
  .af-take__card--dark { flex: 1.4 1 0; }

  /* плитки секций: жёсткие 5 колонок здесь уже не влезают (на 1024–1439
     без классического скроллбара текст вылезал бы из плитки) — обратно
     резиновая сетка: 4 колонки на 1439, дальше 3/2 */
  .af-secs { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

/* ---------- @1179 — узкий десктоп ----------
   Правка 14.08.2026 (п.9): в ряд с датой боксу заголовка оставалось ~250px,
   и «САНКТ-ПЕТЕРБУРГСКИЙ» вылезал за рамку. Бейджи складываем в столбец
   (как на планшете), KV держим на минимуме клампа — так рамка снова
   обнимает текст на всём тире 1024–1179. */
@media (max-width: 1179px) {
  .af-hero__badges { flex-direction: column; align-items: flex-start; }
  .af-hero__title-box { width: 100%; }
  .af-hero__title { overflow-wrap: break-word; } /* страховка на самом узком крае тира */
  .af-hero__kv { width: 520px; }
}

/* ---------- @1023 — планшет 768 ---------- */
@media (max-width: 1023px) {
  .af-page { padding-bottom: 0; }
  .af-page > section { margin-top: 56px; }

  /* Планшет собирается по мобильному макету (2624:42543): KV сверху во всю
     ширину, дата-бейдж накладкой на его левый верхний угол, ниже — заголовок и
     лид. До правки 12.08.26 KV уезжал под лид и вдобавок стоял узкой картинкой
     по центру, а бейдж болтался под ней отдельной плашкой. */
  .af-hero { position: relative; padding-top: 0; flex-direction: column; align-items: stretch; gap: 24px; }
  .af-hero__main { position: static; } /* чтобы бейдж (absolute) якорился к hero */
  .af-hero__kv { order: -1; width: 100%; max-width: none; align-self: stretch; }
  .af-hero__date {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    gap: 0;
    padding: 11px 8px;
  }
  .af-hero__badges { flex-direction: column; align-items: flex-start; gap: 16px; }
  .af-hero__title-box { width: 100%; }
  .af-hero__title { font-size: 36px; line-height: 42px; }
  /* лид уже 16/1.6 в базе (правка 14.08.2026, п.5) — локальный оверрайд 16/22 снят */

  /* ПРОГРАММА: плашка ужимается, коллаж прячем — на узкой карточке он лег бы
     под текст; фон остается чистым (паттерн мобильного макета, где коллаж
     оставлен только у первой плашки) */
  .af-program { gap: 40px; }
  .af-program__band, .af-fest { padding: 32px; }
  .af-program__title { font-size: 32px; line-height: 40px; }
  /* коллажи и дуга прячутся — вместе с ними не нужна и вуаль фестиваля
     (у плашки программы ::after ниже переиспользуется под мобильную вуаль) */
  .af-program__collage, .af-fest__art, .af-fest::before { display: none; }
  .af-fest__title { font-size: 24px; line-height: 32px; }
  .af-sec { min-height: 0; padding: 25px 21px; }

  /* «Как стать»: карточки в столбец во всю ширину */
  .af-take__grid { flex-direction: column; gap: 24px; }
  .af-take__card--light, .af-take__card--dark { flex: none; }

  .af-org { flex-direction: column; align-items: flex-start; gap: 24px; padding: 48px 40px; }
  /* flex сбрасываем явно: в @1919 у них flex-basis-ширина, а здесь карточка —
     колонка, и basis начал бы задавать высоту */
  .af-org__head, .af-org__text { width: 100%; flex: none; }
  /* Десктоп-переносы по Figma на узком не нужны. В разметке перед каждым <br>
     стоит пробел: на десктопе он схлопывается в конце строки, а здесь, со
     скрытым <br>, не даёт словам слипнуться («поддержкеПравительства»). */
  .af-org__text br { display: none; }

  .af-venue__grid { flex-direction: column; }
  .af-venue__list-card, .af-venue__descr, .af-venue__list { width: 100%; }
  .af-venue__descr { flex: 1 1 255px; }
  .af-venue__map { min-height: 380px; }

  .af-stats { gap: 40px; }
  .af-stats__row { flex-wrap: wrap; justify-content: normal; }
  .af-stat { flex: 0 0 50%; width: auto; padding: 24px 0; }
  .af-stat__div { display: none; }
  .af-stat:nth-of-type(3), .af-stat:nth-of-type(4) { border-top: 1px solid var(--c-line); }
  .af-stat__num { font-size: 56px; line-height: 60px; }

  .af-photo { padding: 48px 32px; gap: 32px; }
  .af-photo__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .af-photo__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }
  .af-photo__big { grid-column: 1 / 3; grid-row: 1; height: 300px; }
  .af-photo__small:nth-of-type(2) { grid-column: 1; grid-row: 2; }
  .af-photo__small:nth-of-type(3) { grid-column: 2; grid-row: 2; }
  .af-photo__small:nth-of-type(4) { grid-column: 1; grid-row: 3; }
  .af-photo__small:nth-of-type(5) { grid-column: 2; grid-row: 3; }
  .af-photo__small { min-height: 200px; }

  /* КОНТАКТЫ: ряды переносятся, карточки — по половине ряда;
     широкая карточка (инфоцентр + чат-бот) складывается в столбец */
  .af-contacts__row { flex-wrap: wrap; }
  .af-contact { flex: 1 1 calc(50% - 8px); min-width: 260px; padding: 40px; }
  .af-contact--wide { flex-direction: column; gap: 32px; }
  .af-contact__col--info { flex: none; width: 100%; }
  .af-contact--soc { flex: 1 1 100%; }
  .af-contact__social-list { flex-direction: row; justify-content: flex-start; }

}

/* ---------- @767 — мобилка 360 ---------- */
@media (max-width: 767px) {
  .af-page { padding-bottom: 0; }
  .af-page > section { margin-top: 40px; }

  /* крошки: полоса py-24 (Figma 2195:153166) */
  .af-page .crumbs { padding: 24px 0; font-size: 14px; line-height: 20px; }

  /* В мобильном макете таб-меню раздела нет вовсе, у нас оно свернуто в
     аккордеон «Русский» и упиралось прямо в KV — отбиваем (правка дизайнера
     12.08.26 «мобила — добавить отступ»). */
  .af-page .ptabs + .af-hero { margin-top: 24px; }

  /* мобилка (Figma 2195:153168): KV на всю ширину СВЕРХУ, дата-бейдж поверх
     его левого-верхнего угла; ниже — тайтл + «О Форуме» + лид */
  .af-hero { position: relative; padding-top: 0; }
  .af-hero__main { position: static; } /* чтобы дата (absolute) якорилась к hero, а не к main */
  .af-hero__kv {
    order: -1;
    width: calc(100% + 32px);
    max-width: none;
    margin: 0 -16px;
  }
  /* Figma 2195:153172: бейдж в левом-верхнем углу KV — x=16 от края экрана,
     y=0 (верхняя кромка вровень с KV). .af-hero живёт внутри .container
     (gutter 16), поэтому его собственный ноль уже равен экранным 16. */
  .af-hero__date {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 0;
    padding: 9px 7px;
  }
  .af-hero__date-num { font-size: 24px; line-height: 32px; }
  .af-hero__date-dash { transform: none; width: 55px; }
  .af-hero__date-when { margin-top: 0; text-align: center; font-size: 10px; line-height: 12px; }
  /* Заголовок вылезал за рамку бокса: «МЕЖДУНАРОДНЫЙ» шире строки, а флекс не
     давал перенести. Кегль макета (32/40 на 375) держим до 375 и ниже уводим
     пропорционально ширине бокса — так переносы остаются макетными, без
     висящих одиночных букв. overflow-wrap — страховка на случай подмены шрифта. */
  .af-hero__title {
    font-size: min(32px, calc(10.35vw - 6.8px));
    line-height: 1.25;
    overflow-wrap: break-word;
  }

  /* ---- Кнопки. В макете О Форуме (375) ВСЕ Buttons — 343×56 во всю ширину
     карточки. Глобальный .btn на ≤767 сжат до h40/14px по макету 360 ГЛАВНОЙ
     (base.css) — у этой страницы макет свой, поэтому возвращаем базовые кегли
     в пределах .af-page. ---- */
  .af-page .btn { height: 56px; gap: 16px; font-size: 16px; line-height: 24px; }
  .af-page .btn .icon { width: 20px; height: 20px; }
  /* у компактных кнопок свой зазор иконки (Figma 2195:153598: icons 29.75+20 → span 55.75),
     правило выше по специфичности перебило бы базовый .btn--sm-icon { gap: 6px } */
  .af-page .btn--sm-icon { gap: 6px; }
  .af-take__cta,
  .af-venue__list-cta,
  .af-venue__descr-cta,
  .af-contact__cta { width: 100%; align-self: stretch; }
  .af-venue__list-cta { margin-top: 0; } /* зазор до списка задан gap'ом, базовый margin его удваивал */
  /* чат-боты делят ряд пополам (Figma 2195:153597/153601: 150.5 + 8 + 150.5 = 309) */
  .af-contact__btns { flex-wrap: nowrap; }
  .af-contact__btns .btn { flex: 1; min-width: 0; padding-inline: 8px; }

  /* ПРОГРАММА (2624:42614): плашка px17 py25, лейбл 16, тайтл 20/28,
     кнопки во всю ширину — текст слева, стрелка справа. Коллаж у первой
     плашки в мобильном макете ЕСТЬ (лежит фоном под градиентом) — рисуем
     его нижним слоем с диагональной вуалью из макета. */
  .af-program { gap: 32px; } /* band(494)→секции: 2624:42633 y=542 − 494 − 16?? визуально 32 */
  .af-program__band { padding: 24px 16px; }
  .af-program__title { margin-top: 16px; font-size: 20px; line-height: 28px; }
  .af-program__lead { margin-top: 24px; } /* кегль 16/1.6 теперь в базе (п.5) */
  .af-program__actions { margin-top: 40px; flex-direction: column; gap: 16px; width: 100%; }
  .af-program__actions .btn { width: 100%; justify-content: space-between; }
  /* Подложка мобильной плашки — готовый экспорт ноды 2624:42615 (343×494 = ровно
     видимая часть коллажа внутри карточки). Раньше сюда тянулся десктопный кроп
     961×349 через object-fit: cover — на боксе 343×483 он раздувался почти
     вдвое, купол лез на текст (правка дизайнера 12.08.26 «картинка поплыла»).
     Диагональная вуаль ::after поверх по-прежнему гасит подложку под текстом. */
  .af-program__collage { display: none; }
  .af-program__band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../img/o-forume/prog-collage-mobile.webp) center / cover no-repeat;
    pointer-events: none;
  }
  /* диагональная вуаль макета (2624:42618) поверх коллажа, под контентом */
  .af-program__band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(-57deg, rgba(248, 232, 217, 0) 13%, rgba(247, 236, 224, 0.82) 46%, #f7ede2 62%);
  }
  .af-program__intro { z-index: 3; }
  /* плитки секций (2624:42640): px21 py25, иконка 32, стопкой */
  .af-secs { grid-template-columns: 1fr; }
  .af-sec { min-height: 0; padding: 25px 21px; }
  .af-sec__ic { width: 32px; height: 32px; }
  /* фестиваль (2624:42690): без коллажа (он за холстом), тайтл 20/28 */
  .af-fest { padding: 24px 16px; }
  .af-fest__title { font-size: 20px; line-height: 28px; }
  .af-fest__text { margin-top: 24px; } /* кегль 16/1.6 теперь в базе (п.5) */
  .af-fest__cta { width: 100%; justify-content: space-between; }

  /* Типошкала мобилки (Figma 375, сверено замером ширины текста против рендера):
     заголовки СЕКЦИЙ — 24/32 (кит H4), заголовки КАРТОЧЕК — 20/28 (кит H5).
     clamp из ступени @1919 упирался в 28/34 и протекал сюда — из-за этого
     «КАК СТАТЬ ПАРТНЕРОМ?» и «ГЛАВНЫЙ ШТАБ ЭРМИТАЖА» рвались на две строки,
     хотя в макете каждый в одну. */
  .af-stats__title,
  .af-photo__title, .af-contacts__title, .af-org__title { font-size: 24px; line-height: 32px; }
  .af-take__title, .af-venue__title { font-size: 20px; line-height: 28px; }
  /* телефон в макете остался десктопным 32/40 (2195:153609 h=40) — вынимаем его
     из общего clamp ступени @1919, который дал бы 28/34 */
  .af-contact__phone { font-size: 32px; line-height: 40px; }

  /* Figma 2624:42710: контент карточки 309 (=343−17−17), паддинг сверху 25,
     зазор между карточками 8. У нас карточка ещё и с рамкой 1px, поэтому паддинг
     на 1 меньше — иначе строка теряет 2px и заголовок срывается на вторую строку. */
  .af-take__grid { flex-direction: column; gap: 8px; }
  .af-take__card { padding: 24px 16px; }
  .af-take__card--light, .af-take__card--dark { flex: none; }

  /* Figma 2195:153301: тёмная карточка full-bleed 375, контент на 16, паддинг 24.
     Что заливка принадлежит самому фрейму (а не врезанной карточке 343) видно по
     арифметике: 24 + 98 (шапка) + 24 + 156 (текст 6×26) + 24 = 326 — ровно высота
     фрейма. Тот же паттерн, что у .af-photo и .af-venue__list-card. */
  .af-org {
    width: calc(100% + 32px);
    margin-inline: -16px;
    padding: 24px 16px;
    border-radius: var(--r-24);
  }

  /* Figma 2195:153365: декоративный скролл справа от адресов (13×342), кнопка —
     во всю ширину карточки (343), т.е. ПОД скроллом, а не в колонке списка.
     В разметке кнопка лежит внутри .af-venue__list, поэтому в ряд её не увести:
     вместо этого скролл вынут абсолютом к правой кромке, а адресам дан отступ
     под него. */
  /* карточка списка — full-bleed 375 (Figma 2195:153364: x=0 w=375, контент на 16),
     от этого и кнопка внутри становится макетными 343 */
  .af-venue__list-card {
    position: relative;
    flex-direction: column;
    width: calc(100% + 32px);
    margin-inline: -16px;
    padding: 24px 16px;   /* 2195:153365: контент на y=24, кнопка кончается за 24 до низа */
  }
  .af-venue__list { width: 100%; gap: 24px; } /* список→кнопка: 24 (2624:42829) */
  /* у блока описания в макете своего паддинга нет — он раздувал зазоры
     карточка→заголовок и кнопка→карта с макетных 32 до 40 */
  .af-venue { gap: 32px; }
  .af-venue__descr { padding: 0; }
  /* Figma 2195:153398: карта full-bleed 375×519 */
  .af-venue__map {
    width: calc(100% + 32px);
    margin-inline: -16px;
    min-height: 519px;
    border-radius: 0;
    border-inline: 0;
  }
  .af-venue__map-tip { left: 16px; bottom: 16px; padding: 12px 14px; }

  /* Итоги по Figma 2195:153545: числа столбиком, между ними — короткая линия 122
     по центру (2195:153549), а не рамка во всю ширину блока.
     Ступень @1023 верстала числа в две колонки и оставляла после себя хвосты,
     которые здесь протекали: border-top на 3-м/4-м числе рисовался ПОВЕРХ
     разделителя (две линии подряд), padding 24 раздувал зазоры до 24 вместо 16,
     а кегль был сброшен до 48 — в макете 375 числа остаются десктопными 72/80. */
  .af-stats { gap: 24px; }                                  /* шапка→числа→сноска: 24 (98−74, 653−629) */
  .af-stats__row { flex-direction: column; gap: 16px; }     /* блок→разделитель: 16 (124−108) */
  .af-stat { flex: none; width: 100%; padding: 0; gap: 2px; } /* число h80 + 2 + подпись h26 = 108 */
  .af-stat:nth-of-type(3), .af-stat:nth-of-type(4) { border-top: 0; }
  .af-stat__div { display: block; width: 122px; height: 1px; align-self: center; }
  .af-stat__num { font-size: 72px; line-height: 80px; }     /* 2195:153547: «70» 72×80 */
  .af-stats__foot { align-self: flex-end; }                 /* 2195:153561: x=171 w=188 → к правому краю */

  /* Figma 2195:153562: карточка full-bleed; фото — горизонтальный слайдер
     (330×310, шаг 346), следующее выглядывает справа */
  /* зазор шапка+кнопки → слайдер: 48 (2195:153574 y=322 − низ 2195:153563 274);
     ступень @1023 сбрасывала его до 32 */
  .af-photo { padding: 24px 16px; margin-inline: -16px; border-radius: var(--r-24); gap: 48px; }
  .af-photo__grid {
    display: flex;
    grid-template-columns: none;
    grid-template-rows: none;
    height: auto;
    gap: 16px;
    /* слайдер выходит за паддинг карточки и уезжает в правый край экрана */
    margin-inline: -16px;
    padding-inline: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .af-photo__grid::-webkit-scrollbar { display: none; }
  .af-photo__big,
  .af-photo__small {
    flex: 0 0 330px;
    grid-column: auto !important;
    grid-row: auto !important;
    height: 310px;
    min-height: 0;
    scroll-snap-align: center;
  }
  .af-photo__actions { flex-direction: column; width: 100%; }
  .af-photo__actions .btn { width: 100%; }

  /* Контакты по Figma 2195:153590/153605: контент карточки 309 → паддинг 25/17
     (у нас минус рамка 1px). Телефон и почта в мобильном макете остаются
     базовыми 32/40 и 18 — прежний оверрайд сжимал их до 24/30 и 16 без повода
     (при 32px телефон занимает 241 из 309 и влезает свободно). */
  .af-contact { flex: 1 1 100%; padding: 24px 16px; }
  /* правка дизайнера 03.08.26: базовые 22px давали ~330 при контенте 309 —
     unitedcultures@roscongress.org срывался на вторую строку одной буквой «g» */
  .af-contact__mail { font-size: 20px; }
  /* Figma 2474:77601: все карточки столбиком во всю ширину, зазор 16 */
  .af-contacts__row { flex-direction: column; gap: 16px; }
  .af-contact--wide { gap: 24px; }
  /* коллажи-подложки ужимаются под мобильную карточку (2474:77603/77627/77635) */
  .af-contact__art--info { left: -536px; bottom: 0; width: 1840px; height: 770px; }
  .af-contact__art--info::after { display: none; }
  /* у мобильной карточки (2624:42955) свой кроп «image 94»: бокс 423×395 со
     сдвигом left 150 / top −238, из него видно 193×133 — кладем готовый экспорт
     этой видимой части, прижатый к правой кромке */
  .af-contact__art--partner {
    right: 0;
    left: auto;
    top: 0;
    width: 193px;
    height: 100%;
    background-image: url(../img/o-forume/contacts-partner-mobile.webp);
  }
  /* Ревизия 18.08.26: декор карточки СМИ поменялся и на мобилке (макет 375,
     карточка 343×171: видимая зона — правые 139). Кладём готовый кроп, как у
     --partner, вместо прежнего сдвига большого бокса за кромку. */
  .af-contact__art--media {
    right: 0;
    left: auto;
    top: 0;
    width: 139px;
    height: 100%;
    background-position: right center;
    background-image: url(../img/o-forume/contacts-media-mobile.webp);
  }
}

/* === sections/accreditation.css === */
/* ==========================================================================
   accreditation.css — страница «Аккредитация партнёров» (раздел «Партнёрам»).
   Десктоп-база — 1920 (макет Figma 2220:46170, файл jp5bvll05DJiSBMg7nQiB8).
   Переиспользует: arrival.css (arr-hero, crumbs), visa.css (visa-block/step/
   bullets/note/callout/label/group), base.css (section-label),
   page-tabs.css (ptabs--flow). Здесь — только новые блоки и дельты.
   Все правки этой страницы скоупятся под .acc (на <main>), чтобы не спорить
   с адаптивом visa.css. Лесенка брейкпоинтов: 1920 / 1440 / 768 / 360.
   ========================================================================== */

/* без висячих слов */
.arr-hero__intro p, .acc-lead p, .acc-star p, .visa-dashes li, .acc-final p {
  text-wrap: pretty;
}
.acc-h2, .visa-subhead, .visa-callout__title { text-wrap: balance; }

/* ==========================================================================
   HERO — светлый, тёмный текст, контент сверху + вводный абзац.
   Геометрия .arr-hero берётся из arrival.css; заголовок иной (64/72), не 84/90.

   Полоса табов и баннер тут во всю ширину окна (Figma: article и
   section.arr-hero — x=0 w=1920, тогда как section.visa-block ниже — x=40
   w=1840). Оба лежат в .container, поэтому гасим гаттер отрицательным полем.
   ========================================================================== */
.acc .ptabs--flow,
.acc .arr-hero--acc {
  margin-inline: calc(var(--gutter) * -1);
}

/* Внутренняя раскладка = Figma 2220:46187: колонка, label →30→ группа,
   внутри группы (заголовок + абзацы) шаг 16. */
/* Правка Джулии №1: блок выровнен ПО НИЗУ баннера (в макете отступ снизу 60,
   сверху 212 — при уменьшении высоты геро якорь должен держаться низа,
   а не центрироваться). */
.arr-hero--acc .arr-hero__inner {
  top: auto;
  bottom: 60px;
  left: 88px;
  width: 602px;
  max-width: 602px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
/* inline-flex ловит line-box родителя и добавляет ~12px — отсюда flex.
   14 + gap 16 = 30 (шаг label → заголовок в макете). */
.arr-hero--acc .section-label {
  display: flex;
  margin-bottom: 14px;
}
.arr-hero--acc .arr-hero__title {
  margin-top: 0;
  font: 400 64px/72px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.arr-hero__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 0;
  max-width: 602px;
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-text);
}
.arr-hero__intro p:last-child { max-width: 531px; } /* Figma 2220:46195 */

/* ==========================================================================
   ЭТАПЫ АККРЕДИТАЦИИ — 3 карточки (красная рамка, Almond-фон) + стрелки.
   ========================================================================== */
.acc-steps {
  display: flex;
  align-items: stretch;
  margin-top: 80px;
}
.acc-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 49px 57px;
  text-align: center;
  border: 1px solid var(--c-accent);
  border-radius: var(--r-24);
  background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)), var(--c-bg);
}
/* Правка Джулии №2: в макете кегль 32. Держим 32 там, где он физически влезает:
   самое длинное слово «АККРЕДИТАЦИОННОГО» при 32px занимает 411px, а карточка
   в тройном ряду = (vw − 228) / 3 − паддинги, т.е. 32 живёт примерно от 1725.
   clamp вместо ступеньки: 1920 → 32/40 (= макет; на мониторе 1920 vw=1920 даже
   со скроллбаром, поэтому зритель видит именно 32), 1440 → 24/30. */
.acc-step__title {
  font: 400 clamp(24px, 1.667vw, 32px)/1.25 var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.acc-steps__arrow {
  flex: none;
  align-self: center;
  width: 74px;
  height: 12px;
  color: var(--c-accent);
}
/* Короткая стрелка — только мобилка (см. ступень ≤767) */
.acc-steps__arrow--sm { display: none; }

/* ==========================================================================
   ЗАГОЛОВОК СЕКЦИИ — section-label + h2 (40/48) + необязательный лид.
   ========================================================================== */
.acc-head { margin-top: 80px; }
.acc-h2 {
  margin-top: 24px;
  max-width: 1128px;
  font: 400 40px/48px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
/* Заголовок без лида: шаг label → h2 равен 16 (в макете такой блок = 140:
   label 28 + 16 + h2 96). С лидом шаг 24 — см. .acc-head--split и head4/5. */
.acc-head--tight .acc-h2 { margin-top: 16px; }
.acc-lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
  max-width: 1128px;
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
}
.acc-lead a { color: var(--c-accent); text-decoration: underline; }
.acc-lead a:hover { text-decoration: none; }

/* Вариант «h2 + лид слева, сноска-звёздочка справа» (Figma 2220:46212) */
.acc-head--split .acc-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 56px;
  margin-top: 24px;
}
.acc-head--split .acc-h2 { margin-top: 0; max-width: none; }
.acc-head--split .acc-lead { max-width: none; }
.acc-head__main { flex: 1 1 auto; max-width: 1128px; }
.acc-star {
  flex: none;
  width: 444px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 32px;
  background: rgba(196, 58, 30, .06);
  border-radius: var(--r-12);
}
.acc-star__mark {
  flex: none;
  font: 400 40px/48px var(--font-display);
  color: var(--c-accent);
}
.acc-star p {
  font: 400 14px/20px var(--font-text);
  color: var(--c-btn-gray);
  opacity: .7;
}

/* Отступ контента после заголовка секции.
   Скоуп .acc обязателен: ниже стоит .acc .visa-block{margin-top:0} той же
   специфичности, и без него он перебивал эти правила (гэп схлопывался в 0). */
.acc .acc-head + .visa-block,
.acc .acc-head + .acc-block-group { margin-top: 48px; }
.acc .acc-head--tight + .visa-block,
.acc .acc-head--tight + .acc-cols { margin-top: 24px; }

/* ==========================================================================
   Прочие переиспользуемые/новые куски внутри блоков.
   ========================================================================== */

/* Горизонтальные колонки шагов (визуально — visa-step в сетке).
   minmax(0,1fr), а не 1fr: у 1fr минимум auto, колонки не сжимаются ниже
   min-content и на ~1024 вылезали за контейнер (страница их резала клипом). */
.acc-cols { display: grid; gap: 16px; }
.acc-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acc-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Группа из нескольких блоков подряд (gap 16) */
.acc-block-group { display: flex; flex-direction: column; gap: 16px; }

/* Карточка без номера — визуально как visa-step, но контент во всю ширину */
.visa-card {
  padding: 37px 41px;
  background: rgba(255, 255, 255, .45);
  border: 1px solid var(--c-line);
  border-radius: var(--r-16);
}
.visa-card > * + * { margin-top: 16px; }

/* Мини-заголовок Cochin в теле блока (Cochin 20/28 upper) */
.visa-subhead {
  font: 400 20px/28px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
/* Инлайн-акцент Cochin uppercase внутри абзаца */
.visa-em {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 20px;
}

/* В теле блока ВСЕ прямые дети в макете идут x=97 w=1726, т.е. во всю ширину
   (проверено по 2220:46601: и note, и callout, и li.visa-step — все 1726).
   Тело — флекс-колонка с прижатием влево, поэтому дети сжимались по контенту:
   у callout и note справа зияла дырка (правки №4/№6), у карточки правый край
   не совпадал с остальными (правка «блоки справа одинаковые должны быть»). */
.acc .visa-callout,
.acc .visa-note,
.acc .visa-card { width: 100%; }

/* Под-список с тире «–» (требования к фото / скан-копиям).
   Правка №5: отступ второго уровня. Скоуп .acc обязателен — в base.css есть
   ul[class],ol[class]{padding:0} со специфичностью (0,1,1), он перебивал
   .visa-dashes (0,1,0), и тире вставали вровень с буллетами.
   Макет: буллет — маркер 214 / текст 236; тире — маркер 238 / текст 263. */
.acc .visa-dashes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 28px;
}
.visa-dashes li {
  position: relative;
  padding-left: 24px;
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
}
.visa-dashes li::before {
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-accent);
}

/* Заголовок внутри callout (Figma 2220:46610 — Cochin 24/32 upper) */
.visa-callout--titled { display: flex; flex-direction: column; gap: 8px; }
.visa-callout__title {
  font: 400 24px/32px var(--font-display);
  text-transform: uppercase;
  color: var(--c-secondary);
}

/* Финальный абзац-примечание в теле блока */
.acc-final {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 1125px;
}

/* ==========================================================================
   Дельты к общим visa-компонентам (только на этой странице, скоуп .acc).
   Макет использует единый корпус 18/1.6 и маркеры 18px (в visa.css — 20px).
   ========================================================================== */
.acc .visa-text,
.acc .visa-bullets li,
.acc .visa-step__text,
.acc .acc-final .visa-text {
  font-size: 18px;
  line-height: 1.6;
}
.acc .visa-step__title { text-transform: uppercase; }
.acc .visa-block { margin-top: 0; }                 /* отступы задаём мы */
/* В visa.css заголовок блока ограничен 900 (под страницу Визы). Здесь в макете
   он шире (нода 1120) и ломается вручную — снимаем ограничение. */
.acc .visa-block__title { max-width: none; }
.acc .visa-block__body--g16 { gap: 16px; }
.acc .visa-block__body--g24 { gap: 24px; }
.acc .visa-block__body--flip { padding-top: 64px; padding-bottom: 32px; }

/* ==========================================================================
   ≤1440 — пропорциональная ступень (макет 1920 уменьшаем).
   ========================================================================== */
@media (max-width: 1919px) {
  /* Якорь низа сохраняем и тут (правка №1) — центрирование убрано.
     Отступ снизу тот же, что в макете (60), а не свой уменьшенный. */
  .arr-hero--acc .arr-hero__inner {
    top: auto;
    bottom: 60px;
    transform: none;
    left: 64px;
    width: 560px;
    max-width: 560px;
    gap: 14px;
  }
  .arr-hero--acc .section-label { margin-bottom: 10px; } /* 10 + 14 = 24 */
  .arr-hero--acc .arr-hero__title { margin-top: 0; font-size: 48px; line-height: 54px; }
  .arr-hero__intro { font-size: 15px; max-width: 520px; }
  .arr-hero__intro p:last-child { max-width: none; }

  /* Правка №2: кегль карточки этапа остаётся 32/40 как в макете (был 24/30).
     Монитор 1920 даёт вьюпорт ~1905 из-за скроллбара, т.е. эта ступень —
     то, что реально видит зритель «на 1920». Значения макета не занижаем. */
  .acc-steps { margin-top: 64px; }
  .acc-step { padding: 40px 40px; }

  .acc-head { margin-top: 64px; }
  .acc-h2 { margin-top: 18px; max-width: 900px; font-size: 32px; line-height: 40px; }
  .acc-lead { margin-top: 14px; max-width: 900px; font-size: 16px; }
  .acc-head--split .acc-head__row { gap: 40px; margin-top: 18px; }
  /* Правка №3: ширина сноски-звёздочки остаётся 444 как в макете (была 360). */
  .acc-star { padding: 28px; }
  .acc-star__mark { font-size: 32px; line-height: 40px; }

  .acc .acc-head + .visa-block,
  .acc .acc-head + .acc-block-group { margin-top: 40px; }
  .acc .acc-head--tight + .visa-block,
  .acc .acc-head--tight + .acc-cols { margin-top: 20px; }

  .visa-card { padding: 32px; }
  .visa-subhead { font-size: 18px; line-height: 26px; }
  .visa-em { font-size: 18px; }
  .visa-dashes li { font-size: 16px; }
  .visa-callout__title { font-size: 20px; line-height: 28px; }

  .acc .visa-text,
  .acc .visa-bullets li,
  .acc .visa-step__text { font-size: 16px; }
}

/* ==========================================================================
   ≤1439 — тройной ряд этапов больше не держит длинные слова: в карточке
   (vw−228)/3 при 24px «АККРЕДИТАЦИОННОГО» (308px) перестаёт помещаться и текст
   вылезал за карточку. Ниже 1440 раскладываем этапы в столбец — там ширины
   хватает, и кегль возвращаем к макетным 32/40.
   ========================================================================== */
@media (max-width: 1439px) {
  .acc-steps { flex-direction: column; gap: 16px; }
  /* Правка Джулии №3: rotate не влияет на раскладку — бокс остаётся 74×12 и
     занимает в колонке 12px, а рисуется на 74, залезая по 31px в обе карточки.
     Компенсируем полями, чтобы место в потоке совпало с видимым размером. */
  .acc-steps__arrow { transform: rotate(90deg); margin: 31px 0; }
  .acc-step__title { font-size: 32px; line-height: 40px; }
}

/* ==========================================================================
   ≤768 — планшет: колонки в один столбец, стрелки степпера вертикально.
   ========================================================================== */
@media (max-width: 1023px) {
  /* Hero: контент в потоке, высота по содержимому */
  .arr-hero--acc { height: auto; min-height: 360px; }
  /* ВНИМАНИЕ: в Figma у этой страницы есть только фрейм 1920 — мобильных
     макетов нет. Всё ниже — адаптация под лесенку проекта, не перенос макета.

     Текст в макете лежит на светлой левой части коллажа — при cover на узком
     экране кроп уезжает в центр (насыщенный) и тёмный текст пропадает, поэтому
     прижимаем кадр влево. Светлой вуали поверх НЕТ: она забивала коллаж в
     ровный беж («фон какой-то другой», правка Джулии №2) — вариант выбран
     шевкетом 2026-07-15. Читаемость держится самой светлой зоной коллажа. */
  .arr-hero--acc .arr-hero__img { object-position: left center; }

  /* relative, а не static: .arr-hero__img абсолютный и красится поверх
     статичного контента — текст уходил под картинку.
     right: auto обязателен — в arrival.css на этой ступени стоит right:32,
     и при left:auto браузер считает left = -right (текст улетал за край). */
  .arr-hero--acc .arr-hero__inner {
    position: relative;
    z-index: 1;
    top: auto;
    /* bottom тоже гасим: в базе стоит bottom:60 (выравнивание по низу), а при
       position:relative он сдвигает блок ВВЕРХ на 60 — текст уезжал под тоггл. */
    bottom: auto;
    transform: none;
    left: auto;
    right: auto;
    width: auto;
    max-width: none;
    padding: 40px 32px;
    gap: 14px;
  }
  .arr-hero--acc .section-label { margin-bottom: 6px; } /* 6 + 14 = 20 */
  .arr-hero--acc .arr-hero__title { margin-top: 0; font-size: 40px; line-height: 44px; }
  .arr-hero__intro { max-width: 640px; }

  /* столбец и поворот стрелки уже заданы в ступени ≤1439 — тут только отступ */
  .acc-steps { margin-top: 48px; }
  .acc-step { padding: 32px; }

  .acc-head { margin-top: 56px; }
  .acc-h2 { font-size: 28px; line-height: 34px; }

  .acc-head--split .acc-head__row { flex-direction: column; align-items: stretch; gap: 24px; }
  .acc-star { width: 100%; }

  .acc-cols--2,
  .acc-cols--3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ≤360 — узкая мобила.
   ========================================================================== */
@media (max-width: 767px) {
  /* Правка Джулии №1. Мобильный эталон таб-меню — фреймы «Бронирование гостиниц
     375w» (Figma 2205:85057 закрытый / 2205:85109 открытый): полоса и баннер
     идут ПО КОНТЕЙНЕРУ (x=16 w=343), а не во всю ширину — full-bleed из
     десктопного макета сюда протекать не должен. */
  .acc .ptabs--flow,
  .acc .arr-hero--acc { margin-inline: 0; }

  /* Крошки → выпадашка: 24 (в макете полоса крошек имеет паддинг 24 снизу,
     дальше сразу тоггл). Было 16. */
  .acc .ptabs { margin-top: 24px; }
  /* Выпадашка → баннер: 10 (макет: тоггл 214..250, баннер с 260). Было 28.
     Открытое состояние в макете даёт 20 — оно уже совпадает, не трогаем. */
  .acc .ptabs--flow + .arr-hero { margin-top: 10px; }

  .arr-hero--acc { min-height: 300px; }
  .arr-hero--acc .arr-hero__inner { padding: 24px 20px; gap: 12px; }
  .arr-hero--acc .section-label { margin-bottom: 0; }
  .arr-hero--acc .arr-hero__title { margin-top: 0; font-size: 30px; line-height: 34px; }
  .arr-hero__intro { font-size: 14px; gap: 12px; }

  .acc-steps { margin-top: 36px; }
  .acc-step { padding: 24px 20px; }
  .acc-step__title { font-size: 20px; line-height: 26px; }

  /* Стрелки покороче и покомпактнее (просьба шевкета): 40 вместо 74.
     Поля 14 = (40 − 12) / 2 — компенсация того, что rotate не меняет раскладку. */
  .acc-steps__arrow--lg { display: none; }
  .acc-steps__arrow--sm { display: block; width: 40px; margin: 14px 0; }

  /* Отступ сверху в блоке без шапки: на десктопе 64 — это макет (в нём callout
     обёрнут в note: 32 у тела + 32 у обёртки). На узком экране 64 сверху много. */
  .acc .visa-block__body--flip { padding-top: 32px; }

  .acc-head { margin-top: 48px; }
  .acc-h2 { font-size: 24px; line-height: 30px; }
  .acc-lead { font-size: 16px; }

  .visa-card { padding: 22px 20px; }
  .acc .visa-dashes { padding-left: 8px; }
}

/* ==========================================================================
   График работы пунктов аккредитации — переиспользуем тёмные карточки
   пунктов со страницы «Получение бейджа» (venue-access.css: .vac-points/
   .vac-point/.vac-place/.vac-times). Структурные правила и адаптив там без
   скоупа — подхватятся и здесь; scoped только --vac-* переменные, поэтому
   дублируем их под .acc. venue-access.css НЕ трогаем, чтобы не двигать
   эталон badge-collection. Значения переменных clamp()-ом (1920→макет,
   1440→ступень), поэтому по брейкпоинтам их не переопределяем.
   ========================================================================== */
.acc {
  --vac-txt: clamp(16px, calc(0.41667vw + 10px), 18px);
  --vac-txt-s: clamp(15px, calc(0.20833vw + 12px), 16px);
  --vac-h3: clamp(28px, calc(0.83333vw + 16px), 32px);
  --vac-h3-lh: clamp(34px, calc(1.25vw + 16px), 40px);
  --vac-upper: clamp(13px, calc(0.20833vw + 10px), 14px);
  --vac-pad-y: clamp(40px, calc(1.66667vw + 16px), 48px);
  --vac-pad-x: clamp(44px, calc(2.5vw + 8px), 56px);
}
.acc .vac-place__addr { text-wrap: pretty; }
/* Заголовок «Пункты аккредитации» даём нативным acc-head; сетку пунктов
   ставим сразу под ним (свой margin-top у .vac-points__grid гасим — он
   рассчитан на соседство с .vac-points__head, которого здесь нет). */
.acc .acc-head--tight + .vac-points { margin-top: 24px; }
.acc .vac-points__grid { margin-top: 0; }
.acc .vac-points + .acc-block-group { margin-top: 48px; }

@media (max-width: 1919px) {
  .acc .acc-head--tight + .vac-points { margin-top: 20px; }
  .acc .vac-points + .acc-block-group { margin-top: 40px; }
}

/* === sections/delovaya-programma.css === */
/* ==========================================================================
   delovaya-programma.css — страница «Деловая программа» (раздел Программа).
   Ревизия 12.08.26 по новым макетам: файл `5pdgSREj9JrrUDS3YqnScF`,
   ноды 2755:50917 / 2755:51347 / 2755:51777 (состояния) + 2755:52209 (чипы).
   База 1920, desktop-first. Скоуп — .dprog на <main>.

   Схема: геро (как было, +подзаголовок) → светлая панель во всю ширину,
   внутри: тематические чипы, два поля поиска, и сетка «фильтр 366 | список».
   ========================================================================== */

/* ============================ ГЕРО ============================
   Коллаж и кнопки — прежние; в макете добавлен подзаголовок 24/32. */

/* полоса табов и баннер — во всю ширину окна (в макете x=0 w=1920);
   без этого коллаж режется object-fit'ом на 40px с каждой стороны */
.dprog .ptabs--flow,
.dprog .arr-hero { margin-inline: calc(var(--gutter) * -1); }

.dprog .arr-hero__inner {
  left: 88px;
  right: auto;
  bottom: 60px;
  /* колонка текста 643 — заголовок ложится в две строки (Figma 2755:50944) */
  max-width: 643px;
}
.dprog .arr-hero__title {
  margin-top: 30px;
  /* 64/72 на 1920 → плавно к 48 на 1440 */
  font: 400 clamp(48px, 3.333vw, 64px) / 1.125 var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
/* Подзаголовок под H1 (Figma 2755:50952). В разметке он вынесен из
   .arr-hero__inner — на мобиле по макету это отдельная карточка ПОД коллажем.
   На десктопе возвращаем его в колонку геро абсолютом: низ 132 = кнопки
   (60 + 40) + зазор 32; место под него держит отступ кнопок ниже. */
.dprog__hero-sub {
  position: absolute;
  left: 88px;
  bottom: 132px;
  max-width: 643px;
  margin: 0;
  font: 400 clamp(20px, 1.25vw, 24px) / 1.333 var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.dprog__hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* 16 (зазор до подзаголовка) + 2 строки подзаголовка + 32 (зазор до кнопок) */
  margin-top: calc(48px + 2.666 * clamp(20px, 1.25vw, 24px));
}
.dprog__hero-btns .btn { gap: 8px; }

/* ============================ ПАНЕЛЬ КОНТЕНТА ============================
   Frame 143: во всю ширину окна, белый 50% поверх фона, рамка, скругление
   сверху; снизу стыкуется с подвалом. */
.dprog__panel {
  margin-inline: calc(var(--gutter) * -1);
  margin-top: 80px;
  /* в макете панель стыкуется с подвалом без зазора — гасим общий отступ
     .footer{margin-top}, не трогая сам подвал. У подвала он разный по
     ступеням (120 / 60 на ≤1919 / 40 на ≤767) — гасим ровно столько же,
     иначе подвал заезжает на панель (баг ревью 17.08-2) */
  margin-bottom: -120px;
  /* -1px на рамку панели: иначе внутренняя ширина 1838, а не 1840,
     и средняя колонка карточки становится 896 вместо макетных 898 */
  padding: 0 calc(var(--gutter) - 1px) 80px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-24) var(--r-24) 0 0;
  background: rgba(255, 255, 255, 0.5);
}

/* ============================ ТЕМАТИЧЕСКИЕ ЧИПЫ ============================ */
.dprog__themes { padding: 33px 0; }
.dprog__themes .section-label { margin-bottom: 24px; }

.dprog__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* чип темы: иконка 24 + подпись; цвет задаётся модификатором ниже */
.dprog-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 16+1px бордера = 17 из макета (в Figma рамка не входит в габарит) */
  padding: 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-16);
  background: var(--chip-bg, rgba(255, 255, 255, 0.5));
  font: 400 16px/1.6 var(--font-text);
  color: var(--chip-fg, var(--c-text));
  text-align: left;
  /* Правка заказчика 21.09.26: плашка темы не подсвечивается при наведении
     и не меняет курсор — по клику она по-прежнему фильтрует список. */
  cursor: default;
  transition: background-color 0.2s ease;
}
.dprog-chip.is-active { background: var(--chip-bg-active, #e8d9c3); }
.dprog-chip__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.dprog-chip__icon img { max-width: 100%; max-height: 100%; }
/* у выбранной темы появляется крестик — снять её, не открывая ничего лишнего */
.dprog-chip__x { display: none; flex: none; align-items: center; justify-content: center; width: 16px; height: 16px; }
.dprog-chip.is-active .dprog-chip__x { display: inline-flex; }
.dprog-chip__x:hover { opacity: 0.65; }

/* палитра тем (Figma 2755:52209 — дефолт / актив; ховера у плашки нет по правке 21.09.26) */
.dprog-chip--kino        { --chip-bg: #eaf3ff; --chip-bg-active: #c7dfff; --chip-fg: #1e3a5f; }
.dprog-chip--nasledie    { --chip-bg: #f0f8ee; --chip-bg-active: #d9ead5; --chip-fg: #1e3a2e; }
.dprog-chip--suverenitet { --chip-bg: #fff7e6; --chip-bg-active: #fee9bb; --chip-fg: #4a3a17; }
.dprog-chip--mediynaya   { --chip-bg: #f3fffc; --chip-bg-active: #d2f3eb; --chip-fg: #2f7e6c; }
.dprog-chip--muzei       { --chip-bg: #fff0f1; --chip-bg-active: #ffcdd2; --chip-fg: #5a1f1f; }
.dprog-chip--muzyka      { --chip-bg: #f7f2ff; --chip-bg-active: #e8d9ff; --chip-fg: #3d2a57; }
.dprog-chip--obrazovanie { --chip-bg: #fff4fa; --chip-bg-active: #f6c8e1; --chip-fg: #4a1741; }
.dprog-chip--put         { --chip-bg: #f2f8ff; --chip-bg-active: #d3e5ff; --chip-fg: #456086; }
.dprog-chip--teatr       { --chip-bg: #ffffff; --chip-bg-active: #ffc7de; --chip-fg: #5b1e2d; }
.dprog-chip--cirk        { --chip-bg: #fff7e2; --chip-bg-active: #ffe4a1; --chip-fg: #895300; }

/* Темы из ЕПС: палитру чипа выводим из присланного цвета (--theme-color),
   чтобы вид совпадал со «своими» темами. Иконки у таких тем нет — вместо неё
   цветной кружок (см. .dprog-chip__dot). Fallback на дефолтный фон, если
   браузер не знает color-mix. */
.dprog-chip--tinted {
  --chip-bg: color-mix(in srgb, var(--theme-color) 12%, #fff);
  --chip-bg-active: color-mix(in srgb, var(--theme-color) 34%, #fff);
  --chip-fg: color-mix(in srgb, var(--theme-color) 72%, #000);
}
.dprog-chip__dot {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--theme-color, var(--c-line));
}

/* ============================ ПОИСК ============================ */
.dprog__search {
  display: flex;
  gap: 8px;
  padding: 32px 0 48px;
}
.dprog__field {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}
.dprog__input {
  width: 100%;
  height: 56px;
  padding: 11px 52px 11px 21px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-16);
  background: rgba(255, 255, 255, 0.8);
  font: 400 14px/1.4 var(--font-text);
  color: var(--c-text);
}
.dprog__input::placeholder { color: var(--c-btn-gray); }
/* нативный крестик очистки — в размер и цвет иконки поиска (ревью 17.08) */
.dprog__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background-color: var(--c-btn-gray);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  cursor: pointer;
}
.dprog__input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.dprog__field .icon {
  position: absolute;
  top: 50%;
  right: 21px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--c-btn-gray);
  pointer-events: none;
}

/* ============================ СЕТКА «ФИЛЬТР | СПИСОК» ============================ */
.dprog__layout {
  display: grid;
  grid-template-columns: 366px 1fr;
  gap: 24px;
  align-items: start;
}

/* ============================ БОКОВОЙ ФИЛЬТР ============================ */
.dprog-filter {
  display: flex;
  flex-direction: column;
  gap: 37px;
  padding: 33px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-16);
  background: rgba(255, 255, 255, 0.45);
}
.dprog-filter__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dprog-filter__head {
  margin: 0;
  font: 700 18px/1.7 var(--font-display);
  text-transform: uppercase;
  color: var(--c-secondary);
}
/* подзаголовок внутри группы («Основные площадки») */
.dprog-filter__sub {
  margin: 0;
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-secondary);
}
/* «Сбросить выбор» под группой */
.dprog-filter__clear {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font: 400 12px/20px var(--font-text);
  color: var(--c-secondary);
  text-decoration: underline;
  cursor: pointer;
}
.dprog-filter__clear:hover { color: var(--c-accent); }

/* --- плитки дат: два столбца --- */
.dprog-filter__tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* флекс-элемент — <li>, ширину задаём ему, кнопка тянется внутри */
.dprog-filter__tiles > li {
  display: flex;
  width: calc(50% - 4px);
}
.dprog-tile {
  width: 100%;
  padding: 15px; /* +1px бордера = 16 из макета */
  border: 1px solid var(--c-line);
  border-radius: var(--r-16);
  background: rgba(255, 255, 255, 0.5);
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-secondary);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.dprog-tile:hover { background: rgba(255, 255, 255, 0.75); }
.dprog-tile.is-active {
  background: #fff;
  color: var(--c-accent);
}

/* --- строки с чекбоксом (время, тип мероприятия) --- */
.dprog-filter__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dprog-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-secondary);
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}
.dprog-check__box {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-12);
  color: inherit; /* галочка красная вместе с подписью (ревью 17.08) */
}
.dprog-check__box .icon { width: 16px; height: 16px; opacity: 0; }
.dprog-check.is-checked { color: var(--c-accent); }
.dprog-check.is-checked .dprog-check__box { background: #fff; }
.dprog-check.is-checked .dprog-check__box .icon { opacity: 1; }

/* --- площадки --- */
.dprog-venue {
  display: flex;
  gap: 6px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-16);
  background: rgba(255, 255, 255, 0.5);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.dprog-venue:hover { background: rgba(255, 255, 255, 0.75); }
.dprog-venue.is-active { background: #fff; }
.dprog-venue .icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--c-accent); /* красный пин — по макету (ревью 17.08-2) */
}
.dprog-venue__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dprog-venue__name {
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-secondary);
}
.dprog-venue.is-active .dprog-venue__name { color: var(--c-accent); }
.dprog-venue__addr {
  font: 400 12px/20px var(--font-text);
  color: #8c8c8c;
}
/* «Все площадки» и «Выбрать площадку» — строки-пилюли h56 */
.dprog-filter__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 56px;
  padding: 9px 17px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-16);
  background: rgba(255, 255, 255, 0.5);
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-secondary);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.dprog-filter__pill:hover { background: rgba(255, 255, 255, 0.75); }
/* выбранное состояние — как у плиток дат (ревью 17.08) */
/* в закрытом виде выбранная выпадашка краснеет текстом; фон и рамка
   остаются прежними (2890:58387) */
.dprog-filter__pill.is-active { color: var(--c-accent); }
.dprog-filter__pill--select { justify-content: space-between; }
/* шеврон разворачивается при раскрытии списка (ревью 17.08-2) */
.dprog-filter__pill--select .icon { transition: transform 0.2s ease; }
/* подпись показывает сам выбор, поэтому прижата влево и обрезается */
.dprog-filter__pill--select [data-drop-label] {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* пока в группе что-то выбрано, шеврон сменяется крестиком сброса */
.dprog-filter__x { display: none; flex: none; }
.dprog-filter__pill.is-active .dprog-filter__chev { display: none; }
.dprog-filter__pill.is-active .dprog-filter__x { display: flex; }
.dprog-filter__x:hover { opacity: 0.7; }
.dprog-filter__venues.is-open .dprog-filter__pill--select .icon { transform: rotate(180deg); }
.dprog-filter__pill .icon { flex: none; width: 16px; height: 16px; }

/* --- выпадающий список дополнительных площадок (Figma 2755:51141) --- */
.dprog-filter__venues { position: relative; }
.dprog-venues {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  background: #fff;
  filter: drop-shadow(0 20px 12.5px rgba(120, 94, 44, 0.05));
}
.dprog-filter__venues:not(.is-open) .dprog-venues { display: none; }
.dprog-venues__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 20px;
  padding: 0 4px;
  font: 400 13px/20px var(--font-text);
  color: var(--c-text);
  white-space: nowrap;
}
.dprog-venues__count {
  flex: none;
  font-size: 12px;
  color: #8c8c8c;
  white-space: nowrap;
}
.dprog-venues__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dprog-venues__opt {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.dprog-venues__opt:hover { background: rgba(214, 191, 163, 0.2); }
.dprog-venues__box {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 4px;
  background: rgba(214, 191, 163, 0.2);
  color: var(--c-accent);
}
.dprog-venues__box .icon { width: 12px; height: 12px; opacity: 0; }
.dprog-venues__opt.is-checked .dprog-venues__box { background: #fff; }
.dprog-venues__opt.is-checked .dprog-venues__box .icon { opacity: 1; }
.dprog-venues__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dprog-venues__name { font: 400 14px/20px var(--font-text); color: var(--c-text); }
.dprog-venues__addr { font: 400 12px/20px var(--font-text); color: #8c8c8c; }
/* подтверждение выбора внизу списка: отбито от пунктов на 16 (8 общего
   зазора + 8), счётчик — сколько отмечено в этой группе */
.dprog-venues__apply {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 56px;
  margin-top: 8px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--r-8);
  background: var(--c-accent);
  font: 400 12px/20px var(--font-text);
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.dprog-venues__apply:hover { opacity: 0.92; }
.dprog-venues__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 14px;
  border-radius: var(--r-16);
  background: #fff;
  font-weight: 700;
  color: var(--c-accent);
}

/* --- шапка фильтра: счётчик применённых + общий сброс (правки 18.08) ---
   Кнопку «Применить фильтры» убрали, отбор применяется сразу. */
.dprog-filter__applied {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dprog-filter__applied .dprog-filter__head [data-filter-total] { color: var(--c-accent); }
.dprog-filter__reset {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font: 400 12px/20px var(--font-text);
  color: var(--c-secondary);
  text-decoration: underline;
  cursor: pointer;
}
.dprog-filter__reset:hover { color: var(--c-accent); }

/* мобильная панель фильтра и подложка шторки — только на ≤767 */
.dprog__mfilter,
.dprog__mfilter-backdrop { display: none; }

/* ============================ ШАПКА СПИСКА ============================ */
.dprog__list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}
.dprog__found {
  font: 400 14px/20px var(--font-text);
  color: var(--c-secondary);
  opacity: 0.6;
}

/* ============================ КАРТОЧКА СЕССИИ ============================ */
.dprog__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dprog-card {
  display: flex;
  align-items: stretch;
  gap: 28px;
  /* 36+1px бордера = 37 из макета */
  padding: 36px 40px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-16);
  background: rgba(255, 255, 255, 0.45);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.dprog-card:hover {
  border-color: var(--c-accent);
  background: rgba(255, 255, 255, 0.6);
}

/* левая колонка: дата, время, тип */
.dprog-card__aside {
  flex: none;
  width: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}
.dprog-card__when {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dprog-card__day {
  display: block;
  font: 400 86px/1 var(--font-display);
  text-transform: uppercase;
  color: var(--c-accent);
}
.dprog-card__month {
  display: block;
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
}
.dprog-card__time {
  display: block;
  font: 400 24px/32px var(--font-display);
  text-transform: uppercase;
  color: var(--c-secondary);
}
.dprog-card__kind {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 14px/20px var(--font-text);
  color: var(--c-text);
  opacity: 0.5;
}
.dprog-card__kind::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--c-accent);
}

/* правая часть: контент + кнопка трансляции */
.dprog-card__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 40px;
}
.dprog-card__main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.dprog-card__title {
  margin: 0;
  font: 400 24px/32px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.dprog-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.dprog-card__title a:hover { color: var(--c-accent); }
/* Организатор и условия посещения приезжают из ЕПС (в печатной программе они
   стоят под названием сессии и рядом с площадкой). Макета под них нет —
   держим нейтрально: организатор приглушённой строкой, доступ акцентом. */
.dprog-card__organizer {
  margin: 0;
  font: 400 14px/20px var(--font-text);
  color: var(--c-text);
  opacity: 0.5;
}
.dprog-card__access {
  margin: 0;
  font: 400 14px/20px var(--font-text);
  color: var(--c-accent);
}
.dprog-card__place {
  display: flex;
  gap: 6px;
  width: 100%;
  font: 400 14px/20px var(--font-text);
  color: var(--c-text);
  opacity: 0.5;
}
.dprog-card__place .icon { flex: none; width: 20px; height: 20px; }
.dprog-card__place p { margin: 0; }
.dprog-card__desc {
  margin: 0;
  /* в макете описание обрывается на второй строке */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* 16/1.6 — кегль уменьшен по ревью 17.08 */
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-text);
}
.dprog-card__side {
  flex: none;
  /* колонка кнопки 182 — иначе средняя колонка уже макетных 898 и заголовок
     переносится в другом месте */
  width: 182px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.dprog-card__link { width: 100%; }
.dprog-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 56px;
  padding: 0 32px;
  border-radius: var(--r-8);
  background: var(--c-accent);
  font: 400 16px/24px var(--font-text);
  color: #fff;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.dprog-card__link:hover { opacity: 0.9; }
.dprog-card__link .icon { flex: none; width: 20px; height: 20px; }

/* ============================ «ПОКАЗАТЬ ЕЩЕ» ============================ */
.dprog__more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.dprog__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 32px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-8);
  background: rgba(255, 255, 255, 0.45);
  font: 400 16px/24px var(--font-text);
  color: var(--c-text);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.dprog__more:hover { background: rgba(255, 255, 255, 0.7); }

/* ============================================================
   @1919 — основная десктоп-ступень (кегли ведёт clamp выше)
   ============================================================ */
@media (max-width: 1919px) {
  .dprog__panel { margin-bottom: -60px; } /* .footer margin-top на этой ступени 60 */
  .dprog__layout { grid-template-columns: clamp(300px, 19vw, 366px) 1fr; }
  .dprog-card__day { font-size: clamp(64px, 4.48vw, 86px); }
}

/* ============================================================
   ≤1200 — фильтр уезжает под контент, карточка перестраивается
   ============================================================ */
@media (max-width: 1200px) {
  .dprog .arr-hero__inner { left: var(--gutter); max-width: none; }
  .dprog__panel { margin-top: 60px; padding-bottom: 60px; }

  .dprog__layout { grid-template-columns: 1fr; }
  /* фильтр — раскрывающаяся панель над списком */
  .dprog-filter { gap: 28px; }

  .dprog-card { flex-direction: column; gap: 20px; }
  .dprog-card__aside {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
  }
  .dprog-card__when { flex-direction: row; align-items: baseline; gap: 12px; }
  .dprog-card__kind { margin-left: auto; }
  .dprog-card__body {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .dprog-card__side { width: auto; align-items: flex-start; }
  .dprog-card__link { width: auto; }
}

/* ============================================================
   ≤1023 — планшет
   ============================================================ */
@media (max-width: 1023px) {
  .dprog__search { flex-direction: column; padding-bottom: 32px; }
  .dprog__field { flex: 1 1 auto; }
  .dprog-card__day { font-size: 64px; }
}

/* ============================================================
   @767 — мобилка
   ============================================================ */
@media (max-width: 767px) {
  /* полосы назад в контейнер (gutter 16) */
  .dprog .ptabs--flow,
  .dprog .arr-hero { margin-inline: 0; }
  /* макет 375 держит зазор 10 (общий мобильный — 28) */
  .dprog .ptabs--flow + .arr-hero { margin-top: 10px; }
  /* подписи секций на этой странице крупнее общего мобильного глобала
     (тот откалиброван по макету 360 главной): макет 2761:57036 — тире 68x12, текст 18/29 */
  .dprog .section-label__dash { width: 68px; height: 12px; }
  .dprog .section-label__text { font-size: 18px; line-height: 29px; }
  .dprog__panel {
    margin-inline: calc(var(--gutter) * -1);
    margin-top: 24px;
    margin-bottom: -40px; /* .footer margin-top на мобилке 40 */
    padding: 0 var(--gutter) 40px;
    border: 0;
    border-radius: 0;
  }

  /* ---- HERO по макету 375 (Figma 2761:57001): заголовок и кнопки лежат
     на коллаже, подзаголовок — отдельной карточкой под ним ---- */
  .dprog .arr-hero {
    height: auto;
    padding-top: 336px; /* высота коллажа */
    border-radius: 0;
    overflow: visible;
  }
  .dprog .arr-hero__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 336px;
    border-radius: var(--r-16);
    /* картинка мобильная (343x336) — совпадает по пропорции, кроп не нужен */
    object-position: center;
  }
  .dprog .arr-hero__inner {
    top: 78px;
    left: 16px;
    right: 16px;
    bottom: auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 311px;
  }
  .dprog .arr-hero__title {
    margin: 0;
    max-width: 227px; /* гасит протечку visa.css (max-width: min-content) */
    font-size: 32px;
    line-height: 40px;
  }
  .dprog__hero-btns {
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 2px; /* до 32 от заголовка вместе с gap колонки */
  }
  .dprog__hero-btns .btn { width: 100%; }
  /* подзаголовок — карточка под коллажем */
  .dprog__hero-sub {
    position: static;
    max-width: none;
    margin: 24px 0 0;
    padding: 16px; /* + рамка = карточка 114 по макету */
    border: 1px solid var(--c-line);
    border-radius: var(--r-16);
    background: rgba(255, 255, 255, 0.5);
    /* кегль снят по ink-ширинам строк макета (16 давал 1.23 от макетной) */
    font-size: 20px;
    line-height: 28px;
  }


  /* ---- фильтр как шторка (Figma 2761:57118 + 2761:57319) ---- */
  .dprog__mfilter {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 32px; /* 8 до секции + её 24 сверху по макету */
  }
  .dprog__mfilter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 15px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-16);
    background: rgba(255, 255, 255, 0.8);
    font: 400 14px/20px var(--font-text);
    color: var(--c-btn-gray);
    cursor: pointer;
  }
  .dprog__mfilter-label { flex: 1 1 auto; text-align: left; }
  .dprog__mfilter-count {
    flex: none;
    padding: 2px 14px;
    border-radius: var(--r-16);
    /* Almond Card: белый 50% поверх c-bg */
    background: rgb(248, 238, 226);
    font: 700 12px/20px var(--font-text);
    color: var(--c-accent);
  }
  .dprog__mfilter-count[hidden] { display: none; }
  .dprog__mfilter-btn .icon { flex: none; width: 24px; height: 24px; }
  .dprog__mfilter-title {
    margin: 0;
    padding-top: 4px;
    font: 400 16px/1.6 var(--font-text);
    color: var(--c-secondary);
  }
  /* чипы выбранных фильтров — тоже каруселью */
  .dprog .dprog__mchips {
    list-style: none;
    margin: 0;
    padding: 0 var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .dprog__mchips::-webkit-scrollbar { display: none; }
  .dprog__mchips > li { scroll-snap-align: start; }
  .dprog__mchip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px; /* + рамка = 36 по макету */
    border: 1px solid var(--c-line);
    border-radius: var(--r-8);
    background: rgba(255, 255, 255, 0.8);
    font: 400 14px/20px var(--font-text);
    color: var(--c-btn-gray);
    white-space: nowrap;
    opacity: 0.8;
    cursor: pointer;
  }
  .dprog__mchip .icon { flex: none; width: 16px; height: 16px; }
  .dprog__mfilter-reset {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font: 400 12px/20px var(--font-text);
    color: var(--c-secondary);
    text-decoration: underline;
    cursor: pointer;
  }

  /* фильтр на мобиле — модальная шторка снизу (макет 2761:57319):
     белая, скруглённая сверху, с ручкой; страница за ней затемнена.
     reveal держит на .dprog-filter opacity/transform — гасим их в открытом
     состоянии, иначе position: fixed считается от трансформированного предка. */
  .dprog-filter { display: none; }
  body.is-mfilter-open .dprog-filter {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    max-height: 90vh;
    overflow-y: auto;
    gap: 32px;
    padding: 17px 17px 32px; /* язычок на 17 сверху, как в макете */
    border: 0;
    border-radius: var(--r-24) var(--r-24) 0 0;
    background: #fff;
    opacity: 1;
    transform: none;
  }
  /* ручка шторки 38x3 */
  body.is-mfilter-open .dprog-filter::before {
    content: '';
    flex: none;
    align-self: center;
    width: 38px;
    height: 3px;
    margin-bottom: -16px; /* до первого блока 16, а не общие 32 */
    border-radius: 5px;
    background: #d9d9d9;
  }
  .dprog__mfilter-backdrop { display: none; }
  body.is-mfilter-open .dprog__mfilter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(0, 0, 0, 0.53);
  }
  body.is-mfilter-open { overflow: hidden; }
  /* заголовки групп и плитки дат в шторке — по макету 375 */
  /* шторка по макету 2890:58321: заголовки групп Cochin 16/28 обычные,
     а не десктопные 18 жирные (проверено по ink-ширине) */
  .dprog-filter__head { font: 400 16px/28px var(--font-display); }
  .dprog-tile {
    padding: 11px 15px; /* + рамка = 12/16 макета, плитка 44 */
    font-size: 14px;
    line-height: 20px;
  }
  /* пилюля выпадашки: текст 14/20 слева, высота 56 (2890:58387) */
  .dprog-filter__pill {
    justify-content: space-between;
    padding: 17px 16px;
    font: 400 14px/20px var(--font-text);
  }

  /* в шторке строки времени и типа — в две колонки (макет 2761:57319) */
  .dprog-filter__rows {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .dprog-filter__rows > li { width: calc(50% - 4px); }
  /* площадки и «Все площадки» остаются на всю ширину */
  .dprog-filter__group:nth-of-type(3) .dprog-filter__rows > li { width: 100%; }
  .dprog-check { width: 100%; }

  /* ---- тематические секции: горизонтальная карусель + точки ---- */
  .dprog__themes {
    margin-inline: calc(var(--gutter) * -1);
    padding: 24px var(--gutter);
    border: 1px solid var(--c-line);
    border-radius: var(--r-16) var(--r-16) 0 0;
  }
  .dprog__themes .section-label { margin-bottom: 24px; }
  /* .dprog перед классом — иначе ресет ul[class] (0,1,1) съедает padding */
  .dprog .dprog__chips {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .dprog__chips::-webkit-scrollbar { display: none; }
  .dprog__chips > li {
    scroll-snap-align: start;
    flex: none;      /* иначе карусель сжимает чипы и текст ползёт в 3-4 строки */
    display: flex;
  }
  .dprog__chips > li > .dprog-chip { width: 100%; }
  .dprog-chip {
    padding: 12px; /* + рамка = 13 по макету, высота ряда 66 */
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    white-space: normal;
  }
  .dprog-chip__icon { width: 18px; height: 18px; }
  /* ширины подписей — из макета 2761:57040 (чип = 13 + 18 + 8 + подпись + 13) */
  .dprog__chips [data-theme="vse-temy"] .dprog-chip__icon + span { width: 34px; }
  .dprog__chips [data-theme="kino"] .dprog-chip__icon + span { width: 32px; }
  .dprog__chips [data-theme="nasledie"] .dprog-chip__icon + span { width: 174px; }
  .dprog__chips [data-theme="suverenitet"] .dprog-chip__icon + span { width: 161px; }
  .dprog__chips [data-theme="mediynaya"] .dprog-chip__icon + span { width: 69px; }
  .dprog__chips [data-theme="muzei"] .dprog-chip__icon + span { width: 41px; }
  .dprog__chips [data-theme="muzyka"] .dprog-chip__icon + span { width: 90px; }
  .dprog__chips [data-theme="obrazovanie"] .dprog-chip__icon + span { width: 144px; }
  .dprog__chips [data-theme="put-kultur"] .dprog-chip__icon + span { width: 275px; }
  .dprog__chips [data-theme="teatr"] .dprog-chip__icon + span { width: 37px; }
  .dprog__chips [data-theme="cirk"] .dprog-chip__icon + span { width: 33px; }
  /* точки-пагинация под каруселью */
  .dprog__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
  }
  .dprog__mfilter .dprog__dots { margin-top: 0; }
  .dprog__dots span {
    width: 4px;
    height: 4px;
    border-radius: 50px;
    background: var(--c-line);
  }
  .dprog__dots span.is-active { background: var(--c-accent); }

  .dprog__search { flex-direction: column; gap: 8px; padding: 16px 0 8px; }

  /* ---- карточка сессии по мобильному макету (Figma 2761:57180) ---- */
  .dprog-card { flex-direction: row; gap: 28px; padding: 16px; }
  .dprog-card__aside {
    width: 86px;
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
  }
  .dprog-card__when { flex-direction: column; gap: 12px; align-items: flex-start; }
  .dprog-card__day { font-size: 32px; line-height: 40px; }
  .dprog-card__month { font-size: 14px; line-height: 20px; }
  .dprog-card__time { font-size: 16px; line-height: 28px; }
  .dprog-card__kind { margin: 0; align-items: flex-start; }
  .dprog-card__body { flex-direction: column; gap: 16px; }
  .dprog-card__main { gap: 16px; }
  .dprog-card__main .dprog-chip {
    width: 100%;
    padding: 12px; /* + рамка = 13, плашка 54 по макету */
    font-size: 10px;
    line-height: 14px;
  }
  .dprog-card__main .dprog-chip__icon { width: 16px; height: 16px; }
  .dprog-card__title { font-size: 14px; line-height: 20px; }
  .dprog-card__place { font-size: 10px; line-height: 14px; }
  .dprog-card__place .icon { width: 16px; height: 16px; }
  .dprog-card__desc { font-size: 14px; line-height: 20px; }
  .dprog-card__side { width: 100%; }
  .dprog-card__link { width: 100%; }


  .dprog-filter { padding: 16px; gap: 24px; }
  .dprog-tile { width: 100%; }

  .dprog__list-head { flex-wrap: wrap; gap: 8px; }
  .dprog__more { width: 100%; }
  .dprog__more-wrap { margin-top: 32px; }
}

/* Из обмена может прийти только тема и название — тогда фасетов нет и панели
   фильтра тоже: список занимает всю ширину, а не уезжает на пустую колонку.
   Скоуп страницы в селекторе не для изоляции, а для веса: ниже по файлу
   ширины колонок правят медиазапросы, и одноклассовый модификатор им проиграл. */
.dprog .dprog__layout--full { grid-template-columns: minmax(0, 1fr); }

/* Выборка прячет карточки и служебные контролы атрибутом hidden, а display у них
   задан явно (flex) и перебивает браузерное [hidden] { display: none } — без
   этого сброса отфильтрованные карточки остаются на экране, и фильтр выглядит
   нерабочим, хотя счётчик «Найдено» считает верно. */
.dprog-card[hidden],
.dprog__more[hidden],
.dprog-filter__count[hidden],
.dprog-venues__count[hidden] { display: none; }

/* === sections/kulturnaya-programma.css === */
/* ==========================================================================
   kulturnaya-programma.css — страница «Культурная программа» (раздел Программа).
   Макет: файл `nlM0zXDrFGDTC5ueXLmrgS` («ФОК 18.08.26 — Copy»),
   нода 2805:34039 — «вариант с фильтром только сбоку 1920w light».
   База 1920, desktop-first.

   Скоуп — .kprog, но на <main> он висит ВМЕСТЕ с .dprog:
   геро, светлая панель и боковой фильтр в макете культурной совпадают с
   деловой один в один (те же 366|1450, те же плитки/чекбоксы, те же токены),
   а program-filter.js завязан на `.dprog` и классы `.dprog-filter*`.
   Поэтому общая часть переиспользуется как есть, а всё, что отличается,
   живёт здесь под `.kprog` либо в собственных классах `.kprog-*`.

   Отличия от деловой:
   — нет тематических чипов и полей поиска (в макете слои скрыты);
   — в фильтре вместо «Место проведения» — «Формат доступа» (сами выпадашки
     по ревью 26.08 такие же, как в деловой, — и на мобилке, и на десктопе);
   — карточка своя: два бейджа, полный текст (без обрезки), справа —
     картинка 300x210 и текст про доступ ярким (accent) цветом.
   ========================================================================== */

/* панель начинается сразу с сетки «фильтр | список» — в макете 48 сверху
   (у деловой там чипы тем со своим паддингом) */
.kprog .dprog__panel { padding-top: 48px; }

/* шапка списка и пагинация отбиты на 24 (у деловой — 16) */
.kprog .dprog__list-head { margin-bottom: 24px; }

/* ============================ ФИЛЬТР ============================
   Компонент выпадашек взят у деловой и остаётся единообразным: сам
   чекбокс — как в макете, без обводки (Figma 2805:34257, ревью 27.08).
   Отличие культурной одно — подпись выбранного пункта акцентом
   (Figma 2805:34163), у деловой она тёмная. */
.kprog .dprog-venues__opt.is-checked .dprog-venues__name { color: var(--c-accent); }

/* ============================ КАРТОЧКА ============================
   Figma 2805:34282: 41 по бокам, 37 сверху / 43 снизу, колонки 220 | 1fr | 300. */
.kprog__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kprog-card {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  /* +1px бордера к 40/36/42 из макета */
  padding: 36px 40px 42px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-16);
  background: rgba(255, 255, 255, 0.45);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.kprog-card:hover {
  border-color: var(--c-accent);
  background: rgba(255, 255, 255, 0.6);
}

/* --- левая колонка: дата, время, площадка --- */
.kprog-card__aside {
  flex: none;
  align-self: stretch;
  width: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.kprog-card__when {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kprog-card__day {
  display: block;
  font: 400 86px/1 var(--font-display);
  text-transform: uppercase;
  color: var(--c-accent);
}
.kprog-card__month {
  display: block;
  /* в макете подпись месяца заходит на цифру на 8px */
  margin-top: -8px;
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
}
.kprog-card__time {
  display: block;
  font: 400 24px/32px var(--font-display);
  text-transform: uppercase;
  color: var(--c-secondary);
}
.kprog-card__place {
  display: flex;
  gap: 6px;
  width: 100%;
}
.kprog-card__place .icon {
  flex: none;
  width: 20px;
  height: 20px;
  /* пин по макету красный, подпись — приглушённая */
  color: var(--c-accent);
}
.kprog-card__place p {
  margin: 0;
  font: 400 14px/20px var(--font-text);
  color: var(--c-text);
  opacity: 0.5;
}

/* --- середина: бейджи, заголовок, текст --- */
.kprog-card__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* в макете тело отбито от медиа-колонки ещё на 16 внутренним паддингом */
  padding-right: 16px;
}
.kprog-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kprog-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 16+1px бордера = 17 из макета */
  padding: 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-16);
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-text);
}
.kprog-badge .icon {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--c-secondary);
}
/* тип мероприятия — песочный, формат доступа — белый (Figma 2805:34297/34303) */
.kprog-badge--type { background: rgba(214, 191, 163, 0.2); }
.kprog-badge--access { background: rgba(255, 255, 255, 0.5); }

.kprog-card__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kprog-card__title {
  margin: 0;
  font: 400 24px/32px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.kprog-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.kprog-card__title a:hover { color: var(--c-accent); }
.kprog-card__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kprog-card__text p {
  margin: 0;
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-text);
}

/* --- правая колонка: картинка и условия доступа --- */
.kprog-card__media {
  flex: none;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.kprog-card__img {
  display: block;
  width: 300px;
  height: 210px;
  border-radius: var(--r-16);
  object-fit: cover;
}
/* «текст про доступ — ярким цветом» (правка заказчика, в макете c/accent) */
.kprog-card__access p {
  margin: 0;
  font: 400 14px/20px var(--font-text);
  color: var(--c-accent);
}

/* ============================ «ЗАГРУЗИТЬ ЕЩЕ» ============================
   Figma 2805:34439 — контурная кнопка в цвет c/secondary. */
.kprog__more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.kprog__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 56px;
  padding: 0 24px;
  border: 1px solid var(--c-secondary);
  border-radius: var(--r-8);
  background: rgba(255, 255, 255, 0.4);
  font: 400 16px/24px var(--font-text);
  color: var(--c-secondary);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.kprog__more:hover { background: rgba(255, 255, 255, 0.7); }
.kprog__more .icon { flex: none; width: 16px; height: 16px; }

/* ============================================================
   @1919 — основная десктоп-ступень
   ============================================================ */
@media (max-width: 1919px) {
  .kprog .kprog-card__day { font-size: clamp(64px, 4.48vw, 86px); }
}

/* ============================================================
   ≤1200 — фильтр уезжает над списком, карточка перестраивается
   ============================================================ */
@media (max-width: 1200px) {
  .kprog .dprog__panel { padding-top: 32px; }

  .kprog-card {
    flex-wrap: wrap;
    gap: 24px;
  }
  /* ревью 26.08: верхние блоки карточки (дата/площадка и фото/доступ)
     делят ширину поровну */
  .kprog-card__aside {
    align-self: auto;
    order: 1;
    flex: 1 1 0;
    width: auto;
  }
  .kprog-card__media {
    order: 2;
    flex: 1 1 0;
    width: auto;
    max-width: none;
  }
  .kprog-card__img { width: 100%; height: auto; aspect-ratio: 300 / 210; }
  .kprog-card__body {
    order: 3;
    flex: 1 1 100%;
    padding-right: 0;
  }
}

/* ============================================================
   ≤1023 — планшет
   ============================================================ */
@media (max-width: 1023px) {
  .kprog-card__day { font-size: 64px; }
  .kprog-card__aside {
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
  }
  .kprog-card__when { flex: none; }
  .kprog-card__place { flex: 1 1 auto; max-width: 420px; }
  /* ревью 26.08: с 768 фото и красное пояснение — под тегами, заголовком
     и текстом, как на мобилке */
  .kprog-card__body { order: 2; }
  .kprog-card__media { order: 3; max-width: none; flex-basis: 100%; }
}

/* ревью 26.08: на планшете заголовок геро ложится в две строки —
   в деловой на ≤1200 колонка распускается на всю ширину, здесь её
   придерживаем */
@media (min-width: 768px) and (max-width: 1200px) {
  .kprog .arr-hero__inner { max-width: 45%; }
}

/* ============================================================
   @767 — мобилка (макет мобильной культурной не выдан —
   ступень собрана по образцу деловой программы)
   ============================================================ */
@media (max-width: 767px) {
  .kprog .dprog__panel { padding-top: 24px; }

  .kprog-card {
    flex-direction: column;
    gap: 16px;
    padding: 20px 16px 24px;
  }
  /* на узком экране картинка и условия доступа — после текста мероприятия,
     иначе фото разрывает связку «дата → название» */
  .kprog-card__body { order: 2; }
  .kprog-card__media { order: 3; }
  .kprog-card__aside {
    flex-direction: column;
    gap: 12px;
  }
  /* ревью 26.08: время — по правому краю блока и по верху цифр даты
     (ширину задаём явно: у aside на планшетной ступени align-items:flex-start) */
  .kprog-card__when {
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  .kprog-card__day { font-size: 56px; }
  .kprog-card__month { margin-top: 0; font-size: 16px; }
  .kprog-card__time { font-size: 20px; line-height: 28px; }
  .kprog-card__place { max-width: none; }

  .kprog-card__body { gap: 16px; }
  .kprog-badge { padding: 11px 12px; font-size: 14px; }
  .kprog-badge .icon { width: 20px; height: 20px; }
  .kprog-card__title { font-size: 20px; line-height: 28px; }
  .kprog-card__text p { font-size: 14px; }

  .kprog-card__media { gap: 16px; }
  .kprog__more { width: 100%; }
}

/* Выборка (program-filter.js) прячет карточки и кнопку догрузки атрибутом
   hidden, а display у них задан явно (flex/inline-flex) и перебивает
   браузерное [hidden] { display: none } — возвращаем скрытие, как у деловой. */
.kprog-card[hidden],
.kprog__more[hidden] { display: none; }

/* === sections/press-programma.css === */
/* Витрина «Программа пресс-мероприятий» (/programme/press-events/, скоуп .pprog).
   Разметка и фильтр общие с деловой (delovaya-programma.css) — здесь только то,
   что отличается. */

/* Заголовок баннера переносится вручную: «ПРОГРАММА» / «ПРЕСС-МЕРОПРИЯТИЙ»
   (<br> в подписях, правка заказчика 22.09.26). На телефоне «ПРЕСС-МЕРОПРИЯТИЙ»
   в строку не влезает — там перенос отдаём браузеру, он ломает по дефису. */
@media (max-width: 767px) {
  .pprog .arr-hero__title br { display: none; }
}

/* === sections/media-rules.css === */
/* ==========================================================================
   media-rules.css — страница «Правила аккредитации СМИ» (раздел «Медиа»).
   Макет: Figma 2472:66156 (файл czVrMu5TZMTjWkq0ZBhTe9, «ФОК 30.07.26 Copy»),
   только 1920 — адаптив авторский, по паттернам «Политики упоминаний».
   Каркас переиспользуется: крошки/hero — arrival.css (+ arr-hero--light из
   visa.css), карточки-шаги — visa.css (.visa-steps/.visa-step/.visa-bullets),
   таб-меню — page-tabs.css. Полоса табов и баннер — во всю ширину окна
   (в макете article и arr-hero x=0 w=1920, контент ниже — x=40 w=1840).
   Скоуп .mrl на <main>. Адаптив: @1919 → @1023 → @767.
   ========================================================================== */

/* ---------- Full-bleed: гасим гаттер контейнера у табов и баннера ---------- */
.mrl .ptabs--flow,
.mrl .arr-hero {
  margin-inline: calc(var(--gutter) * -1);
}

/* ---------- Hero (Figma 2472:66171): запечённый коллаж, тёмный заголовок.
   Заголовок 64/72 (не 84/90 как у прочих hero), метка →30→ заголовок,
   инна x=88, низ 60, ширина блока 755 (заголовок в две строки). ---------- */
/* Кроп cover живёт на 1024–1486 (min-высота 480 у arr-hero) и на планшете:
   держим окно у левого края — коллаж уезжает правее заголовка и не лезет
   под текст (на ≥1486 масштаб задаёт ширина, кроп не работает). */
.mrl .arr-hero__img { object-position: left center; }

@media (min-width: 1024px) {
  .mrl .arr-hero__inner {
    left: 88px;
    bottom: 60px;
    max-width: 755px;
  }
  .mrl .arr-hero__title {
    /* визуальный зазор метка→заголовок 30 (инлайн-svg метки добавляет ~6 под базовой линией) */
    margin-top: 24px;
    /* 64/72 — это уже значение кита на 1440, вниз не занижаем (ниже 1024
       кегль отдаём ступеням arrival.css: 40/46 → 28/32) */
    font-size: 64px;
    line-height: 72px;
  }
}

/* ==========================================================================
   Шаги-разделы правил (Figma 2472:66197 — ol.visa-steps).
   Геометрия карточки из visa.css; здесь — макетные значения этой страницы
   (padding 41/37, gap 24, тело 1400) + плавный съезд к киту 1440 через clamp.
   ========================================================================== */
.mrl-steps {
  margin-top: clamp(56px, 4.167vw, 80px);
  margin-bottom: clamp(80px, 6.25vw, 120px);
}

@media (min-width: 1024px) {
  .mrl .visa-step {
    gap: 24px;
    padding: clamp(28px, 1.927vw, 37px) clamp(32px, 2.135vw, 41px);
  }
  .mrl .visa-step__num {
    width: clamp(40px, 2.292vw, 44px);
    height: clamp(40px, 2.292vw, 44px);
    font-size: clamp(18px, 1.042vw, 20px);
  }
  .mrl .visa-step__title {
    font-size: clamp(24px, 1.667vw, 32px);
    line-height: clamp(30px, 2.083vw, 40px);
  }
}

/* Тело карточки: колонка с шагом 16, ширина по макету 1400 */
.mrl .visa-step__body {
  width: 100%;
  max-width: 1400px;
  gap: 16px;
}

/* Одиночный абзац в теле шага (Figma 2472:66359) */
.mrl .visa-step__body > p {
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
  text-wrap: pretty;
}

/* ---------- Пункт с номером «1.1» (Figma 2472:66204) ---------- */
.mrl-clause {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.mrl-clause__num {
  flex: none;
  width: 30px;
  font: 700 18px/1.7 var(--font-display);
  text-transform: uppercase;
  color: var(--c-accent);
}
.mrl-clause__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px; /* несколько абзацев внутри одного пункта (Figma 2472:66222) */
}
.mrl-clause__body p {
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
  text-wrap: pretty;
}

/* ---------- Маркированные списки под пунктом (Figma 2472:66242) ----------
   Точка-маркер и отступы — из visa.css; здесь свои кегль (18/1.6), шаг 10
   и левый отступ списка 44 (li.x=44 внутри тела шага). */
.mrl .visa-bullets {
  gap: 10px;
  padding-left: 44px;
}
.mrl .visa-bullets > li {
  /* отступ под точку 26 (в макете текст li на x=26); visa.css в @1919 занижает
     его до 24 — на основной десктоп-ступени держим макетные 26 */
  padding-left: 26px;
  font: 400 18px/1.6 var(--font-text);
}
.mrl .visa-bullets > li::before {
  top: calc((1.6em - 8px) / 2);
}

/* Вложенный список тире (Figma 2472:66270: полоска 16×2, зазор 8) */
.mrl-dashes {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mrl-dashes li {
  position: relative;
  padding-left: 24px;
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
  text-wrap: pretty;
}
.mrl-dashes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc((1.6em - 2px) / 2);
  width: 16px;
  height: 2px;
  border-radius: 0; /* гасим круглый маркер .visa-bullets li::before из visa.css */
  background: var(--c-accent);
}

/* ==========================================================================
   ≤1919 — кегль тел не занижаем (18 = лид 1440-кита), геометрия на clamp выше.
   ========================================================================== */

/* ==========================================================================
   ≤1023 — планшет: список поджимаем к левому краю тела.
   ========================================================================== */
@media (max-width: 1023px) {
  /* заголовок в три строки — узкий блок не достаёт до коллажа */
  .mrl .arr-hero__title { max-width: 320px; }

  .mrl .visa-bullets { padding-left: 24px; }
}

/* ==========================================================================
   ≤767 — мобилка. Своего макета 375 у страницы нет, поэтому значения взяты
   из системного принятого макета 375 этого же файла («Бронирование гостиниц»,
   2205:85057): контент x=16 (gutter), баннер 343×300 в контейнере, метка →24→
   заголовок 32/40, низ 20, боди 16/1.6, подзаголовок Cochin 20/28.
   ========================================================================== */
@media (max-width: 767px) {
  .mrl .ptabs--flow,
  .mrl .arr-hero { margin-inline: 0; }

  /* окно кропа: заголовок 32/40 занимает почти всю ширину карточки, поэтому
     коллаж уводим за правый край — текст ложится на спокойный фон */
  .mrl .arr-hero__img { object-position: 28% center; }
  /* 32/40 и зазор метка→заголовок 24 — как в макете 375 (2205:85070/85075) */
  .mrl .arr-hero__title {
    max-width: none;
    margin-top: 18px; /* 18 + ~6 свеса svg-метки = визуальные 24 */
    font-size: 32px;
    line-height: 40px;
  }

  .mrl .visa-step { padding: 22px 20px; }
  .mrl .visa-step__body { gap: 14px; }
  .mrl .visa-step__title { line-height: 28px; } /* Cochin 20/28 (2205:85093) */
  .mrl .visa-step__body > p { font-size: 16px; }

  .mrl-clause { gap: 10px; }
  .mrl-clause__num { width: 28px; font-size: 16px; }
  .mrl-clause__body p { font-size: 16px; }

  .mrl .visa-bullets { padding-left: 0; }
  .mrl .visa-bullets > li { padding-left: 24px; font-size: 16px; }

  .mrl-dashes li { font-size: 16px; padding-left: 22px; }
  .mrl-dashes li::before { width: 14px; }
}

/* === sections/mentions.css === */
/* ==========================================================================
   mentions.css — страница «Политика упоминаний» (раздел «Медиа»).
   Макет: Figma 2308:191531 (файл QEYhPaT99ySWhvx37zZQBM, «ФОК 10.07.26 Copy»).
   Каркас переиспользуется: крошки/hero — arrival.css (+ arr-hero--light из
   visa.css), карточки — visa.css (.visa-case), таб-меню — page-tabs.css.
   Полоса табов и баннер — во всю ширину окна (Figma: article и arr-hero
   x=0 w=1920, контент ниже — x=40 w=1840), как на «Архитектуре программы».
   Скоуп .mnt на <main>. Адаптив: @1919 → @1023 → @767.
   ========================================================================== */

/* ---------- Full-bleed: гасим гаттер контейнера у табов и баннера ---------- */
.mnt .ptabs--flow,
.mnt .arr-hero {
  margin-inline: calc(var(--gutter) * -1);
}

/* ---------- Hero (Figma 2308:191546): запечённый коллаж, тёмный заголовок.
   Заголовок 56/64 (не 84/90 как у прочих hero), метка →30→ заголовок,
   инна x=88, низ 76; ширина 560 — под две строки (Figma Frame 75: 542). */
.mnt .arr-hero__img { object-position: right center; }

@media (min-width: 1024px) {
  .mnt .arr-hero__inner {
    left: 88px;
    bottom: 76px;
    max-width: 560px;
  }
  .mnt .arr-hero__title {
    /* визуальный зазор метка→заголовок 30 (инлайн-svg метки добавляет ~6 под базовой линией) */
    margin-top: 24px;
    font-size: 56px;
    line-height: 64px;
  }
}

/* ---------- Лид (Figma 2308:191573): 80 от hero, 18/1.6, абзацы через 8 ---------- */
.mnt-lead {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: clamp(56px, 4.167vw, 80px);
  max-width: 1310px;
}
.mnt-lead p {
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
  text-wrap: pretty;
}

/* ---------- Карточки форматов (Figma 2308:191576): сетка 2×2, зазор 16.
   Сама карточка — .visa-case из visa.css (фон/рамка/радиус/заголовок). */
.mnt-cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}
.mnt-cases .visa-case p {
  margin-top: 24px;
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
  text-wrap: pretty;
}
/* Монитор 1920 = вьюпорт ~1905 и падает в тир @1919 visa.css (40/44 + 24/30) —
   держим макетные 48/56 и 32/40 на 1920 с плавным съездом к киту 1440 (clamp).
   Ниже 1024 отдаём карточку целиком тирам visa.css. */
@media (min-width: 1024px) {
  .mnt-cases .visa-case {
    padding: clamp(40px, 2.5vw, 48px) clamp(44px, 2.917vw, 56px);
  }
  .mnt-cases .visa-case__title {
    font-size: clamp(24px, 1.667vw, 32px);
    line-height: clamp(30px, 2.083vw, 40px);
  }
}

/* ---------- «Ответственность» (Figma 2308:191599): тёмная полоса с запечённым
   коллажем (40% затемнение и шторка вварены в webp), заголовок слева,
   нота с рамкой — справа (843). ---------- */
.mnt-duty {
  display: flex;
  flex-wrap: wrap; /* 1024–1359: нота (843) не влезает к заголовку — переносится вниз */
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px 48px;
  margin-top: 24px;
  padding: clamp(44px, 3.333vw, 64px);
  border-radius: var(--r-24);
  background: url(../img/media/duty-bg.webp) center / cover no-repeat var(--c-dark);
}
.mnt-duty__title {
  font: 400 40px/48px var(--font-display);
  font-size: clamp(32px, 2.083vw, 40px);
  line-height: clamp(40px, 2.5vw, 48px);
  text-transform: uppercase;
  color: #fff;
}
.mnt-duty__note {
  flex: none;
  width: 843px;
  max-width: 100%;
  display: flex;
  gap: 8px;
  padding: 32px 24px;
  border: 1px solid var(--c-dark-soft);
  border-radius: var(--r-16);
}
.mnt-duty__icon {
  flex: none;
  margin-top: 2px;
  color: var(--c-accent);
}
.mnt-duty__note p {
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-bg);
  text-wrap: pretty;
}

/* ==========================================================================
   ≤1440: только отступы; шрифты не занижаем (18 = лид 1440-кита,
   карточка сама пересчитывается в visa.css).
   ========================================================================== */
@media (max-width: 1919px) {
  .mnt-cases .visa-case p { margin-top: 20px; }
  .mnt-duty__note { padding: 24px 20px; }
}

/* ==========================================================================
   ≤1024 — планшет: карточки в столбец, «Ответственность» стопкой.
   ========================================================================== */
@media (max-width: 1023px) {
  /* cover начинает кропать (фикс-высоты hero): держим плоский левый край
     коллажа под заголовком, арт остаётся справа */
  .mnt .arr-hero__img { object-position: left center; }

  .mnt-lead { margin-top: 48px; }
  .mnt-cases { grid-template-columns: 1fr; gap: 20px; }

  .mnt-duty {
    flex-direction: column;
    gap: 24px;
    padding: 32px;
  }
  .mnt-duty__title { font-size: 28px; line-height: 34px; }
  .mnt-duty__note { width: auto; }
}

/* ==========================================================================
   ≤767 — мобилка: full-bleed выключаем, значения по паттерну visa.css @767.
   ========================================================================== */
@media (max-width: 767px) {
  .mnt .ptabs--flow,
  .mnt .arr-hero { margin-inline: 0; }

  .mnt-lead { margin-top: 40px; }
  .mnt-lead p { font-size: 14px; line-height: 20px; }
  .mnt-cases { gap: 12px; }
  .mnt-cases .visa-case p { margin-top: 16px; font-size: 14px; line-height: 20px; }

  .mnt-duty {
    gap: 20px;
    margin-top: 16px;
    padding: 24px 20px;
    border-radius: var(--r-16);
  }
  .mnt-duty__title { font-size: 22px; line-height: 28px; }
  .mnt-duty__note { padding: 16px 18px; gap: 12px; }
  .mnt-duty__note p { font-size: 14px; line-height: 20px; }
}

/* === sections/meropriyatie.css === */
/* ==========================================================================
   meropriyatie.css — детальная страница мероприятия деловой программы.
   Figma: 2348:195044 (страница) + 2348:195159 (модалка спикера).
   База 1920, desktop-first. Скоуп — .mpr на <main>.
   Раскладка макета: слева рельс 290 + зазор 48 => контентная колонка
   начинается на 338 от края контейнера; секции ниже выровнены по ней.
   ========================================================================== */

/* полоса табов на этой странице — во всю ширину окна (в макете x=0 w=1920) */
.mpr .ptabs { margin-inline: calc(var(--gutter) * -1); }

/* ---- «Назад» к списку программы (над шапкой) ----
   i-arrow смотрит вправо — для «назад» разворачиваем по горизонтали. */
.mpr-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  color: var(--c-secondary);
  font: 400 15px / 1.3 var(--font-text);
  text-decoration: none;
  transition: color .2s;
}
.mpr-back .icon { flex: none; transform: scaleX(-1); }
.mpr-back:hover,
.mpr-back:focus-visible { color: var(--c-accent); }

/* ============================ ШАПКА СОБЫТИЯ ============================ */
.mpr-hero {
  padding-top: 48px;
}
/* со стрелкой сверху шапке не нужен полный отступ — иначе двойной зазор */
.mpr-back + .mpr-hero { padding-top: 24px; }
.mpr-hero__title {
  margin: 0;
  /* 48/56 на 1920 → 36 к 1440 */
  font: 400 clamp(36px, 2.5vw, 48px) / 1.167 var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
  /* в макете перенос жадный (последняя строка — одно слово);
     глобальный text-wrap: balance из base.css это ломает */
  text-wrap: wrap;
}
.mpr-hero__grid {
  display: grid;
  /* правая колонка идёт до края — там лежит заголовок (1502 в макете);
     сам текст под ним обрезан до 1301, это на .mpr-hero__text */
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

/* --- левый рельс: дата/место + тема --- */
.mpr-hero__aside {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mpr-when,
.mpr-theme {
  /* Almond Card: белый 50% поверх фона страницы */
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--r-16);
}
.mpr-when { padding: 16px; }
.mpr-when__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  /* на средних ширинах рельс сжимается до 240 и пара «дата + время»
     перестаёт помещаться в строку — переносим, а не выпускаем за карточку */
  flex-wrap: wrap;
  gap: 12px;
  font: 400 20px/28px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
  white-space: nowrap;
}
.mpr-when__place {
  margin: 6px 0 0;
  font: 400 14px/20px var(--font-text);
  color: var(--c-text);
  opacity: 0.5;
}
/* Условия посещения («По приглашению») — из обмена с ЕПС, в печатной программе
   стоят там же, под адресом площадки. Акцент как у ссылки трансляции. */
.mpr-when__access {
  margin: 10px 0 0;
  font: 400 14px/20px var(--font-text);
  color: var(--c-accent);
}
.mpr-when__access a { color: inherit; }
.mpr-when__note {
  display: block;
  margin-top: 2px;
  color: var(--c-text);
  opacity: 0.5;
}
.mpr-theme { padding: 18px 16px; }
.mpr-theme p {
  margin: 0;
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-text);
}
/* Цвет темы из ЕПС: заливка плашки оттенком присланного цвета и полоса слева.
   Fallback на базовый фон, если браузер не знает color-mix. */
.mpr-theme--tinted {
  background: color-mix(in srgb, var(--theme-color) 12%, #fff);
  border-left: 3px solid var(--theme-color);
}

/* --- правая колонка: описание + кнопка трансляции --- */
.mpr-hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}
/* Организатор сессии — строка над описанием, как в печатной программе ЕПС */
.mpr-hero__organizer {
  margin: 0 0 12px;
  font: 400 14px/20px var(--font-text);
  color: var(--c-text);
  opacity: 0.5;
}
.mpr-hero__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* в макете колонка текста уже заголовка (2770:72994) */
  max-width: 1301px;
}
.mpr-hero__text p {
  margin: 0;
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
}
/* .btn задаёт форму; в макете у этой кнопки паддинг 32 и зазор 12 */
.mpr-hero__body .mpr-hero__title { margin-bottom: 10px; }
.mpr-hero__btn { gap: 12px; padding: 8px 32px; }

/* ============================ СЕКЦИИ ============================ */
.mpr-sec {
  /* контент выровнен по правой колонке шапки (290 рельс + 48 зазор) */
  padding-left: 338px;
  margin-top: 80px;
}
.mpr-sec--speakers { margin-top: 48px; } /* внутри одной секции макета */
.mpr-sec__head {
  margin: 0 0 24px;
  /* 40/48 на 1920 → 32 к 1440 */
  font: 400 clamp(32px, 2.083vw, 40px) / 1.2 var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}

/* ============================ КАРТОЧКА ПЕРСОНЫ ============================
   Общая основа для модератора, карточки спикера и модалки. */
.mpr-person__id {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mpr-person__name {
  margin: 0;
  font: 400 24px/32px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.mpr-person__role {
  margin: 0;
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-text);
  opacity: 0.5;
}

/* маркированный список достижений */
.mpr-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mpr-bullets li {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
}
.mpr-bullets li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--c-accent);
}

/* ============================ ВЫСТУПАЮЩИЕ ============================ */
.mpr-speakers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* ряд макета 1502 = три карточки по 490 через 16 (2770:73015).
     auto-fill сам держит три колонки на 1920 и уходит в две и одну по мере
     сужения: при жёстких трёх подпись на 1300 сжималась до 118px */
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
}
/* тянем кнопку на всю ячейку — иначе карточка садится по своему контенту */
.mpr-speakers > li { display: flex; }
/* карточка-кнопка: по клику открывается модалка со справкой */
.mpr-speaker {
  display: flex;
  width: 100%;
  /* фото слева, подпись справа — карточка 490x210 (2770:73016) */
  align-items: flex-start;
  gap: 16px;
  padding: 24px; /* + рамка = 25 макета, карточка 210 */
  border: 1px solid var(--c-line);
  border-radius: var(--r-24);
  background: rgba(255, 255, 255, 0.45);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.mpr-speaker:hover { /* авторский hover — в макете состояния нет */
  border-color: var(--c-accent);
  background: rgba(255, 255, 255, 0.6);
}
.mpr-speaker__photo {
  position: relative;
  flex: none;
  width: 120px;
  height: 160px;
  border-radius: var(--r-16);
  overflow: hidden;
  background: var(--c-bg);
}
.mpr-speaker__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* бейдж «Онлайн» — правый нижний угол фото */
.mpr-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #fff;
  border-radius: var(--r-8);
  background: #fff;
  font: 400 12px/20px var(--font-text);
  color: var(--c-text);
  white-space: nowrap;
}
.mpr-online .icon {
  flex: none;
  width: 14px;
  height: 14px;
}

/* min-width: 0 обязателен: без него блок не сжимается уже самого длинного
   слова («Митрофанова» — 171px) и вылезает за карточку на узких колонках */
.mpr-speaker__id {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mpr-speaker__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* бейдж «Онлайн» отбит от имени на 14 (2770:73034) */
  gap: 14px;
  overflow-wrap: break-word;
}
/* align-items: flex-start даёт детям ширину по содержимому — длинная фамилия
   или должность вылезала за карточку (на 1024 подпись выходила на 13px), а
   overflow-wrap при неограниченной ширине не срабатывает. Ограничиваем. */
.mpr-speaker__body > * { max-width: 100%; }
/* участник онлайн — светлее фон и акцентная рамка (2770:73032) */
.mpr-speaker--online { border-color: var(--c-accent); background: rgba(255, 255, 255, 0.6); }
/* бейдж живёт в подписи карточки, а в модалке — поверх фото */
.mpr-modal__photo .mpr-online { position: absolute; right: 16px; bottom: 16px; }
.mpr-speaker__name {
  margin: 0;
  font: 400 20px/28px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.mpr-speaker__role {
  margin: 0;
  font: 400 14px/20px var(--font-text);
  color: var(--c-text);
  opacity: 0.5;
}
/* справка для модалки — в потоке не показывается */
.mpr-speaker__bio { display: none; }

/* ============================ ТРАНСЛЯЦИЯ ============================ */
.mpr-sec--stream .mpr-sec__head { margin-bottom: 15px; }
.mpr-stream-wrap {
  display: flex;
  /* в макете плеер прижат к левому краю контентной колонки (2770:73101) */
  justify-content: flex-start;
  padding: 24px 0 48px;
}
.mpr-stream {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(1164px, 100%);
  height: 655px;
  border-radius: var(--r-24);
  background: var(--c-dark);
}
/* Плеер ЕПС встраивается страницей broadcastSiteUrl. В прототипе на этом месте
   заглушка, поэтому правила для самого iframe не было — он брал дефолтные
   300x150 и болтался в середине тёмной плашки. Растягиваем по ширине и держим
   16:9: внутри страницы плеера video.js с vjs-fluid, он тянется за контейнером
   и заполняет плашку целиком (на узких экранах остаётся по центру). */
.mpr-stream__frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 100%;
  border: 0;
  border-radius: inherit;
}
.mpr-stream__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font: 400 16px/24px var(--font-text);
  color: #fff;
}
.mpr-stream__label span { opacity: 0.7; }
.mpr-stream__dash {
  width: 71px;
  height: 12px;
  color: #fff;
  opacity: 0.2;
}

/* ============================ МОДАЛКА СПИКЕРА ============================
   Figma 2348:195159: затемнение c-dark 30%, карточка 1200 по центру. */
.mpr-modal[hidden] { display: none; }
.mpr-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}
.mpr-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 30, 37, 0.3);
}
.mpr-modal__card {
  position: relative;
  display: flex;
  gap: 28px;
  width: min(1200px, 100%);
  max-height: calc(100vh - var(--gutter) * 2);
  overflow-y: auto;
  padding: 37px 41px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-24);
  /* Almond Card непрозрачным цветом — карточка лежит поверх затемнения */
  background: rgb(248, 238, 226);
}
.mpr-modal__photo {
  position: relative;
  flex: none;
  width: 250px;
  height: 310px;
  border-radius: var(--r-16);
  overflow: hidden;
  background: var(--c-bg);
}
.mpr-modal__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* подпись в модалке: слот бейджа + имя с должностью */
.mpr-modal__top { display: flex; flex-direction: column; gap: 4px; }
.mpr-modal__badge { display: none; }
.mpr-modal__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 10px;
}
/* в модалке буллиты мельче, чем у модератора (Figma: 16 против 18) */
.mpr-modal__body .mpr-bullets li { font-size: 16px; }
.mpr-modal__close {
  flex: none;
  align-self: flex-start;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-text);
  cursor: pointer;
}
.mpr-modal__close svg { display: block; width: 16px; height: 16px; }
/* фон под открытой модалкой не скроллится */
body.is-modal-open { overflow: hidden; }

/* ============================================================
   @1919 — основная десктоп-ступень (кегли ведёт clamp выше)
   ============================================================ */
@media (max-width: 1919px) {
  /* рельс и отступ секций сужаются пропорционально: 290/338 на 1920 */
  .mpr-hero__grid { grid-template-columns: clamp(240px, 15.1vw, 290px) 1fr; }
  .mpr-sec { padding-left: clamp(276px, 17.6vw, 338px); }
}

/* ============================================================
   ≤1200 — рельс уезжает наверх, секции выравниваются по контейнеру
   ============================================================ */
@media (max-width: 1200px) {
  .mpr-hero__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 32px;
  }
  .mpr-hero__aside { flex-direction: row; }
  .mpr-hero__aside > * { flex: 1 1 0; }
  .mpr-hero__body { padding-top: 0; }
  .mpr-sec {
    padding-left: 0;
    margin-top: 64px;
  }
  .mpr-sec--speakers { margin-top: 40px; }
  /* колонка контента сжалась, а карточка теперь горизонтальная — две в ряд */

  .mpr-stream { height: clamp(360px, 46vw, 655px); }
}

/* ============================================================
   ≤1023 — планшет
   ============================================================ */
@media (max-width: 1023px) {
  /* макета уже нет — кегль заголовка авторский, чтобы не съедал экран */
  .mpr-hero__title { font-size: 32px; line-height: 38px; }
  .mpr-speakers { grid-auto-rows: auto; }
  .mpr-modal__card { gap: 20px; padding: 24px; }
  .mpr-modal__photo { width: 200px; height: 250px; }
}

/* ============================================================
   @767 — мобилка
   ============================================================ */
@media (max-width: 767px) {
  .mpr .ptabs { margin-inline: 0; }

  .mpr-hero { padding-top: 10px; } /* от таб-меню до рельса 10 (2895:58690) */
  /* заголовок и заголовки секций на мобиле — Cochin 24/32 (H7) */
  .mpr-hero__title { font-size: 24px; line-height: 32px; }
  .mpr-hero__body .mpr-hero__title { margin-bottom: 4px; } /* до текста 28 */
  .mpr-sec__head { font: 400 24px/32px var(--font-display); }
  .mpr-hero__grid { margin-top: 0; } /* рельс идёт сразу за таб-меню */
  .mpr-hero__aside { flex-direction: column; }
  .mpr-hero__text p { font-size: 16px; line-height: 26px; } /* абзац 16/26 (2895:58704) */
  .mpr-hero__btn { width: 100%; height: 56px; }

  .mpr-sec {
    margin-top: 24px; /* от геро до первой секции 24 (2895:58708) */
  }
  .mpr-sec--speakers { margin-top: 48px; }

  /* карточка персоны в столбец */
  /* в макете точка по центру пункта, зазор 16 (2895:62693) */
  .mpr-bullets li { font-size: 16px; }

  /* в один столбец карточки живут своей высотой, а не по самой высокой */
  .mpr-speakers { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .mpr-speaker { padding: 16px; }
  .mpr-speaker__photo { width: 80px; height: 100px; } /* 2895:58713 */

  .mpr-stream-wrap { padding: 24px 0 48px; } /* 2895:58806 */
  .mpr-stream { height: 239px; } /* 2895:58807 */

  .mpr-modal { padding: 16px; }
  /* модалка по макету 2895:61261: фото слева, бейдж с именем справа,
     справка отдельной строкой ниже. display: contents поднимает подпись
     и справку на уровень карточки, чтобы они легли в разные ряды */
  .mpr-modal__card {
    flex-wrap: wrap;
    gap: 16px 8px;
    padding: 16px;
  }
  .mpr-modal__photo { width: 80px; height: 100px; }
  .mpr-modal__body { display: contents; }
  .mpr-modal__top { flex: 1 1 0; min-width: 0; }
  .mpr-modal__badge { display: block; }
  .mpr-modal__photo .mpr-online { display: none; }
  .mpr-modal__card [data-modal-bio] { flex-basis: 100%; }
  .mpr-modal__card .mpr-bullets { padding-top: 10px; }
  /* подпись в модалке того же кегля, что и в карточке (2895:62689) */
  .mpr-modal__card .mpr-person__name { font-size: 20px; line-height: 28px; }
  .mpr-modal__card .mpr-person__role { font: 400 14px/20px var(--font-text); }
  .mpr-modal__close { position: absolute; top: 16px; right: 16px; }
}

/* Ни даты, ни места, ни темы из обмена — боковой колонки нет, шапка идёт в одну.
   Скоуп страницы в селекторе нужен для веса: ниже ширины колонок правят
   медиазапросы, одноклассовый модификатор им проигрывает. */
.mpr .mpr-hero__grid--full { grid-template-columns: minmax(0, 1fr); }

/* Кнопка «Трансляция» ведёт к плееру якорем (#player). Шапка липкая (108 в
   макете), поэтому отбиваем цель прокрутки, иначе заголовок блока уезжает под
   неё. Плавность — только если пользователь не просил уменьшить анимации. */
.mpr #player { scroll-margin-top: 132px; }
@media (prefers-reduced-motion: no-preference) {
  html:has(.mpr) { scroll-behavior: smooth; }
}

/* === sections/partner.css === */
/* ==========================================================================
   partner.css — страница «Стать партнером» (раздел «Партнёрам»), /partneram.html.
   Десктоп-база — 1920 (макет Figma 2277:175399, файл jR9PxS2XRShc9gJb1ySWi4).
   Мобильных макетов у страницы НЕТ (проверено по всей странице «В верстку») —
   ступени ≤1919/≤1023/≤767 — наша адаптация по лесенке проекта (эталон
   поведения — accreditation.css).
   Переиспользует: arrival.css (arr-hero, crumbs), base.css (section-label),
   page-tabs.css (ptabs--flow). Здесь — только новые блоки и дельты.
   Всё скоупится под .pnr (на <main>), чтобы не спорить с чужим адаптивом.

   Пожелание бэкендера: в текстовых телах карточек НЕТ классов у элементов —
   чистые p (стилизуются контекстно: .pnr-benefit p, .pnr-status__body p).
   ========================================================================== */

/* без висячих слов */
.pnr .arr-hero__intro p,
.pnr-benefit p,
.pnr-status__body p,
.pnr-contacts__text p { text-wrap: pretty; }
.pnr-h2, .pnr-status__title { text-wrap: balance; }

/* ==========================================================================
   HERO — светлый, тёмный текст (Figma 2277:175412). Полоса табов и баннер
   во всю ширину окна (в макете article и section.arr-hero — x=0 w=1920),
   гасим гаттер контейнера отрицательным полем — как на «Аккредитации».
   ========================================================================== */
.pnr .ptabs--flow,
.pnr .arr-hero--pnr {
  margin-inline: calc(var(--gutter) * -1);
}

/* Контент героя: Figma 2277:175424 — x=88, низ 60 (314+246 при высоте 620),
   ширина 799. Колонка: label →30→ заголовок →16→ лид (label h12 + mb14 +
   gap16 = 42 — как в макете y42 у текстовой группы). */
.arr-hero--pnr .arr-hero__inner {
  top: auto;
  bottom: 60px;
  left: 88px;
  width: 799px;
  max-width: 799px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.arr-hero--pnr .section-label {
  display: flex;
  margin-bottom: 14px;
}
.arr-hero--pnr .arr-hero__title {
  margin-top: 0;
  font: 400 64px/72px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.arr-hero--pnr .arr-hero__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 0;
  max-width: 799px;
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
}

/* ==========================================================================
   ЧТО ПОЛУЧАЕТ ПАРТНЕР — заголовок 48/56 + 5 карточек (ряд 2 + ряд 3).
   Figma 2277:175434: h2 → 40 → сетка; ряды gap 16.
   ========================================================================== */
.pnr-benefits { margin-top: 80px; }

.pnr-h2 {
  font: 400 48px/56px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}

.pnr-benefits__grid {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pnr-benefits__row {
  display: flex;
  gap: 16px;
}

/* Карточка (Figma article): белая 50%, рамка line, r24, p48+рамка (=49 в
   макете), круг 115 + 24 + текст, вертикальное центрирование. */
.pnr-benefit {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 48px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-24);
}
.pnr-benefit p {
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
}

/* Круглое фото: маска Figma = круг 115, исходник крупнее и смещён.
   Размер/сдвиг картинки — в % от круга (сняты с макета), чтобы при
   изменении диаметра на ступенях кадр не уезжал. */
.pnr-benefit__photo {
  position: relative;
  flex: none;
  width: 115px;
  height: 115px;
  border-radius: 50%;
  overflow: hidden;
}
.pnr-benefit__photo img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}
/* Кадры по макету: (размер; смещение) в долях круга 115 */
.pnr-benefit--1 .pnr-benefit__photo img { width: 110.92%; height: 110.92%; left: -5.46%; top: -5.89%; }
.pnr-benefit--2 .pnr-benefit__photo img { width: 128.48%; height: 128.48%; left: -14.24%; top: -19.49%; }
.pnr-benefit--3 .pnr-benefit__photo img { width: 121.52%; height: 121.52%; left: -10.81%; top: -14.88%; }
.pnr-benefit--4 .pnr-benefit__photo img { width: 130.51%; height: 130.51%; left: -15.31%; top: -23.44%; }
.pnr-benefit--5 .pnr-benefit__photo img { width: 111.56%; height: 111.56%; left: -5.78%; top: -5.46%; }

/* ==========================================================================
   СТАТУСЫ ПАРТНЕРСТВА — 5 карточек-полос (Figma 2277:175514, gap 24).
   Карточка: коллаж-декор слева (абсолют, под контентом), заголовок 40/48
   шириной 539, тело в рамке r16 p32 — внутри ЧИСТЫЕ p (без классов).
   Паддинги макета 49/57 = рамка 1 + 48/56.
   ========================================================================== */
.pnr-status {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pnr-status__card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 47px;
  padding: 48px 56px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-24);
}

/* Экспортированный срез коллажа уже содержит отражения и клип макета.
   Тянем на ВСЮ высоту карточки (в макете 2277:175514 коллаж от верха до низа,
   тело-плашка по центру): height:auto давал полосу по своему аспекту, и при
   ужатии до 437 (≤1919) низ карточки оставался пустым бежевым — на это и
   показывала Джулия. cover + left center: правый край (уходит в фон) обрезается
   незаметно, арки слева сохраняются. */
.pnr-status__collage {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 583px;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.pnr-status__title {
  position: relative;
  z-index: 1;
  flex: none;
  width: 539px;
  font: 400 40px/48px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
/* Переносы заголовков как в макете: ноды текста в Figma уже колонки 539
   («Титульный / партнер» и «Генеральный / партнер» — 2 строки, «Партнер /
   культурной / программы» — 3). Без ограничения браузер укладывал их
   в меньшее число строк. Сужаем ТЕКСТ паддингом (539 − ширина ноды макета),
   а не max-width — иначе сжалась бы сама колонка и тело уехало бы влево. */
.pnr-status__card:nth-child(1) .pnr-status__title { padding-right: 77px; }
.pnr-status__card:nth-child(2) .pnr-status__title { padding-right: 48px; }
.pnr-status__card:nth-child(4) .pnr-status__title { padding-right: 42px; }
/* «Форума» всегда на отдельной строке (по просьбе ревью — и на десктопе, и на
   1200, и в баннере): «Официальный / поставщик / Форума». */
.pnr-status__brk { display: inline; }

.pnr-status__body {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  padding: 32px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-16);
}
.pnr-status__body p {
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-text);
}
.pnr-status__body p + p { margin-top: 8px; }

/* ==========================================================================
   КОНТАКТЫ — тёмная карта c-dark r24 с фоновым коллажем (запечённое
   затемнение в экспорте). Figma 2277:175566: label →24→ строка
   (текст 722 слева / почта справа).
   ========================================================================== */
.pnr-contacts { margin-top: 80px; }

.pnr-contacts__card {
  position: relative;
  overflow: hidden;
  padding: 48px 56px;
  border: 1px solid var(--c-dark);
  border-radius: var(--r-24);
  background: var(--c-dark);
}

.pnr-contacts__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pnr-contacts__inner {
  position: relative;
  z-index: 1;
}
/* В макете текст лейбла 18/1.6 (28.8), в base.css — 18/28: уточняем */
.pnr-contacts .section-label__text { line-height: 1.6; }

.pnr-contacts__row {
  margin-top: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.pnr-contacts__text {
  max-width: 722px;
}
.pnr-contacts__text p {
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-bg);
}

.pnr-contacts__mail {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  text-decoration: none;
  font: 400 24px/32px var(--font-display);
  text-transform: uppercase;
}
.pnr-contacts__mail:hover { text-decoration: underline; text-underline-offset: 4px; }
.pnr-contacts__mail .icon {
  flex: none;
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* ==========================================================================
   ≤1440 — пропорциональная ступень (макет 1920 уменьшаем, эталон поведения —
   accreditation.css: значения не занижаем там, где их видит монитор 1920).
   ========================================================================== */
@media (max-width: 1919px) {
  .arr-hero--pnr .arr-hero__inner {
    top: auto;
    bottom: 60px;
    transform: none;
    left: 64px;
    width: 620px;
    max-width: 620px;
    gap: 14px;
  }
  .arr-hero--pnr .section-label { margin-bottom: 10px; } /* 10 + 14 = 24 */
  .arr-hero--pnr .arr-hero__title { margin-top: 0; font-size: 48px; line-height: 54px; }
  /* Ширина лида через vw: коллаж (скрипка/лавр) сдвигается влево вместе с
     сужением экрана, и текст лез на него. Цветная зона коллажа на уровне лида:
     1200 ≈ x596, 1440 дальше. 43vw держит запас: 1200 → 516 (кончается ~580,
     левее 596), 1440 → упирается в 620. */
  .arr-hero--pnr .arr-hero__intro { font-size: 16px; max-width: min(620px, 43vw); gap: 12px; }

  .pnr-benefits { margin-top: 64px; }
  .pnr-h2 { font-size: 32px; line-height: 40px; }
  .pnr-benefits__grid { margin-top: 32px; }
  .pnr-benefit { padding: 40px; gap: 20px; }
  .pnr-benefit p { font-size: 16px; }
  .pnr-benefit__photo { width: 96px; height: 96px; }

  .pnr-status { margin-top: 64px; gap: 20px; }
  .pnr-status__card { padding: 40px 48px; gap: 40px; }
  .pnr-status__collage { width: 437px; }
  .pnr-status__title { width: 420px; font-size: 32px; line-height: 40px; }
  .pnr-status__body { padding: 28px; }

  .pnr-contacts { margin-top: 64px; }
  .pnr-contacts__card { padding: 40px 48px; }
  .pnr-contacts .section-label__text { font-size: 16px; }
  .pnr-contacts__text { max-width: 640px; }
  .pnr-contacts__mail { font-size: 20px; line-height: 28px; }
}

/* ==========================================================================
   ≤1439 — статус-карточки в столбец. Row-лейаут (коллаж-абсолют на всю высоту)
   верен только на широком экране: на узком десктопе тело переносится на много
   строк, карточка растёт, и object-fit:cover раздувает коллаж до ~1.8× — арки
   «слипаются». Ниже 1440 уводим статус в столбец с коллажем-баннером, капнутым
   по высоте (max-height): на телефоне баннер помещается целиком (auto<cap), на
   планшете/узком десктопе — аккуратный срез с цветными арками, без зума.
   ========================================================================== */
/* ==========================================================================
   ≤1199 — статус-карточки в столбец. Row (коллаж-абсолют на всю высоту) держим
   до 1200 (горизонтальная композиция как на десктопе — просьба ревью). Ниже
   1200 — столбец: коллаж-баннер во ВСЮ ширину карточки, а заголовок НА баннере
   (как на десктопе title лежит на коллаже). Верх-лево всех коллажей светлый
   (яркость ~230), поэтому тёмный заголовок читается без подложки.
   ========================================================================== */
@media (max-width: 1199px) {
  .pnr-status { gap: 20px; }
  .pnr-status__card {
    --pnr-banner: 220px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  /* Коллаж — баннер во всю ширину карточки, ЗА заголовком */
  .pnr-status__collage {
    position: absolute;
    inset: 0 0 auto 0;
    width: 100%;
    height: var(--pnr-banner);
    object-fit: cover;
    object-position: left top;        /* светлый верх-лево под заголовок */
  }
  /* Заголовок — НА баннере; min-height = высота баннера, чтобы тело легло ниже */
  .pnr-status__title {
    position: relative;
    z-index: 1;
    width: auto;
    min-height: var(--pnr-banner);
    box-sizing: border-box;
    padding: 36px 40px 0;
  }
  /* сбрасываем row-паддинги переносов заголовка (nth-child) */
  .pnr-status__card:nth-child(1) .pnr-status__title,
  .pnr-status__card:nth-child(2) .pnr-status__title,
  .pnr-status__card:nth-child(4) .pnr-status__title { padding-right: 40px; }
  /* Тело — под баннером */
  .pnr-status__body { margin: 24px 40px 40px; }
}

/* ==========================================================================
   ≤1023 — планшет: hero в потоке, benefits/contacts в столбец. Статус уже в
   столбце (см. ≤1439); тут только паддинги под меньший экран.
   ========================================================================== */
@media (max-width: 1023px) {
  .arr-hero--pnr { height: auto; min-height: 360px; }
  /* Текст в макете лежит на светлой левой части коллажа — прижимаем кадр
     влево, чтобы тёмный текст не попадал на насыщенную зону (как на «Аккредитации»). */
  .arr-hero--pnr .arr-hero__img { object-position: left center; }
  .arr-hero--pnr .arr-hero__inner {
    position: relative;
    z-index: 1;
    top: auto;
    bottom: auto;
    transform: none;
    left: auto;
    right: auto;
    width: auto;
    max-width: none;
    padding: 40px 32px;
    gap: 14px;
  }
  .arr-hero--pnr .section-label { margin-bottom: 6px; } /* 6 + 14 = 20 */
  .arr-hero--pnr .arr-hero__title { margin-top: 0; font-size: 40px; line-height: 44px; }
  /* Планшет+мобилка: 52vw давал на 375 всего 195px (лид узкой колонкой при
     пустой светлой зоне справа — «растянуть текст»). Цветная зона коллажа на
     375 уходит за край (текст можно шире), на 600 ≈ x485, на 768 ≈ x577.
     min(520, 76vw): 375 → 285 (83% ширины, было 195), 600 → 456, 768+ → 520. */
  .arr-hero--pnr .arr-hero__intro { max-width: min(520px, 76vw); }

  .pnr-benefits { margin-top: 48px; }
  .pnr-h2 { font-size: 28px; line-height: 34px; }
  .pnr-benefits__grid { margin-top: 24px; }
  .pnr-benefits__row { flex-direction: column; }
  .pnr-benefit { padding: 32px; }

  /* столбец/баннер-с-заголовком заданы в ≤1199; тут только внешние отступы */
  .pnr-status { margin-top: 48px; gap: 16px; }

  .pnr-contacts { margin-top: 48px; }
  .pnr-contacts__card { padding: 32px; }
  .pnr-contacts__row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .pnr-contacts__text { max-width: none; }
}

/* ==========================================================================
   ≤360 — узкая мобила. Табы и баннер по контейнеру (full-bleed гасим),
   как на «Аккредитации» (эталон — фреймы «Бронирование гостиниц 375w»).
   ========================================================================== */
@media (max-width: 767px) {
  .pnr .ptabs--flow,
  .pnr .arr-hero--pnr { margin-inline: 0; }

  .pnr .ptabs { margin-top: 24px; }
  .pnr .ptabs--flow + .arr-hero { margin-top: 10px; }

  .arr-hero--pnr { min-height: 300px; }
  .arr-hero--pnr .arr-hero__inner { padding: 24px 20px; gap: 12px; }
  .arr-hero--pnr .section-label { margin-bottom: 0; }
  .arr-hero--pnr .arr-hero__title { margin-top: 0; font-size: 30px; line-height: 34px; }
  .arr-hero--pnr .arr-hero__intro { font-size: 14px; gap: 12px; }

  .pnr-benefits { margin-top: 36px; }
  .pnr-h2 { font-size: 24px; line-height: 30px; }
  .pnr-benefits__grid { margin-top: 20px; gap: 12px; }
  .pnr-benefits__row { gap: 12px; }
  .pnr-benefit { padding: 20px; gap: 16px; }
  .pnr-benefit p { font-size: 14px; line-height: 20px; }
  .pnr-benefit__photo { width: 72px; height: 72px; }

  /* Мобилка: тот же баннер-с-заголовком (≤1199), но компактнее — ниже баннер,
     меньше паддинги, мельче заголовок/тело. «то же по мобилке» из ревью. */
  .pnr-status { margin-top: 36px; gap: 12px; }
  .pnr-status__card { --pnr-banner: 150px; }
  .pnr-status__title { font-size: 24px; line-height: 30px; padding: 24px 20px 0; }
  .pnr-status__card:nth-child(1) .pnr-status__title,
  .pnr-status__card:nth-child(2) .pnr-status__title,
  .pnr-status__card:nth-child(4) .pnr-status__title { padding-right: 20px; }
  .pnr-status__body { margin: 16px 20px 24px; padding: 20px; }
  .pnr-status__body p { font-size: 14px; line-height: 20px; }

  .pnr-contacts { margin-top: 36px; }
  .pnr-contacts__card { padding: 24px 20px; }
  .pnr-contacts__row { gap: 20px; }
  .pnr-contacts__text p { font-size: 14px; line-height: 20px; }
  /* Адрес почты Cochin 18px на 375 не влезал в карточку (303px контента) и
     обрезался клипом — 16px помещается целиком, без переноса. */
  .pnr-contacts__mail { font-size: 16px; line-height: 22px; gap: 10px; }
  .pnr-contacts__mail .icon { width: 20px; height: 20px; }
}

/* === sections/program.css === */
/* ==========================================================================
   program.css — раздел «Программа» (страница «Архитектура деловой программы»).
   Макет: Figma 2276:157381 (файл 7l7aBv3fBz3HXfvsqtvypK, «ФОК 10.07.26»).
   Каркас переиспользуется: крошки/hero — arrival.css, тёмный блок —
   visa.css (visa-block/__head/__title), таб-меню — page-tabs.css.
   Новое здесь: кнопка «Скачать архитектуру» в hero + аккордеон .pac.
   Полоса табов и баннер — во всю ширину окна (Figma: article и arr-hero
   x=0 w=1920, тогда как visa-block ниже — x=40 w=1840). Скоуп .prog на <main>.
   Лесенка брейкпоинтов проекта: 1920 / 1440 / 768 / 360.
   ========================================================================== */

/* ---------- Full-bleed: гасим гаттер контейнера у табов и баннера ---------- */
.prog .ptabs--flow,
.prog .arr-hero {
  margin-inline: calc(var(--gutter) * -1);
}

/* ---------- Hero: светлый коллаж, тёмный заголовок (arr-hero--light) ---------- */
/* Кнопка «Скачать архитектуру» (Figma 2276:157407: accent, h40, 8/16, r8,
   иконка 20 + текст 14/20 white). title→button = 16 (Figma Title gap). */
.arr-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-8);
  background: var(--c-accent);
  color: #fff;
  font: 400 14px/20px var(--font-text);
  transition: background .2s;
}
.arr-hero__btn:hover { background: #a82f16; }
.arr-hero__btn .icon {
  flex: none;
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

/* Десктоп: геро-инна по Figma Frame 75 (x=88, снизу 76, ширина 824);
   заголовок 64/72 (не 84/90 как у прочих hero), метка →30→ заголовок. */
@media (min-width: 1024px) {
  .prog .arr-hero__inner {
    left: 88px;
    bottom: 76px;
    max-width: 824px;
  }
  .prog .arr-hero__title {
    margin-top: 30px;
    font-size: 64px;
    line-height: 72px;
  }
}

/* ---------- Схема архитектуры (Figma 2743:62233, ревизия 07.08) ---------- */
/* Карточка .visa-block (visa.css) даёт фон/рамку/радиус; в этой ревизии макета
   тёмной шапки нет — схема (image 96, 1838×1034) ложится в карточку встык. */
.prog-scheme__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Тёмный блок: тело со списком аккордеонов ---------- */
/* visa-block (visa.css) даёт рамку/радиус/тень и тёмную шапку; тело — .pac-list.
   Держим макетные значения (шапка 56, заголовок 40/48) на десктопе — не
   занижаем на ступени @1919 (экран 1920 = вьюпорт ~1905 попадает в неё). */
.prog .visa-block { margin-top: 80px; }
.prog .visa-block__head { padding: 56px; }
.prog .visa-block__title {
  max-width: none;
  font-size: 40px;
  line-height: 48px;
}

.pac-list {
  padding: 32px 56px;
}

/* ---------- Аккордеон (details.pac / «accardeon») ---------- */
.pac {
  border-top: 1px solid rgba(1, 31, 39, .2);          /* Daintree 20% */
}
.pac__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 4px;
  list-style: none;
  cursor: pointer;
}
.pac__sum::-webkit-details-marker { display: none; }
.pac__sum::marker { content: ""; }

.pac__title {
  font: 400 24px/32px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}

/* Иконка +/− (26×26): две красные планки; в раскрытом состоянии вертикаль скрыта */
.pac__ic {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
}
.pac__ic::before,
.pac__ic::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--c-accent);
}
.pac__ic::before { width: 16px; height: 2px; }        /* горизонталь */
.pac__ic::after  { width: 2px; height: 16px; }        /* вертикаль (плюс) */
.pac[open] .pac__ic::after { display: none; }         /* минус */

/* Раскрытая панель: интро + 3-колоночный список тем */
.pac__panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 4px 32px;
}
.pac__intro {
  max-width: 1406px;
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-secondary);
}
.pac__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.pac__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}
.pac__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-secondary);
  cursor: pointer;
  transition: color .2s;
}
.pac__item:hover { color: var(--c-accent); }    /* Figma: наведение на тему — accent (курсор в макете) */
.pac__item::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-accent);
}
.pac__item span { min-width: 0; }

/* ==========================================================================
   ≤768 — планшет.
   ========================================================================== */
@media (max-width: 1023px) {
  .prog .visa-block { margin-top: 56px; }
  .prog .visa-block__head { padding: 32px; }
  .prog .visa-block__title { font-size: 28px; line-height: 34px; }

  /* Схема — растр с мелким текстом: ниже 1024 не ужимаем в ноль,
     а даём горизонтальную прокрутку внутри карточки. */
  .prog-scheme__scroll { overflow-x: auto; }
  /* 940 = ширина карточки на самой ступени 1023 (1023 − 40×2 − скроллбар):
     на верхней границе тира прокрутки ещё нет, ниже она включается плавно. */
  .prog-scheme__img { min-width: 940px; }

  .pac-list { padding: 20px 32px 24px; }
  .pac__sum { gap: 16px; padding: 24px 2px; }
  .pac__title { font-size: 20px; line-height: 26px; }
  .pac__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

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

  .arr-hero__btn { margin-top: 14px; }

  .prog .visa-block { margin-top: 40px; }
  .prog .visa-block__head { padding: 24px 20px; }
  .prog .visa-block__title { font-size: 22px; line-height: 28px; }

  .pac-list { padding: 12px 20px 20px; }
  .pac__sum { gap: 12px; padding: 20px 0; }
  .pac__title { font-size: 18px; line-height: 24px; }
  .pac__panel { padding: 0 0 24px; }
  .pac__cols { grid-template-columns: 1fr; gap: 8px; }
  .pac__item { font-size: 15px; }
}

/* === sections/faq.css === */
/* ==========================================================================
   faq.css — страница «Частые вопросы (FAQ)», раздел «Участникам».
   Макет: Figma 2359:216248 (файл GBQgpOMklMQAWA26vhdJ9f, «ФОК 10.07.26 Copy»).
   Каркас переиспользуется:
     • крошки / геро-геометрия — arrival.css;
     • светлый геро (тёмный заголовок, без шторки) — visa.css (.arr-hero--light);
     • светлая карточка-обёртка — visa.css (.visa-block БЕЗ __head, шапка в макете
       скрыта: header.visa-block__head hidden);
     • таб-меню раздела — page-tabs.css (.ptabs--flow);
     • аккордеон вопросов — program.css (.pac / .pac__sum / .pac__title / .pac__ic).
   Новое здесь: скоуп .faq на <main> (full-bleed полосы табов и баннера,
   геро-заголовок 64/72 как у «Архитектуры», тело ответа — чистые <p>).
   Лесенка брейкпоинтов проекта: 1920 / 1440 / 768 / 360.
   ========================================================================== */

/* ---------- Full-bleed: гасим гаттер контейнера у табов и баннера ---------- */
/* В макете полоса --flow (article) и hero идут x=0 w=1920, карточка ниже —
   x=40 w=1840 (контейнер). */
.faq .ptabs--flow,
.faq .arr-hero {
  margin-inline: calc(var(--gutter) * -1);
}

/* ---------- Hero: заголовок 64/72, инна по Figma Frame 75 (x=88, снизу 60) ---------- */
@media (min-width: 1024px) {
  /* Figma Frame 75 — flex-колонка с gap 30. Именно колонка, а не блок с
     margin-top у заголовка: у блока инлайновый .section-label садится на строку
     высотой line-height (24), и над лейблом набегает лишних 6px. */
  .faq .arr-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    left: 88px;
    bottom: 60px;
    /* В макете Frame 75 = 663 (хаг по тексту), тексту нужно 647 — запаса всего
       16px, и на другом рендере шрифта заголовок срывался во вторую строку.
       Инна абсолютная и прижата влево, поэтому больший лимит ничего не двигает. */
    max-width: 780px;
  }
  .faq .arr-hero__title {
    margin-top: 0;
    /* 64/72 — значение макета, держится на ≥1536 (и в @1919, и на 1920).
       Ниже коллаж «наезжает» слева: плотная живопись начинается с 52.24% его
       ширины, а при object-fit:cover эта граница уходит влево быстрее, чем
       сжимается строка. Замер: чтобы остался зазор 24px, нужно 63.4 на 1440
       и 42.9 на 1024 — это и есть прямая ниже. */
    font-size: clamp(43px, calc(4.93vw - 7.6px), 64px);
    line-height: 1.125;
  }
}

/* ---------- Карточка FAQ: светлый visa-block без шапки + аккордеон .pac ---------- */
/* Отступ hero→карточка = 80 (Figma: hero низ y=760, visa-block верх y=840),
   снизу до подвала — тоже 80. Значения макета в @1919 не занижаем. */
.faq .visa-block {
  margin-top: 80px;
  margin-bottom: 80px;
}

/* Первый вопрос без верхней линии (Figma: первый details.pac border-0) */
.faq .pac:first-child { border-top: 0; }

/* Наведение на вопрос — заголовок в accent (Figma: hover-вариант Component 33) */
.faq .pac__sum:hover .pac__title { color: var(--c-accent); }

/* ---------- Тело ответа: чистые <p> (Inter Tight 16/26, вторичный) ---------- */
/* Между абзацами — 6 (Figma gap/6). Ширина текста 1402 и интерлиньяж 26 — с ноды
   текста (Frame 111), не «1.6»: 25.6 против 26 давало −0.4px на строку и уводило
   низ карточки на −9.6px по 24 строкам. */
.faq .pac__panel { gap: 6px; }
.faq .pac__panel p {
  max-width: 1402px;
  font: 400 16px/26px var(--font-text);
  color: var(--c-secondary);
}
.faq .pac__panel a {
  color: var(--c-accent);
  text-decoration: underline;
}
.faq .pac__panel a:hover { text-decoration: none; }

/* ==========================================================================
   ≤1440 — десктоп-ступень @1919 (аккордеон .pac/.pac-list масштабирует
   program.css глобально; здесь только скоуп-специфика карточки).
   ========================================================================== */
@media (max-width: 1919px) {
  .faq .visa-block { margin-top: 64px; margin-bottom: 64px; }
}

/* ==========================================================================
   ≤768 — планшет.
   ========================================================================== */
@media (max-width: 1023px) {
  .faq .visa-block { margin-top: 56px; margin-bottom: 56px; }
}

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

  .faq .visa-block { margin-top: 40px; margin-bottom: 40px; }
  .faq .pac__panel p { font-size: 15px; line-height: 1.6; }
}

/* ==========================================================================
   480–767 — заголовок в одну строку. visa.css в ≤767 жмёт светлый геро-заголовок
   до min-content (нужно двухсловной «ВИЗОВОЙ ПОДДЕРЖКЕ»), у нас это рвало
   «ЧАСТЫЕ / ВОПРОСЫ». Ниже 480 перенос возвращаем: там строка целиком доезжает
   до коллажа и последние буквы ложатся на подсвечник.
   ========================================================================== */
@media (min-width: 480px) and (max-width: 767px) {
  .faq .arr-hero__title { max-width: none; }
}

/* === sections/smi.css === */
/* ==========================================================================
   smi.css — страница «Аккредитация СМИ» (раздел «Медиа»).
   Макет: Figma 2472:63333 (файл czVrMu5TZMTjWkq0ZBhTe9, «ФОК 30.07.26 Copy»).
   Каркас переиспользуется:
     • крошки / геометрия геро — arrival.css;
     • светлый геро (тёмный заголовок, без шторки) — visa.css (.arr-hero--light);
     • светлая карточка с тёмной шапкой — visa.css (.visa-block / __head / __body /
       .visa-group / .visa-label / .visa-text / .visa-bullets / .visa-list);
     • предупреждение — visa.css (.visa-callout);
     • таб-меню раздела — page-tabs.css (.ptabs--flow), как на «Политике упоминаний».
   Новое здесь: скоуп .smi на <main> — плашки даты и названия форума в геро,
   ромб-список порядка выдачи бейджей, блок контактов с двумя тёмными карточками.
   Макет свёрстан на 1920; значения в @1919 не занижаем — плавно уменьшаем
   к 1440 через clamp(). Лесенка брейкпоинтов проекта: 1920 / 1440 / 768 / 360.
   ========================================================================== */

.smi {
  /* Боди макета — 18/1.6 на 1920, к 1440 сходится к канонным 16 (UI-кит). */
  --smi-txt: clamp(16px, calc(0.4167vw + 10px), 18px);
  /* Cochin-подзаголовки макета — 32 на 1920, 28 на 1440. */
  --smi-h3: clamp(28px, calc(0.833vw + 16px), 32px);
}

/* ---------- Full-bleed: гасим гаттер контейнера у табов и баннера ---------- */
/* В макете полоса --flow (article) и hero идут x=0 w=1920, секции ниже — x=40. */
.smi .ptabs--flow,
.smi .arr-hero {
  margin-inline: calc(var(--gutter) * -1);
}

/* ==========================================================================
   Геро (Figma 2472:63347): коллаж запечён, заголовок 64/72, под ним — две
   плашки: даты регистрации и название форума.
   ========================================================================== */
@media (min-width: 1024px) {
  /* Figma Frame 76 + Frame 62 — колонка с gap 30 (метка→заголовок), плашки
     ниже на 40 (лишние 10 добираем margin-ом). Инна: x=88, низ 60. */
  .smi .arr-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    left: 88px;
    bottom: 60px;
    max-width: min(920px, calc(100% - 176px));
  }
  .smi .arr-hero__title {
    margin-top: 0;
    font-size: clamp(40px, 3.333vw, 64px);
    line-height: 1.125;
  }
  .smi-hero__meta { margin-top: 10px; }
}

/* Ниже 1486 высота геро упирается в пол 480 (arrival.css) — коллаж кропается
   по бокам. Держим окно кропа у левого края: плотная живопись начинается с
   ~45% ширины картинки и уезжает правее заголовка и плашек. */
@media (max-width: 1486px) {
  .smi .arr-hero__img { object-position: left center; }
}

.smi-hero__meta {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

/* Плашка дат: 03 —◆— 24 / августа 2026 г */
.smi-date {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 162px;
  padding: 13px 17px;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(1, 31, 39, .2);
  border-radius: 8px;
}
.smi-date__days {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.smi-date__d {
  width: 32px;
  font: 400 clamp(20px, 1.458vw, 28px) / 40px var(--font-display);
  text-transform: uppercase;
  text-align: center;
  color: var(--c-text);
}
.smi-date__dash {
  width: 67px;
  height: 12px;
  color: var(--c-accent);
  fill: currentColor;
  opacity: .2;
}
.smi-date__when {
  width: 67px;
  font: 400 12px/20px var(--font-text);
  text-align: center;
  color: var(--c-text);
}

/* Плашка названия форума */
.smi-hero__about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 15px 17px 13px;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(1, 31, 39, .2);
  border-radius: 8px;
}
/* Ширина плашки = ширине текста (608 на 1920). Ниже 1920 сужаем вместе с
   кеглем — иначе плашка не сжимается и наезжает на живопись коллажа. */
.smi-hero__about-title {
  max-width: min(608px, 31.67vw);
  font: 400 clamp(18px, 1.458vw, 28px) / 1.4286 var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
  text-wrap: balance;
}
.smi-hero__about-sub {
  /* Ширина как у заголовка плашки — иначе длинное объявление тянет плашку
     вправо и наезжает на коллаж (≥1024). Ниже перекрывается @1023/@767. */
  max-width: min(608px, 31.67vw);
  font: 400 clamp(13px, 0.833vw, 16px) / 1.6 var(--font-text);
  color: var(--c-text);
}

/* ==========================================================================
   Карточки «Для аккредитации…» и «Порядок выдачи…» (Figma 2472:63385 / 63422).
   Размеры макета: шапка/тело padding 56, тело gap 32, заголовок 40/48.
   ========================================================================== */
.smi .visa-block { margin-top: 28px; }
/* Геро → первая карточка: 80 (Figma: hero низ 898, карточка 978).
   :first-of-type здесь не годится — первая <section> на странице это геро. */
.smi .arr-hero + .visa-block { margin-top: clamp(64px, 4.167vw, 80px); }

.smi .visa-block__head {
  gap: 48px;
  padding: clamp(44px, calc(2.5vw + 8px), 56px);
}
.smi .visa-block__title {
  max-width: 1120px;
  font-size: clamp(32px, calc(1.667vw + 8px), 40px);
  line-height: 1.2;
}
.smi .visa-block__body {
  gap: clamp(28px, calc(0.833vw + 16px), 32px);
  padding: clamp(44px, calc(2.5vw + 8px), 56px);
}

/* Тело: типографика макета (18/1.6, лейбл 14 regular) */
.smi .visa-text,
.smi .visa-bullets li,
.smi .visa-list li {
  font-size: var(--smi-txt);
  line-height: 1.6;
}
.smi .visa-bullets li { padding-left: 26px; }
.smi .visa-list li { padding-left: 34px; }
/* Ширина колонки текста — по макету (Figma: текст 1130 в теле 1726) */
.smi .visa-text { max-width: 1130px; }
.smi .visa-label {
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1.2px;
}

/* Ключевая строка блока (Cochin 24/32 с ссылкой-акцентом) */
.smi-key {
  font: 400 clamp(20px, calc(0.833vw + 8px), 24px) / 1.333 var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.smi-key a { color: var(--c-accent); text-decoration: underline; }
.smi-key a:hover { text-decoration: none; }

/* Хвост первого блока: два абзаца через 6 */
.smi-outro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 1130px;
}
.smi-outro p {
  font-size: var(--smi-txt);
  line-height: 1.6;
  color: var(--c-text);
  text-wrap: pretty;
}

/* Приглушённая вставка (серый #8c8c8c) — внутри абзаца и отдельной строкой */
.smi-muted { color: var(--color-grey, #8c8c8c); }
.smi-note {
  display: block;
  margin-top: 2px;
  font-size: clamp(14px, calc(0.4167vw + 8px), 16px);
  line-height: 1.6;
  color: #8c8c8c;
}

/* ---------- Порядок выдачи: ромб-список с вложенными пунктами ---------- */
.smi-rules { gap: clamp(28px, calc(0.833vw + 16px), 32px); }
.smi-rules > li > p + p { margin-top: 2px; }
.smi-rules .visa-bullets { margin-top: 16px; }
.smi-sublabel {
  display: block;
  font: 400 14px/20px var(--font-text);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-secondary);
}

/* ==========================================================================
   Примечания оргкомитета и предупреждение (Figma 2472:63467 / 63470).
   ========================================================================== */
.smi-notes {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 28px;
  max-width: 1383px;
}
.smi-notes p {
  font-size: var(--smi-txt);
  line-height: 1.6;
  color: var(--c-text);
  text-wrap: pretty;
}

.smi-callout {
  margin-top: 28px;
  max-width: 1726px;
  padding: 24px 37px;
  font-size: clamp(14px, calc(0.4167vw + 8px), 16px);
  line-height: 1.6;
}
.smi-callout a { color: var(--c-accent); text-decoration: underline; }
.smi-callout a:hover { text-decoration: none; }

/* ==========================================================================
   Контакты (Figma 2472:63472): лейбл + H2, ниже две тёмные карточки.
   ========================================================================== */
.smi-contacts {
  margin-top: 70px; /* 28 до блока + 42 внутренний отступ макета */
  margin-bottom: clamp(80px, 6.25vw, 120px);
}
.smi-contacts__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 985px;
}
.smi .section-label__text {
  font-size: var(--smi-txt);
  line-height: 1.6;
}
.smi-contacts__title {
  font: 400 var(--smi-h3) / 1.25 var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
  text-wrap: balance;
}

.smi-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}
.smi-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(40px, calc(1.875vw + 13px), 49px) clamp(44px, calc(2.708vw + 5px), 57px);
  background: var(--c-dark);
  border-radius: var(--r-24);
}
.smi-card--org { justify-content: center; }
.smi-card__title {
  font: 400 var(--smi-h3) / 1.25 var(--font-display);
  text-transform: uppercase;
  color: #fff;
}
.smi-card__title-em { color: var(--c-bg); }
.smi-card__contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Список из нескольких телефонов (дирекция по работе со СМИ) — строки не слипаются. */
.smi-card__contact--list { gap: 10px; }
.smi-card__phone {
  font: 400 var(--smi-h3) / 1.25 var(--font-display);
  text-transform: uppercase;
  color: var(--c-bg);
}
.smi-card__mail {
  font-size: var(--smi-txt);
  line-height: 1.6;
  color: var(--c-accent);
  text-decoration: underline;
}
.smi-card__mail:hover { text-decoration: none; }

/* ==========================================================================
   ≤1440 — десктоп-ступень @1919. Размеры макета держат clamp() выше,
   здесь — только вертикальный ритм.
   ========================================================================== */
@media (max-width: 1919px) {
  .smi-contacts { margin-top: 60px; }
}

/* ==========================================================================
   ≤768 — планшет. Геро выше макетных 360: под заголовком живут две плашки.
   ========================================================================== */
@media (max-width: 1023px) {
  .smi .arr-hero { height: 480px; }
  .smi .arr-hero__inner {
    left: 32px;
    right: 32px;
    bottom: 32px;
  }
  .smi .arr-hero__title { margin-top: 14px; font-size: 40px; line-height: 44px; }
  .smi-hero__meta { margin-top: 20px; }

  /* Коллаж кропается сильно — держим окно так, чтобы живопись начиналась
     правее плашек (~65% ширины баннера), а не уезжала за экран целиком. */
  .smi .arr-hero__img { object-position: 20% center; }

  .smi-date { height: auto; padding: 12px 14px; }
  .smi-date__d { font-size: 24px; line-height: 32px; }
  .smi-hero__about { padding: 12px 14px; }
  .smi-hero__about-title,
  .smi-hero__about-sub { max-width: min(608px, 46vw); }
  /* 18 — стык с десктопным clamp'ом на 1024 (без скачка кегля на границе) */
  .smi-hero__about-title { font-size: 18px; line-height: 24px; }
  .smi-hero__about-sub { font-size: 14px; }

  .smi .arr-hero + .visa-block { margin-top: 48px; }
  .smi .visa-block { margin-top: 20px; }
  /* Скоуп-clamp'ы выше перебивают ступени visa.css — возвращаем их значения. */
  .smi .visa-block__head { padding: 32px; }
  .smi .visa-block__body { gap: 28px; padding: 32px; }
  .smi .visa-block__title { font-size: 28px; line-height: 34px; }
  .smi-notes { gap: 18px; margin-top: 20px; }
  .smi-callout { margin-top: 20px; }

  .smi-contacts { margin-top: 48px; }
  .smi-cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ≤360 — узкая мобила. Full-bleed выключаем: полоса и баннер — по контейнеру.
   Плашки геро встают колонкой, даты — в строку.
   ========================================================================== */
@media (max-width: 767px) {
  .smi .ptabs--flow,
  .smi .arr-hero { margin-inline: 0; }

  .smi .arr-hero { height: 460px; }
  .smi .arr-hero__inner { left: 16px; right: 16px; bottom: 20px; }
  .smi .arr-hero__title { margin-top: 10px; font-size: 28px; line-height: 32px; }

  .smi-hero__meta {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 16px;
  }
  .smi-date {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
  }
  .smi-date__days { flex-direction: row; gap: 8px; }
  .smi-date__d { width: auto; font-size: 22px; line-height: 28px; }
  .smi-date__when { width: auto; text-align: left; }
  .smi-hero__about-title,
  .smi-hero__about-sub { max-width: none; }
  .smi-hero__about-title { font-size: 18px; line-height: 24px; }
  .smi-hero__about-sub { font-size: 13px; }

  .smi .arr-hero + .visa-block { margin-top: 32px; }
  .smi .visa-block { margin-top: 16px; }
  .smi .visa-block__head { padding: 24px 20px; }
  .smi .visa-block__body { gap: 24px; padding: 24px 20px; }
  .smi .visa-block__title { font-size: 22px; line-height: 28px; }
  .smi-key { font-size: 20px; line-height: 26px; }
  .smi-rules { gap: 24px; }

  .smi-notes { gap: 16px; margin-top: 16px; }
  .smi-callout { margin-top: 16px; padding: 16px 18px; }

  .smi-contacts { margin-top: 40px; margin-bottom: 56px; }
  .smi-cards { gap: 12px; margin-top: 20px; }
  .smi-card { gap: 16px; padding: 28px 20px; }
  .smi-card__title,
  .smi-card__phone { font-size: 22px; line-height: 28px; }
  .smi-contacts__title { font-size: 24px; line-height: 30px; }
}

/* === sections/uchastie.css === */
/* ==========================================================================
   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).
   ========================================================================== */

/* GEN:NEUTRALIZE BEGIN — генерируется _build/scope_neutralize.py, руками не править */
/* источник утечек: about-page.css .af-contact -> .uch */
.uch .af-contact { overflow: initial; position: initial; }
.uch .af-contact__btns { position: initial; z-index: initial; }
.uch .af-contact__cta { position: initial; z-index: initial; }
.uch .af-contact__social { position: initial; z-index: initial; }
.uch .af-contact__social-link { background: initial; position: initial; }
.uch .af-contact__social-list { align-items: initial; flex-direction: initial; justify-content: initial; }
.uch .af-contact__top { position: initial; z-index: initial; }
/* GEN:NEUTRALIZE END */

/* без висячих слов */
.uch-hero__lead, .uch-why__card p, .uch-pkg__list li, .uch-max__card p, .uch .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;
  /* 664, а не макетные 620: на ≥1920 H1 остаётся 64/72 (ступень ≤1919 роняет его
     до 48/54), и содержимое не помещалось — 58 top + 161 дата + 360 текстовый блок
     + 60 bottom = 639 при высоте 620. Красное тире section-label заезжало на
     дата-плашку на 19px, одинаково на 1920 и на 2560. Ниже 1920 значение
     перекрывается ступенью ≤1919, поэтому clamp тут больше не нужен. */
  height: 664px;
  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; }

/* Правка №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);
}
.uch .af-contacts__grid { margin-top: 24px; display: flex; gap: 16px; align-items: stretch; }
.uch .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);
}
.uch .af-contact--dark { background: var(--c-dark); border: 1px solid var(--c-dark); }
.uch .af-contact--light { background: rgba(255, 255, 255, .5); border: 1px solid var(--c-line); }
.uch .af-contact__top { display: flex; flex-direction: column; gap: 16px; }
.uch .af-contact__cap { font: 400 16px/1.6 var(--font-text); color: var(--c-secondary); opacity: .7; }
.uch .af-contact__cap--muted { color: rgba(255, 255, 255, .6); opacity: 1; }
.uch .af-contact__lines { display: flex; flex-direction: column; gap: 6px; font: 400 16px/1.6 var(--font-text); }
.uch .af-contact--dark .af-contact__lines { color: #f0dcc5; }
.uch .af-contact--light .af-contact__lines { color: var(--c-text); }
.uch .af-contact__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.uch .af-contact--dark .btn--ghost { background-color: transparent; }
.uch .af-contact--dark .btn--ghost:hover { background-color: rgba(255, 255, 255, .12); }
/* .btn--sm-icon (+ .icon) — общий модификатор кнопки, дубль убран: правило
   переехало в base.css (грузится на всех страницах). */
.uch .af-contact__ic { display: flex; flex-direction: column; gap: 2px; }
.uch .af-contact__phone { font: 400 32px/40px var(--font-display); text-transform: uppercase; color: #f0dcc5; text-decoration: none; }
.uch .af-contact__phone:hover { text-decoration: underline; text-underline-offset: 3px; }
.uch .af-contact__mail { font: 400 18px/1.6 var(--font-text); color: var(--c-accent); word-break: break-word; }
.uch .af-contact__social { display: flex; flex-direction: column; gap: 12px; }
.uch .af-contact__social-list { display: flex; gap: 8px; }
.uch .af-contact__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-8);
  overflow: hidden;
}
.uch .af-contact__social-link img { width: 40px; height: 40px; display: block; }
.uch .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; }
  .uch .af-contact { padding: clamp(32px, 2.55vw, 49px) clamp(40px, 2.97vw, 57px); }
  .uch .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) {
  /* 42% вместо left: на 1024 чистый left прятал весь KV за правым краем —
     баннер стоял пустой (вопрос Джулии 07.08). Компромисс: правый край KV
     (палитра, книги) в кадре, текст остается на спокойной текстуре;
     62% пробовали — коллаж наезжал на лид и рамку названия. */
  .uch-hero { height: 560px; background-position: 42% 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) {
  /* Планшет: единый баннер по паттерну остальных страниц («давайте
     к одному виду» — решение дизайна 07.08, Джулия/Полина). KV-масса
     в запечённом фоне ~670px — на 768 фоном не помещается без наезда
     на текст, поэтому фон здесь дает только спокойную текстуру (left),
     а коллаж — отдельная hero-kv.webp фикс-колонкой справа (как свиток
     у визы). Рамка «XII…» на планшете скрыта: в едином виде её нет,
     на десктопе и в мобильной стопке остается. Стопка «по образцу
     О Форуме» — теперь только ≤767 (официальный макет 375). */
  .uch-hero { height: 520px; background-position: left center; }  /* 460 было мало: H1 наезжал на дата-бейдж */
  .uch-hero__kv {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40%;
    object-fit: cover;
    object-position: 35% center;
  }
  .uch-hero__dates { left: 40px; top: 32px; }
  .uch-date--title { display: none; }
  .uch-hero__inner {
    left: 40px;
    right: calc(40% + 24px);
    bottom: 36px;
    width: auto;
    max-width: none;
    gap: 20px;
  }
  .uch-hero__title { font-size: 36px; line-height: 42px; }
  .uch-hero__lead { font-size: 14px; line-height: 20px; 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; }

  .uch .af-contacts__grid { flex-wrap: wrap; }
  .uch .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; }

  /* Мобила: стопка «по образцу О Форуме» (просьба заказчика; официальный
     мобильный макет 2301@375). С 07.08 живет ТОЛЬКО здесь — планшет ушел
     в единый баннер («к одному виду», Джулия/Полина). display:contents
     распускает .uch-hero__dates, чтобы раскидать плашки по order без
     изменения разметки. */
  .uch-hero {
    height: auto;
    min-height: 0;
    padding: 0 0 24px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    background: var(--c-bg);
  }
  .uch-hero__kv {
    display: block;
    order: -1;
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    object-position: center;
  }
  .uch-hero__dates { display: contents; }
  /* Бейдж даты — поверх левого-верхнего угла KV (схема .af-hero__date,
     правка Полины): форма полная, фон непрозрачный. */
  .uch-date--days {
    position: absolute;
    top: 0;
    z-index: 3;
    margin: 0;
    background: var(--c-bg);
    border-color: var(--c-line);
  }
  .uch-date--title { order: 1; width: auto; }
  .uch-hero__inner {
    position: static;
    order: 2;
    width: auto;
    max-width: none;
  }
  /* KV во всю ширину экрана: hero тут внутри .container (gutter 16),
     поэтому распираем картинку отрицательным полем — как .af-hero__kv. */
  .uch-hero__kv {
    width: calc(100% + var(--gutter) * 2);
    max-width: none; /* иначе глобальный img{max-width:100%} режет обратно до контейнера */
    margin-inline: calc(var(--gutter) * -1);
  }
  /* Бейдж вровень с левым краем контейнера (= 16 от края экрана) и ещё
     компактнее: на 375 коллаж всего 231 высотой, крупная плашка съедала
     больше половины и лезла на картины. */
  .uch-date--days { left: 0; padding: 8px 8px; }
  .uch-date__d { font-size: 22px; line-height: 28px; }
  .uch-date__dash { width: 48px; }
  .uch-date__place { font-size: 9px; line-height: 12px; }
  /* Плашка и текст — на всю ширину контейнера (как на «О Форуме»): hero уже
     сидит в .container с гаттером, второй раз отступ не добавляем. */
  .uch-date--title { margin: 0; }
  /* «Помельче название форума»: 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; 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; }
  .uch .af-contact { flex: 1 1 100%; padding: 24px 20px; }
  .uch .af-contact__cta { width: 100%; align-self: stretch; }
  .uch .af-contact__btns { flex-wrap: nowrap; }
  .uch .af-contact__btns .btn { flex: 1; min-width: 0; padding-inline: 8px; }

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

/* === sections/partnery.css === */
/* ==========================================================================
   partnery.css — страница «Партнеры» (раздел «Партнеры»).
   Макет: Figma «ФОК 12.08.26 — Copy» (vn1e3pUWqIaMT3oAOL4BIK), 2781:20063.
   Скоуп — .prt на <main>. Переиспользуем общий хром: .crumbs и .arr-hero из
   arrival.css, .ptabs--flow из page-tabs.css, карточку-контейнер .visa-block
   из visa.css. Всё остальное — свои .prt-*.

   Особенность макета: он нарисован на 1920, но кеглями UI-кита 1440-уровня
   (геро 64/72, заголовок карточки 24/32, тело 16/1.6) — как на «Аккредитации
   СМИ». Поэтому значения макета ставим базой без апскейла, а ступени @1023 и
   @767 переобъявляем: базовые правила скоупа (0,2,0) перебивают тировые
   правила arrival.css/visa.css (0,1,0) на всех ширинах.
   ========================================================================== */

/* ---------- Геро и таб-меню во всю ширину окна (в макете x=0, w=1920) ------ */
.prt .ptabs--flow,
.prt .ptabs--flow + .arr-hero {
  margin-inline: calc(var(--gutter) * -1);
}

/* Геро: только буллеты-тире и заголовок, текст прижат к низу (bottom 60) */
.prt .arr-hero__inner {
  left: 88px;
  bottom: 60px;
  max-width: 900px;
}
.prt .arr-hero__title {
  margin-top: 30px; /* макет: зазор от тире до заголовка */
  font: 400 64px/72px var(--font-display);
}

/* ---------- Плитка логотипов (section.visa-block) ---------- */
.prt .prt-block {
  margin-top: 80px;
}

/* Сетка 4 колонки: первый ряд — партнеры, второй — «При поддержке».
   Ширина колонки при 1920: (1838 − 80 − 72) / 4 = 421,5 — как в макете. */
.prt .prt-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 40px 40px 0;
  list-style: none;
  margin: 0;
}
.prt .prt-logos--support {
  padding-top: 24px;
  padding-bottom: 40px;
}

/* Высота плашки в макете всегда 174 — фиксируем её, а не задаём минимум:
   состав 2026 привёл квадратные и вертикальные знаки (ТАСС, РИО, Союз музеев,
   Большой цирк, РЭМ), и на min-height плитка распухала до 420+. Приём тот же,
   что у инфопартнёров (infopartnery.css): высота у плашки, вписывание — у
   картинки через max-height + object-fit. Вертикальный паддинг под это
   уменьшен, как там же. */
.prt .prt-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 174px;
  min-height: 0;
  padding: 24px 40px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-16);
  background: rgba(255, 255, 255, .45);
}
/* Логотип в плитке — ссылка-якорь на карточку партнёра ниже. Ссылка занимает
   всю внутреннюю область плашки (align-self: stretch + flex:1), чтобы кликом
   ловилась вся плашка, а не только картинка. Ширины логотипов (320/260/220 и
   max-width:100%) считаются от контентного бокса плашки, как и раньше:
   поэтому именно flex-ребёнок, а не position:absolute поверх паддингов. */
.prt .prt-logo__link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.prt .prt-logo img {
  display: block;
  width: 320px;
  max-width: 100%;
  height: auto;
  /* 174 − 24×2 = 126: высокий знак вписываем в контентный бокс плашки,
     пропорции держит object-fit, а не кроп по max-height */
  max-height: 126px;
  object-fit: contain;
}
/* Плашка статуса в углу плитки (макет: top 10, right 10) */
.prt .prt-logo .prt-tag {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* ---------- Плашка статуса ---------- */
.prt .prt-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px 8px;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: rgba(214, 191, 163, .2); /* Akaroa 20% */
  font: 400 14px/20px var(--font-text);
  color: var(--c-text);
  white-space: nowrap;
}

/* ---------- Карточки партнеров ---------- */
.prt .prt-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

/* Колонки макета: логотип 220 + зазор 206 + тело 1332 (при 1920).
   Зазор плавно уменьшается к 1440: 206 / 1920 = 10.73vw. */
.prt .prt-card {
  /* Карточка — цель якоря из плитки; шапка sticky, поэтому отбиваем её от
     верха вьюпорта так же, как это сделано для якорей текстовых страниц
     (page.css): высота шапки + воздух. Плюс 16px — ход reveal: браузер
     доводит до якоря ещё не проявленную карточку (translateY(16px) из
     animations.css), и она тут же подтягивается вверх на этот ход; без
     запаса верх карточки уезжал под шапку. */
  scroll-margin-top: calc(var(--mmt, 96px) + 24px + 16px);
  display: flex;
  align-items: flex-start;
  gap: clamp(48px, 10.73vw, 206px);
  padding: 40px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-16);
  background: rgba(255, 255, 255, .5);
}
.prt .prt-card__logo {
  flex: none;
  width: 220px;
}
/* Логотип в карточке — ссылка на сайт партнёра (свойство URL, пусто → '#').
   Блочная: иначе под картинкой вылезает inline-baseline и колонка становится выше. */
.prt .prt-card__logo-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.prt .prt-card__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.prt .prt-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.prt .prt-card__title {
  font: 400 24px/32px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
  text-wrap: balance;
}
.prt .prt-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.prt .prt-card__text {
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-text);
}
.prt .prt-card__text > * + * { margin-top: 8px; }
.prt .prt-card__text p { text-wrap: pretty; }
.prt .prt-card__text a {
  color: var(--c-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(196, 58, 30, .35);
  transition: border-color .2s ease;
}
.prt .prt-card__text a:hover { border-bottom-color: var(--c-accent); }

/* Списки внутри тела: продолжают вводную строку, поэтому без верхнего зазора */
.prt .prt-card__text .prt-bullets,
.prt .prt-card__text .prt-dashes {
  margin: 0;
  padding: 0;
  list-style: none;
}
.prt .prt-card__text .prt-bullets li,
.prt .prt-card__text .prt-dashes li {
  position: relative;
  padding-left: 22px;
  text-wrap: pretty;
}
.prt .prt-card__text .prt-bullets li::before {
  content: "•";
  position: absolute;
  left: 8px;
}
.prt .prt-card__text .prt-dashes li::before {
  content: "–";
  position: absolute;
  left: 0;
}

/* ---------- Руководитель компании ----------
   Карточка руководителя и модалка со справкой переиспользуют блок спикера
   деловой программы: разметка .mpr-speaker / .mpr-modal и стили из
   meropriyatie.css, поведение — frontend/assets/js/meropriyatie.js. Здесь
   только посадка карточки в тело партнёра и типографика справки: у спикера
   тело модалки — список .mpr-bullets, а у руководителя это абзацы из
   визуального редактора, своих стилей у них нет. */

/* Донор тянется во всю ширину тела карточки (1332 при 1920) — держим ширину
   карточки спикера из макета (490) и отбиваем от описания. */
.prt .prt-leader {
  max-width: 490px;
  margin-top: 8px;
}
/* Без справки открывать нечего: карточка остаётся, но кнопкой не притворяется. */
.prt .prt-leader:not([data-speaker]) { cursor: default; }
.prt .prt-leader:not([data-speaker]):hover {
  border-color: var(--c-line);
  background: rgba(255, 255, 255, .45);
}

/* Справка в модалке — абзацы и списки из визуального редактора. */
.prt .prt-leader__bio {
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-text);
}
.prt .prt-leader__bio > * { margin: 0; }
.prt .prt-leader__bio > * + * { margin-top: 12px; }
.prt .prt-leader__bio p { text-wrap: pretty; }
.prt .prt-leader__bio ul,
.prt .prt-leader__bio ol { padding-left: 22px; }
.prt .prt-leader__bio li + li { margin-top: 4px; }
.prt .prt-leader__bio a {
  color: var(--c-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(196, 58, 30, .35);
  transition: border-color .2s ease;
}
.prt .prt-leader__bio a:hover { border-bottom-color: var(--c-accent); }

/* ==========================================================================
   ≤1023 — планшет. Своего макета нет: раскладка авторская, по принятым
   паттернам соседних страниц раздела.
   ========================================================================== */
@media (max-width: 1023px) {
  .prt .arr-hero__inner { left: 32px; right: 32px; bottom: 32px; max-width: none; }
  .prt .arr-hero__title { margin-top: 20px; font-size: 40px; line-height: 44px; }

  .prt .prt-block { margin-top: 48px; }

  .prt .prt-logos { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 32px 32px 0; }
  .prt .prt-logos--support { padding-top: 16px; padding-bottom: 32px; }
  .prt .prt-logo { height: 140px; min-height: 0; padding: 18px 24px; }
  .prt .prt-logo img { width: 260px; max-height: 104px; }

  .prt .prt-card { gap: 40px; padding: 32px; }
  /* тело карточки уже 490 — держим руководителя во всю его ширину */
  .prt .prt-leader { max-width: none; }
  .prt .prt-card__logo { width: 180px; }
  .prt .prt-card__title { font-size: 22px; line-height: 28px; }
  .prt .prt-card__text { font-size: 15px; }
}

/* ==========================================================================
   ≤767 — мобилка. Плитка в одну колонку, карточка — логотип над текстом.
   ========================================================================== */
@media (max-width: 767px) {
  .prt .ptabs--flow,
  .prt .ptabs--flow + .arr-hero { margin-inline: 0; } /* назад в контейнер */

  .prt .arr-hero__inner { left: 16px; right: 16px; bottom: 20px; }
  .prt .arr-hero__title { margin-top: 12px; font-size: 28px; line-height: 32px; }

  .prt .prt-block { margin-top: 32px; }

  .prt .prt-logos { grid-template-columns: 1fr; gap: 12px; padding: 20px 16px 0; }
  .prt .prt-logos--support { padding-top: 12px; padding-bottom: 20px; }
  .prt .prt-logo { height: 116px; min-height: 0; padding: 16px 20px; }
  .prt .prt-logo img { width: 220px; max-height: 84px; }
  .prt .prt-logo .prt-tag { top: 8px; right: 8px; }

  .prt .prt-list { gap: 12px; margin-top: 16px; }
  .prt .prt-card { flex-direction: column; gap: 20px; padding: 20px 16px; }
  .prt .prt-card__logo { width: 180px; }
  .prt .prt-card__body { gap: 12px; width: 100%; }
  .prt .prt-card__title { font-size: 20px; line-height: 26px; }
  .prt .prt-leader { padding: 16px; }
  .prt .prt-leader .mpr-speaker__photo { width: 80px; height: 100px; }
  .prt .prt-leader__bio { font-size: 14px; }
  .prt .prt-card__text { font-size: 14px; line-height: 1.6; }
  .prt .prt-tag { padding: 4px 10px 6px; font-size: 12px; line-height: 18px; }
}

/* === sections/infopartnery.css === */
/* ==========================================================================
   infopartnery.css — страница «Информационные партнеры» (раздел «Партнеры»).
   Макет: Figma «ФОК 12.08.26 — Copy» (vn1e3pUWqIaMT3oAOL4BIK), 2781:22740.

   Страница — сестра «Партнеров»: тот же макет-файл, те же компоненты. Поэтому
   на <main> висят оба класса — .prt (весь общий скоуп из partnery.css: full-bleed
   геро и табы, плитка .prt-logos/.prt-logo, плашки .prt-tag, карточки .prt-card)
   и .iprt — только для отличий этого макета:
     • плитка одна на 15 логотипов (у «Партнеров» — два ряда, второй «При
       поддержке»), поэтому нижний паддинг ставим самой сетке;
     • список карточек отбит от подвала на 80 (2781:22836 → низ div.page).
   Кегли макета — 1440-уровня на 1920 (как на «Аккредитации СМИ»), они уже
   заданы базой в partnery.css. Ступени @1023/@767 — авторские, по паттернам
   соседних страниц раздела.
   ========================================================================== */

/* Плитка: 4 ряда в одной сетке — низ закрываем паддингом (в макете pb 40) */
.iprt .prt-logos {
  padding-bottom: 40px;
}

/* Логотипы здесь разной «породы»: у вертикальных (ПравоТЭК, МК в Питере,
   Legal Talents, телеканал) ширина 320 дала бы высоту 150–210 и распёрла бы
   плашку. В макете все вписаны в бокс 320×126 — ограничиваем по обеим осям,
   ширину отдаём аспекту (width:auto перебивает width:320 из partnery.css). */
.iprt .prt-logo {
  /* высота плашки в макете всегда 174 — фиксируем, чтобы высокие логотипы её
     не распирали; вертикальный паддинг под них уменьшен (макет: логотип
     заходит в зону паддинга) */
  height: 174px;
  min-height: 0;
  padding: 24px 40px;
}
/* Бокс логотипа в макете — 320×126 (у ПравоТЭК 320×138, см. --tall):
   ширину держим по макету, а высокие логотипы вписываем через object-fit,
   иначе max-height обрезал бы пропорции. */
.iprt .prt-logo img {
  width: min(320px, 100%);
  height: auto;
  max-height: 126px;
  object-fit: contain;
}
.iprt .prt-logo--tall img { max-height: 138px; }

/* Ниже 1486 высота геро упирается в пол 480 (arrival.css) и коллаж кропается
   по бокам: живопись съезжает влево, под заголовок. Держим окно кропа у левого
   края — приём со страницы «Аккредитация СМИ». */
@media (max-width: 1486px) {
  .iprt .arr-hero__img { object-position: left center; }
}

/* 1024–1279: своего макета нет. 15 плашек по 4 в ряд здесь дают логотип ~120px
   (нечитаемо), поэтому ряд из трёх — авторская ступень для этой плитки.
   Медиа именно диапазоном: файл идёт в бандле после partnery.css, и открытый
   max-width перебил бы его ступени @1023 (2 колонки) и @767 (1 колонка). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .iprt .prt-logos { grid-template-columns: repeat(3, 1fr); }
}

/* Карточки: зазор до подвала (в макете 80 от последней карточки до footer) */
.iprt .prt-list {
  margin-bottom: 80px;
}

/* ---------- ≤1023 — планшет ---------- */
@media (max-width: 1023px) {
  .iprt .prt-logos { padding-bottom: 32px; }
  .iprt .prt-logo { height: 140px; padding: 18px 24px; }
  .iprt .prt-logo img { width: min(260px, 100%); max-height: 102px; }
  .iprt .prt-logo--tall img { max-height: 112px; }
  .iprt .prt-list { margin-bottom: 56px; }
}

/* ---------- ≤767 — мобилка ---------- */
@media (max-width: 767px) {
  /* На узкой мобилке левый край коллажа — пустая текстура: сдвигаем окно кропа
     к живописи, но не под заголовок (макета мобилки для страницы нет). */
  .iprt .arr-hero__img { object-position: 40% center; }

  /* «ИНФОРМАЦИОННЫЕ» — самое длинное слово сайта: в Cochin его ширина ≈ 11.44 ×
     кегль, то есть при мобильных 28px нужно 320px строки, а внутри геро их
     100vw − 64 (гаттер 16×2 + отступы .arr-hero__inner 16×2). Ниже ~414px слово
     не влезало и уезжало за баннер — держим кегль по доступной строке (минус 4px
     на скругление), сверху упираясь в макетные 28. */
  .iprt .arr-hero__title {
    font-size: clamp(18px, calc((100vw - 68px) / 11.44), 28px);
    line-height: 1.15;
  }

  .iprt .prt-logos { padding-bottom: 20px; }
  .iprt .prt-logo { height: 116px; padding: 14px 20px; }
  .iprt .prt-logo img { width: min(220px, 100%); max-height: 86px; }
  .iprt .prt-logo--tall img { max-height: 94px; }
  .iprt .prt-list { margin-bottom: 40px; }
}

/* === sections/press-events.css === */
/* ==========================================================================
   press-events.css — страница «Организация и проведение пресс-мероприятий»
   (раздел «Участникам» → «Сервисы»).
   Десктоп-база — 1920 (макет Figma 2975:7096, файл ZyqkR9oSiLPAz4reVzZanY).
   Переиспользует: arrival.css (crumbs, arr-hero), visa.css (visa-block/group/
   label/bullets/text/btn), base.css (section-label), page-tabs.css (ptabs--flow).
   Здесь — только дельты и новые блоки; всё скоупится под .pev (на <main>),
   чтобы не спорить с адаптивом visa.css на соседних страницах.
   Лесенка брейкпоинтов проекта: 1920 (база) / 1440 / 768 / 360.
   ========================================================================== */

/* без висячих слов */
.pev .visa-text, .pev .visa-bullets li, .pev .pev-place__val { text-wrap: pretty; }
.pev .visa-block__title, .pev .arr-hero__title { text-wrap: balance; }

/* ==========================================================================
   HERO — светлый коллаж, тёмный заголовок, контент прижат к низу баннера.
   Полоса табов и баннер во всю ширину окна (Figma: article и section.arr-hero
   — x=0 w=1920, тогда как section.visa-block ниже — x=40 w=1840). Оба лежат
   в .container, поэтому гасим гаттер отрицательным полем.
   ========================================================================== */
.pev .ptabs--flow,
.pev .arr-hero--pev {
  margin-inline: calc(var(--gutter) * -1);
}

/* Figma 2975:7143: колонка, label →30→ заголовок; блок на 88 слева и 60 снизу. */
.arr-hero--pev .arr-hero__inner {
  top: auto;
  bottom: 60px;
  left: 88px;
  width: 797px;
  max-width: 797px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
/* inline-flex ловит line-box родителя и добавляет ~12px — отсюда flex.
   14 + gap 16 = 30 (шаг label → заголовок в макете). */
.arr-hero--pev .section-label {
  display: flex;
  margin-bottom: 14px;
}
/* «пресс-мероприятий» не рвём по дефису — в макете (Figma 2975:7149) слово
   цельное и задаёт перенос строк выше. На мобильной ступени запрет снимаем,
   иначе слово шире вьюпорта. */
.pev-nb { white-space: nowrap; }
.arr-hero--pev .arr-hero__title {
  margin-top: 0;
  font: 400 64px/72px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}

/* ==========================================================================
   БЛОКИ .visa-block — геометрия из visa.css, отличается только шаг между
   блоками (80 вместо 48) и типографика тела (18/1.6 вместо 20/28).
   ========================================================================== */
.pev .visa-block + .visa-block { margin-top: 80px; }
.pev .visa-block:last-of-type { margin-bottom: 120px; }

/* Figma 2975:7160 — шаг внутри тела 24 (вложенная группа «Важно» — 18). */
.pev .visa-block__body > .visa-group { gap: 24px; }

.pev .visa-text,
.pev .visa-bullets li {
  font-size: 18px;
  line-height: 1.6;
}

/* Figma 2975:7175: Inter Tight 14, letter-spacing 1.2, обычное начертание. */
.pev .visa-label {
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1.2px;
}

/* Figma 2975:7182 — кнопка: паддинг 24, зазор 16.
   align-self обязателен: кнопка лежит внутри .visa-group (колонка без
   align-items), поэтому по умолчанию растягивалась на всю ширину блока
   (ревью Полины 03.09). */
.pev .visa-btn {
  align-self: flex-start;
  gap: 16px;
  padding: 0 24px;
  font: 400 16px/1.6 var(--font-text);
}

/* ==========================================================================
   «Место расположения» — подпись + адрес с ромбовидным маркером слева
   (Figma 2975:7166: квадрат 10×10, повёрнут на 45°, центр 9×15 от угла).
   ========================================================================== */
.pev-place {
  position: relative;
  padding-left: 34px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pev-place::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 10px;
  height: 10px;
  background: var(--c-accent);
  transform: rotate(45deg);
}
/* кегль 14.8 — как в макете (Figma 2975:7168), не округляем */
.pev-place__label {
  font: 400 14.8px/20px var(--font-text);
  color: var(--c-secondary);
  opacity: .65;
}
.pev-place__val {
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
}

/* акцентная врезка в тексте (Figma 2975:7260) */
.pev-accent { color: var(--c-accent); }

/* ==========================================================================
   1440 — ступень макета-донора (visa.css). Догоняем свои дельты.
   ========================================================================== */
@media (max-width: 1919px) {
  .arr-hero--pev .arr-hero__inner { left: 64px; bottom: 56px; width: 640px; max-width: 640px; }
  .arr-hero--pev .section-label { margin-bottom: 10px; } /* 10 + 16 = 26 */
  .arr-hero--pev .arr-hero__title { font-size: 48px; line-height: 54px; }

  .pev .visa-block + .visa-block { margin-top: 64px; }
  .pev .visa-block:last-of-type { margin-bottom: 96px; }
  .pev .visa-block__body > .visa-group { gap: 20px; }

  .pev .visa-text,
  .pev .visa-bullets li,
  .pev .pev-place__val { font-size: 16px; line-height: 24px; }
  .pev .visa-btn { height: 52px; padding: 0 24px; }
}

/* ==========================================================================
   768 — планшет.
   ========================================================================== */
@media (max-width: 1023px) {
  /* Коллаж занимает правую половину баннера — сдвигаем кадр так, чтобы под
     заголовком оставалось светлое поле, и сужаем колонку текста под него. */
  .arr-hero--pev .arr-hero__img { object-position: 26% center; }
  .arr-hero--pev .arr-hero__inner {
    left: 32px;
    right: auto;
    bottom: 32px;
    width: 460px;
    max-width: calc(100% - 64px);
  }
  .arr-hero--pev .section-label { margin-bottom: 6px; } /* 6 + 16 = 22 */
  .arr-hero--pev .arr-hero__title { font-size: 36px; line-height: 40px; }

  .pev .visa-block + .visa-block { margin-top: 48px; }
  .pev .visa-block:last-of-type { margin-bottom: 80px; }
  .pev-place { padding-left: 28px; }
  .pev-place::before { left: 2px; top: 8px; width: 9px; height: 9px; }
}

/* ==========================================================================
   360 — мобильная. Табы и геро возвращаются в гаттер 16.
   ========================================================================== */
@media (max-width: 767px) {
  .pev .ptabs--flow,
  .pev .arr-hero--pev { margin-inline: 0; }
  .pev .ptabs--flow + .arr-hero { margin-top: 10px; }

  .arr-hero--pev { height: auto; min-height: 380px; }
  /* кадр сдвинут вправо ровно настолько, чтобы из-под заголовка выглядывал
     край коллажа (ревью Полины 03.09), но текст оставался на светлом поле */
  .arr-hero--pev .arr-hero__img { object-position: 42% center; }
  .arr-hero--pev .arr-hero__inner { left: 20px; right: 20px; bottom: 24px; }
  .arr-hero--pev .section-label { margin-bottom: 0; }
  .arr-hero--pev .arr-hero__title { font-size: 30px; line-height: 34px; }
  .pev-nb { white-space: normal; }

  .pev .visa-block + .visa-block { margin-top: 32px; }
  .pev .visa-block:last-of-type { margin-bottom: 56px; }
  .pev .visa-block__body > .visa-group { gap: 18px; }
  /* кнопка во всю строку — вокруг неё зазор больше общего шага группы,
     чтобы не липла к тексту сверху и к краю карточки снизу
     (ревью Полины 03.09) */
  .pev .visa-btn { align-self: stretch; justify-content: center; margin-block: 6px; }
  .pev .visa-block__body { padding-bottom: 28px; }
}

/* === sections/press-center.css === */
/* ==========================================================================
   press-center.css — страница «Пресс-центр» (раздел «Медиа»).
   Макет: Figma 2975:10358 (файл ZyqkR9oSiLPAz4reVzZanY, «ФОК 18.08.26 Copy»),
   только 1920 — адаптив авторский, по паттернам «Правил аккредитации СМИ».
   Каркас переиспользуется: крошки/hero — arrival.css (+ arr-hero--light из
   visa.css), карточка — visa.css (.visa-block/.visa-group/.visa-label),
   таб-меню — page-tabs.css. Полоса табов и баннер — во всю ширину окна
   (в макете article и arr-hero x=0 w=1920, контент ниже — x=40 w=1840).
   Скоуп .pcen на <main>. Адаптив: @1919 → @1023 → @767.
   ========================================================================== */

/* ---------- Full-bleed: гасим гаттер контейнера у табов и баннера ---------- */
.pcen .ptabs--flow,
.pcen .arr-hero {
  margin-inline: calc(var(--gutter) * -1);
}

/* ---------- Hero (Figma 2975:10401): запечённый коллаж, тёмный заголовок.
   Заголовок 64/72, метка →30→ заголовок, инна x=88, низ 60. ---------- */
/* Коллаж (арки) живёт в правой половине: при кропе держим окно у левого
   края — арки уезжают правее заголовка и не лезут под текст. */
.pcen .arr-hero__img { object-position: left center; }

@media (min-width: 1024px) {
  .pcen .arr-hero__inner {
    left: 88px;
    bottom: 60px;
    max-width: 797px;
  }
  .pcen .arr-hero__title {
    /* визуальный зазор метка→заголовок 30 (инлайн-svg метки свисает ~6) */
    margin-top: 24px;
    font-size: 64px;
    line-height: 72px;
  }
}

/* ==========================================================================
   Карточка с информацией (Figma 2975:10434 — section.visa-block без шапки).
   Геометрия карточки из visa.css; здесь — кегли и шаги этого макета:
   тело 56, группа 24, текст 18/1.6.
   ========================================================================== */
.pcen-block {
  margin-top: clamp(32px, 2.5vw, 48px);
  margin-bottom: clamp(80px, 6.25vw, 120px);
}
.pcen .visa-block__body {
  padding: clamp(32px, 2.917vw, 56px);
  gap: clamp(28px, 2.292vw, 44px);
}
.pcen-group {
  gap: 24px;
}
.pcen .visa-text {
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
  text-wrap: pretty;
}
.pcen-accent { color: var(--c-accent); }

/* Мини-лейбл секции (Figma 2975:10461): Inter Tight 14/20, трекинг 1.2 */
.pcen .visa-label {
  font: 400 14px/20px var(--font-text);
  letter-spacing: 1.2px;
}

/* Вложенная группа «Точка пресс-подхода…» (Figma 2975:10460) */
.pcen-subgroup { gap: 18px; }

/* ---------- Пункт с ромбом (Figma 2975:10448) ----------
   Ромб 10×10 (повёрнут на 45°), текст на x=34, подпись →4→ значение. */
.pcen-item {
  position: relative;
  padding-left: 34px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pcen-item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 10px;
  height: 10px;
  background: var(--c-accent);
  transform: rotate(45deg);
}
.pcen-item__label {
  font: 400 15px/20px var(--font-text);
  color: var(--c-secondary);
  opacity: .65;
}
.pcen-item__text {
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
  text-wrap: pretty;
}
.pcen-item__text a {
  color: var(--c-accent);
  text-decoration: underline;
}
.pcen-item__text a:hover { text-decoration: none; }

/* Строка «даты | часы» с красным разделителем (Figma 2975:10455/10457) */
.pcen-item__text--row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pcen-sep {
  flex: none;
  width: 2px;
  height: 26px;
  background: var(--c-accent);
}

/* ==========================================================================
   ≤1919 — кегль тел не занижаем (18 = лид кита 1440), геометрия на clamp выше.
   ========================================================================== */

/* ==========================================================================
   ≤1023 — планшет.
   ========================================================================== */
@media (max-width: 1023px) {
  /* окно кропа узкое: уводим арки правее заголовка */
  .pcen .arr-hero__img { object-position: 18% center; }
  .pcen-group { gap: 20px; }
}

/* ==========================================================================
   ≤767 — мобилка. Своего макета 375 у страницы нет: значения — из системного
   принятого макета 375 этого файла («Бронирование гостиниц», 2205:85057):
   контент x=16 (gutter), баннер 343×300, метка →24→ заголовок 32/40,
   тело 16/1.6.
   ========================================================================== */
@media (max-width: 767px) {
  .pcen .ptabs--flow,
  .pcen .arr-hero { margin-inline: 0; }

  .pcen .arr-hero__img { object-position: 32% center; }
  .pcen .arr-hero__title {
    max-width: none;
    margin-top: 18px; /* 18 + ~6 свеса svg-метки = визуальные 24 */
    font-size: 32px;
    line-height: 40px;
  }

  .pcen .visa-block__body { padding: 24px 20px; }
  .pcen-group { gap: 18px; }
  .pcen .visa-text { font-size: 16px; }
  .pcen .visa-label { font-size: 13px; letter-spacing: 1px; }

  .pcen-item { padding-left: 26px; }
  .pcen-item::before { left: 2px; top: 9px; width: 9px; height: 9px; }
  .pcen-item__label { font-size: 14px; }
  .pcen-item__text { font-size: 16px; }
  .pcen-sep { height: 20px; }
}

/* === sections/venue-access.css === */
/* ==========================================================================
   venue-access.css — страница «Получение бейджа» (раздел «Доступ на площадку»).
   Макет: Figma 2981:59463 (файл 1400Ru54554GFguz3RvNyT, «ФОК 03.09.26 Copy»).
   Переиспользует: arrival.css (crumbs, arr-hero), visa.css (visa-cases/case,
   visa-block/group/label/list/bullets/text/btn/callout, visa-step__num),
   base.css (section-label), page-tabs.css (ptabs--flow).
   Здесь — только дельты и новые блоки; всё под скоупом .vac (на <main>),
   чтобы не спорить с адаптивом visa.css на соседних страницах.

   Макет свёрстан на 1920, а реальный монитор 1920 даёт вьюпорт ~1905 и
   попадает в ступень @1919 донорских стилей. Поэтому значения макета не
   «занижаем» ступенью, а ведём clamp()-ом: 1920 → макет, 1440 → ступень
   донора. Лесенка брейкпоинтов проекта: 1920 (база) / 1440 / 768 / 360.
   ========================================================================== */

.vac {
  /* Боди макета — 18/1.6 на 1920, к 1440 сходится к 16 (ступень visa.css). */
  --vac-txt: clamp(16px, calc(0.41667vw + 10px), 18px);
  /* Мелкий боди карточек «Как получить бейдж» — 16 на 1920, 15 на 1440. */
  --vac-txt-s: clamp(15px, calc(0.20833vw + 12px), 16px);
  /* Cochin H5 — 40/48 на 1920, 32/40 на 1440. */
  --vac-h2: clamp(32px, calc(1.66667vw + 8px), 40px);
  --vac-h2-lh: clamp(40px, calc(1.66667vw + 16px), 48px);
  /* Cochin H6 — 32/40 на 1920, 28/34 на 1440. */
  --vac-h3: clamp(28px, calc(0.83333vw + 16px), 32px);
  --vac-h3-lh: clamp(34px, calc(1.25vw + 16px), 40px);
  /* Аптайм-строки пунктов аккредитации — 14 на 1920, 13 на 1440. */
  --vac-upper: clamp(13px, calc(0.20833vw + 10px), 14px);
  /* Паддинги карточек — 48/56 на 1920, 40/44 на 1440 (ступень visa.css). */
  --vac-pad-y: clamp(40px, calc(1.66667vw + 16px), 48px);
  --vac-pad-x: clamp(44px, calc(2.5vw + 8px), 56px);
}

/* без висячих слов */
.vac .visa-text,
.vac .visa-list li,
.vac .visa-bullets li,
.vac .vac-points__lead,
.vac .vac-place__addr { text-wrap: pretty; }
.vac .visa-block__title,
.vac .visa-case__title,
.vac .vac-points__title,
.vac .vac-get__title,
.vac .arr-hero__title { text-wrap: balance; }

/* ==========================================================================
   Ритм страницы. Figma main.ppage: геро → карточки 108, между рядами
   карточек 40, между остальными секциями 80, снизу 120.
   Геро свой отступ не получает: наезд на полосу табов держит page-tabs.css.
   ========================================================================== */
.vac > section { margin-top: clamp(64px, calc(3.33333vw + 16px), 80px); }
.vac > section.vac-cases { margin-top: clamp(80px, calc(5.83333vw - 4px), 108px); }
.vac > section:last-of-type { margin-bottom: clamp(96px, calc(5vw + 24px), 120px); }

/* ==========================================================================
   HERO — светлый коллаж, тёмный заголовок, контент прижат к низу баннера.
   Полоса табов и баннер во всю ширину окна (Figma: article и section.arr-hero
   — x=0 w=1920, секции ниже — x=40 w=1840). Оба лежат в .container, поэтому
   гасим гаттер отрицательным полем.
   ========================================================================== */
.vac .ptabs--flow,
.vac .arr-hero--vac {
  margin-inline: calc(var(--gutter) * -1);
}

/* Figma 2981:59497: колонка label →30→ заголовок; блок на 88 слева, 60 снизу. */
.arr-hero--vac .arr-hero__inner {
  top: auto;
  bottom: clamp(56px, calc(0.83333vw + 44px), 60px);
  left: clamp(64px, calc(5vw - 8px), 88px);
  width: 834px;
  max-width: calc(100% - 176px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
/* inline-flex ловит line-box родителя и добавляет ~12px — отсюда flex. */
.arr-hero--vac .section-label { display: flex; }
.arr-hero--vac .arr-hero__title {
  margin-top: 0;
  font: 400 clamp(48px, 3.33333vw, 64px)/clamp(54px, 3.75vw, 72px) var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}

/* ==========================================================================
   Три шага (Figma 2981:59508 / 2981:59533).
   Первый ряд — 1100 + 40 + 700, второй — карточка во всю ширину.
   Разметка идёт по номерам шагов (1 → 2 → 3), а раскладку макета собираем
   grid-areas: в одну колонку карточки тогда встают по порядку, а не
   1 → 3 → 2 (ревью Полины 07.09).
   ========================================================================== */
.vac .vac-cases {
  grid-template-columns: 1100fr 700fr;
  grid-template-areas:
    "one three"
    "two two";
  gap: clamp(32px, calc(1.66667vw + 8px), 40px);
}
.vac-card--one { grid-area: one; }
.vac-card--two { grid-area: two; }
.vac-card--three { grid-area: three; }

.vac .visa-case { padding: var(--vac-pad-y) var(--vac-pad-x); }
/* Cochin H6 — в макете 32/40, ступень visa.css роняет до 24/30, возвращаем */
.vac .visa-case__title {
  font: 400 var(--vac-h3)/var(--vac-h3-lh) var(--font-display);
}
.vac .vac-card { gap: 16px; }
/* Figma 2981:59534 — в нижней карточке шаг до кнопки 32, а не 16 */
.vac .vac-card--two { gap: clamp(24px, 1.66667vw, 32px); }
.vac-card__title {
  display: flex;
  align-items: center;
  gap: 16px;
}
/* нижняя карточка: заголовок в две строки, номер прижат к первой (items-start) */
.vac-card--two .vac-card__title { align-items: flex-start; }
.vac-card__body {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, calc(1.66667vw + 0px), 32px);
}
.vac-card__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Figma 2981:59516 — кнопка: паддинг 24, зазор 16, по ширине подписи. */
.vac .visa-btn {
  align-self: flex-start;
  gap: 16px;
  height: auto;
  min-height: 56px;
  padding: 12px 24px;
  font: 400 var(--vac-txt-s)/1.6 var(--font-text);
  text-align: left;
}
/* Figma 2981:59553 — неактивная кнопка-заглушка «Скоро будет доступно». */
.vac-btn-soon {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 12px 25px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-8);
  background: rgba(255, 255, 255, .4);
  opacity: .8;
  font: 400 var(--vac-txt-s)/1.6 var(--font-text);
  color: var(--c-text);
  cursor: default;
}
.vac-btn-soon .icon { flex: none; }

/* ==========================================================================
   Блоки .visa-block — геометрия из visa.css, отличается типографика тела
   (18/1.6 вместо 20/28), шаг внутри тела (32) и заголовок в одну строку.
   ========================================================================== */
.vac .visa-block__head,
.vac .visa-block__body { padding: var(--vac-pad-x); }
.vac .visa-block__body { gap: clamp(36px, calc(1.66667vw + 12px), 44px); }
.vac .visa-block__body > .visa-group { gap: clamp(24px, calc(1.66667vw + 0px), 32px); }
/* в макете заголовки блоков идут одной строкой — ограничение 900 не нужно */
.vac .visa-block__title {
  max-width: none;
  font: 400 var(--vac-h2)/var(--vac-h2-lh) var(--font-display);
}

.vac .visa-text,
.vac .visa-list li,
.vac .visa-bullets li {
  font-size: var(--vac-txt);
  line-height: 1.6;
}
.vac .visa-list li { padding-left: clamp(30px, calc(0.83333vw + 18px), 34px); }
.vac .visa-list li::before { top: 9px; }
.vac .visa-list a,
.vac .visa-case a:not(.visa-btn) { color: var(--c-accent); text-decoration: underline; }
.vac .visa-list a:hover,
.vac .visa-case a:not(.visa-btn):hover { text-decoration: none; }

/* Figma 2981:59605: Inter Tight 14, letter-spacing 1.2, обычное начертание. */
.vac .visa-label {
  font-weight: 400;
  font-size: var(--vac-upper);
  letter-spacing: 1.2px;
}

/* подпись-уточнение под пунктом списка (Figma 2981:59597); кегль 14.8 не округляем */
.vac-hint {
  display: block;
  margin-top: 6px;
  font: 400 clamp(14px, calc(0.16667vw + 11.6px), 14.8px)/20px var(--font-text);
  color: var(--c-secondary);
  opacity: .65;
}

/* ==========================================================================
   Где получить бейдж (Figma 2981:59678) — две тёмные карточки-пункта.
   ========================================================================== */
.vac-points__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.vac-points__title,
.vac-get__title {
  font: 400 var(--vac-h2)/var(--vac-h2-lh) var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.vac-points__lead {
  max-width: 900px;
  font: 400 var(--vac-txt)/1.6 var(--font-text);
  color: var(--c-text);
  opacity: .85;
}
.vac-points__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: clamp(36px, calc(2.5vw + 0px), 48px);
}
.vac-point {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, calc(0.83333vw + 16px), 32px);
  padding: var(--vac-pad-y) var(--vac-pad-x);
  background: var(--c-dark);
  border-top: 1px solid var(--c-line);
  border-radius: var(--r-24);
  overflow: hidden;
}
/* Москва — контент сверху, снизу декоративная подложка */
.vac-point--decor { justify-content: flex-start; }
.vac-point > *:not(.vac-point__decor) { position: relative; z-index: 1; }
/* Figma 2981:59709: картинка во всю ширину карточки, 418 из 749 = 56% высоты */
.vac-point__decor {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 56%;
  object-fit: cover;
  opacity: .3;
  pointer-events: none;
}
.vac-point__city {
  font: 400 var(--vac-h3)/var(--vac-h3-lh) var(--font-display);
  text-transform: uppercase;
  color: #fff;
}
.vac-places {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, calc(0.83333vw + 16px), 32px);
}
.vac-place {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* ромб-маркер: квадрат 10×10, повёрнут на 45° (Figma 2981:59697) */
.vac-place__name {
  position: relative;
  padding-left: 30px;
  font: 400 var(--vac-txt-s)/1.6 var(--font-text);
  color: var(--c-bg);
}
.vac-place__name::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 10px;
  height: 10px;
  background: var(--c-accent);
  transform: rotate(45deg);
}
.vac-place__addr {
  font: 400 var(--vac-txt)/1.6 var(--font-text);
  color: #fff;
}
.vac-place__label {
  display: block;
  color: rgba(255, 255, 255, .5);
}
.vac-times {
  display: flex;
  gap: 24px;
}
.vac-times__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vac-times__col li {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 400 var(--vac-upper)/20px var(--font-text);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #fff;
}
.vac-times__col li::before {
  content: "";
  flex: none;
  width: 26px;
  height: 2px;
  background: var(--c-accent);
}

/* ==========================================================================
   Как получить бейдж (Figma 2981:59870) — две светлые карточки.
   ========================================================================== */
.vac-get {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.vac-get__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.vac .vac-way { gap: 24px; }
.vac-way__title {
  font: 400 var(--vac-h3)/var(--vac-h3-lh) var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.vac-way__lead {
  font: 400 var(--vac-txt-s)/1.6 var(--font-text);
  color: var(--c-text);
}
.vac .vac-way .visa-list li {
  font-size: var(--vac-txt-s);
  line-height: 1.6;
}
.vac .vac-way .visa-list li::before { top: 8px; }
.vac-way__file {
  display: block;
  margin-top: 6px;
  font: 400 var(--vac-txt-s)/1.6 var(--font-text);
  color: var(--c-accent);
  text-decoration: underline;
}
.vac-way__file:hover { text-decoration: none; }
/* Figma 2981:59896 — врезка «Важно» внутри карточки */
.vac .vac-callout {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 34px 24px 37px;
}
.vac-callout__label {
  font: 400 var(--vac-upper)/20px var(--font-text);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-secondary);
}
.vac-callout p {
  font: 400 var(--vac-txt-s)/1.6 var(--font-text);
  color: var(--c-secondary);
}

/* ==========================================================================
   768 — планшет: сетки в одну колонку.
   ========================================================================== */
@media (max-width: 1023px) {
  .vac > section { margin-top: 48px; }
  .vac > section.vac-cases { margin-top: 56px; }
  .vac > section:last-of-type { margin-bottom: 80px; }

  /* коллаж занимает правую половину баннера — сдвигаем кадр так, чтобы под
     заголовком оставалось светлое поле */
  .arr-hero--vac .arr-hero__img { object-position: 22% center; }
  .arr-hero--vac .arr-hero__inner {
    left: 32px;
    right: auto;
    bottom: 32px;
    width: 460px;
    max-width: calc(100% - 64px);
    gap: 12px;
  }
  .arr-hero--vac .arr-hero__title { font-size: 36px; line-height: 40px; }

  .vac .vac-cases,
  .vac-points__grid,
  .vac-get__grid { grid-template-columns: 1fr; }
  .vac .vac-cases { grid-template-areas: "one" "two" "three"; }

  .vac .visa-case,
  .vac .visa-block__head,
  .vac .visa-block__body,
  .vac-point { padding: 32px; }
  /* в одну колонку карточки не выравниваются по высоте, и декоративная
     подложка превращается в пустой хвост — убираем её, высота по контенту
     (ревью Полины 07.09) */
  .vac-point--decor { justify-content: center; }
  .vac-point__decor { display: none; }
  .vac-points__title,
  .vac-get__title,
  .vac .visa-block__title { font-size: 28px; line-height: 34px; }
  .vac .vac-callout { padding: 20px 24px 20px 27px; }
}

/* ==========================================================================
   360 — мобильная. Табы и геро возвращаются в гаттер.
   ========================================================================== */
@media (max-width: 767px) {
  .vac .ptabs--flow,
  .vac .arr-hero--vac { margin-inline: 0; }

  .vac > section { margin-top: 32px; }
  .vac > section.vac-cases { margin-top: 36px; }
  .vac > section:last-of-type { margin-bottom: 56px; }

  /* Мобильного макета нет — геро как на остальных страницах (образец —
     «Пресс-мероприятия»): без вуали, кадр сдвинут так, что из-под заголовка
     выглядывает край коллажа, а текст стоит на светлом поле (ревью Полины 18.09). */
  .arr-hero--vac { height: auto; min-height: 380px; }
  .arr-hero--vac .arr-hero__img { object-position: 42% center; }
  .arr-hero--vac .arr-hero__inner {
    left: 20px;
    right: 20px;
    width: auto;
    max-width: none;
    bottom: 24px;
    gap: 10px;
  }
  .arr-hero--vac .arr-hero__title { font-size: 30px; line-height: 34px; }

  .vac .visa-case,
  .vac .visa-block__head,
  .vac .visa-block__body { padding: 24px 20px; }
  .vac .visa-block__body { gap: 28px; }
  .vac .visa-block__body > .visa-group { gap: 20px; }
  .vac .visa-btn,
  .vac-btn-soon {
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    gap: 10px;
    min-height: 52px;
    padding: 10px 14px;
    font-size: 15px;
    margin-block: 6px;
  }

  .vac-card__title { gap: 12px; }
  .vac .visa-case__title,
  .vac .visa-block__title { font-size: 22px; line-height: 28px; }
  .vac-card__body { gap: 20px; }

  .vac-points__title,
  .vac-get__title { font-size: 24px; line-height: 30px; }
  .vac-points__grid { margin-top: 24px; }
  .vac-point { gap: 22px; padding: 28px 20px; }
  .vac-point__city,
  .vac-way__title { font-size: 22px; line-height: 28px; }
  .vac-places { gap: 24px; }
  .vac-place { gap: 12px; }
  .vac-times { flex-direction: column; gap: 12px; }
  .vac-times__col { gap: 12px; }
  .vac-times__col li { font-size: 12px; gap: 10px; }
  .vac-times__col li::before { width: 20px; }

  .vac .vac-way { gap: 18px; }
  .vac .vac-callout { padding: 18px 18px 18px 21px; }
  .vac-hint { font-size: 13px; }
}

/* === sections/plenary-access.css === */
/* ==========================================================================
   plenary-access.css — страница «Доступ на пленарное заседание»
   (раздел «Доступ на площадку»).
   Макет: Figma 3005:6874 (файл 2ajDovaG5DM9HR8AkKV8ov, «ФОК 18.09.26 Copy»).

   На <main> два класса — `vac plen`. Крошки, табы, геро, ритм секций,
   карточки .visa-case, кнопки, тёмная карточка пункта (.vac-point) и токены
   кеглей общие с «Получением бейджа» (venue-access.css, скоуп .vac) — макеты
   одного раздела. Шаги — .arr-stat из arrival.css, врезки — .arr-intro__note.
   Здесь только дельты этой страницы, всё под .plen.

   Как и в venue-access.css, значения макета 1920 ведём clamp()-ом к ступени
   1440: вьюпорт монитора 1920 (~1905) попадает в @1919 донорских стилей.
   ========================================================================== */

.plen {
  /* Cochin H7 заголовков шагов — 24/32 на 1920, 22/30 на 1440. */
  --plen-h4: clamp(22px, calc(0.41667vw + 16px), 24px);
  --plen-h4-lh: clamp(30px, calc(0.41667vw + 24px), 32px);
  /* внутренние шаги карточек — 24 на 1920, 20 на 1440 */
  --plen-gap: clamp(20px, calc(0.83333vw + 8px), 24px);
  /* заголовок секции → содержимое — 60 на 1920, 48 на 1440 */
  --plen-head: clamp(48px, calc(2.5vw + 12px), 60px);
  /* Межстрочные 1.6 Figma округляет до целых на строку: 18 → 29, 16 → 26
     (на 1440: 16 → 26, 15 → 24). Без этого за страницу набегает −9px. */
  --plen-lh: clamp(26px, calc(0.625vw + 17px), 29px);
  --plen-lh-s: clamp(24px, calc(0.41667vw + 18px), 26px);
}

.plen .plen-intro__lead,
.plen .plen-step__text,
.plen .plen-card__text,
.plen .plen-issue__lead,
.plen .plen-note__lead,
.plen .plen-dots li { text-wrap: pretty; }
.plen .plen-title,
.plen .plen-intro__date { text-wrap: balance; }
/* в макете заголовки карточек и шагов переносятся «как есть», без балансировки
   (base.css балансирует все h1–h6) */
.plen .visa-case__title,
.plen .plen-step__title { text-wrap: wrap; }

/* Геро (Figma 3005:6908): риска →30→ заголовок, у «Получения бейджа» — 18. */
.plen .arr-hero--vac .arr-hero__inner { gap: 30px; }
/* Бокс заголовка в макете 834 при кегле 64 — держим его в em, чтобы
   «на пленарное заседание» переносилось так же на любой ширине и не
   заезжало на коллаж (на 1200 шло одной строкой, ревью 18.09). */
.plen .arr-hero--vac .arr-hero__title { max-width: 13.04em; }

/* заголовок секции — Cochin H5, 40/48 */
.plen-title {
  font: 400 var(--vac-h2)/var(--vac-h2-lh) var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}

/* ==========================================================================
   Дата и приглашение (Figma 3005:6918): дата →8→ лид →28→ две карточки.
   ========================================================================== */
.plen-intro__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plen-intro__date {
  font: 400 var(--vac-h3)/var(--vac-h3-lh) var(--font-display);
  text-transform: uppercase;
  color: var(--c-accent);
}
/* кегль 21.5 из макета не округляем; 19/28 на 1440 */
.plen-intro__lead {
  font: 400 clamp(19px, calc(0.52083vw + 11.5px), 21.5px)/clamp(28px, calc(0.83333vw + 16px), 32px) var(--font-text);
  color: var(--c-text);
}
.plen-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}

/* ==========================================================================
   Светлые карточки .visa-case: заголовок, текст 16/1.6, списки.
   ========================================================================== */
.plen .plen-card { gap: var(--plen-gap); }
.plen-card__text {
  font: 400 var(--vac-txt-s)/var(--plen-lh-s) var(--font-text);
  color: var(--c-text);
}
/* ромб в колонке 14 + зазор 16 (Figma 3005:6926) */
.plen .plen-card .visa-list li {
  padding-left: 30px;
  font-size: var(--vac-txt-s);
  line-height: var(--plen-lh-s);
}
.plen .plen-card .visa-list li::before {
  left: 2px;
  top: 8px;
  width: 10px;
  height: 10px;
}
.plen .visa-list b { font-weight: 500; }

/* ==========================================================================
   Шаги «Перед посещением» (Figma 3005:6942): две колонки по 870, между 100.
   Геометрия .arr-stat из arrival.css, у которого ступень @1919 роняет номер
   до 56 — возвращаем значения макета clamp()-ом.
   ========================================================================== */
.plen-steps__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(64px, calc(7.5vw - 44px), 100px);
  align-items: start;
  margin-top: var(--plen-head);
}
.plen .plen-step {
  align-items: flex-start;
  gap: clamp(20px, calc(0.83333vw + 8px), 24px);
  padding: clamp(22px, calc(0.83333vw + 10px), 26px) 0;
}
/* в макете у колонок нет нижней линии */
.plen .plen-step:last-child { border-bottom: 0; }
.plen .plen-step .arr-stat__num {
  width: clamp(84px, calc(4.16667vw + 24px), 104px);
  font-size: clamp(56px, calc(3.33333vw + 8px), 72px);
  line-height: clamp(56px, calc(5vw - 16px), 80px);
}
.plen-step__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
/* текстовый бокс заголовка в макете 749 при колонке 742 (Figma 3005:6956):
   строка «(для доступа … 25 сентября)» стоит впритык, даём тот же вылет */
.plen-step__title {
  margin-right: -8px;
  font: 400 var(--plen-h4)/var(--plen-h4-lh) var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.plen-step__text {
  font: 400 var(--vac-txt)/var(--plen-lh) var(--font-text);
  color: var(--c-secondary);
}

/* Врезка .arr-intro__note (Figma 3005:6975, 3005:7054): паддинг 18/34
   (+3 бордер = 37 слева), текст 16/1.6, внутри — список с ромбами. */
.plen .plen-note {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 0;
  padding: 18px 34px;
}
/* ширины строк — по текстовым боксам макета (447 и 471) */
.plen-note__lead {
  max-width: 447px;
  font: 400 var(--vac-txt-s)/var(--plen-lh-s) var(--font-text);
  color: var(--c-text);
}
.plen-note__lead--short { max-width: 471px; }
.plen-note__lead b { font-weight: 600; }
.plen .plen-note .visa-list li {
  padding-left: 34px;
  font-size: var(--vac-txt-s);
  line-height: var(--plen-lh-s);
  color: var(--c-secondary);
}
.plen .plen-note .visa-list li::before {
  left: 4px;
  top: 10px;
  width: 10px;
  height: 10px;
}

/* ==========================================================================
   График и место выдачи (Figma 3005:6996, 3005:7001).
   Тёмная карточка — .vac-point со «Получения бейджа», свои: шаг 24, мост.
   ========================================================================== */
.plen-issue__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, calc(0.83333vw + 4px), 20px);
}
.plen-issue__lead {
  max-width: 900px;
  font: 400 var(--vac-txt)/var(--plen-lh) var(--font-text);
  color: var(--c-text);
  opacity: .85;
}
.plen .plen-point {
  justify-content: flex-start;
  gap: var(--plen-gap);
  margin-top: var(--plen-head);
}
.plen-point__place {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plen-point__name {
  font: 400 var(--vac-txt-s)/var(--plen-lh-s) var(--font-text);
  color: var(--c-bg);
}
.plen .plen-point .vac-place__addr { line-height: var(--plen-lh); }
.plen .plen-point .vac-times__col { flex: none; }
.plen-point__note {
  font: 400 var(--vac-txt-s)/var(--plen-lh-s) var(--font-text);
  color: rgba(255, 255, 255, .5);
}
/* Мост (Figma 3005:7020) запечён на фон карточки: 1128×383 у правого края,
   на всю высоту. Левее текстовой колонки (~600) не заходит: на узких
   карточках обрезается слева, у правого края остаётся пролёт. На ≤1279
   скрыт — под текстом ему уже нет места. */
.plen .plen-point__bridge {
  left: auto;
  right: 0;
  top: 0;
  bottom: auto;
  width: auto;
  max-width: calc(100% - 640px);
  height: 100%;
  aspect-ratio: 1128 / 383;
  object-fit: cover;
  object-position: right center;
  opacity: 1;
}

/* ==========================================================================
   Как узнать о готовности (Figma 3005:7021) и как получить (3005:7040).
   ========================================================================== */
.plen-ready__grid,
.plen-get__grid {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}
.plen-ready__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plen-get__grid { grid-template-columns: 748fr 1076fr; }

/* список с точками (Figma ul.pac__plain-list 3005:7060) */
.plen-dots {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.plen-dots li {
  position: relative;
  padding-left: 22px;
  font: 400 var(--vac-txt-s)/var(--plen-lh-s) var(--font-text);
  color: var(--c-text);
  opacity: .88;
}
.plen-dots li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
}
.plen-dots__files {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
}
.plen-dots__hint {
  display: block;
  color: var(--c-btn-gray);
  opacity: .6;
}

/* ==========================================================================
   1024–1279: три карточки «Как узнать» становятся узкими — заголовки
   мельче, чтобы «электронной» влезало в колонку; мост прячем.
   ========================================================================== */
/* 1280–1799: мост обрезан слева — срез растворяем в фон карточки */
@media (max-width: 1799px) {
  .plen .plen-point__bridge {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 160px);
    mask-image: linear-gradient(90deg, transparent 0, #000 160px);
  }
}

@media (max-width: 1279px) {
  .plen .plen-ready__grid .visa-case__title { font-size: 24px; line-height: 30px; }
  .plen .plen-point__bridge { display: none; }
}

/* ==========================================================================
   768 — планшет: все сетки в одну колонку, шаги идут подряд 1 → 5.
   ========================================================================== */
@media (max-width: 1023px) {
  .plen-intro__grid,
  .plen-steps__grid,
  .plen-ready__grid,
  .plen-get__grid { grid-template-columns: 1fr; }

  .plen-title { font-size: 28px; line-height: 34px; }
  .plen-intro__lead { font-size: 18px; line-height: 28px; }
  .plen-intro__grid { margin-top: 24px; }

  .plen-steps__grid { gap: 0; margin-top: 32px; }
  .plen-step__title { margin-right: 0; }
  .plen .plen-note { padding: 18px 24px; }

  .plen .plen-point { margin-top: 32px; }
}

/* ==========================================================================
   360 — мобильная (мобильного макета нет — адаптация по образцу
   «Получения бейджа»).
   ========================================================================== */
@media (max-width: 767px) {
  /* принудительный перенос после «Доступ» на узком экране оставляет «на»
     отдельной строкой — пусть заголовок переносится сам */
  .plen .arr-hero__title br { display: none; }

  .plen-title { font-size: 24px; line-height: 30px; }
  .plen-intro__date { font-size: 22px; line-height: 28px; }
  .plen-intro__lead { font-size: 17px; line-height: 26px; }
  .plen-intro__grid { margin-top: 20px; }

  .plen .plen-card { gap: 18px; }
  .plen .plen-card .visa-list li { padding-left: 26px; }
  .plen .plen-card .visa-list li::before { left: 1px; }

  .plen-steps__grid { margin-top: 20px; }
  .plen .plen-step { gap: 14px; padding: 18px 0; }
  .plen .plen-step .arr-stat__num { width: 40px; font-size: 40px; line-height: 40px; }
  .plen-step__body { gap: 12px; }
  .plen-step__title { font-size: 20px; line-height: 26px; }

  .plen .plen-note { gap: 12px; padding: 16px 18px; }
  .plen .plen-note .visa-list { gap: 12px; }
  .plen .plen-note .visa-list li { padding-left: 26px; }
  .plen .plen-note .visa-list li::before { left: 1px; }

  .plen-issue__head { gap: 12px; }
  .plen .plen-point { gap: 20px; margin-top: 24px; }

  .plen-ready__grid,
  .plen-get__grid { margin-top: 20px; }
}

/* === sections/venues.css === */
/* ==========================================================================
   venues.css — страница «Площадки Форума» (раздел «Доступ на площадку»).
   Макет: Figma 3015:64368 (1920, состояние «Главный штаб»), состояния
   3015:64539 (Мариинский-2) и 3015:64678 (Государственный Эрмитаж) —
   файл wQfmBxM7bIZKJcwLUkiFop, «ФОК 18.09.26 Copy».

   На <main> два класса — `vac vnu`. Крошки, полоса табов, геро, карточки
   .visa-case, токены кеглей и ритм секций общие с «Получением бейджа»
   (venue-access.css, скоуп .vac) — это один раздел. Здесь только дельты
   этой страницы, всё под .vnu.

   Карточки площадок работают как табы: по клику меняется панель ниже
   (галерея + описание + правила прохода). Скрипт — assets/js/venues.js.

   Как и в venue-access.css, значения макета 1920 ведём clamp()-ом к ступени
   1440: вьюпорт монитора 1920 (~1905) попадает в @1919 донорских стилей.
   ========================================================================== */

.vnu {
  /* Колонки «галерея | описание»: 896 + 48 + 896 на 1920, 32 на 1440. */
  --vnu-col-gap: clamp(32px, calc(3.33333vw - 16px), 48px);
  /* Паддинг карточки площадки — 33 на 1920, 24 на 1440. */
  --vnu-card-pad: clamp(24px, calc(1.875vw - 3px), 33px);
  /* Заголовок секции → лента карточек: 28 на 1920, 20 на 1440. */
  --vnu-head-gap: clamp(20px, calc(1.66667vw - 4px), 28px);
}

.vnu .vnu-info__text,
.vnu .vnu-rules__lead,
.vnu .vnu-dots li,
.vnu .vnu-note { text-wrap: pretty; }
.vnu .vnu-pick__title,
.vnu .vnu-info__title { text-wrap: balance; }
/* названия площадок переносятся «как есть» — балансировка base.css рвёт их
   по смыслу («Государственная академическая / капелла Санкт-Петербурга») */
.vnu .vnu-card__name,
.vnu .visa-case__title { text-wrap: wrap; }

/* ==========================================================================
   Ритм страницы (Figma: геро →80→ лента карточек →60→ галерея →30→ правила,
   снизу 120). Панели площадок — <div>, поэтому под правило .vac > section
   не попадают, отступы держим здесь.
   ========================================================================== */
.vnu .vnu-panels {
  margin-top: clamp(48px, calc(2.5vw + 12px), 60px);
  margin-bottom: clamp(96px, calc(5vw + 24px), 120px);
}
/* последняя секция страницы — лента карточек, её нижний отступ снимаем:
   расстояние до подвала держит .vnu-panels */
.vnu > section:last-of-type { margin-bottom: 0; }

/* ==========================================================================
   Лента площадок (Figma 3015:64413). Карточка = таб: фото 382×240 и
   название с ромбом. Активная — белая на 85% с красной рамкой.
   Карточек может быть больше, чем влезает в ряд: лента прокручивается,
   по краям появляются растворение в фон и круглая стрелка (3015:64533).
   ========================================================================== */
.vnu-pick__title {
  font: 400 var(--vac-h2)/var(--vac-h2-lh) var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}

.vnu-rail {
  position: relative;
  margin-top: var(--vnu-head-gap);
}
.vnu-rail__track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.vnu-rail__track::-webkit-scrollbar { display: none; }

.vnu-card {
  flex: 0 0 calc((100% - var(--gap) * 3) / 4);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--vnu-card-pad);
  border: 1px solid var(--c-line);
  border-radius: var(--r-24);
  background: rgba(255, 255, 255, .5);
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.vnu-card__media {
  border-radius: var(--r-16);
  overflow: hidden;
  background: var(--c-photo-stub);
}
.vnu-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 382 / 240;
  object-fit: cover;
}
.vnu-card__name {
  position: relative;
  padding-left: 24px;
  font: 400 16px/24px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.vnu-card__name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 10px;
  height: 10px;
  background: var(--c-accent);
  transform: rotate(45deg);
}
.vnu-card:hover { border-color: var(--c-accent); }
.vnu-card.is-active {
  background: rgba(255, 255, 255, .85);
  border-color: var(--c-accent);
}

/* растворение ленты в фон страницы по краю прокрутки */
.vnu-rail__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 180px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.vnu-rail__fade--next {
  right: 0;
  background: linear-gradient(270deg, var(--c-bg) 0%, rgba(240, 220, 197, 0) 100%);
}
.vnu-rail__fade--prev {
  left: 0;
  background: linear-gradient(90deg, var(--c-bg) 0%, rgba(240, 220, 197, 0) 100%);
}
.vnu-rail.has-next .vnu-rail__fade--next,
.vnu-rail.has-prev .vnu-rail__fade--prev { opacity: 1; }

.vnu-rail__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease;
}
.vnu-rail__arrow:hover { background: #a82f16; }
.vnu-rail__arrow--next { right: 20px; }
.vnu-rail__arrow--prev { left: 20px; }
.vnu-rail__arrow--prev .icon { transform: scaleX(-1); }
.vnu-rail.has-next .vnu-rail__arrow--next,
.vnu-rail.has-prev .vnu-rail__arrow--prev { display: inline-flex; }

/* ==========================================================================
   Панель площадки (Figma 3015:64450): галерея 896×550 слева, описание
   справа двумя рядами с верхней линейкой.
   ========================================================================== */
.vnu-panel[hidden] { display: none; }

/* Колонки равные, но как только на колонку остаётся меньше 520 (это ступень
   1024–1152), галерея и описание встают друг под друга: в двух колонках на
   такой ширине строка метро ломается посреди станции. min() страхует 375 —
   без него minmax(520px) распирает сетку на мобильной. */
.vnu-venue {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr));
  gap: var(--vnu-col-gap);
  align-items: start;
}

.vnu-gallery {
  position: relative;
  aspect-ratio: 896 / 550;
  border-radius: var(--r-16);
  overflow: hidden;
  background: var(--c-photo-stub);
}
.vnu-gallery__slides {
  position: absolute;
  inset: 0;
}
.vnu-gallery__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease;
}
.vnu-gallery__slide.is-active { opacity: 1; }
.vnu-gallery__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* подложка под навигацией — снизу чёрный 30%, растворяется к 40% высоты */
.vnu-gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 40%);
}
.vnu-gallery__nav {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.vnu-gallery__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease;
}
.vnu-gallery__arrow:hover { background: #a82f16; }
.vnu-gallery__arrow--prev .icon { transform: scaleX(-1); }
.vnu-gallery__counter {
  font: 400 24px/32px var(--font-display);
  text-transform: uppercase;
  color: #fff;
}

.vnu-info {
  display: flex;
  flex-direction: column;
}
.vnu-info__row {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: 27px 0 26px;
  border-top: 1px solid var(--c-line);
}
.vnu-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: var(--r-8);
  background: rgba(204, 170, 119, .5);
  font: 500 14px/20px var(--font-text);
  color: var(--c-dark-soft);
}
/* меры из макета: заголовок 609 и текст 819 в колонке 896 — держим долей,
   иначе название площадки идёт одной строкой, а абзацы уезжают к самому краю */
.vnu-info__title {
  max-width: 68%;
  font: 400 var(--vac-h3)/var(--vac-h3-lh) var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
/* у Капеллы (3015:64808) бокс заголовка в макете шире — 798 из 896 */
.vnu-info__title--wide { max-width: 89%; }
.vnu-info__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 91.5%;
  font-size: var(--vac-txt);
  line-height: 1.6;
  color: var(--c-secondary);
}

/* Адрес и метро — две плашки в ряд (Figma 3015:64465) */
.vnu-facts { flex-direction: row; }
.vnu-fact {
  flex: 1 1 0;
  display: flex;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-16);
  background: rgba(255, 255, 255, .4);
}
.vnu-fact__icon {
  flex: none;
  margin-top: 4px;
  color: var(--c-accent);
}
.vnu-fact__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vnu-fact__label {
  font: 400 13px/28px var(--font-text);
  color: #8c8c8c;
}
.vnu-fact__value {
  font-size: var(--vac-txt-s);
  line-height: 1.6;
  color: var(--c-secondary);
}
.vnu-metro {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.vnu-metro__walk {
  flex: none;
  color: var(--c-secondary);
}

/* ==========================================================================
   Правила прохода (Figma 3015:64491): две карточки .visa-case, внутри
   шаг 24 между всеми блоками — от заголовка до ссылок.
   ========================================================================== */
.vnu-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-top: 30px;
}
.vnu .vnu-rules .visa-case { gap: 24px; }
/* У площадки может быть один блок правил (Капелла — только доступ по билету):
   в две колонки он висел бы половинкой с пустотой справа. */
.vnu-rules > .visa-case:only-child { grid-column: 1 / -1; }
.vnu-rules__lead {
  font-size: var(--vac-txt-s);
  line-height: 1.6;
  color: var(--c-text);
}
/* в макете списки правил — 16/1.6, а не 18/1.6 донорского .vac */
.vnu .vnu-rules .visa-list li { font-size: var(--vac-txt-s); }

.vnu-dots {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.vnu-dots li {
  position: relative;
  padding-left: 22px;
  font-size: var(--vac-txt-s);
  line-height: 1.6;
  color: var(--c-text);
  opacity: .88;
  text-wrap: pretty;
}
.vnu-dots li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
}

.vnu-note {
  font: 400 14px/20px var(--font-text);
  color: #8c8c8c;
}
.vnu .vnu-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 400 14px/20px var(--font-text);
  color: var(--c-accent);
  text-decoration: underline;
}
.vnu .vnu-link:hover { text-decoration: none; }
.vnu-link .icon { flex: none; }

/* ==========================================================================
   Добавления по документу «Площадки + доступ + парковки» от 23.09.2026:
   подсказка о времени прибытия, плашки «Автобус» и «Парковка», блок шаттлов.
   Все селекторы новые и живут под скоупом .vnu — общие классы не трогаем.
   ========================================================================== */
.vnu-tip {
  align-self: flex-start;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 91.5%;
  padding: 14px 16px;
  border-radius: var(--r-16);
  background: rgba(204, 170, 119, .18);
  font-size: var(--vac-txt-s);
  line-height: 1.6;
  color: var(--c-text);
  text-wrap: pretty;
}
.vnu-tip__icon {
  flex: none;
  margin-top: 3px;
  color: var(--c-accent);
}

/* В плашке-факте у автобуса и парковки несколько абзацев и ссылка на схему.
   Модификатор обязателен: без него правило разредило бы и списки метро. */
.vnu-fact--stack .vnu-fact__value + .vnu-fact__value { margin-top: 6px; }
.vnu-fact--stack .vnu-link { margin-top: 8px; }

/* Подзаголовок внутри описания площадки — «Шаттлы» у Мариинского-2. */
.vnu-info__subtitle {
  font: 400 24px/30px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}

/* ==========================================================================
   ≤1279 — в ряд влезает три карточки, лента начинает прокручиваться.
   ========================================================================== */
@media (max-width: 1279px) {
  .vnu-card { flex-basis: calc((100% - var(--gap) * 2) / 3); }
}

/* ==========================================================================
   768–1023 — планшет: галерея над описанием, правила в одну колонку.
   Мобильного макета нет, адаптация по образцу соседних страниц раздела.
   ========================================================================== */
@media (max-width: 1023px) {
  .vnu .vnu-panels { margin-top: 32px; margin-bottom: 80px; }

  .vnu-card { flex-basis: calc((100% - var(--gap)) / 2); }

  .vnu-venue { grid-template-columns: 1fr; gap: 32px; }
  .vnu-info__title,
  .vnu-info__text { max-width: none; }
  .vnu-info__row { padding: 24px 0; }
  .vnu-info__row:first-child { padding-top: 0; border-top: 0; }

  .vnu-rules { grid-template-columns: 1fr; margin-top: 24px; }
}

/* ==========================================================================
   ≤767 — мобильная: лента листается пальцем (стрелка не нужна),
   плашки адреса и метро встают друг под друга.
   ========================================================================== */
@media (max-width: 767px) {
  .vnu .vnu-panels { margin-top: 24px; margin-bottom: 56px; }

  /* коллаж этого баннера уходит правее, чем у соседних страниц раздела:
     при общих 42% под заголовком оставалось пустое поле без единого пятна */
  .vnu .arr-hero--vac .arr-hero__img { object-position: 58% center; }

  .vnu-pick__title { font-size: 24px; line-height: 30px; }
  .vnu-card { flex-basis: min(78%, 300px); }
  .vnu-rail__arrow { display: none !important; }

  .vnu-venue { gap: 24px; }
  .vnu-gallery__nav { left: 16px; bottom: 16px; gap: 10px; }
  .vnu-gallery__counter { font-size: 20px; line-height: 26px; }

  .vnu-info__row { gap: 12px; padding: 20px 0; }
  .vnu-info__title { font-size: 24px; line-height: 30px; }
  .vnu-facts { flex-direction: column; }
  .vnu-tip { max-width: none; }
  .vnu-info__subtitle { font-size: 20px; line-height: 26px; }

  .vnu .vnu-rules .visa-case { gap: 20px; }
  .vnu .vnu-rules .visa-list { gap: 12px; }
  .vnu .vnu-rules .visa-list li { padding-left: 26px; }
  .vnu .vnu-rules .visa-list li::before { left: 1px; }
}

/* === sections/pcr.css === */
/* ==========================================================================
   pcr.css — страница «ПЦР-тест на пленарное заседание»
   (раздел «Доступ на площадку»).
   Макет: Figma 3014:62187 (файл wQfmBxM7bIZKJcwLUkiFop, «ФОК 18.09.26 Copy»).

   На <main> два класса — `vac pcr`. Крошки, табы, геро, ритм секций, токены
   кеглей, блоки .visa-block/.visa-group/.visa-text/.visa-bullets/.visa-step/
   .visa-note/.visa-callout и номер .visa-step__num — общие с «Получением
   бейджа» и «Доступом на пленарное заседание» (venue-access.css, visa.css).
   Здесь только дельты этой страницы, всё под .pcr.

   Как и в venue-access.css, значения макета 1920 ведём clamp()-ом к ступени
   1440: вьюпорт монитора 1920 (~1905) попадает в @1919 донорских стилей.
   ========================================================================== */

.pcr {
  /* Cochin H7 заголовков мер профилактики — 24/32 на 1920, 22/30 на 1440. */
  --pcr-h4: clamp(22px, calc(0.41667vw + 16px), 24px);
  --pcr-h4-lh: clamp(30px, calc(0.41667vw + 24px), 32px);
  /* Cochin H8 названий центров тестирования — 20/28 на 1920, 18/26 на 1440. */
  --pcr-h5: clamp(18px, calc(0.41667vw + 10px), 20px);
  --pcr-h5-lh: clamp(26px, calc(0.41667vw + 18px), 28px);
  /* Ссылки «Скачать …» и подписи-лейблы врезок — 14/20. */
  --pcr-sm: clamp(13px, calc(0.20833vw + 10px), 14px);
  /* Паддинги белых карточек «Как сдать тест?» — 36/40 на 1920, 32/36 на 1440. */
  --pcr-card-y: clamp(32px, calc(0.83333vw + 20px), 36px);
  --pcr-card-x: clamp(36px, calc(0.83333vw + 24px), 40px);
  /* Паддинг подкарточки центра — 24 на 1920, 20 на 1440. */
  --pcr-spot-pad: clamp(20px, calc(0.83333vw + 8px), 24px);
}

.pcr .pcr-card__text,
.pcr .pcr-muted,
.pcr .pcr-spot__name,
.pcr .visa-callout p { text-wrap: pretty; }
/* в макете заголовки карточек переносятся «как есть», без балансировки */
.pcr .pcr-card__title,
.pcr .visa-step__title { text-wrap: wrap; }

/* Якорные переходы из оглавления в геро: шапка sticky (108, на мобилке 113),
   поэтому отбиваем заголовок секции от неё (ревью 21.09). */
.pcr > section[id] { scroll-margin-top: 132px; }

/* Прямые дети тела блока идут во всю ширину: в макете и группы, и карточки
   центров, и врезки — w-full, а .visa-block__body прижимает детей влево. */
.pcr .visa-block__body > * { width: 100%; }

/* Первая секция отбита от геро на 48 (Figma main.ppage), дальше — общий ритм
   .vac (80 между секциями, 120 снизу). Целимся в секцию ПОСЛЕ геро, а не в
   :first-of-type: первый section внутри .pcr — сам геро, и правило снимало ему
   наезд на полосу табов (margin-top: 0 из page-tabs.css). */
.pcr .arr-hero + section { margin-top: clamp(40px, calc(1.66667vw + 16px), 48px); }

/* ==========================================================================
   ГЕРО (Figma 3014:62200): риска →30→ заголовок →24→ карточка-оглавление.
   Бокс у «Получения бейджа» 834 — здесь 668 (под ширину карточки ссылок).
   ========================================================================== */
.pcr .arr-hero--vac .arr-hero__inner {
  gap: 30px;
  width: 668px;
}
/* Бокс заголовка в макете 668 при кегле 64 — держим в em, чтобы
   «на пленарное заседание» переносилось одинаково на любой ширине
   и не заезжало на коллаж (грабля «Доступа на пленарное», ревью 18.09). */
.pcr .arr-hero--vac .arr-hero__title { max-width: 10.44em; }
.pcr-hero__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

/* Оглавление страницы: две колонки ссылок на полупрозрачной подложке. */
.pcr-nav {
  display: flex;
  width: 100%;
  gap: clamp(40px, calc(5vw - 32px), 64px);
  padding: clamp(28px, calc(1.875vw + 1px), 37px) clamp(32px, calc(1.875vw + 5px), 41px);
  background: rgba(255, 255, 255, .2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-24);
}
/* В макете колонки 283 и 239 (Figma 3014:62234 / 3014:62239) — держим
   пропорцию, чтобы вторая колонка начиналась там же. */
.pcr-nav__col {
  flex: 283 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pcr-nav__col + .pcr-nav__col { flex: 239 1 0; }

/* ==========================================================================
   Ссылка-файл / ссылка-раздел: подчёркнутая подпись 14/20 и стрелка 20.
   (Figma Component 4–11 — одна и та же пара «текст + icons/Arrow right 20».)
   ========================================================================== */
.pcr-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 5px;
  font: 400 var(--pcr-sm)/20px var(--font-text);
  color: var(--c-accent);
}
.pcr-link span { text-decoration: underline; }
.pcr-link:hover span { text-decoration: none; }
.pcr-link .icon {
  flex: none;
  margin-top: 0;
  transition: transform .2s;
}
.pcr-link:hover .icon { transform: translateX(4px); }

.pcr-files {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* Серое примечание под группой (Figma: Gray #8C8C8C, боди 18/1.6). */
.pcr-muted {
  font: 400 var(--vac-txt)/1.6 var(--font-text);
  color: #8c8c8c;
}
.pcr-muted a { color: #ce634e; text-decoration: underline; }
.pcr-muted a:hover { text-decoration: none; }

/* телефон в одну строку — на узком экране он рвался после кода (ревью 21.09) */
.pcr a[href^="tel:"] { white-space: nowrap; }

/* срок сдачи теста в первом абзаце — акцентным цветом */
.pcr-accent { color: var(--c-accent); }
.pcr b,
.pcr strong { font-weight: 500; }

/* ==========================================================================
   «Как сдать тест?» (Figma 3014:62354): 2 × 2 белые карточки без рамки,
   заголовок — номер 44 + Cochin H6.
   ========================================================================== */
.pcr-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, calc(1.66667vw + 0px), 32px);
  width: 100%;
}
.pcr-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: var(--pcr-card-y) var(--pcr-card-x);
  background: rgba(255, 255, 255, .45);
  border-radius: var(--r-16);
}
.pcr-card__title,
.pcr-item__title {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 400 var(--vac-h3)/var(--vac-h3-lh) var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
/* многострочные заголовки: номер прижат к первой строке */
.pcr-item__title { align-items: flex-start; }
.pcr-card__text,
.pcr .pcr-card p,
.pcr .pcr-item p {
  font: 400 var(--vac-txt)/1.6 var(--font-text);
  color: var(--c-text);
}
.pcr .pcr-card a:not(.pcr-link),
.pcr .pcr-item a:not(.pcr-link),
.pcr .visa-group > p a { color: var(--c-accent); text-decoration: underline; }
.pcr .pcr-card a:not(.pcr-link):hover,
.pcr .pcr-item a:not(.pcr-link):hover,
.pcr .visa-group > p a:hover { text-decoration: none; }
.pcr .pcr-card .pcr-muted { color: #8c8c8c; }

/* ==========================================================================
   «Необходимые данные для тестирования» (Figma 3014:62653): те же номера,
   но без подложки — абзацы идут по ширине тела блока.
   ========================================================================== */
.pcr-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}
.pcr-item__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ==========================================================================
   Врезка с лейблом (Figma p.visa-callout): «Важно:» / «При обнаружении …».
   Кегль тела 16/1.6, левая заливка от accent, паддинг 24 / 37 / 34.
   ========================================================================== */
.pcr .visa-callout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 24px 34px 24px 37px;
  font-size: var(--vac-txt-s);
  line-height: 1.6;
}
.pcr .visa-callout p {
  font: 400 var(--vac-txt-s)/1.6 var(--font-text);
  color: var(--c-secondary);
}
.pcr-callout__label {
  font: 400 var(--pcr-sm)/20px var(--font-text);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-secondary);
}
.pcr .visa-callout .pcr-files { margin-top: 10px; }

/* ==========================================================================
   «Где сдавать тест?» (Figma 3014:62471, 3014:62549): карточка города —
   .visa-step; внутри сетка 2 × N подкарточек центров тестирования.
   ========================================================================== */
.pcr .pcr-place {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, calc(1.04167vw + 17px), 37px) clamp(36px, calc(1.04167vw + 21px), 41px);
}
.pcr .pcr-place .visa-step__body { width: 100%; }
.pcr .pcr-place .visa-step__title {
  font: 400 var(--vac-h3)/var(--vac-h3-lh) var(--font-display);
}
.pcr-spots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}
.pcr-spot {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: var(--pcr-spot-pad);
  background: rgba(255, 255, 255, .85);
  border-radius: var(--r-16);
}
.pcr-spot__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pcr-spot__label,
.pcr-spot__meta dt {
  font: 400 var(--vac-txt)/1.6 var(--font-text);
  color: #8c8c8c;
}
.pcr-spot__name {
  position: relative;
  padding-left: 30px;
  font: 400 var(--pcr-h5)/var(--pcr-h5-lh) var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.pcr-spot__name::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc((var(--pcr-h5-lh) - 10px) / 2);
  width: 10px;
  height: 10px;
  background: var(--c-accent);
  transform: rotate(45deg);
}
.pcr-spot__meta {
  display: flex;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid #d9d9d9;
}
.pcr-spot__cell { flex: 1 1 0; min-width: 0; }
.pcr-spot__meta dd {
  font: 400 var(--vac-txt)/1.6 var(--font-text);
  color: var(--c-text);
}

/* Декор карточки «Москва» (Figma 3014:62577): фото, дуги и растушёвка
   левого края запечены в один слой — кроп фото в макете свой, слоями его
   не повторить. Прибит к правому верхнему углу, снизу обрезан карточкой. */
.pcr-place__decor {
  position: absolute;
  right: 0;
  top: 0;
  /* в макете 758 при карточке 1726 — держим ту же долю свободного поля
     справа от подкарточки центра, иначе на 1200 справа зияет пустота */
  width: min(758px, 46%);
  height: 342px;
  object-fit: cover;
  object-position: right top;
  pointer-events: none;
}

/* текст карточки — над декором */
.pcr .pcr-place > *:not(.pcr-place__decor) { position: relative; z-index: 1; }

/* ==========================================================================
   «Меры профилактики» (Figma 3014:62798): номер 32 + Cochin H7 24/32.
   ========================================================================== */
.pcr-steps {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, calc(1.66667vw + 0px), 32px);
  width: 100%;
}
.pcr-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pcr-step__title {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 400 var(--pcr-h4)/var(--pcr-h4-lh) var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
/* Ступень @1919 visa.css роняет номер до 40/18 — возвращаем макетные 44/20. */
.pcr .visa-step__num {
  width: clamp(40px, calc(0.83333vw + 28px), 44px);
  height: clamp(40px, calc(0.83333vw + 28px), 44px);
  font-size: clamp(18px, calc(0.41667vw + 12px), 20px);
}
.pcr .visa-step__num--sm {
  width: 32px;
  height: 32px;
  font-size: var(--vac-txt-s);
}

/* ==========================================================================
   «Медицинская помощь» (Figma 3014:62835): две карточки .visa-step в ряд,
   внутри первой — плашка вызова скорой.
   ========================================================================== */
.pcr-med {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}
.pcr .pcr-med .visa-step {
  padding: clamp(32px, calc(1.04167vw + 17px), 37px) clamp(36px, calc(1.04167vw + 21px), 41px);
}
.pcr .pcr-med .visa-step__body { width: 100%; }
.pcr .pcr-med .visa-step__title {
  font: 400 var(--vac-h3)/var(--vac-h3-lh) var(--font-display);
}
.pcr .pcr-med .visa-step__text { line-height: 1.6; font-size: var(--vac-txt); }
.pcr .pcr-med .visa-list li { font-size: var(--vac-txt); line-height: 1.6; }
.pcr-med__texts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* плашка вызова скорой: подпись слева, номера справа */
.pcr .pcr-emergency { width: 100%; align-items: center; }
.pcr-emergency__row {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-right: 20px;
}
.pcr-emergency__row span:first-child {
  font: 400 var(--vac-txt)/1.6 var(--font-text);
  color: var(--c-secondary);
}
.pcr-emergency__num {
  font: 500 clamp(20px, calc(0.41667vw + 12px), 22px)/1.5 var(--font-text);
  color: var(--c-secondary);
}

/* ==========================================================================
   Ниже ~1800 декор Москвы уже не влезает целиком: cover срезает запечённую
   растушёвку слева, и остаётся резкий вертикальный стык — растворяем его
   маской (тем же приёмом, что мост на «Доступе на пленарное»).
   ========================================================================== */
@media (max-width: 1799px) {
  .pcr .pcr-place__decor {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 140px);
    mask-image: linear-gradient(90deg, transparent 0, #000 140px);
  }
}

/* ==========================================================================
   1280 — карточка-оглавление в геро уже не помещается рядом с коллажем.
   ========================================================================== */
@media (max-width: 1279px) {
  /* Карточка-оглавление 668 шириной наезжает на коллаж — ниже 1280 её
     прячем: все восемь разделов и так идут подряд ниже по странице. */
  .pcr-nav { display: none; }
  /* без карточки бокс геро не нужен фиксированным — ширину держит заголовок */
  .pcr .arr-hero--vac .arr-hero__inner { width: auto; }
}

/* ==========================================================================
   768 — планшет: сетки в одну колонку, оглавление геро уезжает под заголовок.
   ========================================================================== */
@media (max-width: 1023px) {

  /* карточки центров встают в одну колонку — свободного поля справа
     больше нет, декор убираем */
  .pcr .pcr-place__decor { display: none; }

  .pcr-cards,
  .pcr-spots,
  .pcr-med { grid-template-columns: 1fr; }

  .pcr .pcr-place,
  .pcr .pcr-med .visa-step { padding: 32px; }
  .pcr .visa-callout { padding: 20px 24px 20px 27px; }
}

/* ==========================================================================
   360 — мобильная (мобильного макета нет — адаптация по образцу
   «Получения бейджа» и «Доступа на пленарное заседание»).
   ========================================================================== */
@media (max-width: 767px) {
  .pcr .arr-hero--vac .arr-hero__inner { width: auto; gap: 10px; }
  /* принудительный перенос заголовка на узком экране не нужен */
  .pcr .arr-hero__title br { display: none; }

  .pcr-card { padding: 24px 20px; }
  .pcr .pcr-place,
  .pcr .pcr-med .visa-step { padding: 24px 20px; }
  .pcr-spot { padding: 18px; }
  .pcr-spot__meta { flex-direction: column; gap: 12px; padding-top: 16px; }

  .pcr .visa-callout { padding: 18px 18px 18px 21px; }
  .pcr .visa-callout .pcr-files { margin-top: 6px; }

  .pcr-card__title,
  .pcr-item__title { gap: 12px; font-size: 22px; line-height: 28px; }
  .pcr .visa-step__num { width: 36px; height: 36px; font-size: 17px; }
  .pcr .visa-step__num--sm { width: 28px; height: 28px; font-size: 14px; }
  .pcr-step__title { gap: 12px; font-size: 20px; line-height: 26px; }

  .pcr-emergency__row { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* === sections/banned-items.css === */
/* ==========================================================================
   banned-items.css — страница «Список запрещенных предметов»
   (раздел «Доступ на площадку»).
   Макет: Figma 3043:71674 (файл 2IrYDluYP7eaagV2DcW2MG, «ФОК 22.09.26 - Copy»).

   На <main> два класса — `vac banned`. Крошки, полоса табов, геро, токены
   кеглей (--vac-*) и врезка .visa-note — общие с «ПЦР», «Получением бейджа»
   и «Доступом на пленарное заседание» (venue-access.css, visa.css,
   arrival.css, page-tabs.css). Здесь только дельты этой страницы, всё под
   скоупом .banned.

   Как и в venue-access.css, значения макета 1920 ведём clamp()-ом к ступени
   1440: вьюпорт монитора 1920 (~1905) попадает в @1919 донорских стилей.
   ========================================================================== */

/* без висячих слов в абзацах и пунктах; заголовки переносим «как есть» */
.banned .ban-rules p,
.banned .ban-card li,
.banned .ban-note p { text-wrap: pretty; }
.banned .ban-rules__title,
.banned .ban-card__title { text-wrap: wrap; }

/* ==========================================================================
   Ритм (Figma main.ppage): геро →48→ «Общие правила» →60→ карточки, 120 снизу.
   Геро из правила исключён — его наезд на полосу табов держит page-tabs.css.
   ========================================================================== */
.banned > section:not(.arr-hero) { margin-top: clamp(40px, calc(1.66667vw + 16px), 48px); }
.banned > .ban-venues { margin-top: clamp(48px, calc(2.5vw + 12px), 60px); }
.banned > section:last-of-type { margin-bottom: clamp(96px, calc(5vw + 24px), 120px); }

/* ==========================================================================
   ГЕРО (Figma 3043:71696): риска →30→ заголовок 64/72 в боксе 834.
   Ширина бокса и адаптив — из venue-access.css, здесь только зазор.
   ========================================================================== */
.banned .arr-hero--vac .arr-hero__inner { gap: 30px; }
/* Бокс заголовка держим в em (как на «ПЦР» и «Доступе на пленарное»): при
   кегле 64 это 704 — уже макетных 834, но перенос тот же (СПИСОК /
   ЗАПРЕЩЕННЫХ / ПРЕДМЕТОВ), зато на 1024–1280 заголовок не наезжает на
   коллаж, а продолжает ломаться на три строки. */
.banned .arr-hero--vac .arr-hero__title { max-width: 11em; }

/* ==========================================================================
   «Общие правила» (Figma 3043:71727): колонка текста 1169 и врезка 502
   по нижнему краю.
   ========================================================================== */
.ban-rules {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(40px, calc(5vw - 32px), 64px);
}
.ban-rules__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 1169px;
}
/* Cochin H6 32/40 акцентным цветом (Figma 3043:71729) */
.ban-rules__title {
  font: 400 var(--vac-h3)/var(--vac-h3-lh) var(--font-display);
  text-transform: uppercase;
  color: var(--c-accent);
}
.banned .ban-rules p {
  font: 400 var(--vac-txt)/1.6 var(--font-text);
  color: var(--c-text);
}

/* врезка — общая .visa-note; в макете зазор 16, ширина 502, иконка по верху */
.banned .ban-note {
  flex: none;
  width: 502px;
  gap: 16px;
  align-items: flex-start;
}
.banned .ban-note p {
  font-size: var(--vac-txt);
  line-height: 1.6;
}
.banned .ban-note .visa-note__icon {
  flex: none;
  margin-top: 4px;
}

/* ==========================================================================
   Карточки площадок (Figma 3043:71738 / 3043:71783): 2 × 2, подложка
   «белый 50%» с рамкой; в ряду карточки тянутся по высоте соседа.
   ========================================================================== */
.ban-venues {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, calc(2.5vw - 12px), 36px) 16px;
}
.ban-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: clamp(40px, calc(1.875vw + 13px), 49px) clamp(44px, calc(2.70833vw + 5px), 57px);
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-24);
}
.ban-card__title {
  font: 400 var(--vac-h3)/var(--vac-h3-lh) var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.ban-card__lead {
  font: 400 var(--vac-txt-s)/1.6 var(--font-text);
  color: var(--c-text);
}
/* список запретов: точки 7, шаг 9, кегль 16 и прозрачность 88% из макета */
.banned .ban-card .visa-bullets {
  gap: 9px;
  width: 100%;
}
.banned .ban-card .visa-bullets li {
  padding-left: 22px;
  font-size: var(--vac-txt-s);
  line-height: 1.6;
  opacity: .88;
}
.banned .ban-card .visa-bullets li::before {
  left: 4px;
  top: 9px;
  width: 7px;
  height: 7px;
}
/* карточка прижата к низу ряда — ссылка всегда у нижней кромки */
.ban-card__link { margin-top: auto; }

/* ==========================================================================
   Ссылка-раздел: подчёркнутая подпись 14/20 и стрелка 20
   (Figma Component 4 — та же пара «текст + icons/Arrow right 20»).
   ========================================================================== */
.ban-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 5px;
  font: 400 clamp(13px, calc(0.20833vw + 10px), 14px)/20px var(--font-text);
  color: var(--c-accent);
}
.ban-link span { text-decoration: underline; }
.ban-link:hover span { text-decoration: none; }
.ban-link .icon {
  flex: none;
  transition: transform .2s;
}
.ban-link:hover .icon { transform: translateX(4px); }

/* ==========================================================================
   768 — планшет: карточки в одну колонку, врезка под текстом.
   ========================================================================== */
@media (max-width: 1023px) {
  .ban-rules {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .banned .ban-note {
    width: 100%;
    max-width: 502px;
  }

  .ban-venues { grid-template-columns: 1fr; }
  .ban-card { padding: 32px; }
  .ban-card__link { margin-top: 0; }

  .ban-rules__title,
  .ban-card__title { font-size: 28px; line-height: 34px; }
}

/* ==========================================================================
   360 — мобильная (мобильного макета нет — адаптация по образцу «ПЦР»
   и «Получения бейджа»).
   ========================================================================== */
@media (max-width: 767px) {
  .banned .arr-hero--vac .arr-hero__inner { gap: 10px; }

  .ban-rules__text { gap: 16px; }
  .ban-card {
    gap: 20px;
    padding: 24px 20px;
  }
  .banned .ban-note { padding: 18px 18px; }

  .ban-rules__title,
  .ban-card__title { font-size: 22px; line-height: 28px; }
}

/* === sections/tech-docs.css === */
/* ==========================================================================
   tech-docs.css — страница «Техническая документация» (раздел «Подрядчикам»).
   Макет: Figma 3100:74781 (файл wFj6eQUaX1P6rjJyvhLwqm, «ФОК 22.09.26 - Copy»).

   На <main> два класса — `vac tdoc`. Крошки, полоса табов и геро во всю
   ширину, токены кеглей (--vac-*), паддинги карточки .visa-case и кнопка
   .visa-btn — общие с «Доступом на площадку» (venue-access.css, visa.css,
   arrival.css, page-tabs.css). Здесь ритм страницы и карточка документа,
   всё под скоупом .tdoc.
   ========================================================================== */

/* ==========================================================================
   Ритм (Figma main.ppage): геро →48→ карточки, между карточками 24, 120 снизу.
   Нижний отступ даёт .vac > section:last-of-type.
   ========================================================================== */
.tdoc > .tdoc-files { margin-top: clamp(40px, calc(1.66667vw + 16px), 48px); }

/* ==========================================================================
   ГЕРО (Figma 3100:74809): риска →30→ заголовок 64/72.
   Бокс заголовка в em, как на «Списке запрещенных предметов»: перенос тот же,
   что в макете (ТЕХНИЧЕСКАЯ / ДОКУМЕНТАЦИЯ), а на 1024–1280 заголовок не
   доходит до коллажа.
   ========================================================================== */
.tdoc .arr-hero--vac .arr-hero__inner { gap: 30px; }
.tdoc .arr-hero--vac .arr-hero__title { max-width: 11em; }

/* ==========================================================================
   Документы (Figma 3100:74821): карточка во всю ширину — слева плашки
   формата и веса над заголовком, справа кнопка «Скачать» по центру.
   ========================================================================== */
.tdoc-files {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.tdoc .tdoc-file {
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.tdoc-file__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* плашки «pdf» и веса файла: 34 по высоте, Inter Tight Medium 14/20 */
.tdoc-file__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  opacity: .85;
}
.tdoc-file__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--r-8);
  background: var(--c-line);
  font: 500 14px/20px var(--font-text);
  color: #fff;
  white-space: nowrap;
}
.tdoc-file__ico { flex: none; }

/* Cochin H7 — 24/32 капсом */
.tdoc-file__title {
  font: 400 24px/32px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
  text-wrap: pretty;
}

/* кнопка — .vac .visa-btn (паддинг 24, зазор 16); в ряду стоит по центру */
.tdoc .tdoc-file__btn {
  flex: none;
  align-self: center;
}

/* ==========================================================================
   768 — планшет: ряд сохраняется, кегль заголовка чуть меньше.
   ========================================================================== */
@media (max-width: 1023px) {
  .tdoc-files { gap: 20px; }
  .tdoc .tdoc-file { gap: 24px; }
  .tdoc-file__title { font-size: 22px; line-height: 28px; }
}

/* ==========================================================================
   360 — мобильная (мобильного макета нет — по образцу соседних страниц):
   кнопка уходит под заголовок и растягивается на всю ширину.
   ========================================================================== */
@media (max-width: 767px) {
  /* при общем кадре 42% жёлтая арка коллажа заходит под «ИЯ» — сдвигаем
     кадр, чтобы заголовок стоял на светлом поле, а край коллажа выглядывал */
  .tdoc .arr-hero--vac .arr-hero__img { object-position: 36% center; }
  .tdoc .arr-hero--vac .arr-hero__inner { gap: 10px; }

  .tdoc-files { gap: 16px; }
  .tdoc .tdoc-file {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .tdoc-file__body { flex: none; gap: 12px; }
  .tdoc-file__title { font-size: 20px; line-height: 26px; }
  /* кнопка на всю ширину карточки, подпись по центру */
  .tdoc .tdoc-file__btn {
    align-self: stretch;
    justify-content: center;
    margin-block: 0;
  }
}

/* === sections/venue-map.css === */
/* ==========================================================================
   venue-map.css — страница «Карта площадки (Главный штаб)»
   (/venue-access/map/, раздел «Доступ на площадку»).
   Каркас донорский: крошки/hero — arrival.css, ритм секций и типографика —
   venue-access.css (.vac), карточка — visa.css (.visa-block), кнопка
   «Скачать карту в PDF» — program.css (.arr-hero__btn), табы — page-tabs.css.
   Своё здесь: карта-кнопка (.vmp-fig) под скоупом .vmp и общий лайтбокс
   (.lbx, разметку строит assets/js/image-lightbox.js — он не страничный,
   поэтому без скоупа, зато имена свои и ни с чем не пересекаются).
   Лесенка брейкпоинтов проекта: 1920 / 1440 / 768 / 360.
   ========================================================================== */

/* ---------- Карта в карточке ---------- */
/* Кнопка, а не ссылка: клик открывает лайтбокс, а не уводит на файл.
   Ресет кнопочных дефолтов — иначе браузер добавит рамку и серый фон. */
.vmp .vmp-fig {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.vmp .vmp-fig__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Подсказка «Нажмите, чтобы увеличить» — плашка в правом нижнем углу карты.
   На тач-устройствах остаётся (там это тоже не очевидно), на ховере мыши
   чуть подсвечивается. */
.vmp .vmp-fig__hint {
  position: absolute;
  right: clamp(12px, 1.25vw, 24px);
  bottom: clamp(12px, 1.25vw, 24px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-8);
  background: rgba(9, 30, 37, .82);
  color: #fff;
  font: 400 14px/20px var(--font-text);
  transition: background .2s;
}
.vmp .vmp-fig:hover .vmp-fig__hint { background: var(--c-accent); }
.vmp .vmp-fig__hint .icon {
  flex: none;
  stroke: currentColor;
  fill: none;
}

/* Фокус с клавиатуры — видимое кольцо по краю карты. */
.vmp .vmp-fig:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
}

@media (max-width: 767px) {
  .vmp .vmp-fig__hint {
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
  }
}

/* ==========================================================================
   Лайтбокс (.lbx) — общий, строится скриптом image-lightbox.js.
   Два состояния: «вписана» (по умолчанию) и «в полный размер» (is-zoomed,
   вьюпорт скроллится). Класс на <body> глушит прокрутку страницы под ним.
   ========================================================================== */
.lbx {
  position: fixed;
  inset: 0;
  /* Выше шапки (50), cookie-плашки (200) и кнопки виджета AutoFAQ
     (chat21-launcher-button, 999999000) — иначе чат висит поверх карты. */
  z-index: 999999500;
  display: flex;
  background: rgba(9, 30, 37, .94);
}
.lbx__viewport {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 48px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.lbx__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--r-8);
  background: #fff;
  cursor: zoom-in;
}
/* В полный размер: картинка перестаёт вписываться, вьюпорт даёт скролл.
   margin:auto держит её по центру, пока она уже вьюпорта. */
.lbx.is-zoomed .lbx__viewport { align-items: flex-start; justify-content: flex-start; }
.lbx.is-zoomed .lbx__img {
  max-width: none;
  max-height: none;
  margin: auto;
  cursor: zoom-out;
}
.lbx__close {
  position: absolute;
  top: clamp(12px, 1.5vw, 24px);
  right: clamp(12px, 1.5vw, 24px);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  transition: background .2s;
}
.lbx__close:hover { background: var(--c-accent); }
.lbx__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.lbx__close .icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
}
.lbx-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .vmp .vmp-fig__hint,
  .lbx__close { transition: none; }
}

/* === sections/about-page-rtl.css === */
/* ==========================================================================
   О Форуме — арабская версия (/about/ar/), зеркальная раскладка.

   dir="rtl" на <main class="af-page af-page--rtl"> сам разворачивает поток
   текста, флексы и гриды. Здесь добиваем то, что задано ФИЗИЧЕСКИМИ
   свойствами и потому не переворачивается: абсолютно позиционированные
   декоративные слои, левые выравнивания и направленные стрелки.

   Файл идёт в бандле последним — перебивает about-page.css.

   Тире section-label (#i-dash) симметрично, его не зеркалим. Логотипы
   Telegram/MAX в кнопках чат-бота — тоже (поэтому стрелки выбираем по :has).
   ========================================================================== */

/* --- направленные стрелки смотрят в сторону чтения --- */
.af-page--rtl .btn .icon:has(use[href="#i-arrow"]),
.af-page--rtl .af-sec__arrow {
  transform: scaleX(-1);
}

/* --- геро: ключевой визуал уходит к левой кромке --- */
.af-page--rtl .af-hero__kv {
  right: auto;
  left: 0;
}

/* --- коллажи программы и фестиваля.
       Их край запечён в цвет фона карточки (см. комментарии в about-page.css),
       поэтому вместе с переносом на другую сторону отражаем и картинку —
       иначе запечённый шов окажется на видимой кромке. --- */
.af-page--rtl .af-program__collage,
.af-page--rtl .af-fest__art {
  right: auto;
  left: 0;
  transform: scaleX(-1);
}

/* Вуаль под текстом плашки фестиваля задана физическим градиентом слева
   направо (about-page.css). В зеркальной раскладке текст стоит справа, а арт
   переехал влево — без разворота вуаль легла бы прямо на арт и скрыла его. */
.af-page--rtl .af-fest::before {
  transform: scaleX(-1);
}

/* --- площадки --- */
.af-page--rtl .af-venue__addr {
  text-align: right;
}
.af-page--rtl .af-venue__map-note {
  right: auto;
  left: 24px;
}
.af-page--rtl .af-venue__map-tip {
  left: auto;
  right: 18px;
}

/* --- контакты: фоновые арт-слои (вместе с градиентом в ::after) --- */
.af-page--rtl .af-contact__art--info {
  left: auto;
  right: -203px;
  transform: scaleX(-1);
}
.af-page--rtl .af-contact__art--partner {
  right: auto;
  left: -320px;
  transform: scaleX(-1);
}
.af-page--rtl .af-contact__art--media {
  right: auto;
  left: -399px;
  transform: scaleX(-1);
}

/* --- телефоны и почта остаются слева направо внутри арабского абзаца --- */
.af-page--rtl .af-contact__phone,
.af-page--rtl .af-contact__mail {
  direction: ltr;
  text-align: right;
}

/* --- мобильный бейдж даты: в about-page.css он прижат к левому краю KV --- */
@media (max-width: 767px) {
  .af-page--rtl .af-hero__date {
    left: auto;
    right: 0;
  }
}

/* === sections/on-site.css === */
/* Figma 3027:66736. Все правила ограничены страницей сервисов. */
.onsite .arr-hero { height: 620px; }
.onsite .arr-hero__inner { left: 88px; bottom: 60px; }
.onsite .arr-hero__title { margin-top: 30px; font: 400 64px/72px var(--font-display); color: var(--c-text); text-wrap: initial; }
.onsite .onsite-art { position: absolute; width: 1920px; height: 620px; left: 50%; margin-left: -960px; overflow: hidden; }
.onsite .onsite-texture { position: absolute; width: 1018px; height: 742px; top: -24px; overflow: hidden; opacity: .6; }
.onsite .onsite-texture img { position: absolute; width: 209.83%; max-width: none; height: 100.09%; left: .01%; top: -.03%; }
.onsite .onsite-texture--left { left: -116px; }
.onsite .onsite-texture--right { right: 0; transform: scaleX(-1); }
.onsite .onsite-art__kv { position: absolute; left: 913px; top: 50px; width: 939px; height: 651px; }
.onsite .onsite-art__kv > img { position: absolute; max-width: none; }
.onsite .onsite-art__bar-left { left: 93px; top: 120px; width: 156px; height: 465px; }
.onsite .onsite-art__small { left: 7.93px; top: 463.22px; width: 221.117px; height: 199.514px; transform: rotate(-25.11deg); }
.onsite .onsite-art__large { left: -115.836px; top: -16.875px; width: 680.935px; height: 684.911px; transform: rotate(-25.11deg); }
.onsite .onsite-art__right { left: 461.016px; top: -45.059px; width: 505.597px; height: 504.369px; transform: rotate(17.48deg); }
.onsite .onsite-art__bar-right { left: 678px; top: 366px; width: 185px; height: 463px; transform: scaleX(-1); }
.onsite .onsite-art__collage { left: 159px; top: -58px; width: 633px; height: 633px; object-fit: cover; }
.onsite .onsite-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; padding: 48px 0 0; }
.onsite .onsite-card { min-width: 0; padding: 48px 56px; background: rgba(255,255,255,.5); border: 1px solid var(--c-line); border-radius: var(--r-24); font: 400 18px/1.6 var(--font-text); color: var(--c-text); }
.onsite .onsite-card__title { margin: 0 0 24px; font: 400 clamp(30px, 0.907vw + 22.6px, 40px)/1.2 var(--font-display); text-transform: uppercase; text-wrap: initial; overflow-wrap: break-word; }
.onsite .onsite-card__body { min-width: 0; }
.onsite .onsite-card p { text-wrap: initial; }
.onsite .onsite-copy { display: grid; gap: 16px; }
.onsite .onsite-copy--muted { opacity: .85; }
.onsite .onsite-card--internet, .onsite .onsite-card--information { grid-column: 1 / -1; }
.onsite .onsite-card--internet .onsite-card__title, .onsite .onsite-card--catering .onsite-card__title, .onsite .onsite-card--cloakrooms .onsite-card__title, .onsite .onsite-card--interpreting .onsite-card__title { margin-bottom: 16px; }
.onsite .onsite-card--internet { display: grid; grid-template-columns: minmax(0,1181px) 326px; justify-content: space-between; gap: 32px; }
.onsite .onsite-card--internet .onsite-copy { gap: 8px; }
.onsite .onsite-wifi { display: grid; align-content: center; gap: 8px; padding: 20px 52px; border-radius: 12px; background: rgba(196,58,30,.06); }
.onsite .onsite-wifi div { display: flex; align-items: center; gap: 16px; }
.onsite .onsite-wifi dt { flex: 0 0 65px; color: #8c8c8c; }
.onsite .onsite-wifi dd { font-size: 22px; line-height: 33px; color: var(--c-accent); }
.onsite .onsite-card--catering, .onsite .onsite-card--cloakrooms { min-height: 294px; }
.onsite .onsite-card--information { display: grid; grid-template-columns: minmax(0,900px) minmax(0,710px); justify-content: space-between; align-items: end; gap: 40px; }
.onsite .onsite-card--information .onsite-copy { gap: 24px; }
@media (min-width: 1601px) {
  .onsite .onsite-card--internet { min-height: 228px; }
  .onsite .onsite-card--information { grid-template-columns: minmax(0,905px) minmax(0,710px); min-height: 506px; }
  .onsite .onsite-card--information .onsite-copy { max-width: 900px; }
  .onsite .onsite-card--information .onsite-card__title { white-space: nowrap; }
  .onsite .onsite-card--interpreting, .onsite .onsite-card--medical { min-height: 342px; }
}
.onsite .onsite-aside { padding: 46px 44px 42px; background: rgba(255,255,255,.45); border: 1px solid var(--c-line); border-radius: 16px; }
.onsite .onsite-aside > p { margin-bottom: 16px; }
.onsite .onsite-aside strong { font-weight: 500; }
.onsite .onsite-card--broadcasts, .onsite .onsite-card--photobank { min-height: 456px; }
.onsite .onsite-card--broadcasts .onsite-copy { gap: 24px; }
.onsite .onsite-card--interpreting .onsite-card__title { max-width: 556px; }
.onsite .onsite-card--interpreting .onsite-copy { max-width: 772px; }
.onsite .onsite-card--medical .onsite-card__body { max-width: 673px; }
.onsite .onsite-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.onsite .onsite-list li { position: relative; padding-left: 34px; text-wrap: initial; }
.onsite .onsite-list li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 10px; height: 10px; background: var(--c-accent); transform: rotate(45deg); }
.onsite .onsite-list--round { gap: 14px; }
.onsite .onsite-list--round li { padding-left: 26px; }
.onsite .onsite-list--round li::before { width: 8px; height: 8px; top: 11px; border-radius: 50%; transform: none; }
.onsite .onsite-card a:not(.btn), .onsite .onsite-link { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.onsite .onsite-card .btn { display: inline-flex; gap: 16px; height: 56px; margin-top: 24px; padding: 8px 24px; font: 400 16px/1.6 var(--font-text); }
.onsite .onsite-card--catering .btn { margin-top: 16px; font: 400 15.8px/24px Arial,sans-serif; }
.onsite .onsite-card .btn img { width: 20px; height: 20px; }
.onsite .onsite-medical-note { display: block; margin-top: 6px; font: 400 14.8px/20px Arial,sans-serif; color: var(--c-secondary); opacity: .65; }
.onsite .onsite-emergency { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 20px 24px; border-radius: 12px; background: rgba(196,58,30,.06); color: var(--c-secondary); }
.onsite .onsite-emergency > img { width: 22px; height: 22px; flex-shrink: 0; }
.onsite .onsite-emergency > span:last-child { margin-left: auto; white-space: nowrap; font-size: 22px; line-height: 33px; }
.onsite .onsite-emergency a:not(.btn) { color: inherit; text-decoration: none; }
@media (max-width: 1600px) {
  .onsite .onsite-card { padding: 36px; }
  .onsite .onsite-card--information { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 32px; }
  .onsite .onsite-aside { padding: 32px; }
}
@media (max-width: 1100px) {
  .onsite .arr-hero { height: 520px; }
  /* Композицию 1920x620 не разбираем по слоям, а масштабируем целиком под
     высоту баннера и прижимаем к правому краю с выносом за него: коллаж
     уходит за край, заголовок стоит на чистом поле слева — как на «ПЦР-тесте»
     и «Доступе на пленарное». До ревью 22.09 KV уменьшался вдвое и висел
     маленьким пятном в середине кадра. 0.83871 = 520/620. */
  /* Вынос за правый край ведём линейно: -390 на 768 (иначе арка наезжает
     на «НА ПЛОЩАДКАХ») и -320 на 1100, где места хватает и композиция
     ближе к десктопной. */
  .onsite .onsite-art { left: auto; right: calc(21.1vw - 552px); margin-left: 0; transform: scale(.83871); transform-origin: right top; }
  .onsite .arr-hero__inner { left: 40px; bottom: 40px; max-width: 46%; }
  .onsite .arr-hero__title { font-size: clamp(36px, 4.4vw, 48px); line-height: 1.17; }
  .onsite .onsite-card__title { font-size: clamp(24px, 3.3vw - 1.3px, 30px); }
  .onsite .onsite-grid { gap: 24px; }
  .onsite .onsite-card--internet, .onsite .onsite-card--information { grid-template-columns: 1fr; }
  .onsite .onsite-wifi { justify-self: start; }
  .onsite .onsite-card { padding: 28px; }
  .onsite .onsite-emergency { flex-wrap: wrap; padding: 20px; }
}
@media (max-width: 767px) {
  /* Геро по образцу «ПЦР-теста»: баннер 380, композиция 1920x620 масштабируется
     целиком под его высоту (0.6129 = 380/620) и уезжает за правый край — в кадре
     остаётся левая часть KV, а слева лежит чистая бумага под заголовок. Вынос
     ведём линейно, чтобы левый край KV на любой ширине стоял на ~55% кадра.
     До ревью 22.09 KV занимал весь кадр, и заголовок стоял под ним. */
  .onsite .arr-hero { height: 380px; }
  .onsite .onsite-art { left: auto; right: calc(45vw - 632px); width: 1920px; height: 620px; margin-left: 0; transform: scale(.6129); transform-origin: right top; }
  .onsite .onsite-texture { width: 1018px; height: 742px; top: -24px; }
  .onsite .onsite-texture--left { left: -116px; right: auto; }
  .onsite .onsite-texture--right { display: block; left: auto; right: 0; }
  .onsite .onsite-art__kv { left: 913px; right: auto; top: 50px; transform: none; }
  /* отступы и кегль заголовка — как на «ПЦР-тесте»: 20 по бокам, 24 снизу, 30/34 */
  .onsite .arr-hero__inner { left: 20px; right: 20px; bottom: 24px; max-width: none; gap: 10px; }
  .onsite .arr-hero__title { font-size: 30px; line-height: 34px; margin-top: 10px; }
  .onsite .onsite-grid { grid-template-columns: minmax(0,1fr); padding: 24px 0 24px; gap: 20px; }
  .onsite .onsite-card { padding: 24px; min-height: 0; font-size: 16px; line-height: 1.6; }
  .onsite .onsite-card__title { font-size: clamp(24px, 3.1vw + 12.4px, 30px); }
  .onsite .onsite-card--internet, .onsite .onsite-card--information { gap: 24px; }
  .onsite .onsite-wifi { width: 100%; padding: 20px; }
  .onsite .onsite-wifi dd { font-size: 20px; }
  .onsite .onsite-aside { padding: 20px; }
  .onsite .onsite-emergency > span:last-child { margin-left: 36px; }
}

/* === sections/catering.css === */
/* Питание — Figma 3027:70069. Все правила ограничены страницей. */
.catering .crumbs { margin: 0; padding: 24px 0 32px; font: 400 12px/20px var(--font-text); }
.catering .ptabs { margin-top: 0; }

/* ==========================================================================
   ГЕРО. Баннер во всю ширину контейнера (Figma: section.arr-hero x=0 w=1920).
   Композиция тянется пропорционально макету: высота 620/1920 = 32.292vw,
   коллаж — height:100% + aspect-ratio, поэтому низ картинки всегда совпадает
   с низом баннера, а текстовый блок задан долями от тех же 1920.
   Декор — фоновые картинки, а не <img>: над <img> браузеры (Яндекс) рисуют
   свою панель «посмотреть / найти по картинке» прямо поверх баннера.
   ========================================================================== */
.catering .arr-hero { height: clamp(360px, 32.292vw, 620px); margin: 0 calc(var(--gutter) * -1); background: var(--c-bg); }
.catering__art { position: absolute; inset: 0; overflow: hidden; }

/* Бумага: окно 1018x742 на -116/-24 (Figma 3027:70094), картинка 2136x743.
   Вторая копия зеркальная и начинается ровно там, где кончается первая
   (902 = -116 + 1018) — стык приходится на одну и ту же колонку пикселей и
   не виден. Раньше копия прижималась к правому краю окна, наезжала на первую
   и давала вертикальную полосу поперёк баннера. */
.catering__texture { position: absolute; top: -24px; left: -116px; width: 1018px; height: 742px; opacity: .6; background: url(../img/catering/texture.png) 0 0 / 2136px 743px no-repeat; }
.catering__texture--right { left: 902px; transform: scaleX(-1); }

/* KV 939x620 на x=913 (Figma 3027:70095) = 48.906% и 47.552% от 1920;
   ширину считаем от высоты, чтобы низ коллажа лежал на низу баннера. */
.catering__collage { position: absolute; top: 0; right: 3.5417%; width: auto; height: 100%; aspect-ratio: 939 / 620; }
.catering__collage > * { position: absolute; background: 0 0 / 100% 100% no-repeat; }
/* доли от 939x620 — координаты слоёв KV из макета */
.catering__shape--one { left: 5.6443%; top: 86.6129%; width: 16.6134%; height: 75%; background-image: url(../img/catering/shape-one.svg); }
.catering__shape--two { left: .8456%; top: 74.7129%; width: 23.5481%; height: 32.1797%; background-image: url(../img/catering/shape-two.svg); transform: rotate(-25.11deg); }
.catering__shape--three { left: -12.3365%; top: -2.7226%; width: 72.5171%; height: 110.4695%; background-image: url(../img/catering/shape-three.svg); transform: rotate(-25.11deg); }
.catering__shape--four { left: 49.0964%; top: -7.2677%; width: 53.8442%; height: 81.3498%; background-image: url(../img/catering/shape-four.svg); transform: rotate(17.48deg); }
.catering__shape--five { left: 68.0512%; top: 39.0323%; width: 19.7018%; height: 74.6774%; background-image: url(../img/catering/shape-five.svg); transform: scaleX(-1); }
.catering__still { left: 16.081%; top: 0; width: 66.0277%; height: 100%; background: url(../img/catering/still-life.png) center / cover no-repeat; }

/* Текст: 88 слева, 60 снизу, ширина 774 (Figma 3027:70111) — в долях от 1920. */
.catering__intro { position: absolute; left: 4.5833%; right: 55.1042%; bottom: clamp(24px, 3.125vw, 60px); }
.catering__dash { display: block; width: 68px; height: 12px; margin-bottom: clamp(16px, 1.5625vw, 30px); background: url(../img/catering/dash.svg) 0 0 / 100% 100% no-repeat; }
.catering__title { font: 400 clamp(34px, 3.3333vw, 64px)/1.125 var(--font-display); text-transform: uppercase; margin: 0 0 clamp(10px, .8333vw, 16px); }
.catering__lead { font: 400 clamp(15px, .9375vw, 18px)/1.6112 var(--font-text); margin: 0; }

/* ==========================================================================
   ГРУППЫ И КАРТОЧКИ
   ========================================================================== */
.catering__groups { display: grid; gap: 40px; padding: 48px 0 120px; }
.catering__group { padding: 40px 40px 36px; border: 1px solid var(--c-line); border-radius: 16px; background: rgba(255,255,255,.45); }
.catering__heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.catering__heading h2 { margin: 0; font: 400 32px/40px var(--font-display); text-transform: uppercase; }
.catering__badge { flex: none; padding: 7px 10px; border-radius: 8px; background: rgba(204,170,119,.5); color: var(--c-dark-soft); font: 500 14px/20px var(--font-text); }
.catering__format { display: flex; gap: 16px; margin: 8px 0 0; font: 400 18px/29px var(--font-text); }
.catering__format span { color: #8c8c8c; }
.catering__cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 24px; }
.catering__card { min-width: 0; padding: 24px; border-radius: 16px; background: rgba(255,255,255,.85); }
.catering__card-head { display: flex; align-items: center; gap: 4px; min-height: 32px; }
.catering__card h3 { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; margin: 0; font: 400 20px/28px var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.catering__card h3::before { content: ''; width: 10px; height: 10px; flex: none; margin: 0 2px; background: var(--c-accent); transform: rotate(45deg); }
.catering__subtitle { color: #8c8c8c; font: 400 18px/29px var(--font-text); }
.catering__details { display: grid; grid-template-columns: minmax(0,245fr) minmax(0,266.333fr); gap: 16px; margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--c-photo-stub); font: 400 18px/29px var(--font-text); }
.catering__details dt, .catering__note { color: #8c8c8c; }
/* keep-all: иначе строка рвётся внутри «1-й этаж» по дефису (ловилось на 1440).
   overflow-wrap оставляем — длинное слово, которое не влезает, всё равно режем. */
.catering__details dd { margin: 0; overflow-wrap: anywhere; word-break: keep-all; white-space: pre-line; }
.catering__card--wide-schedule .catering__details { grid-template-columns: minmax(0,225fr) minmax(0,286.333fr); }
.catering__card:has(.catering__subtitle) .catering__card-head { min-height: 29px; }

@media (max-width: 1599px) {
  .catering__details { grid-template-columns: 1fr; gap: 12px; }
  .catering__card--wide-schedule .catering__details { grid-template-columns: 1fr; }
  .catering__card-head { flex-wrap: wrap; }
  .catering__subtitle { width: 100%; padding-left: 30px; }
}

/* ≤1279 — текстовая колонка уже и кегли мельче: к этой ширине KV занимает
   заметно большую долю баннера, чем в макете 1920. */
@media (max-width: 1279px) {
  .catering__intro { left: 24px; right: 60%; }
  .catering__title { font-size: clamp(30px, 3.2vw, 42px); }
  .catering__lead { font-size: 15px; line-height: 24px; }
}

/* ≤1023 — макета нет, компонуем сами: коллаж целиком сверху, текст под ним.
   Рядом текст и KV уже не помещаются, а класть заголовок поверх картинки
   (как было — с подложкой под абзацем и притушенным коллажем) значит
   дорисовывать за макет. */
@media (max-width: 1023px) {
  /* Схема баннера — как на «Получении бейджа» (.arr-hero--vac): баннер остаётся
     цельным блоком фиксированной высоты, коллаж уходит вправо и обрезается краем,
     а текст стоит слева снизу на светлой бумаге. Раньше коллаж ложился полосой
     во всю ширину, текст уходил под него и читался отдельной плашкой. */
  .catering .arr-hero { height: clamp(340px, 44vw, 420px); }
  .catering__texture { top: 0; height: 100%; background-size: 2136px 100%; }
  .catering__collage { left: 44%; right: auto; height: 100%; translate: none; }
  .catering__intro { left: 32px; right: 58%; bottom: 32px; }
  .catering__title { font-size: clamp(30px, 3.9vw, 40px); line-height: 1.15; }
  .catering__lead { font-size: clamp(14px, 1.56vw, 16px); line-height: 1.5; }
  .catering__dash { margin-bottom: clamp(12px, 1.95vw, 20px); }
  /* карточки в одну колонку — зато внутри снова два столбца */
  .catering__cards { grid-template-columns: 1fr; }
  .catering__details, .catering__card--wide-schedule .catering__details { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  /* Геро по образцу «ПЦР-теста»: баннер одним блоком, коллаж уходит за правый
     край и обрезается им, слева остаётся чистая бумага, на ней снизу — риска,
     заголовок и лид. До ревью 22.09 коллаж стоял по центру отдельной полосой
     во всю ширину и читался вставленной картинкой, а не частью баннера. */
  .catering .arr-hero { height: clamp(420px, 116vw, 470px); margin: 16px 0 0; }
  /* низ коллажа режем: арка нижнего слоя выходит за рамку KV и залезала
     под лид (на 360 особенно заметно) */
  .catering__collage { left: auto; right: -52%; top: 0; height: 62%; translate: none; clip-path: inset(-100% -100% 0 -100%); }
  .catering__intro { left: 20px; right: 20px; bottom: 24px; }
  .catering__title { font-size: clamp(28px, 8.5vw, 34px); }
  .catering__lead { font-size: 15px; }
  .catering__groups { gap: 24px; padding: 32px 0 64px; }
  .catering__group { padding: 24px 16px; }
  .catering__heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .catering__heading h2 { font-size: 26px; line-height: 32px; }
  .catering__format { flex-direction: column; gap: 4px; font-size: 16px; }
  .catering__card { padding: 20px; }
  .catering__details, .catering__card--wide-schedule .catering__details { grid-template-columns: 1fr; font-size: 16px; }
  .catering__subtitle { font-size: 16px; }
}

/* === sections/shuttles.css === */
/* ==========================================================================
   shuttles.css — страница «Шаттлы» (раздел «Участникам» → «Сервисы»).
   Десктоп-база — 1920 (макет Figma 3051:125455, файл «ФОК (22.09.26)»).
   Переиспользует: arrival.css (crumbs, arr-hero), press-events.css (геро
   arr-hero--pev: колонка «тире → заголовок» у нижнего края), visa.css
   (visa-block/text/bullets), page-tabs.css (ptabs--flow).
   Здесь — только дельты и сетка маршрутов; всё скоупится под .shtl (на <main>).
   Лесенка брейкпоинтов проекта: 1920 (база) / 1440 / 768 / 360.
   ========================================================================== */

.shtl .visa-text, .shtl .visa-bullets li { text-wrap: pretty; }
.shtl .visa-block__title, .shtl .arr-hero__title { text-wrap: balance; }

/* Полоса табов и баннер — во всю ширину окна, карточки — в гаттере 40
   (как на «Пресс-мероприятиях»). */
.shtl .ptabs--flow,
.shtl .arr-hero--pev {
  margin-inline: calc(var(--gutter) * -1);
}

/* Лид под баннером: колонка ~900, перенос после «бесплатные» как в макете */
.shtl-lead { max-width: 900px; margin-top: 56px; }

/* ---------- Маршруты: две карточки в ряд, равной высоты ----------
   Шапки в ряду выравниваются по самой высокой (в макете у «Маршрута № 1»
   шапка той же высоты, что у № 2 с двухстрочной припиской) — subgrid. */
.shtl-routes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 32px;
  margin-top: 36px;
  margin-bottom: 120px;
}
.shtl .visa-block {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
  margin-top: 0;
}
/* заголовок и приписка — по центру шапки (высота шапки в макете — 172:
   56 + двухстрочная приписка с её padding-top 8 из visa.css + 56) */
.shtl .visa-block__head { align-items: center; }
.shtl .visa-block__body { gap: 24px; }
.shtl .visa-text,
.shtl .visa-bullets li {
  font-size: 18px;
  line-height: 1.6;
}
.shtl .visa-bullets li::before { top: 10px; }
.shtl-note {
  color: var(--c-secondary);
  opacity: .65;
}

/* ==========================================================================
   1440
   ========================================================================== */
@media (max-width: 1919px) {
  .shtl-lead { margin-top: 48px; }
  .shtl-routes { column-gap: 24px; margin-bottom: 96px; }
  .shtl .visa-block__body { gap: 20px; }
  .shtl .visa-text,
  .shtl .visa-bullets li { font-size: 16px; line-height: 24px; }
  .shtl .visa-bullets li::before { top: 8px; }
}

/* ==========================================================================
   768 — карточки в колонку
   ========================================================================== */
@media (max-width: 1023px) {
  .shtl-lead { margin-top: 40px; }
  .shtl-routes { grid-template-columns: 1fr; grid-template-rows: none; gap: 20px; margin-bottom: 80px; }
  .shtl .visa-block { display: block; grid-row: auto; }
  .shtl .visa-block__head { align-items: flex-start; }
  /* коллаж на этой картинке правее, чем у «Пресс-мероприятий» (от 54% ширины) —
     сдвигаем кадр, чтобы он читался целиком справа от заголовка */
  .shtl .arr-hero--pev .arr-hero__img { object-position: 70% center; }
}

/* ==========================================================================
   360 — табы и геро возвращаются в гаттер 16
   ========================================================================== */
@media (max-width: 767px) {
  .shtl .ptabs--flow,
  .shtl .arr-hero--pev { margin-inline: 0; }
  .shtl .arr-hero--pev .arr-hero__img { object-position: 52% center; }
  .shtl .ptabs--flow + .arr-hero { margin-top: 10px; }
  .shtl-lead { margin-top: 32px; }
  .shtl-routes { gap: 16px; margin-top: 20px; margin-bottom: 56px; }
  .shtl .visa-block__body { gap: 18px; }
}

/* === sections/resume.css === */
/* ==========================================================================
   resume.css — «Резюме председателя Форума» (/resume/, /en/resume/{,fr,es,ar,zh}/).
   Простая текстовая страница без макета: крошки → языковая полоса (общий
   .ptabs, как на «О Форуме») → заголовок → текст. Скоуп .rsm на <main>.
   Арабская версия: dir="rtl" на <main> сам разворачивает поток.
   ========================================================================== */

.rsm { padding-bottom: clamp(64px, 6.25vw, 120px); }

.rsm__title {
  margin-top: clamp(48px, 4.167vw, 80px);
  /* без max-width: шрифт растёт с vw, и узкий блок рвал вторую строку на 1536+.
     40 на 1440 / ~53 на 1920 — вторая строка заголовка («XII … форума») влезает целиком */
  font: 400 56px/64px var(--font-display);
  font-size: clamp(32px, 2.778vw, 56px);
  line-height: clamp(38px, 3.194vw, 64px);
  text-transform: uppercase;
  color: var(--c-text);
}

.rsm__note {
  margin-top: 16px;
  font: italic 400 16px/1.5 var(--font-text);
  color: var(--c-secondary);
  opacity: .7;
}

.rsm__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: clamp(32px, 2.5vw, 48px);
  max-width: 1310px;
}
.rsm__text p {
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
  text-wrap: pretty;
}

/* <1200 шрифт упирается в минимум 32 и вторая строка («XII … форума») уже не влезает —
   ручные переносы убираем, заголовок течёт сам (после <br> в тексте стоит пробел). */
@media (max-width: 1199px) {
  .rsm__title br { display: none; }
}

/* ≤767 — мобилка */
@media (max-width: 767px) {
  .rsm__title { margin-top: 32px; font-size: 26px; line-height: 32px; }
  .rsm__note { font-size: 14px; }
  .rsm__text { gap: 12px; margin-top: 24px; }
  .rsm__text p { font-size: 14px; line-height: 20px; }
}