/* ============================================================
   БЛОК «ФОРМАТЫ» — Рекламная группа БАРС (перенос со staging).
   Все селекторы живут ТОЛЬКО под корневым классом .bars-fmt —
   в тему WP ничего не протекает, глобальные теги не трогаются.
   0 внешних CDN и шрифтов: только системные шрифты.
   ============================================================ */

.bars-fmt {
  /* палитра и константы блока */
  --bf-orange: #BF5724;
  --bf-orange-hot: #FF6A2C;
  --bf-orange-soft: #E0824E;
  --bf-ink: #0a0805;
  --bf-paper: #f4ece4;
  --bf-paper-dim: #c3b8ab;
  --bf-line: rgba(191,87,36,.24);
  --bf-max: 1240px;
  --bf-ease: cubic-bezier(.16,.84,.34,1);
  --bf-ease-slow: cubic-bezier(.22,1,.36,1);
  --bf-ease-fmt: cubic-bezier(.76,0,.24,1);
  /* Резерв до запуска JS. Скрипт измеряет шапку реальной темы:
     desktop/mobile fixed, на планшете — обычный поток. */
  --bf-header: 149px;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  scroll-margin-top: var(--bf-header); /* якорь #formats встаёт под шапку, не под неё */
  background: var(--bf-ink);
  color: var(--bf-paper);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;
  line-height: 1.4;
  /* высота: почти весь первый экран, но никогда не выше вьюпорта */
  height: min(calc(100vh - var(--bf-header)), 950px);
  height: min(calc(100svh - var(--bf-header)), 950px);
  /* min-height ниже «окно − шапка» для любого окна от 640: раньше стояло 620px,
     и на 1280×720 блок (149 + 620 = 769) вылезал за низ окна вместе с кнопками */
  min-height: 480px;
  text-align: left;
}

/* локальный сброс — только внутри блока, тему не трогаем */
.bars-fmt *, .bars-fmt *::before, .bars-fmt *::after { box-sizing: border-box; }
.bars-fmt h3, .bars-fmt p { margin: 0; padding: 0; }
.bars-fmt h3 { font-family: inherit; }
.bars-fmt a { text-decoration: none; color: inherit; }
.bars-fmt img { border: 0; box-shadow: none; border-radius: 0; max-width: none; }
.bars-fmt button { font: inherit; }

/* ---------- трек и слайды ---------- */
/* длительность перехода: JS читает её отсюда (transition-duration трека),
   менять только здесь; ниже стаггер текста укладывается в те же ~1.2–1.8 с */
.bars-fmt-track {
  display: flex; height: 100%; width: 100%;
  transition: transform 1.2s var(--bf-ease-fmt);
  will-change: transform;
}
.bars-fmt-slide {
  position: relative; flex: 0 0 100%; width: 100%; height: 100%;
  display: flex; align-items: center; overflow: hidden; isolation: isolate;
}

/* фото слайда: <img> ради alt/lazy, ведёт себя как background cover */
.bars-fmt-photo {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
  transform: scale(1.12);
  filter: saturate(.82) brightness(.82) contrast(1.02);
  transition: transform 1.2s var(--bf-ease-slow);
}
.bars-fmt-slide.is-active .bars-fmt-photo { transform: scale(1.03); }

/* тонировка: ink-замок сверху/снизу + тёмная колонка под текстом + тёплый отсвет.
   Нижние ~14% уходят в сплошной тёмный — аккуратный ровный край перед
   светло-серой секцией темы. */
.bars-fmt-tint {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(180deg,rgba(10,8,5,.96) 0%,rgba(10,8,5,0) 14%,rgba(10,8,5,0) 86%,rgba(10,8,5,.98) 100%),
    linear-gradient(180deg,rgba(10,8,5,.55) 0%,rgba(10,8,5,.28) 28%,rgba(10,8,5,.66) 78%,rgba(10,8,5,.98) 100%),
    linear-gradient(90deg,rgba(10,8,5,.95) 0%,rgba(10,8,5,.78) 34%,rgba(10,8,5,.34) 64%,rgba(10,8,5,.5) 100%),
    radial-gradient(80% 70% at 80% 24%,rgba(191,87,36,.18),transparent 62%);
}
/* тёплый цветовой отлив поверх фото (вместо mix-blend на ::after у фона) */
.bars-fmt-slide::before {
  content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none;
  mix-blend-mode: color;
  background: linear-gradient(125deg,rgba(191,87,36,.26),rgba(14,42,44,.3) 70%,rgba(10,8,5,.34));
}

/* ---------- контент ---------- */
.bars-fmt-inner {
  position: relative; z-index: 2; width: 100%; max-width: var(--bf-max);
  margin: 0 auto; padding: 0 clamp(20px,5vw,56px);
  display: flex; align-items: center;
  /* нижний отступ = высота панели листания на низких окнах (≈78px при ≤755),
     чтобы центр контента считался над панелью, а не по всему блоку;
     на высоких окнах (≥900) сходит к 12–20px — композиция там почти не меняется */
  padding-bottom: clamp(12px, 380px - 40vh, 78px);
}
.bars-fmt-wrap { position: relative; width: 100%; }

/* контурное число справа */
.bars-fmt-num {
  position: absolute; top: clamp(48px,9vh,110px); right: clamp(16px,6vw,100px); z-index: -1;
  font-size: clamp(120px,24vw,340px); font-weight: 900; line-height: .8; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(244,236,228,.16); pointer-events: none;
  font-variant-numeric: tabular-nums;
}
/* призрачное число за текстом */
.bars-fmt-big {
  position: absolute; right: clamp(-1vw,1vw,3vw); bottom: -6vh; z-index: -1;
  font-size: clamp(200px,34vh,400px); font-weight: 900; color: rgba(255,255,255,.05);
  letter-spacing: -.06em; line-height: .78; pointer-events: none; font-variant-numeric: tabular-nums;
}

/* кольца */
.bars-fmt-ring { position: absolute; z-index: -1; pointer-events: none; }
.bars-fmt-ring svg { display: block; width: 100%; height: 100%; }
.bars-fmt-ring circle { fill: none; stroke: rgba(255,106,44,.4); stroke-width: 1; }
.bars-fmt-ring.r1 { top: 11vh; right: 13vw; width: clamp(180px,22vw,300px); height: clamp(180px,22vw,300px); }
.bars-fmt-ring.r2 { bottom: 14vh; right: 28vw; width: 150px; height: 150px; }
.bars-fmt-ring.r2 circle { stroke: rgba(244,236,228,.18); }
.bars-fmt-ring .orb {
  position: absolute; top: 50%; left: 100%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--bf-orange-hot);
  box-shadow: 0 0 14px 2px rgba(255,106,44,.7); transform-origin: -50% 50%;
}
.bars-fmt-slide.is-active .bars-fmt-ring .orb { animation: bars-fmt-orbit 9s linear infinite; }
@keyframes bars-fmt-orbit { to { transform: rotate(360deg); } }

/* киккер-тег */
.bars-fmt-tag {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--bf-orange-hot); font-weight: 800; margin-bottom: clamp(8px, 2vh, 18px);
  display: inline-flex; align-items: center; gap: 11px;
}
.bars-fmt-tag::before { content: ""; width: 26px; height: 1px; background: var(--bf-orange-hot); }

/* заголовок */
.bars-fmt-h-link { display: inline-block; }
.bars-fmt h3 {
  /* вторая граница — по высоте окна: 10.3vh = 92px при 900, 66px при 640 */
  font-size: min(clamp(40px,6.6vw,92px), 10.3vh); font-weight: 900; letter-spacing: -.03em; line-height: .92;
  color: var(--bf-paper); text-shadow: 0 2px 44px rgba(0,0,0,.65); text-transform: none;
}
.bars-fmt h3 em {
  font-style: normal;
  background: linear-gradient(100deg,var(--bf-orange-hot),var(--bf-orange-soft) 60%,#ffd0a8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* акцент-линия с точкой */
.bars-fmt-ln {
  display: block; position: relative; width: clamp(64px,9vw,120px); height: 2px; margin: clamp(10px, 2.7vh, 24px) 0 0;
  background: linear-gradient(90deg,var(--bf-orange-hot),transparent); transform-origin: left center;
}
.bars-fmt-ln .dot {
  position: absolute; top: 50%; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--bf-orange-hot); box-shadow: 0 0 14px 2px rgba(255,106,44,.7);
  transform: translate(-50%,-50%);
}

/* лид и текст.
   Отступы у p задаются ТОЛЬКО селектором с префиксом `.bars-fmt .bars-fmt-…`:
   локальный сброс `.bars-fmt p {margin:0}` (0,1,1) перебивает одиночный класс
   (0,1,0) — так margin-top у лида и описания молча обнулялся, и заголовок
   налипал на лид (замер 04.09: box-зазор 0, чернила ~12px).
   Между лидом и описанием — короткая оранжевая черта (::after у лида, без
   лишней разметки в слайдах): 16px над чертой, 18px под ней; оба отступа несёт
   сама черта, display:flow-root у лида оставляет нижний отступ внутри лида. */
.bars-fmt .bars-fmt-lead {
  margin-top: clamp(12px, 2.9vh, 26px); color: #fff; font-size: min(clamp(17px,1.9vw,22px), max(15.5px, 2.45vh)); font-weight: 700;
  line-height: 1.4; max-width: 42ch; letter-spacing: -.01em; text-shadow: 0 1px 20px rgba(0,0,0,.75);
  display: flow-root;
}
.bars-fmt-lead::after {
  content: ""; display: block; width: 52px; height: 2px; border-radius: 2px;
  margin: clamp(8px, 1.8vh, 16px) 0 clamp(9px, 2vh, 18px); background: var(--bf-orange-hot);
  box-shadow: 0 0 10px rgba(255,106,44,.45);
}
.bars-fmt-text {
  color: var(--bf-paper-dim); font-size: min(clamp(14.5px,1.5vw,17px), max(13.5px, 1.9vh)); line-height: 1.6;
  max-width: 52ch; font-weight: 500; text-shadow: 0 1px 16px rgba(0,0,0,.7);
}

/* чипы-места */
.bars-fmt-places { margin-top: clamp(14px, 3.2vh, 28px); display: flex; flex-wrap: wrap; gap: 10px 12px; max-width: 56ch; }
.bars-fmt-places span {
  display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; letter-spacing: .01em;
  color: var(--bf-paper); border: 1px solid var(--bf-line); border-radius: 50px; padding: clamp(6px, 1vh, 9px) 16px;
  background: rgba(10,8,5,.4); font-weight: 600;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.bars-fmt-places span b { color: var(--bf-orange-soft); font-weight: 800; font-variant-numeric: tabular-nums; }
.bars-fmt-places span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bf-orange-hot); flex: none; }

/* CTA: оранжевая кнопка заявки + текстовая ссылка в раздел */
.bars-fmt-cta { margin-top: clamp(16px, 3.6vh, 32px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.bars-fmt-btn {
  display: inline-flex; align-items: center; gap: 11px;
  background: linear-gradient(120deg,var(--bf-orange-hot),var(--bf-orange));
  color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .02em;
  padding: clamp(11px, 1.7vh, 15px) 28px; border-radius: 60px; border: 0;
  box-shadow: 0 10px 30px rgba(191,87,36,.35);
  transition: transform .25s var(--bf-ease), box-shadow .4s var(--bf-ease);
}
.bars-fmt-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(191,87,36,.5); color: #fff; }
.bars-fmt-btn .arr { font-size: 18px; transition: transform .4s var(--bf-ease); }
.bars-fmt-btn:hover .arr { transform: translateX(5px); }
.bars-fmt-go {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--bf-orange-soft); font-weight: 700; font-size: 14.5px; letter-spacing: .02em;
}
.bars-fmt-go:hover { color: var(--bf-orange-soft); }
.bars-fmt-go .arr { transition: transform .4s var(--bf-ease); }
.bars-fmt-go:hover .arr { transform: translateX(6px); }

/* ---------- плавающие декор-кольца ---------- */
.bars-fmt-float { position: absolute; z-index: 1; pointer-events: none; opacity: .5; transition: transform 1.35s var(--bf-ease-fmt); }
.bars-fmt-float svg circle { fill: none; stroke-width: 1; }
.bars-fmt-float.f1 { top: 16%; left: 7vw; }
.bars-fmt-float.f2 { bottom: 15%; left: 58vw; }
.bars-fmt-float.f3 { top: 28%; left: 40vw; }

/* ---------- панель управления ---------- */
.bars-fmt-hud {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: clamp(8px, 1.6vh, 14px) clamp(20px,5vw,56px) clamp(14px,2.6vh,24px);
}
.bars-fmt-arrows { display: flex; gap: 10px; }
.bars-fmt-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(244,236,228,.3); background: rgba(10,8,5,.45);
  color: var(--bf-paper); font-size: 18px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .3s, background .3s, color .3s;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: 0; margin: 0; appearance: none; -webkit-appearance: none;
}
.bars-fmt-arrow:hover { border-color: var(--bf-orange-hot); background: rgba(191,87,36,.25); color: #fff; }
/* точки без подписей; кнопка шире точки — чтобы в неё попадали мышью */
.bars-fmt-dots { display: flex; gap: 4px; align-items: center; }
.bars-fmt-dots .hdot {
  display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer;
  padding: 8px 7px; margin: 0; appearance: none; -webkit-appearance: none;
}
.bars-fmt-dots .hdot i { display: block; width: 9px; height: 9px; border-radius: 50%; background: rgba(244,236,228,.25); transition: background .35s, transform .35s; }
.bars-fmt-dots .hdot.active i { background: var(--bf-orange-hot); transform: scale(1.4); box-shadow: 0 0 12px var(--bf-orange-hot); }
/* полоса внизу справа: формат N из 4 */
.bars-fmt-bar { position: relative; flex: 1; max-width: 320px; height: 2px; background: rgba(244,236,228,.16); border-radius: 2px; overflow: hidden; }
.bars-fmt-bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 25%; background: linear-gradient(90deg,var(--bf-orange),var(--bf-orange-hot)); transition: width 1.2s var(--bf-ease-fmt); }

/* видимый фокус с клавиатуры */
.bars-fmt a:focus-visible,
.bars-fmt button:focus-visible { outline: 2px solid var(--bf-orange-hot); outline-offset: 3px; border-radius: 4px; }
.bars-fmt-arrow:focus-visible { border-radius: 50%; }

/* ---------- хореография смены слайда (только при работающем JS) ----------
   База .fx скрыта ТОЛЬКО под .bars-fmt.js: без JS весь контент виден статично,
   краулер и посетитель без скриптов получают полный текст. */
.bars-fmt.js .bars-fmt-slide .fx {
  opacity: 0; transform: translateX(46px);
  transition: opacity 1.05s var(--bf-ease-slow), transform 1.2s var(--bf-ease-fmt);
}
.bars-fmt.js .bars-fmt-slide .bars-fmt-ln.fx { transform: translateX(46px) scaleX(0); }
.bars-fmt.js .bars-fmt-slide h3.fx { transform: translateX(60px); }
.bars-fmt.js .bars-fmt-slide.is-active .fx { opacity: 1; transform: none; }
.bars-fmt.js .bars-fmt-slide.is-active .bars-fmt-ln.fx { opacity: 1; transform: scaleX(1); }
/* стаггер: тег → линия → заголовок → лид → текст → чипы → CTA;
   последний элемент доходит за ~1.8 с от начала перехода */
.bars-fmt.js .bars-fmt-slide.is-active .bars-fmt-tag.fx { transition-delay: .11s; }
.bars-fmt.js .bars-fmt-slide.is-active .bars-fmt-ln.fx { transition-delay: .19s; }
.bars-fmt.js .bars-fmt-slide.is-active h3.fx { transition-delay: .27s; }
.bars-fmt.js .bars-fmt-slide.is-active .bars-fmt-lead.fx { transition-delay: .37s; }
.bars-fmt.js .bars-fmt-slide.is-active .bars-fmt-text.fx { transition-delay: .45s; }
.bars-fmt.js .bars-fmt-slide.is-active .bars-fmt-places.fx { transition-delay: .53s; }
.bars-fmt.js .bars-fmt-slide.is-active .bars-fmt-cta.fx { transition-delay: .61s; }
/* число и кольца: проявление + вкручивание */
.bars-fmt.js .bars-fmt-num { opacity: 0; transform: translateX(70px); transition: opacity 1.2s var(--bf-ease-slow), transform 1.35s var(--bf-ease-fmt); }
.bars-fmt.js .bars-fmt-slide.is-active .bars-fmt-num { opacity: 1; transform: none; }
.bars-fmt.js .bars-fmt-ring { opacity: 0; transform: scale(.4) rotate(40deg); transition: opacity 1.2s var(--bf-ease-slow), transform 1.45s var(--bf-ease-fmt); }
.bars-fmt.js .bars-fmt-ring.r2 { transform: scale(.4) rotate(-55deg); }
.bars-fmt.js .bars-fmt-slide.is-active .bars-fmt-ring { opacity: 1; transform: none; transition-delay: .16s; }

/* ---------- адаптив ---------- */
/* низкое окно компьютера (ноутбук 1366×768, 1280×720, 1024×640, браузер на экране
   1440×900 с панелями): текст плотнее и колонка шире, чтобы лид и описание
   занимали на строку меньше */
@media (min-width: 881px) and (max-height: 880px) {
  .bars-fmt .bars-fmt-lead { line-height: 1.32; max-width: 50ch; }
  .bars-fmt-text { line-height: 1.5; max-width: 62ch; }
}
@media (max-width: 1024px) {
  .bars-fmt h3 { font-size: clamp(38px,7.4vw,72px); }
  .bars-fmt-ring.r2 { right: 20vw; }
}
@media (max-width: 880px) {
  /* телефон: шапка (.mobile-container) по замеру 02.09.2026 — fixed 129px,
     контент темы стартует со 130px (body padding-top 130px) → берём 130 */
  .bars-fmt { min-height: 560px; --bf-header: 130px; }
  .bars-fmt-big { display: none; }
  .bars-fmt-num { font-size: 30vw; top: 7vh; right: 14px; -webkit-text-stroke-width: 1px; }
  .bars-fmt-ring.r1 { width: 140px; height: 140px; right: 6vw; top: 9vh; }
  .bars-fmt-ring.r2 { display: none; }
  .bars-fmt-float { display: none; }
  .bars-fmt .bars-fmt-lead { font-size: 16.5px; margin-top: 16px; }
  .bars-fmt-lead::after { width: 40px; margin: 12px 0 14px; }
  .bars-fmt-text { font-size: 14.5px; max-width: 100%; }
  /* описание на телефоне: первое предложение целиком, остальное скрыто стилями —
     текст остаётся в разметке (краулер и читалка его видят), обрезки «…» нет */
  .bars-fmt-text-rest { display: none; }
  .bars-fmt-bar { display: none; }
}
@media (max-width: 560px) {
  .bars-fmt h3 { font-size: clamp(34px,11vw,52px); }
  .bars-fmt-inner { padding-top: 44px; padding-bottom: 84px; }
  .bars-fmt-places { gap: 8px; }
  .bars-fmt-places span { font-size: 12px; padding: 7px 12px; }
  .bars-fmt-text { font-size: 14px; line-height: 1.5; }
  .bars-fmt-btn { font-size: 14px; padding: 13px 22px; }
  .bars-fmt-cta { gap: 12px 18px; }
  .bars-fmt-hud { padding-bottom: 14px; }
  .bars-fmt-arrow { width: 40px; height: 40px; }
}
/* короткий телефон (360×640 и похожие): блок не выше экрана, но контент в него
   не помещался — первое предложение и чипы формата 03 вылезали на панель.
   Здесь блок берёт высоту от контента (не меньше экрана под шапкой), отступы
   и чипы плотнее; ни один элемент не прячется и не обрезается. */
@media (max-width: 560px) and (max-height: 700px) {
  .bars-fmt { height: auto; min-height: calc(100svh - var(--bf-header)); }
  .bars-fmt-inner { padding-top: 22px; padding-bottom: 74px; }
  .bars-fmt .bars-fmt-lead { margin-top: 10px; font-size: 15.5px; line-height: 1.35; }
  .bars-fmt-lead::after { margin: 9px 0 11px; }
  .bars-fmt-text { line-height: 1.45; }
  .bars-fmt-places { gap: 6px; }
  .bars-fmt-places span { font-size: 11.5px; padding: 6px 11px; }
  .bars-fmt-cta { gap: 10px 16px; }
  .bars-fmt-btn { padding: 12px 20px; }
}

/* ---------- reduced motion: без автосмены (глушит JS) и без анимаций;
   колесо на компьютере по-прежнему листает форматы, но мгновенно ---------- */
@media (prefers-reduced-motion: reduce) {
  .bars-fmt *, .bars-fmt *::before, .bars-fmt *::after {
    animation: none !important;
    transition: none !important;
  }
  .bars-fmt.js .bars-fmt-slide .fx,
  .bars-fmt.js .bars-fmt-num,
  .bars-fmt.js .bars-fmt-ring { opacity: 1; transform: none; }
  .bars-fmt-photo { transform: scale(1.03) !important; }
}