/* ============================================================================
   Страница документов: /o-klinike/liczenzii/ и всё, что после неё соберут
   по тому же шаблону (сертификаты, свидетельства, приложения).

   Файл самодостаточен: на этой странице из наших стилей грузятся только
   tokens.css, style.css и site.css. Ничего из service.css / service-page.css
   здесь нет и не будет — на них не опираемся.

   Значения — из tokens.css. Литералов цвета быть не должно, кроме #fff
   (бумага скана и подложка карточки) и полупрозрачной шторки поверх страницы.
   ========================================================================== */

.dkDoc,
.dkDoc *,
.dkDoc *::before,
.dkDoc *::after { box-sizing: border-box; }

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

/* Лид и вводный текст. Ширину текста держим у́же сетки: строка в 1000 px
   не читается, сколько бы места ни было. */
.dkDoc__lead {
  max-width: 62ch;
  margin: 0 0 var(--sp-8);
  font-family: var(--font-body);
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  color: var(--body);
}

.dkDoc__intro {
  max-width: 62ch;
  margin: 0 0 var(--sp-8);
  font-family: var(--font-body);
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  color: var(--body);
}

.dkDoc__intro > * + * { margin-top: var(--sp-4); }
.dkDoc .dkDoc__intro a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.dkDoc .dkDoc__intro a:hover { color: var(--cyan); }

/* Служебная заметка редактору. Посетитель её не видит — шаблон её ему
   и не печатает; стиль нарочно непохож на контент, чтобы её не приняли
   за текст страницы и не оставили насовсем. */
.dkDoc__admin {
  max-width: 62ch;
  margin: 0 0 var(--sp-8);
  padding: var(--sp-4) var(--sp-5);
  border: 1px dashed var(--blue);
  border-radius: var(--r-md);
  background: var(--air);
  font-family: var(--font-body);
  font-size: var(--fz-meta);
  line-height: 1.55;
  color: var(--body);
}

.dkDoc__admin strong { color: var(--navy); }

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

/* --- Сетка сканов ---------------------------------------------------------
   Колонки заданы числом, а не auto-fit: minmax(Npx, 1fr) не сжимается ниже N
   и выдавливает страницу вбок на узких экранах. */
.dkDoc__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dkDoc__item { margin: 0; }

.dkDoc__fig {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Карточка-ссылка. Цель нажатия — вся карточка, она заведомо больше 44 px. */
.dkDoc .dkDoc__thumb {
  display: block;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh1);
  text-decoration: none;
  color: var(--navy);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.dkDoc .dkDoc__thumb:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: var(--sh2);
}

.dkDoc .dkDoc__thumb:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

/* Документ показываем целиком: ни object-fit: cover, ни фиксированной высоты.
   Обрезанный скан — это скан, по которому нельзя проверить реквизиты. */
.dkDoc__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  background: var(--air);
}

.dkDoc__lens {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-btn);
  color: var(--navy);
}

/* Лупа нарисована псевдоэлементами, а не картинкой и не иконочным шрифтом:
   ради 18 px значка не тянем ни файл, ни шрифт. Значок декоративный,
   в разметке он aria-hidden — смысл несёт слово рядом. */
.dkDoc__lensIcon {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
}

.dkDoc__lensIcon::before {
  content: "";
  position: absolute;
  inset: 0 4px 4px 0;
  border: 2px solid currentColor;
  border-radius: var(--r-pill);
}

.dkDoc__lensIcon::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 7px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: right center;
}

.dkDoc .dkDoc__thumb:hover .dkDoc__lens { color: var(--cyan); }

.dkDoc__cap {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fz-meta);
  line-height: 1.5;
  color: var(--body);
}

/* --- Просмотр крупно ------------------------------------------------------
   Открывается ссылкой на #dk-doc-<id>, закрывается ссылкой на карточку —
   так возврат приводит человека туда, откуда он открыл, а не в начало страницы.
   Пока слой закрыт, он display:none, поэтому lazy-картинка внутри не грузится. */
.dkDoc__view {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  padding: clamp(12px, 3vw, 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dkDoc__view:target {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Слой получает фокус по переходу на якорь. Рамку на самом слое не рисуем:
   она обвела бы весь экран и ничего не сообщила бы — видимый фокус нужен
   кнопке «Закрыть», она следующая в порядке табуляции. */
.dkDoc__view:focus { outline: none; }

/* Страница за слоем не должна прокручиваться колесом. Браузеры без :has()
   просто прокрутят фон — слой от этого не ломается. */
body:has(.dkDoc__view:target) { overflow: hidden; }

.dkDoc .dkDoc__scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  background: rgba(0, 40, 70, .72);
}

.dkDoc .dkDoc__close {
  position: fixed;
  top: clamp(10px, 2vw, 20px);
  right: clamp(10px, 2vw, 20px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: var(--sh2);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-btn);
  color: var(--ink);
  text-decoration: none;
}

.dkDoc .dkDoc__close:hover { background: var(--tint); color: var(--navy); }

.dkDoc .dkDoc__close:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

.dkDoc__closeIcon { font-size: 22px; line-height: 1; }

.dkDoc__panel {
  position: relative;
  z-index: 2;
  width: min(880px, 100%);
  /* Отступ сверху — под кнопку «Закрыть», она перекрывает правый верхний угол. */
  margin: 56px 0 clamp(12px, 3vw, 28px);
  padding: 12px;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh2);
}

/* Высоту не ограничиваем: у документа важен не «влезть в экран», а быть
   читаемым. Не поместился — прокручивается вместе со слоем. */
.dkDoc__full {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

.dkDoc__panelFoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.dkDoc__panelCap {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fz-meta);
  line-height: 1.5;
  color: var(--body);
}

.dkDoc .dkDoc__file {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-btn);
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dkDoc .dkDoc__file:hover { color: var(--cyan); }

.dkDoc .dkDoc__file:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

/* --- Экраны ---------------------------------------------------------------
   Брейкпоинты проекта: 1200 · 960 · 640 · 480. Сетку ломаем на 840 и 520 —
   раньше, чем 960 и 640: карточка со сканом 0,72 держит читаемое превью
   примерно до 300 px ширины, и переносить её нужно по этому пределу. */
@media (max-width: 840px) {
  .dkDoc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  /* --gutter на 640 уже равен --gutter-mobile (tokens.css), второй раз не задаём. */
  .dkDoc__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .dkDoc__panel { margin-top: 64px; padding: 8px; }
  .dkDoc__closeText { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .dkDoc .dkDoc__close { justify-content: center; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dkDoc .dkDoc__thumb { transition: none; }
  .dkDoc .dkDoc__thumb:hover { transform: none; }
}

/* Печать. Страницу лицензий печатают и подшивают — отдаём по документу
   на лист, без подсказок интерфейса. */
@media print {
  .dkDoc__lens,
  .dkDoc__admin,
  .dkDoc__view { display: none !important; }

  .dkDoc__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .dkDoc__item { break-inside: avoid; page-break-inside: avoid; }

  .dkDoc .dkDoc__thumb {
    padding: 0;
    border: 0;
    box-shadow: none;
  }
}