/* ============================================================================
   Детальная страница кейса — структурные улучшения раскладки.
   Стилистика (цвета, шрифты, градиенты, свечения) сохранена — меняется только
   структура блоков, которые на проде растягивались во всю ширину.
   Подключается ПОСЛЕ nuxt-бандла в scripts/assemble-case-from-prod-capture.cjs.
   Референс-паттерн: редакционная сетка «заголовок слева — текст справа».
   ============================================================================ */

/* --- HERO: контент по вертикали к центру, чуть ниже середины ----------------
   Было: h1 с margin-top:150px спихивал «Darkrain» с описанием к низу экрана.
   Стало: убираем сдвиг (hero и так justify-content:center) и мягко опускаем
   блок чуть ниже центра. */
@media (min-width: 1024px) {
  /* было: .container с margin-top:auto (flex «прижать к низу») → контент внизу.
     auto сверху и снизу центрирует блок по вертикали. */
  .page .hero .container {
    margin-top: auto;
    margin-bottom: auto;
  }
  .page .hero .content h1 {
    margin-top: 0;
    /* было 96px/500 — крупнее любого H1 на сайте (главная 80px/400, статьи блога 70px/500,
       ближайший аналог для лонгрида-кейса). Приводим размер к стандарту нового контура. */
    font-size: 70px;
    line-height: 1.1;
  }
  /* лёгкий сдвиг чуть ниже центра */
  .page .hero .content {
    transform: translateY(72px);
  }
}

/* --- CTA нового контура: плавающая пилюля «Оставить заявку» справа внизу -----
   Стандарт нового контура — #body.body-application фиксирован в правом нижнем углу
   (bottom:16px; right:78px), белая закруглённая пилюля. На кейсе прод-CSS позиционировал
   её как absolute right:5% — переопределяем на новоконтурный fixed справа внизу.
   Клик по пилюле открывает лид-модалку (leave-request-cta.js). */
#body.body-application {
  position: fixed;
  left: auto;
  right: 78px;
  bottom: 16px;
  top: auto;
  /* z-index намеренно не задан (как на главной, где auto): кнопка вложена в
     .header (z-index:100 fixed), этого достаточно, чтобы плавать над обычным
     контентом страницы. Явный z-index:120 поднимал её ВЫШЕ, чем оверлей
     открытого бургер-меню (.new-static-menu, z-index:1), из-за чего пилюля
     перекрывала «Следите за нами» вместо того, чтобы уйти под панель, как
     на главной. */
}
@media (max-width: 1250px) {
  /* на мобильном десктопную пилюлю прячем — там свой bottom-sheet (.btns) */
  #body.body-application {
    display: none;
  }
}

/* --- ISSUE 1: интро-блок — заголовок слева, лид-текст справа ----------------
   Было: h2 на всю ширину, под ним абзацы на всю ширину.
   Стало: две колонки — заголовок держит левую, текст читается справа.
   Важно: Nuxt-бандл даёт .content { max-width: 50% } — внутри правой колонки
   описание становится ~330px («слишком узкий» на Darkrain). Сбрасываем. */
@media (min-width: 1024px) {
  .page .container > .content-marketing:not(.numbered) {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    column-gap: 56px;
    /* первые строки заголовка и текста — на одной базовой линии */
    align-items: baseline;
  }
  .page .container > .content-marketing:not(.numbered) > header {
    margin: 0;
  }
  .page .container > .content-marketing:not(.numbered) > .content {
    margin: 0;
    max-width: none;
    width: 100%;
  }
  /* заголовок: MuseoSansCyrl 300 (не Hero New с глобального h2 бандла) */
  .page .container > .content-marketing:not(.numbered) .content-marketing-title {
    font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 300 !important;
    font-size: 24px;
    line-height: 1.6;
    margin-bottom: 0;
  }
}

/* --- ISSUE 4a: цифра над заголовком в нумерованном разделе -----------------
   Стандарт нового контура (services/marketing-dlya-meditsiny — блок
   .analitics-block__content-marketing-contant): маленькая серая цифра сверху,
   крупный белый заголовок под ней. Значения сверены на живой странице
   медицины: цифра 20px/400/#969696, заголовок 46px/400/#fff. */
.content-marketing.numbered > header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.content-marketing.numbered > header .section-number {
  padding-top: 0;
  margin-right: 0;
  margin-bottom: 12px;
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: #969696;
}

/* --- ISSUE 4b: раскладка нумерованного раздела — КАК НА ПРОДЕ: заголовок слева,
   текст справа одной колонкой (исходный flex-макет бандла). Раньше я ломал это на
   «заголовок сверху + текст в 2 колонки» — пользователь попросил вернуть прод-вид. */
@media (min-width: 1024px) {
  .page .content-marketing.numbered {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }
  .page .content-marketing.numbered > header {
    flex: 0 0 auto;
    width: 50%;
    max-width: 620px;
  }
  .page .content-marketing.numbered > .content {
    flex: 1 1 auto;
    max-width: none;
    margin-left: 0;
  }
}

/* --- ISSUE 2: отзывы — карточка «автор слева, цитата справа», без растяжения -
   Было: аватар/имя сверху, цитата на всю ширину.
   Стало: двухколоночная карточка, ширина цитаты ограничена для читаемости. */
@media (min-width: 900px) {
  /* карточка не на всю ширину контейнера и по центру */
  .page .quote-block {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
  }
  /* меньше паддинги → меньше высота */
  .page .quote-block .inside {
    padding: 38px 44px;
  }
  .quote-block .inside {
    display: grid;
    grid-template-columns: 240px minmax(360px, 1fr);
    column-gap: 40px;
    /* автор центрируется по высоте цитаты — без пустоты снизу под коротким автором */
    align-items: center;
  }
  /* верхняя кавычка чуть ниже (было top:-40px) */
  .quote-block .quote-content::before {
    top: -16px;
  }
  /* явное назначение колонок — не зависит от порядка детей в DOM и браузера:
     автор всегда в узкой левой, цитата всегда в широкой правой */
  .quote-block .quote-header {
    grid-column: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    /* сдвиг вправо: отступ слева карточки ≈ отступу от аватара до текста */
    padding-left: 64px;
  }
  .quote-block .quote-content {
    grid-column: 2;
    /* минимум 360px гарантирует: цитата не схлопнется в узкую колонку */
    min-width: 0;
    max-width: 700px;
    /* воздух между кавычками и текстом: сами SVG-кавычки крепятся к верху/низу
       .quote-content через absolute ::before/::after — этот padding отодвигает
       текст на 10px от каждой из них. */
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* --- ISSUE 3: «Этапы работы» — кликабельный якорный список (TOC) ------------
   Было: блёклый аккордеон (opacity:.5, описания скрыты, клик без действия).
   Стало: аккуратная двухколоночная сетка кликабельных шагов-якорей. */
.steps-container .steps-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  row-gap: 0;
}
@media (max-width: 768px) {
  .steps-container .steps-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
.steps-list li {
  opacity: 1 !important;
}
/* Раньше блёклость шага держалась на opacity (полупрозрачные строки, сквозь текст видно
   фон) — вместо этого красим сам текст в стандартный неактивный серый нового контура
   (#969696, непрозрачный), a при hover — в обычный белый бандла. */
.steps-list .step-number,
.steps-list h3 {
  color: #969696 !important;
}
.steps-list li:hover .step-number,
.steps-list li:hover h3 {
  color: #fff !important;
}
/* стрелки вниз в оглавлении не нужны — пункт сам по себе якорь-ссылка */
.steps-list .step-header .arrow {
  display: none;
}
.steps-list .step-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* компактный TOC: скрытые описания аккордеона не показываем */
.steps-list .step-content > p {
  display: none;
}

/* --- Контраст текста: бандл задаёт color:#777 на body И на множестве отдельных
   scoped-правил вида `.content p[data-v-xxx]{color:#777}` — этот кейс был свёрстан
   под светлую тему (там #777 читается нормально), на нашем тёмном фоне еле заметно.
   Стандарт нового контура — #969696 (используется в 66 местах в css/sections/*).
   Scoped-правила бандла (класс+атрибут) специфичнее простого .page — нужен !important. */
.page,
.page p:not(.case__description),
.page .quote-text,
.page .info-text {
  color: #969696 !important;
}

/* --- Адаптив: захват заморозил Vue-реактивный inline-style padding-left/right:79px
   на .content-bottom (все 8 нумерованных разделов) — значение вычислялось JS под
   десктопный viewport при захвате и не пересчитывается. На мобильном (~310px контента)
   79px+79px съедают половину ширины — отсюда «сжатый» текст (152px вместо 310px).
   Базовое правило бандла .content-bottom{padding:0} — как раз то, что нужно на мобильном;
   инлайн-стиль специфичнее CSS-класса, поэтому нужен !important. Десктоп (≥1024px) не
   трогаем — там 79px уже проверены и выглядят корректно. */
@media (max-width: 1023px) {
  .content-bottom {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* --- Вертикальный ритм: у прода изначально очень воздушные отступы между секциями
   (нумерованные разделы margin-top:190px / margin-bottom:150px, графики margin-bottom:132px,
   content-sections padding-bottom:100px). На плотном кейсе это даёт огромные пустоты между
   блоками. Ужимаем до профессионального ритма ~96px. Bundle-правила scoped через [data-v] —
   нужен !important. Мобильные значения меньше (см. @media ниже). */
@media (min-width: 1024px) {
  .page .content-marketing.numbered {
    margin-top: 96px !important;
    margin-bottom: 96px !important;
  }
  .page .chart-swiper,
  .page [class*="Swiper"].chart-swiper {
    margin-bottom: 72px !important;
  }
  .page .content-sections {
    padding-bottom: 56px !important;
  }
}
@media (max-width: 1023px) {
  .page .content-marketing.numbered {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
  }
  .page .chart-swiper {
    margin-bottom: 48px !important;
  }
  .page .content-sections {
    padding-bottom: 40px !important;
  }
}
/* На узком мобильном (≤450px, брейкпоинт самого .chart-swiper{margin:60px 0} в бандле)
   прод держит content-sections{padding-bottom:0} — этот отступ у графика уже даёт margin-top:60px,
   и вместе с нашими 40px выше сумма (120px) вдвое больше прод-эталона (60px, сверено
   getBoundingClientRect на живом проде). Убираем дублирующий padding-bottom на этой ширине. */
@media (max-width: 450px) {
  .page .content-sections {
    padding-bottom: 0 !important;
  }
}

/* --- Вертикальный ритм ч.2: вложенные под-разделы .content-bottom .content-marketing
   имели padding-top:160px — огромная пустота над каждым под-заголовком (график → «Постоянная
   поддержка» и т.п.). Карточки-статы (.card .inside 70px, .statistics/.extra 50-57px) тоже
   раздуты. Ужимаем; quote-block исключаем (у него своя раскладка выше). */
@media (min-width: 1024px) {
  .page .content-bottom .content-marketing {
    padding-top: 64px !important;
  }
  .page .card:not(.quote-block) .inside {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .page .statistics {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .page .card-header {
    padding-bottom: 32px !important;
  }
  .page .card .extra {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
}
@media (max-width: 1023px) {
  .page .content-bottom .content-marketing {
    padding-top: 44px !important;
  }
  .page .card:not(.quote-block) .inside {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .page .statistics {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}

/* --- Слайдер графиков: кнопка «назад». В прод-разметке была только «вперёд» (loop:false),
   назад вернуться нельзя. JS (initSliders) клонирует «вперёд» → «назад» с классом
   .sa-cloned-prev; здесь ставим её слева (у «вперёд» right:10px). Стрелка SVG базово
   смотрит влево — .swiper-button-next разворачивает её на 180°, у клона класса нет,
   поэтому стрелка уже верная (влево). */
.chart-swiper .sa-cloned-prev.swiper-button-prev {
  right: auto;
  left: 10px;
}

/* Правка 2 (Таня): когда листать в сторону некуда — стрелку вообще не показывать
   (не полупрозрачную/disabled). Симметрично для клон-стрелки «назад» на первом
   слайде и родной «вперёд» на последнем. Появятся, как только уедем в противо-
   положную сторону. Скоуп — только чарт-слайдеры кейса. */
.chart-swiper .sa-cloned-prev.swiper-button-prev.swiper-button-disabled,
.chart-swiper .swiper-button-next.swiper-button-disabled {
  display: none;
}

/* --- Видео: убираем кнопку play — видео уже автоплеится (muted) при появлении
   в кадре через IntersectionObserver (case-detail-interactions.js). */
.video-wrapper .play-button {
  display: none;
}

/* --- Бургер-меню (.new-static-menu): на реальном сайте это Vue <transition> —
   компонент физически отсутствует в DOM, пока меню не открыто. В статике разметка
   всегда присутствует — по умолчанию скрываем, показываем только когда header.active
   (переключает case-detail-interactions.js по клику на .menu-icon). */
.header .new-static-menu {
  display: none;
}
.header.active .new-static-menu {
  display: block;
}

/* --- Бургер-меню: контакты внизу. Канонический партиал содержит запасной набор
   (dual-phones блок + отдельно city-selector/phone/«Отправить заявку») — на живом проде
   рендерится только ОДИН телефон + city-selector, без дублей (сверено на живой странице).
   Убираем лишнее, оставляем каноничный минимальный вид. */
.header [data-burger-menu-contacts] .header-burger-dual-phones,
.header [data-burger-menu-contacts] .footer-modern__request {
  display: none;
}

/* --- Раздел «Видеопродакшн»: карточки content-slider на широком десктопе (сверено на
   живом проде на 1728px) заметно шире, чем в нашем захвате (тот застыл под мобильный
   viewport — 263px/30px, там это верно). JS (case-detail-interactions.js) уже проставляет
   инлайн-ширину 459.333px/20px при инициализации, но Swiper в slidesPerView:"auto" сам
   пересчитывает и стирает инлайн-width слайдов при апдейте — этот !important переживает
   такой пересчёт. */
@media screen and (min-width: 1200px) {
  .video-production .content-slider .swiper-slide {
    width: 459.333px !important;
    margin-right: 20px !important;
  }
}

/* ============================================================================
   ХРОМ НОВОГО КОНТУРА (шапка/бургер/крестик/кнопки/CTA) — паритет с главной.
   ----------------------------------------------------------------------------
   HTML шапки/бургера/футера у кейса — канонический партиал нового контура
   (html/partials/header.html + footer-modern.html). Основные chrome-правила
   (--page-gutter-x, инсет бургера/крестика, пилюли .navigation-new__button,
   контакты/соцсети в оверлее .btns__modal, скрытие компактного .navigation-menu
   при открытом бургере) перенесены в общие sections/header.css и
   sections/footer-burger-chrome.css — их грузит и главная, и любой кейс на
   новом контуре, дублировать здесь больше не нужно.
   Ниже остаются только правки, специфичные для ЭТОГО кейса: они компенсируют
   конфликты легаси-бандла case-darkrain-store-nuxt.bundle.css, которых на
   главной попросту нет. */

/* Плавающая CTA «Оставить заявку» (.buttonlink--filled): на главной это пилюля
   (border-radius:30px, font-weight:400) — правило живёт в parity-sync.css, который
   кейс не грузит, поэтому кнопка откатывалась к легаси-бандлу (15px, font-weight:300 —
   прямоугольник со скруглением, тот самый «старый» вид). Портируем только два
   отличающихся косметических свойства; transform/box-shadow/hover из parity-sync НЕ
   копируем — там translateY(-70%) под лейаут главной, у кейса своё позиционирование. */
.buttonlink.footer__link.application.buttonlink--filled,
.buttonlink.footer__link.application.buttonlink--filled[data-v-e5e2adce] {
  border-radius: 30px !important;
  font-weight: 400 !important;
}

/* Футер: цвет текста (#969696 вместо #777). Легаси-бандл кейса содержит глобальный
   сброс `body,html{color:#969696}` (chunk 2065fa1.css, тёмная тема самой страницы
   кейса) — он побеждает по порядку источников над `body{color:#777}` из того же
   бандла. На главной футер наследует #777. Ограничиваем откат только футером,
   чтобы не задеть тёмный текст остального контента кейса. */
.footer-modern {
  color: #777 !important;
}

/* Раскладка/цвета контактов и соцсетей в оверлее бургера, пилюли CTA-кнопок
   там же и скрытие компактного .navigation-menu при открытом меню — теперь
   в общих sections/header.css и sections/footer-burger-chrome.css (см. шапку
   файла выше). */

/* «Больше кейсов»: ссылка .last-case («Смотреть больше кейсов») должна быть
   последней ячейкой ряда сетки, а не улетать одна на отдельную строку —
   тот же принцип, что и на главной (там на 4 колонках прячут 8-ю карточку,
   чтобы 7 карточек + ссылка = ровно 2 полных ряда). У кейса 6 живых карточек;
   на ширинах, где сетка 3 колонки (типичный десктоп), 6 карточек дают 2 полных
   ряда — ссылка проваливается в одиночный 3-й ряд. Прячем последнюю (6-ю)
   карточку: 5 карточек + ссылка = 6 = ровно 2 ряда, ссылка — 3-й (последней)
   ячейкой второго ряда. */
.more-cases__item > .case:nth-of-type(6) {
  display: none;
}

/* Полоса перед футером: легаси-бандл кейса задаёт .footer-modern
   {background:rgb(25,26,27)} — на градиентном фоне страницы верхний край
   тёмного футера рисует чёткую горизонтальную полосу между лид-формой и
   контактной строкой. На страницах нового контура (marketing-dlya-meditsiny,
   главная) футер прозрачный — фон страницы просвечивает насквозь, полосы нет.
   Приводим к тому же — прозрачный фон. */
footer.footer-modern,
footer.footer-modern[data-v-ff4f3948] {
  background-color: transparent !important;
}

/* Кнопка «Отправить» в лид-форме заявки: hover-overlay (`.btn__overlay` —
   белый эллипс, который вырастает при hover через width/height анимацию с
   transform:translate(-50%,-50%)) на кейсе позиционировался JS-обработчиком
   по позиции мыши, но JS не корректировал координаты на половину размера
   эллипса, из-за чего овал уезжал за пределы кнопки и рисовался как «клякса»
   вверху/сбоку. Принудительно центрируем overlay в кнопке — тогда JS-
   обновления игнорируются, и эллипс вырастает ровно из центра, заливая всю
   пилюлю белым. Правило скоупим на inline-форму (`#sa-inline-lead-root`),
   чтобы не задеть саму модалку заявки (`#desktop-order-popup`), у которой
   уже свои правила overlay в parity-sync.css. */
#sa-inline-lead-root .form__submit .btn__overlay {
  top: 50% !important;
  left: 50% !important;
}

/* ── Правки Тани по кейсу Darkrain (2026-07) ───────────────────────── */
/* Правка 1: блок «Какие кампании запускаем» — номер пункта выравнивать
   по верхней строке заголовка, а не по центру: при переносе заголовка
   на 2 строки (напр. п.6) бейдж не должен уезжать вниз. */
.case .campaigns-list li {
  align-items: flex-start;
}

/* Правка 3 (Таня): в разделе «Видеопродакшн» таймлайн-слайдер был смещён вправо
   инлайновым padding-left:79px (вмороженный Vue-стиль) родителя
   .content-bottom.video-production и не совпадал по левому краю с заголовком
   «Видеопродакшн» (как и все нумерованные заголовки — по краю контейнера).
   Родительский padding держит full-bleed видео, поэтому не трогаем его, а
   компенсируем ТОЛЬКО слайдер: сдвигаем на -79px влево и на столько же
   расширяем, чтобы левый край совпал с заголовком, а правый — без пустоты. */
@media (min-width: 1024px) {
  .content-bottom.video-production > .content-slider {
    margin-left: -79px !important;
    width: calc(100% + 79px) !important;
  }
}

/* Правка 4 (Таня): перед лентой фото бренда в разделе «Результаты продвижения
   в соцсетях» отступ был мал (72px) — общее ужатие margin-bottom графиков сделало
   зазор до картинок тесным; на проде здесь 132px. Возвращаем воздух до ритма
   страницы (96px): margin-top первому ряду ленты (тот, что идёт сразу за графиком).
   Родитель display:block → поля соседей схлопываются, поэтому 96px даёт итоговые
   96px; второй ряд ленты следует за первым рядом (не за графиком) и не затронут. */
@media (min-width: 1024px) {
  .content-bottom.targeted-advertising .chart-swiper + .slider-container {
    margin-top: 96px !important;
  }
}