/* =========================
   ПОРТАЛЫ АКТИВИСТА И ОРГАНИЗАТОРА + АВТОРИЗАЦИЯ + ТРЕКИ
   Опирается на base-стили style.css и общие компоненты museum.css
   (.field, .btn, .form-message, .subpage-*) — здесь только то,
   что специфично для этих страниц.
========================= */

/* =========================
   СОСТОЯНИЕ ПРОВЕРКИ ДОСТУПА
========================= */

.guard-loading {
  padding: 120px 24px;

  text-align: center;

  color: rgba(240, 238, 233, .5);

  font-family: "Sora", system-ui, sans-serif;
  font-size: 14px;
}

/* =========================
   ПОЛЬЗОВАТЕЛЬ В ШАПКЕ
========================= */

.portal-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.portal-user span {
  color: rgba(240, 238, 233, .68);

  font-family: "Sora", system-ui, sans-serif;
  font-size: 13px;

  white-space: nowrap;
}

.portal-user .btn {
  padding: 9px 16px;

  font-size: 13px;
}

/* =========================
   СТЕЙДЖ ПОРТАЛА АКТИВИСТА
   Значения сверены напрямую с Figma (MCP get_design_context) — точный
   макет 1920×1080. .activist-stage — inline-size контейнер: кнопки
   назад/вход считают cqw от НЕГО (в макете 1920px = 100cqw), баннер/
   треки/предложка — от .activist-content, своего вложенного
   контейнера (в макете 934px = 100cqw, это ширина фиолетовой панели).
   Обе колонки сами ограничены стандартной шириной страницы (.page),
   поэтому раскладка не растягивается на весь экран и масштабируется
   как единое целое вплоть до мобильного брейкпоинта (700px).
========================= */

.portal-flush-main {
  /* ширина — стандартная для .page (min(800px, ...)), как на всех
     остальных страницах; здесь только убираем вертикальный отступ,
     чтобы баннер стоял вплотную к верху экрана */
  padding: 0;
}

.activist-stage {
  position: relative;

  width: 100%;
  margin: 0 auto;

  container-type: inline-size;

  padding-bottom: 32px;
}

.activist-content {
  width: 100%;

  /* Свой cqw-контейнер — баннер/треки/панель предложки внутри считают
     проценты от РЕАЛЬНОЙ ширины этой колонки (а не всей сцены), иначе
     их внутренние отступы/шрифты/радиусы были бы рассчитаны на вдвое
     более узкий блок, чем он есть на самом деле. Баннер — первый
     элемент внутри неё, поэтому его ширина автоматически совпадает
     с шириной колонки треков и предложки под ним. */
  container-type: inline-size;
}

/* Кнопки "назад" и "вход" — фиксированы относительно ОКНА браузера
   (не относительно плашки/колонки контента), с равным отступом от
   левого/правого/верхнего края экрана. Вынесены в разметке за пределы
   .site-surface (у него overflow:hidden, который иначе бы их обрезал). */
.portal-back,
.portal-login-slot {
  position: fixed;
  top: clamp(14px, 3vw, 32px);
  z-index: 20;
}

/* Кнопка "назад" — единая картинка из Figma (кружок + рамка + стрелка
   уже нарисованы вместе), поэтому здесь только размер и позиция. */
.portal-back {
  left: clamp(14px, 3vw, 32px);

  display: block;

  width: clamp(38px, 3.4vw, 56px);
  height: clamp(38px, 3.4vw, 56px);
}

.portal-back img {
  display: block;

  width: 100%;
  height: 100%;
}

.portal-login-slot {
  right: clamp(14px, 3vw, 32px);

  display: flex;
  align-items: center;
  justify-content: center;

  height: clamp(38px, 3.4vw, 56px);

  padding: 0 clamp(12px, 1.5vw, 22px);

  border-radius: clamp(14px, 1.2vw, 20px);
  border: 2px solid rgba(255, 255, 255, .72);

  background: rgba(255, 255, 255, .1);
  color: #ffffff;

  text-decoration: none;
}

.portal-login-slot .subpage-action {
  border: none;
  background: none;
  padding: 0;

  font-family: "Actay", sans-serif;
  font-size: clamp(13px, 1.3vw, 18px);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
}

.portal-login-slot .portal-user {
  gap: clamp(6px, .75vw, 10px);
}

.portal-login-slot .portal-user span {
  font-size: clamp(11px, 1vw, 14px);
}

.portal-login-slot .portal-user .btn {
  padding: clamp(6px, .5vw, 8px) clamp(10px, 1vw, 14px);

  font-size: clamp(11px, 1vw, 14px);
}

.portal-banner {
  /* ширина = ширине названия + отступы по бокам, а не фиксированный
     блок — иначе более длинное название ("Портал организатора") не
     помещалось бы в ту же плашку, что была рассчитана под короткое */
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;

  padding-top: max(14px, 4.818cqw);
  padding-right: max(28px, 10.33cqw);
  padding-left: max(28px, 10.33cqw);

  min-height: max(72px, 19.808cqw);

  border-radius: 0 0 max(18px, 8.565cqw) max(18px, 8.565cqw);
  text-align: center;

  background: linear-gradient(247.967deg, #732DDD 0.27%, #3E1877 157.33%);

  /* Стандартный неоморфный скос из Figma — диагональные inset-тени,
     светлая сверху-справа, тёмная снизу-слева (одна и та же формула
     переиспользуется на всех панелях: баннер, кнопки, предложка). */
  box-shadow:
    inset -0.428cqw 0.428cqw 1.124cqw rgba(255, 255, 255, .22),
    inset 0.428cqw -0.428cqw 1.167cqw rgba(0, 0, 0, .81);
}

.portal-banner__title {
  margin: 0;

  font-family: "Days", sans-serif;
  font-weight: 400;
  font-size: max(20px, 6.424cqw);
  line-height: 1.25;
  white-space: nowrap;
  text-transform: uppercase;

  color: #ffffff;
}

/* =========================
   ОБЩАЯ КАРТОЧКА-ПАНЕЛЬ
========================= */

.panel {
  padding: 32px;

  border-radius: 30px;

  background:
    linear-gradient(
      180deg,
      rgba(35, 11, 68, .58) 0%,
      rgba(23, 4, 45, .82) 100%
    );

  /* Объёмная панель, "парящая" над фоном — тот же почерк, что и на
     баннере/кнопках портала активиста: диагональный скос (светлая
     грань сверху-справа, тёмная снизу-слева) плюс мягкая внешняя
     тень, отрывающая панель от фона. */
  box-shadow:
    inset -6px 6px 16px rgba(255, 255, 255, .12),
    inset 6px -6px 18px rgba(0, 0, 0, .5),
    0 30px 60px rgba(0, 0, 0, .38),
    0 8px 20px rgba(0, 0, 0, .22);
}

.panel h2 {
  margin: 0 0 8px;

  font-family: "Days", sans-serif;
  font-weight: 400;
  font-size: 24px;

  color: #ffffff;
}

.panel-lede {
  margin: 0 0 24px;

  color: rgba(240, 238, 233, .68);

  font-size: 14px;
  line-height: 1.55;
}

/* =========================
   РАЗДЕЛЫ ПОРТАЛЬНЫХ СТРАНИЦ
========================= */

.portal-section {
  margin-bottom: 56px;
}

.portal-section:last-child {
  margin-bottom: 0;
}

.portal-section-head {
  margin-bottom: 20px;
}

.portal-section-head h2 {
  margin: 0 0 8px;

  font-family: "Days", sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 32px);

  color: #ffffff;
}

.portal-section-head p {
  margin: 0;
  max-width: 560px;

  color: rgba(240, 238, 233, .66);

  font-size: 14px;
  line-height: 1.55;
}

.portal-section-head--center {
  text-align: center;
}

.portal-section-head--center p {
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   АВТОРИЗАЦИЯ — ВКЛАДКИ ВХОД/РЕГИСТРАЦИЯ
========================= */

.auth-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;

  margin-bottom: 28px;
}

.auth-tab {
  padding: 10px 22px;

  border: 1px solid rgba(240, 238, 233, .18);
  border-radius: 999px;
  cursor: pointer;

  background: transparent;
  color: rgba(240, 238, 233, .64);

  font-family: "Sora", system-ui, sans-serif;
  font-size: 14px;

  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}

.auth-tab[aria-selected="true"] {
  border-color: transparent;

  background: var(--mov);
  color: #ffffff;
}

.auth-panel[hidden] {
  display: none;
}

/* =========================
   ВЫБОР РОЛИ ПРИ РЕГИСТРАЦИИ
========================= */

.role-toggle {
  display: flex;
  gap: 10px;
}

.role-toggle-option {
  position: relative;

  flex: 1;

  display: flex;
  flex-direction: column;
  gap: 4px;

  padding: 14px 16px;

  border: 1px solid rgba(240, 238, 233, .16);
  border-radius: 16px;
  cursor: pointer;

  text-align: left;

  transition:
    border-color .2s ease,
    background .2s ease;
}

.role-toggle-option input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;
  pointer-events: none;
}

.role-toggle-option.is-selected {
  border-color: var(--tiffany);

  background: rgba(129, 216, 208, .08);
}

.role-toggle-option strong {
  font-family: "Days", sans-serif;
  font-weight: 400;
  font-size: 16px;

  color: #ffffff;
}

.role-toggle-option span {
  color: rgba(240, 238, 233, .58);

  font-size: 12px;
  line-height: 1.4;
}

/* =========================
   СОГЛАСИЕ НА ОБРАБОТКУ ПЕРСОНАЛЬНЫХ ДАННЫХ
========================= */

.consent-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  cursor: pointer;

  color: rgba(240, 238, 233, .68);

  font-family: "Sora", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

.consent-field input {
  flex-shrink: 0;
  margin-top: 3px;

  width: 16px;
  height: 16px;

  accent-color: var(--tiffany);
}

.consent-field a {
  color: var(--tiffany);
}

/* =========================
   ТЕКСТ СОГЛАСИЯ (privacy.html)
========================= */

.legal-text h2 {
  margin: 28px 0 10px;

  font-family: "Days", sans-serif;
  font-weight: 400;
  font-size: 19px;

  color: #ffffff;
}

.legal-text h2:first-of-type {
  margin-top: 0;
}

.legal-text p {
  margin: 0 0 4px;

  color: rgba(240, 238, 233, .72);

  font-size: 14px;
  line-height: 1.6;
}

/* =========================
   ПОЛЯ SELECT (ДОПОЛНЕНИЕ К .field ИЗ museum.css)
========================= */

.field select {
  width: 100%;
  padding: 13px 16px;

  border-radius: 16px;
  border: 1px solid rgba(240, 238, 233, .16);

  background: rgba(9, 0, 20, .42);
  color: var(--cream);

  font-family: "Sora", system-ui, sans-serif;
  font-size: 15px;

  transition: border-color .2s ease, background .2s ease;
}

.field select:focus {
  outline: none;

  border-color: var(--tiffany);
  background: rgba(9, 0, 20, .62);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* =========================
   БЛОК ТРЕКОВ (ПОРТАЛ АКТИВИСТА)
========================= */

.activist-tracks__head {
  margin-top: max(20px, 2.891cqw);

  text-align: center;
}

.activist-tracks__head h2 {
  margin: 0;

  font-family: "Actay Wide", sans-serif;
  font-weight: 700;
  font-size: max(18px, 2.891cqw);
  line-height: 1.25;
  font-synthesis: none;
  text-rendering: optimizeLegibility;

  color: #ffffff;
}

.activist-tracks__head p {
  margin: max(6px, 0.642cqw) 0 0;

  font-family: "Actay", sans-serif;
  font-weight: 400;
  font-size: max(13px, 1.82cqw);
  line-height: 1.3;
  font-synthesis: none;
  text-rendering: optimizeLegibility;

  color: #ffffff;
}

.activist-tracks__cta {
  display: flex;
  justify-content: center;

  margin-top: max(16px, 2.141cqw);
}

.activist-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: max(150px, 35.974cqw);
  height: max(44px, 7.066cqw);
  padding: 0 max(20px, 2.141cqw);

  border-radius: max(18px, 3.105cqw);

  background: #732DDD;

  box-shadow:
    inset -0.428cqw 0.428cqw 1.124cqw rgba(255, 255, 255, .22),
    inset 0.428cqw -0.428cqw 1.167cqw rgba(0, 0, 0, .81);

  text-decoration: none;
  white-space: nowrap;

  font-family: "Actay Wide", sans-serif;
  font-weight: 700;
  font-size: max(14px, 2.248cqw);
  line-height: 1.25;
  font-synthesis: none;
  text-rendering: optimizeLegibility;

  color: #ffffff;

  transition: transform .2s ease;
}

.activist-pill-btn:hover {
  transform: translateY(-2px);
}

/* =========================
   ОРБИТЫ ТРЕКОВ
   Десктоп — статичный ряд, размеры и нахлёст каждой орбиты заданы
   инлайн через --orb-size/--orb-overlap (см. js/tracks.js, данные —
   в js/tracks-data.js). Мобильный — бесконечная лента, включается
   модификатором .track-orbits--mobile из js/carousel.js по media query,
   там используется собственный фиксированный размер (см. ниже).
========================= */

.track-orbits {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: nowrap;

  margin-top: max(10px, 1.606cqw);
  padding: 10px 0;

  /* свечение орбит не должно вылезать за пределы поля карусели —
     раньше вылезало из-за разных "холстов" у исходных PNG, теперь
     свечение своё (CSS) и надёжно обрезается по границе ряда */
  overflow: hidden;
}

.track-orb {
  position: relative;
  flex: 0 0 auto;

  /* фиксированное соотношение сторон холста (535×560) — ширина
     задаётся через --orb-size (десктоп) или 34vw (мобильный), высота
     считается сама */
  aspect-ratio: 535 / 560;

  display: block;
  text-decoration: none;

  transition: transform .25s ease;
}

.track-orbits:not(.track-orbits--mobile) .track-orb {
  width: var(--orb-size, 41.1cqw);
  margin-left: var(--orb-overlap, 0);
}

.track-orbits:not(.track-orbits--mobile) .track-orb:first-child {
  margin-left: 0;
}

.track-orb:hover {
  transform: translateY(-6px);
}

/* Свечение — своё CSS-пятно вместо запечённого в картинку. Одинаковая
   форма/размер у всех треков (цвет каждого — через --glow-color,
   см. js/tracks.js), не вылезает за пределы блока и не зависит от
   того, что у оригинальных PNG были разные "холсты". */
.track-orb__glow {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 2%;
  bottom: 18%;

  border-radius: 50%;

  background: radial-gradient(circle at 50% 45%, var(--glow-color, #7a3ce0) 0%, var(--glow-color, #7a3ce0) 35%, transparent 72%);
  opacity: .85;
  filter: blur(14px);

  pointer-events: none;
}

.track-orb__icon {
  position: absolute;
  top: 2%;
  left: 50%;

  width: 42%;
  height: auto;

  transform: translateX(-50%);

  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35));

  user-select: none;
  pointer-events: none;
}

.track-orb__label {
  position: absolute;
  left: 50%;
  bottom: 10%;

  width: 88%;

  transform: translateX(-50%);

  text-align: center;
  text-transform: uppercase;

  font-family: "Actay Wide", sans-serif;
  font-weight: 700;
  font-size: max(11px, 1.2cqw);
  line-height: 1.2;
  font-synthesis: none;

  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .4);

  pointer-events: none;
}

.track-orbits--mobile {
  justify-content: flex-start;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.track-orbits--mobile::-webkit-scrollbar {
  display: none;
}

.track-orbits--mobile .track-orb {
  width: 34vw;
  scroll-snap-align: center;
}

.action-row--center {
  justify-content: center;
}

/* =========================
   СТАРЫЙ СТИЛЬ КАРТОЧКИ ТРЕКА (каталог tracks.html)
========================= */

.track-card {
  position: relative;
  flex: 0 0 auto;

  width: min(78vw, 260px);
  padding: 24px 22px;

  display: flex;
  flex-direction: column;
  gap: 14px;

  scroll-snap-align: center;

  border-radius: 26px;

  text-decoration: none;
  color: var(--cream);

  background:
    linear-gradient(
      180deg,
      rgba(40, 18, 78, .82) 0%,
      rgba(22, 7, 45, .92) 100%
    );

  box-shadow:
    0 18px 40px rgba(0, 0, 0, .34),
    0 0 30px rgba(115, 45, 221, .14),
    inset 0 1px 0 rgba(255, 255, 255, .04);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.track-card:hover {
  transform: translateY(-4px);

  box-shadow:
    0 24px 50px rgba(0, 0, 0, .4),
    0 0 40px rgba(115, 45, 221, .2),
    inset 0 1px 0 rgba(255, 255, 255, .05);
}

.track-card__eyebrow {
  color: var(--tiffany);

  font-family: "Sora", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.track-card__title {
  margin: 0;

  font-family: "Days", sans-serif;
  font-weight: 400;
  font-size: 23px;
  line-height: 1.12;

  color: #ffffff;
}

.track-card__desc {
  margin: 0;

  color: rgba(240, 238, 233, .68);

  font-size: 13px;
  line-height: 1.5;
}

/* =========================
   КАТАЛОГ ТРЕКОВ (tracks.html)
========================= */

.tracks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
}

.tracks-grid .track-card {
  width: 100%;
}

/* =========================
   СТРАНИЦА ТРЕКА (track.html)
========================= */

.track-detail__eyebrow {
  display: inline-block;
  margin-bottom: 14px;

  color: var(--tiffany);

  font-family: "Sora", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.panel .track-detail__title {
  margin: 0 0 18px;

  font-family: "Days", sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.06;

  color: #ffffff;
}

.track-detail__lede {
  margin: 0 0 28px;

  color: rgba(240, 238, 233, .78);

  font-size: 16px;
  line-height: 1.55;
}

.track-detail__body {
  display: flex;
  flex-direction: column;
  gap: 16px;

  color: rgba(240, 238, 233, .7);

  font-size: 15px;
  line-height: 1.65;
}

.track-detail__cta {
  margin-top: 28px;

  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* =========================
   ПРЕДЛОЖКА (ФОРМА ПРЕДЛОЖЕНИЙ)
========================= */

.predlozhka-form {
  margin-top: 22px;
}

.predlozhka-form[hidden] {
  display: none;
}

/* =========================
   ПАНЕЛЬ-ПРИЗЫВ (CTA) — большая цветная плашка с заголовком, подписью
   и одной крупной кнопкой-ссылкой. Один и тот же компонент на обоих
   порталах ("Есть идеи?" на портале активиста, заявка/предложка на
   портале организатора) — просто с разными цветами через модификатор
   (.cta-panel--violet и т.п.) и разным текстом/ссылкой.
========================= */

.cta-panel {
  --cta-panel-from: rgba(170, 255, 247, .6);
  --cta-panel-to: rgba(45, 129, 121, .6);
  --cta-btn-from: #B8F9F3;
  --cta-btn-to: #91E4DC;
  --cta-btn-color: #474749;
  --cta-btn-shadow-light: #AAF3EC;

  width: 100%;
  margin: max(28px, 3.961cqw) auto;
  padding: max(22px, 4.069cqw) max(20px, 1.85cqw) max(26px, 5.032cqw);

  border-radius: max(24px, 8.565cqw);
  text-align: center;

  background: linear-gradient(234.728deg, var(--cta-panel-from) 5.09%, var(--cta-panel-to) 142.87%);

  box-shadow:
    inset -0.428cqw 0.428cqw 1.124cqw rgba(255, 255, 255, .22),
    inset 0.428cqw -0.428cqw 1.167cqw rgba(0, 0, 0, .81);
}

/* Фиолетовый вариант — заявка на мероприятие (портал организатора):
   те же пропорции, тот же почерк, цвета поменяны местами с "Есть
   идеи?" (там бирюзовая плашка со светлой кнопкой — здесь наоборот,
   фиолетовая плашка под цвет баннера, кнопка светлее панели). */
.cta-panel--violet {
  --cta-panel-from: rgba(185, 141, 245, .55);
  --cta-panel-to: rgba(62, 24, 119, .7);
  --cta-btn-from: #a566ec;
  --cta-btn-to: #732DDD;
  --cta-btn-color: #ffffff;
  --cta-btn-shadow-light: rgba(255, 255, 255, .45);
}

.cta-panel__title {
  margin: 0;

  font-family: "Days", sans-serif;
  font-weight: 400;
  font-size: max(22px, 3.747cqw);
  line-height: 1.25;
  text-transform: uppercase;

  color: #ffffff;
}

.cta-panel__lede {
  margin: max(6px, 0.749cqw) 0 0;

  font-family: "Actay", sans-serif;
  font-weight: 400;
  font-size: max(13px, 1.82cqw);
  line-height: 1.3;
  font-synthesis: none;
  text-rendering: optimizeLegibility;

  color: #ffffff;
}

.cta-panel__cta {
  width: max(240px, 89.829cqw);
  margin-top: max(18px, 3.747cqw);

  padding: 0 max(16px, 3cqw);
  min-height: max(64px, 20.45cqw);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: max(20px, 5.353cqw);
  cursor: pointer;

  background: linear-gradient(247.729deg, var(--cta-btn-from) 0.33%, var(--cta-btn-to) 115.78%);
  color: var(--cta-btn-color);

  font-family: "Days", sans-serif;
  font-weight: 400;
  font-size: max(20px, 5.46cqw);
  line-height: 1.25;
  text-transform: uppercase;
  text-decoration: none;
  font-synthesis: none;
  text-rendering: optimizeLegibility;

  box-shadow:
    inset -0.428cqw 0.428cqw 1.124cqw var(--cta-btn-shadow-light),
    inset 0.428cqw -0.428cqw 1.167cqw rgba(0, 0, 0, .34),
    -0.642cqw 0.964cqw 2.28cqw rgba(0, 0, 0, .12);

  transition: transform .2s ease;
}

.cta-panel__cta:hover {
  transform: translateY(-3px);
}

/* =========================
   ЗАЯВКА НА МЕРОПРИЯТИЕ / ПАНЕЛЬ-ФОРМА
========================= */

.panel-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* =========================
   ОЦЕНКА МЕРОПРИЯТИЯ — ЗАГЛУШКА
========================= */

.stub-badge {
  display: inline-flex;
  align-items: center;

  margin-left: 8px;
  padding: 2px 10px;

  border-radius: 999px;

  background: rgba(240, 238, 233, .12);
  color: rgba(240, 238, 233, .7);

  font-family: "Sora", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* =========================
   ОГБИ — ВСТРОЕННЫЙ БЛОК (ПОРТАЛ ОРГАНИЗАТОРА)
========================= */

.panel .ogbi-block {
  max-width: 420px;
  margin: 0;
  transform: none;
}

/* =========================
   КОНТАКТЫ (ПОРТАЛ ОРГАНИЗАТОРА)
========================= */

.contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 6px;

  padding: 22px 20px;

  border-radius: 22px;
  border: 1px solid rgba(240, 238, 233, .08);

  background: rgba(255, 255, 255, .03);

  /* та же "парящая" объёмная тень, что и у .panel, только легче —
     карточки поменьше и второстепеннее */
  box-shadow:
    inset -3px 3px 8px rgba(255, 255, 255, .08),
    inset 3px -3px 10px rgba(0, 0, 0, .4),
    0 14px 28px rgba(0, 0, 0, .25);

  transition: transform .2s ease, box-shadow .2s ease;
}

.contact-card:hover {
  transform: translateY(-3px);

  box-shadow:
    inset -3px 3px 8px rgba(255, 255, 255, .1),
    inset 3px -3px 10px rgba(0, 0, 0, .45),
    0 18px 34px rgba(0, 0, 0, .3);
}

.contact-card .label {
  color: var(--tiffany);

  font-family: "Sora", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.contact-card a,
.contact-card p {
  margin: 0;

  color: var(--cream);
  text-decoration: none;

  font-size: 15px;
  line-height: 1.4;
}

.contact-card a:hover {
  color: var(--tiffany);
}

.contact-card img {
  width: 22px;
  height: auto;

  margin-bottom: 2px;
}

/* =========================
   МОБИЛЬНАЯ ВЕРСИЯ
========================= */

@media (max-width: 700px) {
  .panel {
    padding: 24px 20px;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .role-toggle {
    flex-direction: column;
  }

  .contacts-grid {
    grid-template-columns: 1fr;
  }

  .track-card {
    width: min(72vw, 220px);
    padding: 20px 18px;
  }

  .track-detail__lede {
    font-size: 15px;
  }

  .activist-stage {
    padding-bottom: 24px;
  }

}