/* ═══════════════════════════════════════════════════════════════════════
   Страница направления, двухколонный макет (2026-08-05).

   Референс — suitsupply.com/es-es/returns-refunds.html: наверху название
   направления с линией, слева перечень услуг этого направления с активным
   пунктом, справа текст. Тот же каркас стоит и на страницах конкретных
   услуг, поэтому меню не меняется при переходе — меняется только правая
   колонка и выделенный пункт.

   Палитра берётся из светлой шкалы terracotta (см. home-redesign.css).
   Здесь она объявлена локально: страницы направлений не подключают
   home-redesign.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* Страница целиком светлая: tokens.css всё ещё держит тёмную шкалу, а
   шапка с подвалом уже переехали на terracotta. Файл подключается только
   на страницах этого макета, поэтому правило безопасно. */
html, body { background: #FFFBF7; }
body { color: #2D2D2D; }

/* main ужат до 960px (desktop.css) — на этих страницах контент идёт во всю
   ширину окна, поля задаёт сам .pillar-split */
body:has(.pillar-split) main {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.pillar-split {
  --ps-bg: #FFFBF7;
  --ps-surface: #F5F0EB;
  --ps-border: #E8DFD1;
  --ps-text: #2D2D2D;
  --ps-text-sub: #4A4A4A;
  --ps-text-muted: #6B6B6B;
  --ps-gold: #C75B39;
  --ps-gold-2: #B04E2F;
  --ps-navy: #1A2B3C;

  /* во всю ширину окна, как у референса: колонки разъезжаются к краям,
     контент держат только боковые поля страницы */
  max-width: none;
  margin: 0;
  padding: 0 clamp(24px, 3vw, 56px);
  font-family: 'Manrope', sans-serif;
  color: var(--ps-text);
}

/* ── шапка направления ── */
.pillar-split__head { padding: 34px 0 0; }
.pillar-split__head h1 {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ps-navy);
}
.pillar-split__head::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 26px;
  background: var(--ps-border);
}

/* ── две колонки ── */
.pillar-split__cols {
  display: grid;
  grid-template-columns: minmax(230px, 30%) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 72px);
  padding-top: 46px;
  align-items: start;
}
.pillar-split__cols > * { min-width: 0; }

/* ── левая колонка: перечень услуг направления ── */
.pillar-nav { position: sticky; top: 28px; }
.pillar-nav ul { list-style: none; margin: 0; padding: 0; }
.pillar-nav li { margin: 0; }
.pillar-nav a,
.pillar-nav__current {
  position: relative;
  display: block;
  padding: 13px 0 13px 18px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ps-text-sub);
  text-decoration: none;
  transition: color .25s ease, padding-left .45s cubic-bezier(.17, .84, .44, 1);
}
/* метка активного пункта — точка выезжает из-за левого края, та же
   механика, что у ротатора услуг на главной */
.pillar-nav a::before,
.pillar-nav__current::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ps-gold);
  transform: translate(-14px, -50%);
  opacity: 0;
  transition: opacity .3s ease, transform .45s cubic-bezier(.17, .84, .44, 1);
}
@media (hover: hover) {
  .pillar-nav a:hover { color: var(--ps-navy); }
}
.pillar-nav__current {
  color: var(--ps-navy);
  font-weight: 700;
  padding-left: 22px;
}
.pillar-nav__current::before { opacity: 1; transform: translate(0, -50%); }

/* ── поиск по каталогу ──
   Серый бокс с рамкой выбивался из колонки (Daniil 2026-08-05). Теперь это
   строка в типографике каталога: иконка, текст и линия снизу, которая на
   фокусе становится терракотовой. Выглядит как первый пункт списка, а не
   как чужой виджет. */
.pillar-nav__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--ps-border);
  color: var(--ps-text-muted);
  transition: border-color .25s ease, color .25s ease;
}
.pillar-nav__search:focus-within {
  border-bottom-color: var(--ps-gold);
  color: var(--ps-gold);
}
.pillar-nav__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ps-text);
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  outline: none;
}
.pillar-nav__search input::placeholder { color: var(--ps-text-muted); }
.pillar-nav__empty {
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ps-text-muted);
}

/* ── «Все услуги направления» ──
   Это не пункт каталога, а возврат к обзору направления, поэтому без точки
   и без отступа под неё: строка стоит по левому краю колонки, отделена от
   категорий чертой. */
.pillar-nav__all {
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ps-border);
}
.pillar-nav__all a,
.pillar-nav__all .pillar-nav__current {
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ps-text-muted);
}
.pillar-nav__all a::before,
.pillar-nav__all .pillar-nav__current::before { content: none; }
.pillar-nav__all .pillar-nav__current { color: var(--ps-navy); }
@media (hover: hover) {
  .pillar-nav__all a:hover { color: var(--ps-gold); }
}

/* ── категория-аккордеон ── */
.pillar-cat + .pillar-cat { border-top: 1px solid var(--ps-border); }
/* при deep-link скролле категория не должна нырять под липкую шапку */
.pillar-cat { scroll-margin-top: 110px; }

/* ── вспышка категории при переходе из мегаменю ──
   Класс вешает pillar-split.js после подскролла: терракотовая заливка
   дважды пульсирует и гаснет. box-shadow тем же цветом расширяет поле
   подсветки за края текста, не трогая геометрию колонки. */
@keyframes pillarCatFlash {
  0%   { background-color: rgba(199, 91, 57, 0);   box-shadow: 0 0 0 10px rgba(199, 91, 57, 0); }
  18%  { background-color: rgba(199, 91, 57, .16); box-shadow: 0 0 0 10px rgba(199, 91, 57, .16); }
  48%  { background-color: rgba(199, 91, 57, .05); box-shadow: 0 0 0 10px rgba(199, 91, 57, .05); }
  68%  { background-color: rgba(199, 91, 57, .13); box-shadow: 0 0 0 10px rgba(199, 91, 57, .13); }
  100% { background-color: rgba(199, 91, 57, 0);   box-shadow: 0 0 0 10px rgba(199, 91, 57, 0); }
}
.pillar-cat.is-hilite {
  border-radius: 8px;
  animation: pillarCatFlash 1.8s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  /* без пульсации: ровная лёгкая заливка, JS снимет класс по таймеру */
  .pillar-cat.is-hilite {
    animation: none;
    background-color: rgba(199, 91, 57, .10);
    box-shadow: 0 0 0 10px rgba(199, 91, 57, .10);
  }
}
.pillar-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 0;
  background: none;
  border: 0;
  color: var(--ps-navy);
  font-family: 'Manrope', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.pillar-cat__head svg {
  flex: 0 0 auto;
  color: var(--ps-text-muted);
  transition: transform .3s cubic-bezier(.17, .84, .44, 1);
}
.pillar-cat.is-open .pillar-cat__head svg { transform: rotate(180deg); }
@media (hover: hover) {
  .pillar-cat__head:hover { color: var(--ps-gold); }
}
/* Список внутри категории.
   Раньше высота анимировалась через grid-template-rows: 0fr → 1fr. Приём
   опирается на интерполяцию fr-треков; там, где её нет, трек остаётся
   нулевым и категория не раскрывается. max-height анимируется везде,
   а высота здесь предсказуема: самая длинная категория — 11 пунктов
   (≈450px), запас 1200px даёт двойной зазор. */
.pillar-cat__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .34s cubic-bezier(.17, .84, .44, 1);
}
.pillar-cat.is-open > .pillar-cat__panel { max-height: 1200px; }
.pillar-cat__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.pillar-cat__list > li:first-child { padding-top: 2px; }
.pillar-cat__list > li:last-child { padding-bottom: 10px; }
.pillar-cat__list a,
.pillar-cat__list .pillar-nav__current {
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 14.5px;
}

/* ── «Индивидуальные документы» ── */
.pillar-nav__custom {
  display: block;
  margin-top: 18px;
  padding: 16px;
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: 8px;
  text-decoration: none;
}
.pillar-nav__custom b {
  display: block;
  margin-bottom: 6px;
  color: var(--ps-navy);
  font-size: 14.5px;
  font-weight: 700;
}
.pillar-nav__custom span {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ps-text-muted);
}
@media (hover: hover) {
  .pillar-nav__custom:hover { border-color: var(--ps-gold); }
  .pillar-nav__custom:hover b { color: var(--ps-gold); }
}

.pillar-nav__div { height: 1px; margin: 18px 0; background: var(--ps-border); }
.pillar-nav__cities {
  padding-left: 18px;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ps-text-muted);
}
/* display: inline — иначе ссылки городов наследуют блочный показ пунктов
   меню и встают столбиком, а запятые повисают отдельными строками */
.pillar-nav__cities a {
  display: inline;
  padding: 0;
  font-size: 13px;
  color: var(--ps-gold);
  text-decoration: none;
}
@media (hover: hover) {
  .pillar-nav__cities a:hover { color: var(--ps-gold-2); }
}

/* ── правая колонка: текст ── */
/* строка держится читаемой длины, но колонка тянется — как у референса,
   где текст занимает середину экрана, а справа остаётся воздух */
.pillar-doc { max-width: 900px; }
.pillar-doc h2 {
  margin: 0 0 18px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ps-navy);
}
.pillar-doc h3 {
  margin: 34px 0 12px;
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ps-navy);
}
.pillar-doc p,
.pillar-doc li {
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--ps-text-sub);
}
.pillar-doc p { margin: 0 0 16px; }
.pillar-doc ul, .pillar-doc ol { margin: 0 0 18px; padding-left: 20px; }
.pillar-doc li { margin-bottom: 8px; }
.pillar-doc b, .pillar-doc strong { color: var(--ps-navy); font-weight: 700; }
.pillar-doc a { color: var(--ps-gold); text-decoration: none; }
@media (hover: hover) {
  .pillar-doc a:hover { color: var(--ps-gold-2); }
}
/* первый абзац после заголовка — крупнее, как подводка. Тело pillar-а
   генератор оборачивает в .pillar-body, поэтому селектор без > */
.pillar-doc h2 + p { font-size: 18px; color: var(--ps-text); }

/* ── шаги процедуры ── */
.pillar-steps {
  counter-reset: step;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}
.pillar-steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 22px 46px;
}
.pillar-steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ps-border);
  border-radius: 50%;
  background: var(--ps-surface);
  color: var(--ps-gold);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
}
/* Нить между шагами — вертикальный вариант дорожки с главной: серая линия
   и терракотовая заливка поверх, растущая сверху вниз по мере скролла
   (--seg 0…1 пишет pillar-split.js). */
.pillar-steps > li::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 34px;
  /* до самой границы пункта: ниже неё сразу начинается кружок следующего
     шага, поэтому нить стыкуется с ним без разрыва */
  bottom: 0;
  width: 1px;
  background:
    linear-gradient(var(--ps-gold) 0 0) no-repeat top / 100% calc(var(--seg, 0) * 100%),
    var(--ps-border);
}
.pillar-steps > li:last-child { padding-bottom: 0; }
.pillar-steps > li:last-child::after { display: none; }
/* кружок загорается, когда дорожка до него дошла */
.pillar-steps > li::before {
  transition: background .35s ease, border-color .35s ease, color .35s ease;
}
.pillar-steps > li.is-on::before {
  background: var(--ps-gold);
  border-color: var(--ps-gold);
  color: #FFFBF7;
  /* «бульк» — тот же упругий скачок, что у шагов на главной */
  animation: pillarStepPop .55s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes pillarStepPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.24); }
  70%  { transform: scale(.95); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pillar-steps > li::before { transition: none; }
  .pillar-steps > li.is-on::before { animation: none; }
}

.pillar-step__title {
  display: block;
  margin-bottom: 5px;
  color: var(--ps-navy);
  font-size: 16px;
  font-weight: 700;
}
.pillar-step__text {
  display: block;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ps-text-sub);
}

/* ── цитата-акцент ── */
.pillar-quote {
  margin: 30px 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--ps-gold);
}
.pillar-quote p {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ps-navy);
}

/* ── выделенный блок: условия, оговорки ── */
.pillar-note {
  margin: 26px 0;
  padding: 18px 20px;
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: 8px;
  font-size: 15.5px !important;
  line-height: 1.65;
  color: var(--ps-text-sub);
}

/* лента фактов под заголовком (цена / срок / охват) */
.pillar-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin: 0 0 26px;
}
.pillar-facts span {
  display: block;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ps-text-muted);
}
.pillar-facts b {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ps-gold);
}

/* кнопка-раскрытие меню — только на узком экране */
.pillar-nav__toggle { display: none; }

/* ── мобильная раскладка ──
   Перечень из десяти пунктов занимал первый экран целиком, и текст уезжал
   под него. Сворачиваем меню за кнопку с названием текущей страницы: сразу
   видно, где ты, и текст начинается высоко. */
@media (max-width: 899px) {
  .pillar-split__cols {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 22px;
  }
  .pillar-nav { position: static; }

  .pillar-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 15px 16px;
    background: var(--ps-surface);
    border: 1px solid var(--ps-border);
    border-radius: 8px;
    color: var(--ps-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }
  .pillar-nav__toggle svg {
    flex: 0 0 auto;
    transition: transform .3s cubic-bezier(.17, .84, .44, 1);
  }
  .pillar-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* Раскрытие панели каталога.
     Раньше высота анимировалась через grid-template-rows: 0fr → 1fr.
     Приём опирается на интерполяцию fr-треков — она есть в актуальных
     браузерах, но это самое хрупкое место всей навигации: если движок её
     не поддерживает, трек остаётся нулевым и каталог из 64 услуг просто
     не открывается. max-height анимируется везде.
     Запас в 400vh (на телефоне ≈ 3200px) перекрывает даже состояние, где
     раскрыты все категории; overflow-y на внутренней обёртке — страховка
     на случай, если контент когда-нибудь перерастёт и это значение. */
  .pillar-nav__panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height .38s cubic-bezier(.17, .84, .44, 1);
  }
  .pillar-nav.is-open .pillar-nav__panel { max-height: 400vh; }
  .pillar-nav__panel > .pillar-nav__inner {
    max-height: 400vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pillar-nav__inner > ul { padding-top: 6px; }

  .pillar-nav__div { margin: 14px 0; }
}

/* ── финальный CTA ──
   modules/final_cta.html красится из tokens.css, то есть по тёмной шкале:
   на светлой странице выходил тёмный блок с navy-заголовком поверх. Здесь
   он повторяет вид CTA на главной. */
.pillar-split ~ .final-cta,
body:has(.pillar-split) .final-cta {
  background: #F5F0EB !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: clamp(52px, 6vw, 88px) clamp(24px, 4.5vw, 88px) !important;
  text-align: center;
}
body:has(.pillar-split) .final-cta h2 {
  margin: 0 0 12px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  color: #1A2B3C;
}
body:has(.pillar-split) .final-cta p {
  margin: 0 auto 26px;
  max-width: 640px;
  font-size: 16.5px;
  line-height: 1.7;
  color: #4A4A4A;
}
body:has(.pillar-split) .final-cta .btn--gold {
  display: inline-block;
  padding: 17px 34px;
  background: #C75B39;
  border: 0;
  border-radius: 0;
  color: #FFFBF7;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}
@media (hover: hover) {
  body:has(.pillar-split) .final-cta .btn--gold:hover { background: #B04E2F; }
}

@media (prefers-reduced-motion: reduce) {
  .pillar-nav a,
  .pillar-nav__current,
  .pillar-nav a::before,
  .pillar-nav__current::before,
  .pillar-nav__panel,
  .pillar-nav__toggle svg { transition: none; }
}

/* ═══ Страницы конкретных услуг (2026-08-05) ═══
   Тот же каркас, что у страницы направления; ниже — блоки, которые
   появляются только в тексте услуги: список с галочками, FAQ-аккордеон
   и карточки смежных услуг. */

/* ── список «что вы получаете» ── */
.pillar-doc .pillar-checks {
  list-style: none;
  margin: 0 0 22px;
  padding-left: 0;
}
.pillar-doc .pillar-checks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 9px;
}
.pillar-checks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ps-gold);
  font-weight: 700;
}

/* ── FAQ-аккордеон ──
   Нативный <details>: клавиатура и aria бесплатно, без скрипта.
   Типографика в ритме левого каталога — строка с чертой снизу,
   плюс превращается в крест при раскрытии. */
.pillar-doc details.pillar-faq { border-bottom: 1px solid var(--ps-border); }
.pillar-doc details.pillar-faq:first-of-type { border-top: 1px solid var(--ps-border); }
.pillar-faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  list-style: none;
  cursor: pointer;
  color: var(--ps-navy);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}
.pillar-faq summary::-webkit-details-marker { display: none; }
.pillar-faq summary::after {
  content: '+';
  flex: 0 0 auto;
  color: var(--ps-gold);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transition: transform .3s cubic-bezier(.17, .84, .44, 1);
}
.pillar-faq[open] summary::after { transform: rotate(45deg); }
@media (hover: hover) {
  .pillar-faq summary:hover { color: var(--ps-gold); }
}
.pillar-faq__a { padding: 0 0 18px; }
.pillar-faq__a p { margin: 0; font-size: 15.5px; }

/* ── «Статьи по теме» ──
   Обратная перелинковка с блогом: услуга продаёт, статья объясняет. */
.pillar-guides { margin-top: 34px; }
.pillar-guides ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ps-border);
}
.pillar-guides li { border-bottom: 1px solid var(--ps-border); margin: 0; }
.pillar-guides a {
  display: block;
  padding: 12px 0;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ps-text-sub);
  text-decoration: none;
  transition: color .2s ease, padding-left .3s cubic-bezier(.17, .84, .44, 1);
}
@media (hover: hover) {
  .pillar-guides a:hover { color: var(--ps-gold); padding-left: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .pillar-guides a { transition: none; }
}

/* ── карточки смежных услуг ──
   Перелинковка внутри направления: под текстом услуги стоят 2–3 соседние
   доверенности, чтобы посетитель ушёл на смежную задачу, а не с сайта. */
.pillar-cards-block { margin-top: 40px; }
.pillar-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.pillar-cards a {
  display: block;
  padding: 20px 18px;
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color .25s ease;
}
.pillar-cards b {
  display: block;
  margin-bottom: 7px;
  color: var(--ps-navy);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
  transition: color .25s ease;
}
.pillar-cards span {
  display: block;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ps-text-muted);
}
@media (hover: hover) {
  .pillar-cards a:hover { border-color: var(--ps-gold); }
  .pillar-cards a:hover b { color: var(--ps-gold); }
}
@media (prefers-reduced-motion: reduce) {
  .pillar-faq summary::after,
  .pillar-cards a,
  .pillar-cards b { transition: none; }
}