/* ============================================================
   components.css — компоненты лендинга и общие элементы.
   Опирается на tokens.css + base.css.
   Дизайн-система: concept_fakedoor_B §1 (палитра, кнопки 56px,
   line-иконки, много воздуха, минимум шума).
   ============================================================ */

/* ---------- КНОПКИ ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; text-align:center; cursor:pointer;
  /* Текст в две строки: фиксированная height зажимала его без воздуха.
     line-height + баланс строк дают ровный перенос, min-height ниже
     сохраняет прежний размер однострочной кнопки. */
  line-height:1.25;
  text-wrap:balance;
  border:1px solid transparent; border-radius:var(--r-md);
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  text-decoration:none;
}
.btn:hover{ text-decoration:none; }
/* Недоступное состояние (валидация/загрузка в воронке) */
.btn:disabled,
.btn[aria-disabled="true"]{ cursor:not-allowed; opacity:.55; }
.btn:disabled{ pointer-events:none; }

/* Главный CTA: 56px, оранжевый, темный текст #1B2733 (5.2:1) */
.btn--cta{
  min-height:var(--h-cta);
  padding-block:12px;
  padding-inline:var(--sp-6);
  background:var(--c-cta);
  color:var(--c-on-cta);
  border:2px solid transparent;   /* запас под оранжевый контур на ховере */
  font-size:18px;
  letter-spacing:.2px;
  width:100%;
}
.btn--cta:active{ background:var(--c-cta-active); }   /* 4.53:1 ✓ */

/* Вторичная / ghost-кнопка (cookie-баннер, второстепенные действия) */
.btn--ghost{
  min-height:var(--h-control);
  padding-block:10px;
  padding-inline:var(--sp-4);
  background:var(--c-bg);
  color:var(--c-blue);
  border-color:var(--c-border-control);
  font-size:15px;
}

/* hover только там, где он реально есть — против «залипшего hover» на тач-экранах */
@media (hover:hover) and (pointer:fine){
  /* Ховер главных CTA (вариант 3): белая заливка, оранжевый контур,
     текст остается темным, легкий подъем + мягкая тень под цвет текста. */
  .btn--cta:hover,
  .header__cta:hover{
    background:#fff;
    border-color:var(--c-cta);
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(27,39,51,.20);
    text-decoration:none;
  }
  /* Было: заливка #F5F7FA на белом - визуально ничего не происходит.
     Даем различимую реакцию: синяя рамка, синий текст, легкий подъем. */
  .btn--ghost:hover{
    background:var(--c-bg-soft);
    border-color:var(--c-blue);
    color:var(--c-blue);
    transform:translateY(-1px);
    box-shadow:0 3px 10px rgba(27,39,51,.12);
  }
  /* У пунктов меню футера подчеркивания нет - на ховере оно ПОЯВЛЯЕТСЯ.
     Менять только thickness бесполезно: без линии толщина не видна. */
  .footer__nav a:hover,
  .footer__legal a:hover{
    text-decoration-line:underline;
    text-underline-offset:3px;
    text-decoration-thickness:1.5px;
  }
  /* У «Записи в реестре» подчеркивание постоянное - утолщаем линию. */
  .footer__rkn a:hover{ text-decoration-thickness:2.5px; }
  .footer__cookie-btn:hover{ border-color:var(--c-blue); color:var(--c-blue); }
  /* Вопрос гармошки FAQ - кликабельная строка, но никак не отзывалась */
  .accordion__q:hover{ background:var(--c-bg-soft); }
}

/* ---------- ИКОНКИ (inline Lucide, наследуют цвет через currentColor) ---------- */
.icon{
  width:24px; height:24px; flex-shrink:0;
  stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  vertical-align:middle;
}
.icon--lg{ width:32px; height:32px; }
.icon--sm{ width:18px; height:18px; }
.icon--accent{ color:var(--c-blue); }
.icon--success{ color:var(--c-success); }

/* ---------- ХЕДЕР ---------- */
.site-header{
  border-bottom:1px solid var(--c-border);
  background:var(--c-bg);
  position:sticky; top:0; z-index:50;
}
.site-header .container{
  display:flex; align-items:center; gap:var(--sp-4);
  padding-block:var(--sp-3);
  max-width:1120px;   /* широкий каркас на всех страницах (как лендинг) */
}
.logo{
  font-weight:700; font-size:20px; color:var(--c-blue);
  text-decoration:none; white-space:nowrap; flex-shrink:0;
  display:inline-flex; align-items:center; min-height:44px;   /* тач-таргет 44px (WCAG 2.5.5) */
}
.logo:hover{ text-decoration:none; }

/* навигация (десктоп — в ряд справа) */
.site-nav{ display:flex; align-items:center; gap:var(--sp-5); margin-left:auto; }
.site-nav__link{
  color:var(--c-text); text-decoration:none; font-size:15px; font-weight:500;
  white-space:nowrap;
  /* высота строки давала 23px — на 1px ниже порога WCAG 2.5.8 (24x24) */
  display:inline-flex; align-items:center; min-height:24px; padding-block:4px;
}
.site-nav__link:hover{ color:var(--c-blue); }
.header__cta{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--c-cta); color:var(--c-on-cta); text-decoration:none;
  font-weight:600; font-size:15px;
  padding:8px 16px; border:2px solid transparent; border-radius:10px; white-space:nowrap;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
/* ховер .header__cta задан общим правилом выше (вариант 3) */

/* бургер — мобайл и узкий планшет.
   Брейкпоинт 900px, а не 720px: ряд «логотип + 3 ссылки + CTA» требует ~718px
   (168 логотип + 258 ссылки + 164 CTA + 88 гэпы + 40 гуттеры), поэтому на 720px
   он ломался ровно на границе — CTA уезжал за край и появлялся горизонтальный
   скролл. 900px дает запас под метрики шрифта и браузерный zoom. */
.header__burger{
  display:none; margin-left:auto;
  width:44px; height:44px; border:0; background:transparent;
  cursor:pointer; color:var(--c-blue); align-items:center; justify-content:center;
}
.header__burger svg{ width:26px; height:26px; }

@media (max-width:900px){
  .header__burger{ display:inline-flex; }
  .site-nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--c-bg); border-bottom:1px solid var(--c-border);
    padding:var(--sp-2) var(--sp-4) var(--sp-4);
    margin-left:0;
    transform:translateY(-130%); transition:transform .25s ease;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
    visibility:hidden;
  }
  .site-nav[data-open="true"]{ transform:translateY(0); visibility:visible; }
  .site-nav__link{ padding:14px 2px; border-bottom:1px solid var(--c-border); font-size:16px; }
  .header__cta{ margin-top:var(--sp-3); padding:12px; font-size:16px; }   /* 12+2px бордюр = прежние 14px */
  .site-header .container{ position:relative; }
}

/* ---------- ШИРИНА ЛЕНДИНГА ----------
   Лендинг шире остального сайта: широкая мокап-раскладка (hero side-by-side,
   плашки, сравнение). Юр-страницы/чат/оплата остаются на 720px (читаемая
   ширина строки) — у них нет класса .page-landing. */
.page-landing{ --container:1120px; }

/* ---------- HERO ---------- */
.hero{ padding-block:var(--sp-6) var(--sp-5); border:0; }
.hero__title{ font-size:clamp(23px, 3.9vw, 30px); line-height:1.15; margin-bottom:var(--sp-3); }
.hero__subtitle{
  font-size:18px; color:var(--c-text-muted);
  margin-bottom:var(--sp-5); max-width:34em;
}
.hero__note{ font-size:var(--fs-small); color:var(--c-text-muted); margin-top:var(--sp-3); text-align:center; }
.hero__art{
  margin-top:var(--sp-5);
  margin-inline:auto;
  max-width:520px;            /* было 420 — увеличена (правка 6) */
}
.hero__art img{ width:100%; height:auto; display:block; }
@media (min-width:800px){
  .hero .container{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,1fr); gap:var(--sp-6); align-items:center; }
  .hero__content{ min-width:0; }      /* текстовый блок-обертка */
  .hero__art{ margin-top:0; max-width:none; }   /* заполняет свою колонку */
}

/* ---------- КАК ЭТО РАБОТАЕТ ---------- */
.steps{
  display:flex; flex-direction:column; gap:0;
  list-style:none; counter-reset:step; padding:0; margin:0;
}
.step{
  display:flex; align-items:center; gap:14px;
  background:var(--c-bg);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  padding:14px 16px;
}
.step:not(:last-child){ margin-bottom:30px; position:relative; }
.step:not(:last-child)::after{
  content:""; position:absolute; left:50%; bottom:-24px; transform:translateX(-50%);
  width:18px; height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A3D7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E") no-repeat center / contain;
}
.step__icon{
  width:56px; height:56px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:#eaf1fc; border-radius:50%;
  color:var(--c-blue);
}
.step__icon svg{ width:38px; height:38px; display:block; }
.step__body{ margin:0; font-size:15px; line-height:1.45; }
.step__body::before{
  counter-increment:step; content:counter(step)". ";
  font-weight:600; color:var(--c-text);
}
.step__title{ font-weight:600; color:var(--c-text); }
.step__text{ color:var(--c-text-muted); }

/* ---------- ЧТО ВХОДИТ В ДОКУМЕНТ ---------- */
.checklist{ display:grid; gap:var(--sp-3); max-width:800px; }
.checklist__item{
  position:relative; padding-left:30px;
}
.checklist__item::before{
  content:""; position:absolute; left:0; top:1px;
  width:20px; height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%231d7a44'/%3E%3Cpath d='m8 12 3 3 5-6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- СРАВНЕНИЕ ---------- */
.compare__grid{ display:grid; gap:var(--sp-3); grid-auto-rows:1fr; }   /* равная высота строк, в т.ч. одной колонкой на мобайле */
@media (min-width:560px){ .compare__grid{ grid-template-columns:1fr 1fr; } }
.compare__col{
  display:flex; align-items:center; gap:16px;   /* иконка слева + текст справа, по центру */
  padding:var(--sp-5);
  border-radius:var(--r-lg);
  border:1px solid var(--c-border);
}
.compare__col--dim{ background:#fdf3f3; border-color:#eecccc; }
/* Узкий вьюпорт (в т.ч. зум 150-200%): карточка сравнения ужимается по-настоящему */
@media (max-width:340px){
  .compare__col{ padding:var(--sp-3); gap:10px; }
  .compare__icon{ width:48px; height:48px; }
}
.compare__icon{ flex:none; width:72px; height:72px; }   /* одинаковый фиксированный размер для обеих карточек */
.compare__icon svg{ width:100%; height:100%; display:block; }
/* min-width:0 разрешает флекс-элементу сжиматься, но не ниже min-content,
   а min-content = самое длинное слово. При зуме 150-200% длинные слова
   («сформировать», «специалиста») распирали карточку за пределы вьюпорта.
   overflow-wrap разрешает разрыв такого слова. */
.compare__body{ min-width:0; overflow-wrap:anywhere; }   /* враппер заголовок+текст справа */
.compare__col--dim .compare__icon{ color:#c0504a; }
.compare__col--accent .compare__icon{ color:#1d7a44; }
.compare__col--dim .compare__text{ color:var(--c-text-muted); }
.compare__col--dim .compare__head{ color:#a9484a; }
.compare__col--accent{ background:#f1faf3; border-color:#bfe6c8; }
.compare__head{ margin-bottom:4px; }
.compare__col--accent .compare__head{ color:#1d7a44; }
.compare__text{ margin:0; font-size:var(--fs-small); line-height:1.5; }   /* помельче (15px) */

/* ---------- ЦЕНА ---------- */
.price{ text-align:center; }
.price__card{
  background:var(--c-bg-soft);
  border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-4);
}
.price__amount{ font-size:44px; font-weight:700; color:var(--c-blue); margin:0; line-height:1.05; }
.price__type{ color:var(--c-blue); font-weight:600; margin:var(--sp-1) 0 var(--sp-3); }
.price__sub{ font-size:var(--fs-small); margin:0; }
.price__anchor{ color:var(--c-text-muted); font-size:var(--fs-small); margin-top:var(--sp-2); }
.price__cta{ margin-top:var(--sp-4); max-width:420px; }

/* ---------- СИГНАЛЫ ОПЛАТЫ ---------- */
.trust-pay__row{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:28px;
  background:var(--c-bg-soft);
  padding:var(--sp-4);
  border-radius:var(--r-lg);
}
.trust-pay__guard{ display:inline-flex; align-items:center; gap:var(--sp-3); }

/* Плотный вертикальный ритм: «ссылки важны» → 399₽ → «защищенная оплата» стоят близко (как в макете) */
#landing > .compare{ padding-bottom:var(--sp-2); }
#landing > .price{ padding-block:var(--sp-2); }
#landing > .trust-pay{ padding-top:var(--sp-2); }
.trust-pay__label,.trust-pay__secure{ font-size:var(--fs-small); color:var(--c-text-muted); }
.trust-pay__lock{ width:24px; height:24px; flex:none; color:var(--c-text-muted); }
.trust-pay__lock svg{ width:100%; height:100%; display:block; }
.paylogos{ display:flex; gap:28px; align-items:center; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.paylogo{ display:inline-flex; align-items:center; }   /* прямоугольные подложки убраны */
.paylogo img{ height:22px; width:auto; display:block; }   /* базовая высота */
.paylogo img[alt="СБП"]{ height:30px; }
.paylogo img[alt="МИР"]{ height:17px; }
.paylogo img[alt="Visa"]{ height:17px; }
.paylogo img[alt="Mastercard"]{ height:27px; }

/* Мобайл: 4 логотипа обязаны стоять в ОДНУ строку.
   При gap 28px строка требует ~296px, а на телефоне 360px доступно ~288px
   (360 − 40 гуттеры − 32 паддинги ряда) → Mastercard уезжал на вторую строку.
   Уменьшенные высоты дают ~185px + 3×12 гэпы = ~221px: влезает даже на 320px. */
@media (max-width:560px){
  .trust-pay__row{ gap:var(--sp-3); }
  .paylogos{ gap:12px; flex-wrap:nowrap; }
  .paylogo img{ height:19px; }
  .paylogo img[alt="СБП"]{ height:26px; }
  .paylogo img[alt="МИР"]{ height:15px; }
  .paylogo img[alt="Visa"]{ height:15px; }
  .paylogo img[alt="Mastercard"]{ height:23px; }
}

/* Узкие экраны (320–380px): внутри paywall-карточки доступно ~200px,
   поэтому логотипы ужимаются еще на шаг (~159px + 3×10 = ~189px). */
@media (max-width:380px){
  .paylogos{ gap:10px; }
  .paylogo img{ height:17px; }
  .paylogo img[alt="СБП"]{ height:22px; }
  .paylogo img[alt="МИР"]{ height:13px; }
  .paylogo img[alt="Visa"]{ height:13px; }
  .paylogo img[alt="Mastercard"]{ height:20px; }
}

/* ---------- FAQ ---------- */
.accordion__item{
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  margin-bottom:var(--sp-2);
  /* padding-inline перенесен на дочерние элементы: пока он висел на карточке,
     заливка вопроса при наведении не доходила до ее краев - по бокам
     оставались белые поля. overflow:hidden обрезает заливку по скруглению. */
  overflow:hidden;
}
.accordion__q{
  font-weight:600; cursor:pointer;
  padding-block:var(--sp-3);
  padding-inline:var(--sp-4);
  list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3);
}
.accordion__q::-webkit-details-marker{ display:none; }
.accordion__q::after{
  content:""; width:20px; height:20px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A3D7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") no-repeat center / contain;
}
.accordion__item[open] .accordion__q::after{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A3D7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") no-repeat center / contain;
}
.accordion__a{
  color:var(--c-text-muted);
  padding-bottom:var(--sp-3);
  padding-inline:var(--sp-4);
}
.accordion__a{ max-width:800px; }

/* ---------- ФИНАЛЬНЫЙ CTA ---------- */
.cta-final{ text-align:center; }
.cta-final .btn--cta{ max-width:420px; }
.cta-final__note{ font-size:var(--fs-small); color:var(--c-text-muted); margin-top:var(--sp-3); }

/* ---------- ФУТЕР ---------- */
.site-footer{
  background:var(--c-bg-soft);
  padding-block:var(--sp-5);
  border-top:1px solid var(--c-border);
  font-size:13px;
}
.site-footer a{ color:var(--c-link-on-soft); }
.site-footer .container{
  display:grid;
  grid-template-columns:1.3fr 1fr 1.7fr;
  gap:var(--sp-2) var(--sp-5);
  align-items:start;
  max-width:1120px;   /* широкий каркас на всех страницах (как лендинг) */
}
.footer__requisites{ grid-column:1; }
.footer__requisites p{ margin:1px 0; color:var(--c-text-muted); line-height:1.4; }
.footer__nav{ grid-column:2; }
.footer__legal{ grid-column:3; }
.footer__nav,.footer__legal{
  display:flex; flex-direction:column; gap:5px; margin:0;
}
/* Зона нажатия расширяется псевдоэлементом, а НЕ паддингом: паддинг раздвигал
   пункты и ломал ритм футера. Так визуальный вид прежний, а палец попадает.
   Итог 25px по вертикали - выше порога WCAG 2.5.8 AA (24x24 при наличии
   интервала). 44x44 - это AAA, для ссылок в списке необязательно. */
.footer__nav a,.footer__legal a{
  position:relative;
  color:var(--c-blue);            /* тот же темно-синий, что у «Записи в реестре» */
  text-decoration:none;
}
.footer__nav a::after,.footer__legal a::after{
  content:""; position:absolute; inset:-3px -6px;   /* невидимая зона нажатия */
}
/* Кнопка «Настройки файлов cookie»: вернули прежний компактный вид */
.footer__cookie-btn{
  position:relative;
  padding:6px 10px;
  line-height:1.4;
}
.footer__cookie-btn::after{
  content:""; position:absolute; inset:-6px -4px;
}
.footer__rkn{
  grid-column:1 / -1; color:var(--c-text-muted); font-size:12px;
  margin:var(--sp-2) 0 0; line-height:1.45;
}
.footer__disclaimer{
  grid-column:1 / -1; color:var(--c-text-muted); font-size:12px; line-height:1.45;
  margin:0; padding-top:var(--sp-3); border-top:1px solid var(--c-border);
}
@media (max-width:720px){
  .site-footer .container{ grid-template-columns:1fr; gap:var(--sp-3); }
  .footer__requisites,.footer__nav,.footer__legal{ grid-column:1; }
}

/* ---------- COOKIE-БАННЕР (компактное окошко) ---------- */
.cookie-banner{
  position:fixed; z-index:40;
  left:var(--sp-4); bottom:max(var(--sp-4), env(safe-area-inset-bottom));
  width:calc(100% - var(--sp-4) * 2); max-width:400px;
  background:var(--c-bg);
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  box-shadow:0 8px 30px rgba(16,35,63,.16);
  padding:var(--sp-4);
}
.cookie-banner[hidden]{ display:none; }
/* min-width:0 обязателен: grid/flex-элементы по умолчанию не сжимаются ниже
   min-content, и при зуме 150-200% (CSS-вьюпорт 260 и меньше) две кнопки
   распирали баннер изнутри - контент вылезал за его границы. */
.cookie-banner__inner{ display:grid; gap:var(--sp-3); min-width:0; }
.cookie-banner__inner > *{ min-width:0; }
.cookie-banner__text{ font-size:13px; line-height:1.5; color:var(--c-text-muted); margin:0; }
/* Ссылки внутри абзацев не должны опознаваться только по цвету (WCAG 1.4.1):
   баннер cookie и строка про реестр РКН в футере. */
.cookie-banner__text a,
.footer__rkn a{
  /* --c-blue-link (#2A6FED) на сером фоне футера дает 4.26:1 при кегле 12px -
     ниже порога AA (4.5). Берем фирменный темно-синий --c-blue: 9.77:1.
     Палитра не расширяется, используется существующий токен. */
  color:var(--c-blue);
  text-decoration:underline;
  text-underline-offset:2px;
}
.cookie-banner__actions{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.cookie-banner__actions .btn{ flex:1 1 auto; min-width:0; }

/* ---------- COOKIE-МОДАЛКА (настройки категорий) ---------- */
.cookie-modal{
  position:fixed; inset:0; z-index:60;
  background:rgba(16,35,63,.45);
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-4);
}
.cookie-modal__box{
  background:var(--c-bg); border-radius:var(--r-lg);
  width:100%; max-width:460px;
  padding:var(--sp-5);
  box-shadow:0 12px 40px rgba(16,35,63,.25);
  max-height:90svh; max-height:90dvh; overflow:auto;   /* не vh: iOS Safari (правило проекта) */
}
.cookie-modal__title{ font-size:18px; margin:0 0 var(--sp-4); }
.cookie-modal__row{
  display:flex; gap:10px; align-items:flex-start;
  margin-bottom:var(--sp-3); font-size:14px; line-height:1.45; cursor:pointer;
}
/* accent-color: без него чекбоксы рисуются системным ярко-синим */
.cookie-modal__row input{ margin-top:3px; flex:none; width:18px; height:18px; cursor:pointer;
  accent-color:var(--c-blue); }
.cookie-modal__actions{ display:flex; gap:var(--sp-3); align-items:center; margin-top:var(--sp-4); }
.cookie-modal__cancel{ background:none; border:0; color:var(--c-text-muted); cursor:pointer; font-size:14px; text-decoration:underline; }

/* ---------- ВОРОНКА: контейнер ---------- */
#funnel-root[hidden]{ display:none; }

/* Что входит: примечание о нормах + превью документа */
.contents__note{ font-size:var(--fs-small); color:var(--c-text-muted); margin-top:var(--sp-4); line-height:1.5; max-width:800px; }
.contents__preview{ margin:var(--sp-6) auto 0; max-width:none; text-align:center; }
.contents__preview-cap{ font-size:13px; color:var(--c-text-muted); margin-top:var(--sp-3); }

/* Галерея страниц образца документа (3 листа в ряд на всю ширину) + лайтбокс */
.doc-gallery{
  display:flex; gap:var(--sp-4);
  justify-content:center; align-items:flex-start; flex-wrap:nowrap;
}
.doc-gallery__item{
  flex:1 1 0;
  padding:0; border:0; background:none; cursor:zoom-in;
  border-radius:var(--r-sm);
  transition:transform .15s ease, box-shadow .15s ease;
}
.doc-gallery__item img{
  display:block; width:100%; height:auto; aspect-ratio:800 / 1131;
  border:1px solid var(--c-border); border-radius:var(--r-sm);
  box-shadow:0 2px 8px rgba(27,39,51,.10);
}
.doc-gallery__item:hover,
.doc-gallery__item:focus-visible{
  transform:translateY(-3px); box-shadow:0 8px 20px rgba(27,39,51,.16); outline:none;
}
.doc-gallery__item:focus-visible img{ outline:2px solid var(--c-focus); outline-offset:2px; }

.lightbox{
  position:fixed; inset:0; z-index:1000;
  /* overflow по обеим осям: перетаскиванием двигаем и по горизонтали */
  display:none; overflow:auto;
  padding:56px 16px; text-align:center;
  background:rgba(13,18,24,.92); cursor:zoom-out;
}
/* Картинку можно «взять» и потащить */
.lightbox__img{ cursor:grab; }
.lightbox.is-dragging,
.lightbox.is-dragging .lightbox__img{ cursor:grabbing; user-select:none; }
.lightbox.is-open{ display:block; }
.lightbox__img{
  display:inline-block; vertical-align:top;
  width:min(1000px, 94vw); height:auto;
  border-radius:var(--r-sm); box-shadow:0 12px 40px rgba(0,0,0,.5);
  -webkit-user-drag:none;   /* иначе браузер начинает свой drag-and-drop картинки */
}
.lightbox__close{
  position:fixed; top:var(--sp-3); right:var(--sp-4);
  width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(255,255,255,.16); color:#fff; font-size:28px; line-height:1; cursor:pointer;
}
/* Было rgba(255,255,255,.16) - на белом листе документа стрелки не видны
   вовсе. Темная подложка + белая иконка читаются на любой картинке. */
.lightbox__nav{
  position:fixed; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border:0; border-radius:50%;
  background:rgba(16,24,40,.62); color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  font-size:32px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox__nav--prev{ left:var(--sp-4); }
.lightbox__nav--next{ right:var(--sp-4); }
.lightbox__close:hover,
.lightbox__nav:hover{ background:rgba(16,24,40,.85); }
.lightbox__counter{
  position:fixed; bottom:var(--sp-3); left:50%; transform:translateX(-50%);
  padding:4px 12px; border-radius:999px; background:rgba(13,18,24,.55);
  color:rgba(255,255,255,.92); font-size:14px; letter-spacing:.02em;
}
@media (max-width:480px){
  .doc-gallery{ gap:var(--sp-2); }
  .lightbox{ padding:52px 8px; }
  .lightbox__img{ width:96vw; }
  .lightbox__nav{ width:44px; height:44px; font-size:28px; }   /* тач-таргет */
  .lightbox__nav--prev{ left:var(--sp-2); }
  .lightbox__nav--next{ right:var(--sp-2); }
}