/* ==========================================================================
   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; }
}