/* ============================================================================
   Главная — группа «люди и доверие»: врачи, отзывы, кейсы «до и после».
   Файл партиалов template-parts/front/{doctors,reviews,cases}.php.

   Здесь НЕТ описания карточек. Карточка врача (.dkA__card), карточка отзыва
   (.dkR__card) и карточка кейса (.dkBa__card) уже описаны один раз:

     assets/service.css       — .dkA__* и .dkR__* из макетов t123
     assets/service-page.css  — их доработка (акцентная кнопка, сетка, контраст)
     assets/cases.css         — .dkBa__*

   Главная обязана подключить эти файлы, иначе карточки останутся без стилей.
   Порядок: tokens.css → service.css → service-page.css → cases.css →
   front-lyudi.css. Файл идёт последним, но на порядок не полагается:
   все перекрытия ниже сделаны двойным классом (.dkA.dkA--bgAir), а не
   надеждой на очередь подключения, и ни одного !important в файле нет.

   Здесь описано ровно шесть вещей, которых в тех файлах нет. Нумерация
   списка совпадает с номерами разделов ниже — если добавляете раздел,
   добавьте и пункт, иначе список снова разойдётся с файлом:
     1. переключатель фона секции — на главной чередование задаёт front-page.php,
        а не сам блок;
     2. кнопка секции «Все врачи» — в .dkA__* есть кнопка карточки (.dkA__cta),
        кнопки уровня секции не было;
     3. отступ перед кнопкой «Читать отзывы» — .dkR__foot задуман под ряд
        кнопок сразу под текстом, здесь он идёт после сетки карточек;
     4. перекраска кнопок «Читать отзывы» и «Все работы» из --accent
        в нейтральные: на главной оранжевый занят записью на приём;
     5. пропорция фото в карточке врача — на главной кадр шире, чем в архиве
        «Врачи» и на странице услуги: там та же карточка стоит в другой сетке.
        Правило одно, на модификаторе .dkA--home, общий класс не тронут;
     6. слайдер работ «до и после» (.dkSl__*) — блок кейсов на главной больше
        не сетка карточек, а один крупный кейс с лентой миниатюр. Пара снимков
        внутри слайда осталась прежней (.dkBa__pair из cases.css), новое здесь
        только обрамление и переключатель.

   Селекторы ссылок-кнопок состоят из двух классов намеренно: kit Elementor
   красит ссылки правилом .elementor-kit-N a и гасит одиночный класс.
   ========================================================================== */

/* --- 1. Фон секции ---------------------------------------------------------
   Чередование #fff → --air → #fff → --tint складывается из всей страницы,
   а не из отдельного блока: между «врачами» и «отзывами» встанут блоки
   других групп. Поэтому фон задаёт front-page.php аргументом:

     get_template_part( 'template-parts/front/doctors', null, [ 'bg' => 'air' ] );

   Без аргумента остаётся фон по умолчанию: .dkA — белый, .dkR — --tint,
   .dkBa — белый (service-page.css и cases.css). */
.dkA.dkA--bgWhite,
.dkR.dkR--bgWhite,
.dkBa.dkBa--bgWhite { background: #fff; }

.dkA.dkA--bgAir,
.dkR.dkR--bgAir,
.dkBa.dkBa--bgAir { background: var(--air); }

.dkA.dkA--bgTint,
.dkR.dkR--bgTint,
.dkBa.dkBa--bgTint { background: var(--tint); }

/* --- 2. Кнопка секции «Врачи» ----------------------------------------------
   Не акцентная: акцент (--accent) уже занят кнопкой «Записаться к врачу»
   в каждой карточке. Две оранжевые кнопки в одной секции спорят друг с другом,
   и главный призыв перестаёт быть главным. Внешний вид тот же, что у кнопки
   «Все врачи и фильтр по специализации» на странице «О клинике», — это
   буквально та же кнопка в том же месте страницы. */
.dkA__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0 0;
}

.dkA .dkA__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 48 px — минимальная зона нажатия на мобильном. */
  min-height: 48px;
  padding: 12px 26px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fz-btn);
  color: var(--navy);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.dkA .dkA__btn:hover {
  border-color: var(--blue);
  color: var(--cyan);
}

.dkA .dkA__btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* --- 3. Отзывы: воздух перед единственной кнопкой блока --------------------
   Всё остальное в .dkR__foot (flex, gap, перенос) уже описано в service.css —
   здесь только отступ: на странице услуги кнопка идёт сразу под текстом,
   на главной — после сетки из шести карточек. */
.dkR--home .dkR__foot { margin: 32px 0 0; }

/* --- 4. «Читать отзывы» и «Все работы» — навигация, а не призыв ------------
   Класс .dkR__btn в теме до главной не использовался ни разу, а .dkBa__btn
   стоял на «Записаться на консультацию» в пустом архиве работ. Оба покрашены
   в --accent #FF6E24 — цвет главного действия. На главной этим цветом уже
   набраны шесть кнопок «Записаться к врачу» в карточках врачей (front-page.php
   отдаёт блоку limit => 6; опубликованных карточек в базе 16, и подпись под
   заголовком считает именно их) и кнопка блока записи; ещё две оранжевые
   кнопки, ведущие всего лишь на
   соседнюю страницу, ставят навигацию вровень с записью на приём и ломают
   пропорцию 60/30/10 из стандарта.

   Вид — тот же нейтральный, что у .dkA__btn выше и у .dkAb__btn на странице
   «О клинике», где ссылка «Читать отзывы» выглядит ровно так. Заодно уходит
   голубая тень от .dkR__btn (service.css), которую акцентная перекраска
   в service-page.css не сняла: оранжевая кнопка светилась синим.

   Селекторы из трёх классов, а не из двух: перекрыть надо .dkR .dkR__btn
   и .dkBa .dkBa__btn (0,2,0) вместе с их :hover (0,3,0), и сделать это
   независимо от порядка подключения файлов. !important не нужен. */
.dkR.dkR--home .dkR__btn,
.dkBa.dkBa--home .dkBa__btn {
  min-height: 48px;
  padding: 12px 26px;
  background: #fff;
  background-image: none;
  border: 1px solid var(--line);
  color: var(--navy);
  box-shadow: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fz-btn);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.dkR.dkR--home .dkR__btn:hover,
.dkBa.dkBa--home .dkBa__btn:hover {
  background: #fff;
  border-color: var(--blue);
  color: var(--cyan);
  /* .dkR__btn:hover в service.css поднимает кнопку и подсвечивает фильтром —
     здесь этого не нужно, иначе нейтральная кнопка прыгает, а соседняя нет. */
  filter: none;
  transform: none;
}

.dkR.dkR--home .dkR__btn:focus-visible,
.dkBa.dkBa--home .dkBa__btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* --- 5. Пропорция фото в карточке врача на главной -------------------------
   Замечание владельца 02.08.2026: «большие фотографии, сделай пропорциональнее
   относительно блока». Карточка читалась как плакат: имя, стаж, цена
   консультации, счётчик отзывов и кнопка — то, по чему выбирают врача, —
   занимали меньше половины высоты.

   Правим только кадр. Текстовая часть — содержимое (имя, должность, до четырёх
   фактов, счётчик отзывов, «Подробнее о враче», кнопка), резать там нечего.

   Соотношение задано через aspect-ratio, а не фиксированной высотой: карточка
   на главной живёт в трёх ширинах (381 px в сетке 3 колонки, 367 px в двух
   колонках на планшете, 281 px в мобильной карусели), и любая фиксированная
   высота даёт в двух из трёх случаев другой процент фото и другой кроп.

   Замеры сняты на реплике отрендеренной главной (HTML с dev, CSS темы —
   локальный, все 34 тега script вырезаны физически) после document.fonts.ready:
   до загрузки Montserrat и Golos Text метрики другие и карточка меряется
   на 10 px короче. Две высоты карточки в строке — не ошибка замера: строка
   сетки тянется по самой высокой карточке, а у врачей разной длины должность
   и разное число фактов, поэтому первый ряд выше второго.

     ширина  до (4:5, центр)               после (7:6, 6 %)
     1280+   381×856 ×3 / 381×833 ×3, 474  381×707 ×3 / 381×684 ×3, 325
     768     367×848 ×4 / 367×824 ×2, 456  367×705 ×4 / 367×681 ×2, 312
     375     281×814 ×6, фото 349          281×704 ×6, фото 239

   Доля фото в карточке: 55–57 % → 46–48 % на широком, 54–55 % → 44–46 %
   на планшете, 43 % → 34 % в мобильной карусели. Высота секции
   «Кто будет вас лечить»: 2143 → 1845 px на 1280 (−298), 2964 → 2534 на 768
   (−430), 1246 → 1136 на 375 (−110).

   Запас над макушкой. Верх головы ищется программно, но НЕ по первой строке,
   отличающейся от фона: у Ахметшиной и Бикалова в верхних углах файла лежит
   одинаковый мусор обработки (строки 0–2 дают отклик и там, где головы нет),
   и наивный детектор объявляет обеим срез. Считается по центральной полосе
   кадра (средние 50 % ширины) с требованием трёх строк подряд. Дальше —
   формула object-fit: cover при слоте 381 px. Числа в CSS-пикселях,
   минус = срез:

                     файл        4:5 @50 %  7:6 @6 %  7:6 @0 %  5:4 @5 %
     Аганина        704×1024      −8,7      +16,7     +30,3     +17,8
     Ахметзянова    853×1279     −18,9      +13,9     +28,6     +15,3
     Ахметшина      425×570       +5,0      +11,3     +22,4     +12,1
     Бикалов        425×570      −14,7       −8,4      +2,7      −7,6
     Вафина        1706×2560     +13,0      +46,0     +60,7     +47,4
     Гарапова       925×1080     +71,9      +60,0     +67,1     +60,1

   Читается так. При нынешних 4:5 по центру макушки режутся у троих из шести
   (Аганина, Ахметзянова, Бикалов) — то есть текущее состояние хуже, чем
   кажется. Правка 7:6 + 6 % убирает срез у Аганиной и Ахметзяновой и вдвое
   уменьшает его у Бикалова.

   Два исключения, о которых нельзя молчать:
     — Гарапова теряет 12 px запаса (71,9 → 60,0). При 4:5 её снимок шире
       слота и обрезался по бокам, а не сверху, поэтому «ни один снимок
       не теряет больше, чем терял при 4:5» — неверно. Запаса остаётся 60 px
       из 325, кадр не страдает, но фраза не должна кочевать дальше;
     — Бикалов остаётся в минусе при любой пропорции, кроме 7:6 @0 %.
       В его файле голова начинается на 3-м пикселе: снимок кадрирован
       по линии волос ещё до сайта. CSS это не лечит, лечит перезаливка.

   Почему 6 %, а не 0 %. При 0 % срез исчезает у всех шести, но пятерым
   добавляется 11–22 px пустого потолка, и ряд читается разнобоем: один кадр
   впритык, пять с воздухом. 6 % — компромисс; если владелец скажет «ни одного
   среза любой ценой», ставить 50% 0%, других правок это не потребует.

   Отброшенные пропорции при слоте 381 px:
     1:1 @12 % — фото 381, карточка ≈740; запас хуже 7:6 у всех шести
                 (+9,5 / +5,8 / +6,8 / −12,9 / +37,9 / +59,5), то есть
                 карточка выше, а кадрирование при этом хуже;
     5:4 @5 %  — фото 305, карточка ≈664; запас на 1–2 px лучше 7:6, но кадр
                 становится «на паспорт»: у погрудных снимков между макушкой
                 и верхним краем почти не остаётся воздуха. Разница высоты
                 с 7:6 — 20 px, и она не стоит потери воздуха;
     4:3 @5 %  — фото 286; у трёх снимков из шести обрезаются плечи.

   Модификатор, а не общий класс: template-parts/doctor-card.php рисует ещё
   архив «Врачи», таксономию специализаций, блок врачей на странице услуги
   и «О клинике». Там своя сетка (на «О клинике» — свой .dkAb .dkA__photo
   в about-page.css) и своё окружение, и 4:5 из service.css там остаётся.
   Файл вообще не подключается вне главной (functions.php: is_front_page()),
   так что зацепить те страницы правило не может физически.
   Класс .dkA--home уже стоит на секции главной, PHP править не нужно.

   Специфичность 0,3,0 против 0,1,0 у .dkA__photo в service.css: перекрытие
   не зависит от порядка подключения файлов, !important не нужен.

   Мобильную карусель правило не трогает: на 640 px .dkA__grid переключается
   на flex + scroll-snap, меняется только высота фото, ширина карточки
   остаётся 82 %. Замер на 375 px после правки: scrollWidth ленты 1790 при
   clientWidth 375, а scrollWidth документа равен clientWidth — страница
   вбок не уезжает. */
.dkA.dkA--home .dkA__photo { aspect-ratio: 7 / 6; }
.dkA.dkA--home .dkA__photo img { object-position: 50% 6%; }

/* --- Мобильный --------------------------------------------------------------
   640 px — брейкпоинт проекта. Кнопка во всю ширину: на 375 px «Все врачи
   и фильтр по специализации» в одну строку не помещается, а обрезанная
   по краю кнопка читается как сломанная вёрстка. */
@media (max-width: 640px) {
  .dkA__actions > .dkA__btn,
  .dkR--home .dkR__foot > .dkR__btn { flex: 1 1 100%; }
}

/* Пользователь попросил меньше движения — уважаем: у кнопок остаётся
   только смена цвета. */
@media (prefers-reduced-motion: reduce) {
  .dkA .dkA__btn,
  .dkR.dkR--home .dkR__btn,
  .dkBa.dkBa--home .dkBa__btn { transition-duration: 1ms; }
}

/* --- 6. Слайдер работ «до и после» -----------------------------------------
   Разметка — template-parts/front/cases.php. Один кейс крупно, под ним лента
   миниатюр; выбор переключает радиокнопка, переход на страницу кейса — ссылка
   на заголовке, растянутая на весь слайд.

   Скрипта нет. Правила показа слайда живут не здесь: их ровно столько, сколько
   кейсов пришло из базы, поэтому cases.php печатает их сам инлайном рядом
   с блоком. Здесь — всё остальное: раскладка, лента, состояния.

   Два правила ниже написаны так, чтобы блок не рассыпался, если переключение
   не работает:
     .dkSl__slide + .dkSl__slide { display: none }  — виден первый кейс;
     .dkSl__strip { display: none }                 — лента спрятана.
   Включает обратно и то и другое ОДИН источник — инлайновый <style> из
   cases.php, целиком завёрнутый в @supports selector(:has(*)). Поэтому оба
   способа отказа дают один и тот же безопасный экран: и браузер без :has()
   (до Chrome 105 / Safari 15.4 / Firefox 121), и потерянный по дороге
   инлайновый стиль (минификатор, кэш, CSP) оставляют человеку первый кейс
   крупно и кнопку «Все работы».

   Здесь ленту включать НЕЛЬЗЯ. Пока `.dkSl__strip{display:block}` стоял
   в @supports этого файла, пропажа инлайнового стиля давала ленту на экране
   и мёртвый переключатель: замер на реплике — клик по 5-й миниатюре отмечал
   #uid-c4, а видимым оставался слайд 0. */

/* position: relative — не для слайдов (они позиционируют растянутую ссылку
   сами), а страховка: скрытые радиокнопки внутри ленты позиционируются
   абсолютно и не должны цепляться за что-то выше по дереву. */
.dkSl {
  position: relative;
  margin: 32px 0 0;
}

/* Слайд: снимки и текст. minmax(0, …) обязателен в обеих колонках — без нуля
   в минимуме пара снимков не даёт колонке сжаться и слайд выдавливает
   страницу вбок на 375 px. */
.dkSl__slide {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* На широком экране снимки и текст встают рядом. Одной колонкой пара
   растянулась бы на все 1160 px, а строка задачи под ней — тоже на 1160 px:
   снимки стали бы больше, чем нужно, а текст перестал бы читаться.
   При 2.1fr/1fr на 1280 px замерено: колонка снимков 767 px, каждый снимок
   378 px, колонка текста 365 px. В прежней сетке карточек снимок был 220 px —
   вот и всё «выбранный крупнее остальных». Число в sizes у пары (380 px
   в cases.php) считано отсюда: поменяешь пропорцию — поправь и его,
   иначе браузер выберет файл не того размера. */
@media (min-width: 960px) {
  .dkSl__slide {
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
    gap: 28px;
  }
}

/* Запасная раскладка без :has(): виден первый слайд, остальные скрыты.
   Правило показа из cases.php перекрывает это (у него в селекторе есть id),
   поэтому при работающем :has() оно ни на что не влияет. */
.dkSl__slide + .dkSl__slide { display: none; }

/* Лента спрятана по умолчанию и включается только инлайновым правилом
   `.<uid> .dkSl__strip{display:block}` из cases.php. Переключатель, который
   не переключает, хуже отсутствия переключателя. */
.dkSl__strip { display: none; }

.dkSl__shots { min-width: 0; }

/* Двойной класс, а не расчёт на очередь подключения файлов: .dkBa__pair
   из cases.css задаёт gap 6px, крупной паре нужен воздух побольше. */
.dkBa__pair.dkSl__pair { gap: 10px; }

.dkSl__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.dkSl__count {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-meta);
  color: var(--muted);
}

.dkSl__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
}

/* Два класса в селекторе: kit Elementor красит ссылки правилом
   .elementor-kit-N a и гасит одиночный класс. */
.dkSl .dkSl__titleLink {
  color: inherit;
  text-decoration: none;
}

/* Цель нажатия — весь слайд, включая снимки: владелец просил «по клику
   на кейс попасть на отдельную карточку». Тот же приём, что у карточки
   в архиве работ, поэтому внутри слайда нет других ссылок — они оказались бы
   под этим слоем. */
.dkSl__titleLink::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
}

.dkSl .dkSl__titleLink:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

.dkSl__slide:hover .dkSl__title { color: var(--navy); }

.dkSl__task {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--body);
}

/* Подсказка, а не кнопка: настоящая ссылка — заголовок выше. Оранжевого здесь
   быть не может, --accent на главной занят записью на приём. */
.dkSl__more {
  margin: 2px 0 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fz-btn);
  color: var(--navy);
  transition: color var(--dur) var(--ease);
}

.dkSl__slide:hover .dkSl__more { color: var(--cyan); }

/* --- Лента миниатюр -------------------------------------------------------- */
.dkSl__strip {
  margin: 22px 0 0;
  padding: 0;
  border: 0;
  /* fieldset несёт собственную минимальную ширину по содержимому: без сброса
     полоса прокрутки внутри него не сжимается и страница уезжает вбок. */
  min-width: 0;
}

.dkSl__track {
  display: flex;
  gap: 10px;
  /* Padding — место под кольцо фокуса и под тень, чтобы их не срезал overflow:
     overflow-x:auto превращает overflow-y в auto, и всё, что вылезло за
     padding-box, обрезается. Кольцу нужно 5 px (offset 2 + ширина 3), поэтому
     по 5 px со всех сторон, снизу 12 px под --sh2.

     Боковые 5 px компенсированы отрицательным margin: при tab-переходе фокус
     встаёт на ОТМЕЧЕННУЮ радиокнопку группы, то есть по умолчанию на первую
     миниатюру, и её кольцо срезалось бы слева ровно на 3 px. Сумма нулевая —
     лента по-прежнему начинается вровень с крупным кейсом, а 5 px уходят
     в боковой отступ секции (--gutter 20 px), так что вбок ничего не выезжает. */
  margin-inline: -5px;
  padding: 5px 5px 12px;
  overflow-x: auto;
  /* Прокрутка ленты не должна утягивать за собой страницу и не должна
     срабатывать как «назад» жестом на телефоне. */
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.dkSl__thumb {
  position: relative;
  flex: 0 0 auto;
  width: 110px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--sh1);
  cursor: pointer;
  scroll-snap-align: center;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.dkSl__thumb:hover { border-color: var(--blue); }

.dkSl__thumbFrame {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: var(--air);
  aspect-ratio: 4 / 3;
}

/* object-fit: cover здесь уместен, а на крупных снимках — нет: миниатюра
   служит указателем «этот кейс», по ней ничего не рассматривают. Пропорции
   кадров в базе разные (2560×1722 и 1280×720), и без обрезки лента получилась
   бы ступенчатой. */
.dkSl__thumbImg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Невыбранные приглушены — так видно, какой кейс сейчас крупно. */
  opacity: .82;
  transition: opacity var(--dur) var(--ease);
}

.dkSl__thumbNum {
  position: absolute;
  left: 11px;
  top: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--navy);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}

/* Радиокнопка невидима, но остаётся полноценным элементом с коробкой.
   Ни display:none, ни clip-path здесь нельзя:
     display:none  — убирает её из обхода клавиатурой, и стрелки перестают
                     переключать кейсы;
     clip-path     — схлопывает коробку в точку, и браузеру нечего прокручивать
                     к сфокусированному элементу: на стрелку вправо крупный кейс
                     менялся бы, а лента стояла бы на месте.
   Она лежит ровно под номером миниатюры и внутри полосы прокрутки — поэтому
   фокус клавиатурой сам подтягивает ленту к нужной миниатюре. */
.dkSl__radio {
  position: absolute;
  left: 11px;
  top: 11px;
  width: 22px;
  height: 22px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* Подпись для скринридера: «Работа 3 из 8: название». Глазами её не видно,
   но у каждой миниатюры она есть — картинка с пустым alt сама по себе
   не говорит ничего. */
.dkSl__srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Всё, что зависит от «какая радиокнопка отмечена». Правила без индекса:
   радиокнопка лежит внутри своего же <label>, поэтому пара находится
   структурно, а не по номеру, и число кейсов на CSS не влияет. */
@supports selector(:has(*)) {
  .dkSl__thumb:has(.dkSl__radio:checked) {
    border-color: var(--cyan);
    /* Кольцо, а не толстая рамка: смена ширины границы сдвигала бы соседние
       миниатюры при каждом переключении. Тени в системе только синие. */
    box-shadow: 0 0 0 2px var(--cyan), var(--sh2);
  }

  .dkSl__thumb:has(.dkSl__radio:checked) .dkSl__thumbImg { opacity: 1; }
  .dkSl__thumb:has(.dkSl__radio:checked) .dkSl__thumbNum { background: var(--cyan); }

  /* Фокус видно на миниатюре — на скрытой радиокнопке его не увидеть. */
  .dkSl__thumb:has(.dkSl__radio:focus-visible) {
    outline: 3px solid var(--navy);
    outline-offset: 2px;
  }
}

@media (max-width: 640px) {
  .dkSl { margin-top: 24px; }
  .dkSl__title { font-size: 18px; }
  .dkSl__thumb { width: 96px; }

  /* Лента идёт от края до края экрана: боковые отступы съедают миниатюру,
     а пальцу нужно цеплять полосу с самого края. Отрицательный отступ
     компенсируется внутренним — первая и последняя миниатюры не прилипают
     к краю. Ширина ленты при этом равна ширине экрана, поэтому вбок уезжает
     она, а не страница. */
  .dkSl__track {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dkSl__thumb,
  .dkSl__thumbImg,
  .dkSl__more { transition-duration: 1ms; }
}