@charset "utf-8";

/* ══════════════════════════════════════════════════════════════════
   «ВСЕ 32» — секция услуг, АККОРДЕОН
   Заказчик просил убрать вылетающие за курсором фото и дать спойлер
   с подробностями. Здесь: реестр из 11 направлений, раскрытие через
   grid-template-rows 0fr→1fr (height:auto не анимируется).

   Namespace .svc-acc* — сознательно НЕ пересекается со старыми
   .svc / .svc-row / .svc-name / .svc-desc / .svc-go / .svc-peek
   из assets/css/style.css.

   Пастель (--mint / --peri / --pink) идёт ТОЛЬКО заливкой:
   фацетная полоса открытого пункта, гем в надзаголовке. Текстом —
   никогда: мята на белом даёт 1.6:1.
   ══════════════════════════════════════════════════════════════════ */

/* ─── локальные токены ───────────────────────────────────────────── */
.svc-acc-sec{
  --svc-t: .42s;                        /* раскрытие */
  --svc-inset: clamp(10px, 1.5vw, 18px);/* внутренний отступ строки */
  --svc-ease: var(--ease, cubic-bezier(.22,1,.36,1));
}

/* ─── надзаголовок ───────────────────────────────────────────────── */
.svc-acc__eyebrow{
  display:flex; align-items:center; gap:.6em;
  margin:0 0 14px;
  font-family:Onest, system-ui, sans-serif; font-weight:600;
  font-size:.78rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-2, #5F5E64);          /* 6.4:1 на белом */
}
/* гранёный «камень» из знака: мята → сирень → розовый */
.svc-acc__gem{
  width:13px; height:13px; flex:none;
  background:conic-gradient(from 205deg,
    var(--mint, #5CE7BD) 0 33.34%,
    var(--peri, #9797FB) 0 66.67%,
    var(--pink, #F691FB) 0);
  clip-path:polygon(50% 0, 100% 34%, 82% 100%, 18% 100%, 0 34%);
}

.svc-acc__meta{
  margin:14px 0 0;
  font-size:.84rem; line-height:1.5;
  color:var(--ink-2, #5F5E64);
}

/* ─── контейнер ──────────────────────────────────────────────────── */
.svc-acc{
  margin-inline:calc(-1 * var(--svc-inset));
  border-top:1px solid var(--rule, #DEDEE7);
}

.svc-acc__item{
  position:relative;
  border-bottom:1px solid var(--rule, #DEDEE7);
  /* запас под липкую .site-head при переходе по ссылке #svc-<slug> */
  scroll-margin-top:clamp(72px, 11vh, 108px);
  transition:background var(--t-fast, .18s) var(--svc-ease);
}
/* фацетная полоса — появляется только у раскрытого пункта */
.svc-acc__item::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:3px;
  background:linear-gradient(180deg,
    var(--mint, #5CE7BD), var(--peri, #9797FB) 55%, var(--pink, #F691FB));
  transform:scaleY(0); transform-origin:top;
  transition:transform var(--svc-t) var(--svc-ease);
}
.svc-acc__item.is-open::before{transform:scaleY(1)}
.svc-acc__item.is-open{background:var(--band, #F4F5FA)}

/* ─── заголовок-кнопка ───────────────────────────────────────────── */
.svc-acc__h{margin:0; font:inherit; letter-spacing:normal}

.svc-acc__trigger{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;
  gap:clamp(12px, 2vw, 26px);
  width:100%;
  margin:0;
  padding:clamp(20px, 2.4vw, 28px) var(--svc-inset);
  background:none; border:0; border-radius:0;
  text-align:start; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  transition:background var(--t-fast, .18s) var(--svc-ease);
}
.svc-acc__trigger:hover{background:rgba(75,63,214,.045)}
.svc-acc__item.is-open .svc-acc__trigger:hover{background:rgba(75,63,214,.03)}
/* кольцо фокуса внутрь: строка во всю ширину, наружный offset вылезал бы */
.svc-acc__trigger:focus-visible{
  outline:3px solid var(--accent, #4B3FD6);
  outline-offset:-3px;
  border-radius:2px;
}

.svc-acc__num{
  font-family:Unbounded, Onest, sans-serif; font-weight:400;
  font-size:.92rem; line-height:1.5; font-variant-numeric:tabular-nums;
  color:var(--ink-2, #5F5E64);          /* 6.4:1 — читаемо, не декор */
  padding-top:.18em;
  transition:color var(--t-fast, .18s) var(--svc-ease);
}
.svc-acc__item.is-open .svc-acc__num{color:var(--accent, #4B3FD6)}

.svc-acc__text{
  display:grid;
  grid-template-columns:minmax(0, 21rem) minmax(0, 1fr);
  gap:clamp(14px, 2vw, 28px);
  align-items:baseline;
  min-width:0;
}
.svc-acc__name{
  font-family:Unbounded, Onest, sans-serif; font-weight:600;
  font-size:clamp(1.05rem, 1.5vw, 1.36rem); line-height:1.16;
  letter-spacing:-.035em;
  color:var(--ink, #38373A);            /* 10.8:1 */
  hyphens:auto; overflow-wrap:break-word; min-width:0;
}
.svc-acc__short{
  font-size:.99rem; line-height:1.5;
  color:var(--ink-2, #5F5E64);          /* 6.4:1 */
  max-width:52ch; min-width:0;
}

/* знак «плюс» → «минус» */
.svc-acc__sign{
  position:relative; width:20px; height:20px; flex:none; margin-top:.42em;
}
.svc-acc__sign::before,
.svc-acc__sign::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:2px; border-radius:2px;
  background:var(--ink, #38373A);
  transition:transform var(--svc-t) var(--svc-ease);
}
.svc-acc__sign::before{transform:translateY(-50%)}
.svc-acc__sign::after{transform:translateY(-50%) rotate(90deg)}
.svc-acc__item.is-open .svc-acc__sign::after{transform:translateY(-50%) rotate(90deg) scaleX(0)}

/* ─── панель ─────────────────────────────────────────────────────────
   Анимируем grid-template-rows: 0fr → 1fr. height:auto не анимируется,
   max-height с «на глаз» подобранным числом рвётся на длинных списках
   (в Ортопедии 61 позиция).
   Пока JS не отметил контейнер [data-ready], панели РАСКРЫТЫ — без JS
   контент остаётся доступным.
   ──────────────────────────────────────────────────────────────────── */
.svc-acc__panel{
  display:grid; grid-template-rows:1fr;
  transition:grid-template-rows var(--svc-t) var(--svc-ease);
}
.svc-acc[data-ready] .svc-acc__panel{grid-template-rows:0fr}
.svc-acc[data-ready] .svc-acc__item.is-open .svc-acc__panel{grid-template-rows:1fr}

/* ── стартовое состояние ─────────────────────────────────────────────
   Раньше секция сворачивалась только после того, как отработает
   services.js. На глазах у пользователя это выглядело так: первый кадр —
   одиннадцать раскрытых панелей высотой в двенадцать тысяч пикселей,
   потом всё это за 0.42 с складывается, утаскивая вверх остальную
   страницу. Проверено скриншотом headless-браузера — кадр со «сложением»
   поймать удалось.
   Поэтому: при включённом скриптинге сворачиваем сразу, средствами CSS,
   ещё до выполнения скрипта. При выключенном (scripting: none) панели
   остаются раскрытыми — текст читается без JS, как и было задумано.
   Браузеры, не знающие @media scripting, ведут себя по-старому:
   свернётся по [data-ready], но уже без анимации — её глушит [data-boot].
   ──────────────────────────────────────────────────────────────────── */
@media (scripting: enabled){
  .svc-acc .svc-acc__panel{grid-template-rows:0fr}
  .svc-acc .svc-acc__inner{visibility:hidden; content-visibility:hidden}
  .svc-acc .svc-acc__item.is-open .svc-acc__panel{grid-template-rows:1fr}
  .svc-acc .svc-acc__item.is-open .svc-acc__inner{visibility:visible; content-visibility:visible}
  .svc-acc .svc-acc__rest{grid-template-rows:0fr}
  .svc-acc .svc-acc__rest-inner{visibility:hidden}
  .svc-acc .svc-acc__rest.is-open{grid-template-rows:1fr}
  .svc-acc .svc-acc__rest.is-open .svc-acc__rest-inner{visibility:visible}
  .svc-acc .svc-acc__more{display:inline-block}
}
/* первые два кадра после старта скрипта — вообще без переходов, иначе
   в старых браузерах вернётся то же «складывание» */
.svc-acc[data-boot] .svc-acc__panel,
.svc-acc[data-boot] .svc-acc__rest,
.svc-acc[data-boot] .svc-acc__inner,
.svc-acc[data-boot] .svc-acc__rest-inner,
.svc-acc[data-boot] .svc-acc__item::before,
.svc-acc[data-boot] .svc-acc__sign::before,
.svc-acc[data-boot] .svc-acc__sign::after{transition:none !important}

.svc-acc__inner{min-height:0; overflow:hidden}
/* visibility убирает свёрнутое из таб-порядка и из дерева доступности.
   content-visibility дополнительно выкидывает поддерево из вёрстки —
   без него loading="lazy" не срабатывает: свёрнутый аккордеон короткий,
   все 11 панелей попадают в «окрестность вьюпорта» и браузер тянет
   все 22 кадра сразу. Обе смены отложены на время анимации, поэтому
   закрытие не «моргает» (transition-behavior для дискретного свойства). */
.svc-acc[data-ready] .svc-acc__inner{
  visibility:hidden;
  content-visibility:hidden;
  transition:visibility 0s linear var(--svc-t),
             content-visibility 0s linear var(--svc-t);
  transition-behavior:allow-discrete;
}
.svc-acc[data-ready] .svc-acc__item.is-open .svc-acc__inner{
  visibility:visible;
  content-visibility:visible;
  transition-delay:0s;
}

.svc-acc__body{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);
  grid-template-areas:
    "prose figs"
    "prose cta"
    "proc  proc"
    "note  note";
  /* 1-я строка по содержимому фото, 2-я забирает остаток —
     иначе кнопка «уплывает» вниз следом за высокой колонкой текста */
  grid-template-rows:min-content 1fr auto auto;
  align-content:start;
  gap:clamp(22px, 2.6vw, 38px) clamp(24px, 3.4vw, 52px);
  padding:4px var(--svc-inset) clamp(34px, 4vw, 54px);
}

/* ─── текст ──────────────────────────────────────────────────────── */
.svc-acc__prose{grid-area:prose; min-width:0}
.svc-acc__prose p{
  margin:0 0 .85em;
  font-size:.97rem; line-height:1.62;
  color:var(--ink-2, #5F5E64);
  max-width:64ch;
}
.svc-acc__prose p:last-child{margin-bottom:0}
.svc-acc__lead{
  font-size:1.05rem !important; line-height:1.55 !important;
  color:var(--ink, #38373A) !important;
  font-weight:500;
}

/* ─── фотографии ─────────────────────────────────────────────────── */
/* На широком экране кадры стоят СТОЛБИКОМ, а не рядом. Причина не
   вкусовая: правая колонка ~408px, два кадра в ряд дают по 199px —
   при dpr 2 это 398 физических точек, то есть исходные 800×600
   отдаются вполовину. Столбиком каждый кадр занимает всю колонку
   (408 CSS px = 816 физических) — ровно под исходник, и заодно
   закрывается пустота, которая раньше зияла справа от текста. */
.svc-acc__figs{
  grid-area:figs; min-width:0;
  display:grid; grid-template-columns:1fr; gap:10px;
  align-content:start;
}
.svc-acc__figs--one{grid-template-columns:1fr}
.svc-acc__fig{
  margin:0; overflow:hidden;
  border-radius:var(--r-lg, 10px);
  background:var(--band, #F4F5FA);      /* тон-заглушка на время подгрузки */
  box-shadow:0 1px 0 var(--rule, #DEDEE7);
}
.svc-acc__fig img{
  display:block; width:100%; height:auto;
  aspect-ratio:4 / 3; object-fit:cover;
}
/* один кадр на всю ширину колонки — крупнее, но не выше двух рядов */
.svc-acc__figs--one .svc-acc__fig img{aspect-ratio:4 / 3}

/* ─── номенклатура ───────────────────────────────────────────────── */
.svc-acc__proc{grid-area:proc; min-width:0}
.svc-acc__proc-head{
  margin:0 0 14px;
  font-family:Onest, system-ui, sans-serif; font-weight:600;
  font-size:.86rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink, #38373A);
}
.svc-acc__count{
  display:inline-block; margin-inline-start:.5em;
  font-weight:600; letter-spacing:.06em; text-transform:none;
  color:var(--accent, #4B3FD6);         /* 7.0:1 */
}
.svc-acc__proc-list{
  margin:0; padding:0; list-style:none;
  columns:2; column-gap:clamp(24px, 3vw, 46px);
}
.svc-acc__proc-list li{
  position:relative;
  break-inside:avoid; -webkit-column-break-inside:avoid;
  margin:0 0 9px; padding-inline-start:19px;
  font-size:.925rem; line-height:1.48;
  color:var(--ink-2, #5F5E64);          /* 6.4:1 */
}
/* маркер-ромб — отсылка к граням знака */
.svc-acc__proc-list li::before{
  content:""; position:absolute; inset-inline-start:0; top:.55em;
  width:6px; height:6px; border-radius:1px;
  background:var(--accent, #4B3FD6);
  transform:rotate(45deg);
}

/* вложенный спойлер «показать все» */
.svc-acc__rest{display:grid; grid-template-rows:1fr}
.svc-acc[data-ready] .svc-acc__rest{
  grid-template-rows:0fr;
  transition:grid-template-rows var(--svc-t) var(--svc-ease);
}
.svc-acc[data-ready] .svc-acc__rest.is-open{grid-template-rows:1fr}
.svc-acc__rest-inner{min-height:0; overflow:hidden}
.svc-acc[data-ready] .svc-acc__rest-inner{
  visibility:hidden; transition:visibility 0s linear var(--svc-t);
}
.svc-acc[data-ready] .svc-acc__rest.is-open .svc-acc__rest-inner{
  visibility:visible; transition-delay:0s;
}
.svc-acc__rest-inner .svc-acc__proc-list{padding-top:9px}

.svc-acc__more{
  display:none;                          /* без JS список и так открыт */
  margin-top:16px; padding:9px 16px;
  background:none;
  border:1px solid var(--rule, #DEDEE7); border-radius:var(--r, 4px);
  font-family:Onest, system-ui, sans-serif; font-weight:600; font-size:.86rem;
  color:var(--accent, #4B3FD6);          /* 7.0:1 */
  cursor:pointer;
  transition:border-color var(--t-fast, .18s) var(--svc-ease),
             background var(--t-fast, .18s) var(--svc-ease);
}
.svc-acc[data-ready] .svc-acc__more{display:inline-block}
.svc-acc__more:hover{border-color:var(--accent, #4B3FD6); background:rgba(75,63,214,.05)}

/* ─── примечание ─────────────────────────────────────────────────── */
.svc-acc__note{
  grid-area:note; margin:0; max-width:82ch;
  padding:15px 20px;
  background:var(--bg, #fff);
  border-inline-start:3px solid var(--peri, #9797FB);
  border-radius:0 var(--r-lg, 10px) var(--r-lg, 10px) 0;
  font-size:.92rem; line-height:1.6;
  color:var(--ink-2, #5F5E64);           /* 6.0:1 на белом */
}

/* ─── действие ───────────────────────────────────────────────────── */
.svc-acc__cta{grid-area:cta; align-self:start}
.svc-acc__cta .btn{width:100%}

/* ══════════════════════════════════════════════════════════════════
   Адаптив
   ══════════════════════════════════════════════════════════════════ */

/* планшет: панель в одну колонку, фото — первыми (награда за раскрытие) */
@media (max-width:900px){
  .svc-acc__body{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto;
    grid-template-areas:
      "figs"
      "prose"
      "proc"
      "note"
      "cta";
  }
  .svc-acc__figs{grid-template-columns:1fr 1fr}
  .svc-acc__cta .btn{width:auto}
}

/* название и короткое описание — в столбик, чтобы не наезжали */
@media (max-width:820px){
  .svc-acc__text{grid-template-columns:minmax(0,1fr); gap:7px}
  .svc-acc__short{max-width:60ch}
}

@media (max-width:640px){
  .svc-acc__proc-list{columns:1}
}

/* два кадра рядом на узком экране дают по ~160px — это уже не фотография,
   а марка. Ниже 560px раскладываем их в столбик во всю ширину. */
@media (max-width:560px){
  .svc-acc__figs{grid-template-columns:1fr; gap:12px}
}

/* 390px и уже */
@media (max-width:430px){
  .svc-acc{--svc-inset:8px}
  .svc-acc__trigger{gap:11px; padding-block:18px}
  .svc-acc__num{font-size:.8rem}
  .svc-acc__name{font-size:1.02rem}
  .svc-acc__short{font-size:.93rem}
  .svc-acc__sign{width:17px; height:17px; margin-top:.3em}
  .svc-acc__figs{gap:8px}
  .svc-acc__note{padding:13px 15px}
  .svc-acc__cta .btn{width:100%}
}

/* ─── меньше движения ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .svc-acc-sec{--svc-t:.01ms}
  .svc-acc__item::before,
  .svc-acc__panel,
  .svc-acc__rest,
  .svc-acc__sign::before,
  .svc-acc__sign::after,
  .svc-acc__trigger,
  .svc-acc__num,
  .svc-acc__more{transition-duration:.01ms !important}
  .svc-acc[data-ready] .svc-acc__inner,
  .svc-acc[data-ready] .svc-acc__rest-inner{transition-delay:.01ms !important}
}

/* ─── печать: раскрыть всё ───────────────────────────────────────── */
@media print{
  .svc-acc .svc-acc__panel,
  .svc-acc .svc-acc__rest,
  .svc-acc[data-ready] .svc-acc__panel,
  .svc-acc[data-ready] .svc-acc__rest{grid-template-rows:1fr}
  /* content-visibility обязателен: без него на печать уйдут пустые панели.
     transition:none — тоже: смена visibility отложена на время анимации
     (transition-delay .42s), и без сброса перехода снимок страницы можно
     успеть сделать раньше, чем панели раскроются. Замерено: через 400 мс
     после переключения на media=print панели ещё пустые, через 500 — уже нет. */
  .svc-acc .svc-acc__inner,
  .svc-acc .svc-acc__rest-inner,
  .svc-acc[data-ready] .svc-acc__inner,
  .svc-acc[data-ready] .svc-acc__rest-inner{
    visibility:visible; content-visibility:visible; transition:none !important;
  }
  .svc-acc__sign,.svc-acc__more,.svc-acc__cta{display:none}
}