/* ============================================================================
   «До и после»: архив /raboty/ и страница кейса.
   Значения — только из tokens.css. Литералов цвета здесь быть не должно,
   единственное исключение — #fff.
   Интерактива нет вовсе: сравнение снимков — два кадра рядом, не ползунок.
   ========================================================================== */

/* Блок объявляет box-sizing сам: hello-elementor уйдёт вместе с Elementor
   на этапе 4, и вместе с ним уйдёт её сброс. Без этой строки карточки
   с рамкой и padding поедут ровно в тот день, когда родителя отключат. */
.dkBa,
.dkBa *,
.dkBa *::before,
.dkBa *::after { box-sizing: border-box; }

.dkBa {
  padding: var(--section-y) 0;
  background: #fff;
  font-family: var(--font-body);
  font-size: var(--fz-body);
  color: var(--body);
}

/* Чередование фонов секций по стандарту: белый → --air → --tint (у CTA). */
.dkBa--more { background: var(--air); }

.dkBa__wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Ширина колонки текста как на обычной странице: длинная строка на 1200px
   не читается, а кейс — это в первую очередь текст рядом со снимками. */
.dkBa__wrap--narrow { max-width: 820px; }

/* --- Шапка раздела: eyebrow → H1 → подзаголовок --------------------------- */
.dkBa__crumbs {
  font-size: var(--fz-meta);
  color: var(--muted);
  margin: 0 0 16px;
}

.dkBa .dkBa__crumbs a { color: var(--navy); text-decoration: none; }
.dkBa .dkBa__crumbs a:hover { text-decoration: underline; }

.dkBa__eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 14px;
}

.dkBa__h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fz-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-h1);
  color: var(--ink);
  margin: 0;
}

/* Подзаголовок --navy, а не --blue: голубой на белом даёт около 2:1
   и не проходит по контрасту. Та же правка уже сделана на странице услуги. */
.dkBa__sub {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-sub);
  line-height: var(--lh-sub);
  color: var(--navy);
  margin: 12px 0 0;
}

/* --- Пара снимков --------------------------------------------------------- */
.dkBa__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: start;
}

/* Один снимок не растягиваем на две колонки: он не пара и выглядеть парой
   не должен. Ширину ограничиваем, иначе единственный кадр займёт всю полосу
   и прочитается как «после» без «до». */
.dkBa__pair--one { grid-template-columns: minmax(0, 1fr); }
.dkBa--single .dkBa__pair--one { max-width: 520px; }

.dkBa__shot {
  margin: 0;
  min-width: 0; /* иначе картинка не даёт колонке сжаться и грид вылезает вбок */
}

/* Высота фиксирована, а не «по контенту»: «До лечения» (10 симв.) и «После
   лечения» (13 симв.) в самой узкой колонке (карточка ~260px → пара ~113px
   на кадр → текст ~93px после padding) переносятся по-разному — один в одну
   строку, другой в две, из-за чего подписи «прыгали» по высоте (жалоба
   владельца 2026-08). min-height рассчитан на 2 строки при line-height 1.2
   и font-size 11px: 2 × 13.2px = 26.4px контента + 14px паддинга (7px×2,
   box-sizing: border-box уже задан на .dkBa *) = 40.4px, округлено вверх.
   flex + center — чтобы однострочная подпись стояла по центру этой высоты,
   а не липла к верху, как в обычном блочном figcaption. */
.dkBa__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 7px 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--tint);
  color: var(--navy);
}

/* «После» — тёмная плашка: два одинаковых ярлыка над двумя похожими кадрами
   заставляют читать текст, чтобы понять, где что. Белый по --navy, а не
   по --blue: на голубом белый текст даёт около 2:1. */
.dkBa__shot--after .dkBa__label {
  background: var(--navy);
  color: #fff;
}

/* Рамка — фиксированные пропорции 16:9, а не «своя высота под каждое фото»:
   разного размера пары — жалоба владельца 2026-08. Ratio подобран не из
   головы: обмер реальных вложений case_before/case_after (10 кейсов, 20
   снимков) через wp eval — все landscape, медиана и мода 1.778 (16/9),
   14 из 20 снимков — буквально 1280×720, разброс 1.487–1.953. 16:9 не режет
   почти ни одного снимка вообще, а не просто «усредняет».
   Рамка фиксирована независимо от того, одна пара кадров или одна: на
   .dkBa__pair--one высота не может раздуться, она всегда width × 9/16. */
.dkBa__frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--air);
}

/* object-fit: cover, не contain (было contain до 2026-08). Причина смены:
   на кейсе «Элайнеры-4» (id 4668) «до» 2560×1722 (1.487) и «после» 2560×1319
   (1.941) — оба заметно отличаются от рамки 16:9 (1.778), но в разные
   стороны. contain вписывал каждый кадр целиком, но давал разные поля:
   у «до» — пустые полосы по бокам, у «после» — почти без полей, поэтому
   пара выглядела разноширокой ровно так, как заметил владелец, — и это
   важнее для него, чем теоретический риск подрезать край кадра. cover
   гарантирует одинаковую ширину и высоту рамки без полей всегда.
   Компромисс: при пропорциях, сильно отличающихся от 16:9, cover обрезает
   края кадра. Обмер через wp eval (10 случайных кейсов из 12 в базе +
   кейс 4668 из жалобы) даёт разброс 1.094–1.941, но большинство —
   ровно 16:9 (1.778): 14 из 20 проверенных снимков буквально 1280×720,
   и только 2 кейса из 10 (4671: 1.094/1.459; 4674: 1.411/1.217) заметно
   уже кадра — там обрезка сверху/снизу будет самой ощутимой. Для основной
   массы фото cover не обрезает вовсе или обрезает на глаз незаметно.
   object-position: center сохраняет середину кадра, где в стоматологических
   до/после обычно и находится предмет съёмки, так что клиническая часть
   снимка не срезается. Ширину и высоту в разметку по-прежнему ставит
   wp_get_attachment_image — резерв места остаётся, страница не прыгает. */
.dkBa__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Сетка карточек ------------------------------------------------------- */
.dkBa__grid {
  margin: 32px 0 0;
  display: grid;
  /* min() обязателен: без него колонка не сжимается уже колонки и выдавливает
     страницу вбок на экране 360px. */
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--grid-gap);
}

.dkBa__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh1);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.dkBa__card:hover,
.dkBa__card:focus-within { box-shadow: var(--sh2); }
.dkBa__card:hover { transform: translateY(-2px); }

.dkBa__cardBody {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dkBa__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
}

.dkBa__tag {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
}

.dkBa__cardTitle {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}

/* Ссылка одна на карточку и растянута на всю площадь: цель нажатия — вся
   карточка, а не строка заголовка. Поэтому внутри карточки других ссылок
   нет — они оказались бы под этим слоем. */
.dkBa .dkBa__cardLink { color: inherit; text-decoration: none; }

.dkBa__cardLink::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
}

.dkBa__card:hover .dkBa__cardTitle { color: var(--navy); }

.dkBa__cardTask {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--body);
  /* Две строки: карточки в ряду обязаны быть сопоставимой высоты, иначе
     сетка рвётся на разной длине задач. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dkBa__cardMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  font-size: var(--fz-meta);
  color: var(--muted);
}

.dkBa__cardFact { white-space: nowrap; }

/* --- Страница кейса ------------------------------------------------------- */
.dkBa--single .dkBa__pair { margin: 28px 0 0; }

.dkBa__legal {
  margin: 18px 0 0;
  padding: 14px 18px;
  background: var(--air);
  border-left: 3px solid var(--cyan);
  border-radius: var(--r-md);
  font-size: var(--fz-meta);
  line-height: 1.55;
  color: var(--body);
}

.dkBa__facts {
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 12px;
}

.dkBa__fact {
  padding: 14px 16px;
  background: var(--air);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.dkBa__factKey {
  margin: 0 0 4px;
  font-size: var(--fz-meta);
  color: var(--muted);
}

.dkBa__factVal {
  margin: 0; /* сброс отступа <dd> */
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
}

.dkBa .dkBa__link {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dkBa .dkBa__link:hover { color: var(--cyan); }

/* Цель нажатия 44px: ссылка на врача и на услугу — основной переход
   с этой страницы, на телефоне в неё надо попадать пальцем с первого раза. */
.dkBa__factVal .dkBa__link,
.dkBa__all .dkBa__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.dkBa__block { margin: 28px 0 0; }

.dkBa__h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 10px;
}

.dkBa__h2--section {
  font-size: var(--fz-h2);
  line-height: var(--lh-h2);
  margin-bottom: 24px;
}

.dkBa__text {
  margin: 0;
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  color: var(--body);
}

.dkBa__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dkBa__list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: var(--fz-body);
  line-height: var(--lh-body);
}

/* Ромб — единственный маркёр списка в системе. */
.dkBa__list li::before {
  content: "";
  position: absolute;
  left: 2px; top: .6em;
  width: 9px; height: 9px;
  transform: rotate(45deg);
  background: var(--cyan);
}

.dkBa__content {
  margin: 28px 0 0;
  font-size: var(--fz-body);
  line-height: 1.7;
}

.dkBa__content > * + * { margin-top: 18px; }
.dkBa__content img { max-width: 100%; height: auto; border-radius: var(--r-lg); }
.dkBa .dkBa__content a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

.dkBa__all { margin: 24px 0 0; }

/* Предупреждение видит только редактор — в разметку оно попадает по
   current_user_can(). Пунктир и акцентный цвет, чтобы его нельзя было
   спутать с содержимым страницы. */
.dkBa__warn {
  margin: 20px 0 0;
  padding: 12px 16px;
  border: 1px dashed var(--accent);
  border-radius: var(--r-md);
  background: #fff;
  font-size: var(--fz-meta);
  line-height: 1.5;
  color: var(--ink);
}

/* --- Пустой архив --------------------------------------------------------- */
.dkBa__empty {
  margin: 28px 0 0;
  max-width: 640px;
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  color: var(--body);
}

.dkBa__emptyCta { margin: 20px 0 0; }

.dkBa .dkBa__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 28px;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fz-btn);
  text-decoration: none;
}

.dkBa .dkBa__btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* --- Пагинация ------------------------------------------------------------ */
.dkBa__pager { margin: 32px 0 0; }

.dkBa .dkBa__pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0 6px 8px 0;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  text-decoration: none;
}

.dkBa .dkBa__pager .page-numbers:hover { border-color: var(--blue); }

.dkBa .dkBa__pager .page-numbers.current {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* Заголовок пагинации нужен скринридеру, но не глазу. */
.dkBa__pager .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Мобильная раскладка -------------------------------------------------- */
@media (max-width: 640px) {
  /* Снимки на телефоне выходят на всю ширину экрана: боковые отступы съедают
     треть кадра, а сравнивать надо детали. Стопкой класть нельзя — «до» и
     «после» окажутся на разных экранах, и сравнение перестанет работать. */
  .dkBa--single .dkBa__pair--big {
    margin-inline: calc(var(--gutter) * -1);
  }

  .dkBa--single .dkBa__pair--big .dkBa__label { border-radius: 0; }

  .dkBa--single .dkBa__pair--big .dkBa__frame {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .dkBa__facts { gap: 10px; }
  .dkBa__card { padding: 12px; }
}