/* ============================================================================
   Страница «О клинике» — page-o-klinike.php.

   Файл самодостаточный и заперт в корневой класс .dkAb: на этой странице
   не грузятся ни service.css, ни service-page.css, поэтому карточка врача
   (общий партиал template-parts/doctor-card.php) одета здесь же — селекторами
   .dkAb .dkA__*. Специфичность на класс выше, чем у оригинала в service.css,
   так что если оба файла когда-нибудь окажутся на одной странице, выиграют
   эти правила, а не порядок подключения.

   Все значения — из assets/tokens.css. Литералов цвета здесь два: #fff
   и #cfe6fb (граница ключевой плашки, перенесена из service.css как есть).
   Призыв в конце страницы описан в site.css классами .dkPgCta и намеренно
   не переопределяется: две копии одной кнопки в проекте уже были.
   ========================================================================== */

/* Свой box-sizing: родительская тема hello-elementor уйдёт вместе
   с конструктором, и наследовать её сброс нельзя. */
:is(.dkAb),
:is(.dkAb) *,
:is(.dkAb) *::before,
:is(.dkAb) *::after { box-sizing: border-box; }

.dkAb {
  font-family: var(--font-body);
  color: var(--body);
}

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

/* Чередование фонов секций по стандарту: #fff → --air → #fff → --tint. */
.dkAb__sec { padding: var(--section-y) 0; background: #fff; }
.dkAb__sec--air { background: var(--air); }
.dkAb__sec--tint { background: var(--tint); }

.dkAb__sec--hero { padding-bottom: calc(var(--section-y) / 2); }

.dkAb__crumbs { font-size: var(--fz-meta); color: var(--muted); margin-bottom: 16px; }
.dkAb .dkAb__crumbs a { color: var(--navy); text-decoration: none; }
.dkAb .dkAb__crumbs a:hover { text-decoration: underline; }

/* --- Типографика секции: eyebrow → H → sub → текст ------------------------ */

.dkAb__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 12px;
}

.dkAb__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 0 16px;
  text-wrap: balance;
}

.dkAb__h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fz-h2);
  line-height: var(--lh-h2);
  color: var(--ink);
  margin: 0 0 12px;
  text-wrap: balance;
}

.dkAb__sub {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-sub);
  line-height: var(--lh-sub);
  color: var(--navy);
  margin: 0 0 24px;
  max-width: 60ch;
}

.dkAb__lead {
  font-size: var(--fz-sub);
  line-height: var(--lh-sub);
  color: var(--body);
  margin: 0;
  max-width: 52ch;
}

.dkAb__prose { font-size: var(--fz-body); line-height: var(--lh-body); max-width: 68ch; }
.dkAb__prose > * + * { margin-top: 14px; }
.dkAb__prose p { margin: 0; }
.dkAb .dkAb__prose a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

.dkAb__note { margin: 24px 0 0; font-size: var(--fz-meta); line-height: 1.6; color: var(--muted); max-width: 68ch; }

/* Подтверждение цифрой под текстом: не подпись и не сноска, а отдельная
   строка со ссылкой на то, где эту цифру можно пересчитать. */
.dkAb__proof {
  margin: 24px 0 0;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 1.5;
  color: var(--body);
  max-width: 68ch;
}

.dkAb .dkAb__link {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dkAb .dkAb__link:hover { color: var(--cyan); }

/* Подсказка редактору. Видна только тем, кто может править страницу, —
   отсюда и вид служебной плашки, а не элемента дизайна. */
.dkAb__admin {
  border: 1px dashed var(--blue);
  border-radius: var(--r-md);
  background: var(--tint);
  padding: 14px 18px;
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy);
  max-width: 68ch;
}

/* --- Плашки с числами ----------------------------------------------------- */

/* minmax обёрнут в min(): голый minmax(220px, 1fr) не сжимается ниже 220
   и на экране 375 выдавливает страницу вбок. */
.dkAb__stats {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--grid-gap);
}

.dkAb__stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh1);
  padding: 22px 24px;
}

/* Ссылку растягиваем на всю плашку: цель нажатия — карточка целиком,
   а не строка текста в ней. */
.dkAb .dkAb__statLink {
  display: block;
  margin: -22px -24px;
  padding: 22px 24px;
  border-radius: var(--r-lg);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}

.dkAb .dkAb__statLink:hover { background: var(--air); }

.dkAb__statVal {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1;
  letter-spacing: var(--tracking-h1);
  color: var(--navy);
}

.dkAb__statUnit {
  display: block;
  margin-top: 6px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}

.dkAb__statLabel {
  display: block;
  margin-top: 8px;
  font-size: var(--fz-meta);
  line-height: 1.5;
  color: var(--muted);
}

.dkAb .dkAb__statLink .dkAb__statUnit { text-decoration: underline; text-underline-offset: 3px; }

/* --- Направления ---------------------------------------------------------- */

.dkAb__dirs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 12px;
}

.dkAb__dir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.dkAb__dirMain {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dkAb__dirIcon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--cyan);
}

.dkAb__dirName {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
}

.dkAb__dirN {
  flex: none;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-meta);
  color: var(--navy);
  background: var(--tint);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  white-space: nowrap;
}

/* --- Кнопка-ссылка на соседнюю страницу ----------------------------------- */

.dkAb__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }

.dkAb .dkAb__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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);
}

.dkAb .dkAb__btn:hover { border-color: var(--blue); color: var(--cyan); }

/* --- Фотографии клиники --------------------------------------------------- */

.dkAb__photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--grid-gap);
  margin: 8px 0 0;
}

.dkAb__photo {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--tint);
  /* Пропорция задана заранее: без неё картинки досыпаются по мере загрузки
     и сдвигают всё, что ниже (CLS). */
  aspect-ratio: 4 / 3;
}

.dkAb__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.dkAb__photosMore { margin: 24px 0 0; text-align: center; }

/* ============================================================================
   Карточка врача. Разметку даёт общий партиал template-parts/doctor-card.php,
   а его стили живут в service.css и service-page.css, которых на этой странице
   нет. Правила ниже перенесены оттуда, привязаны к .dkAb и переведены
   на общие токены (в service.css те же значения продублированы литералами
   внутри .dkA — на этой странице класса .dkA нет вовсе).
   ========================================================================== */

.dkAb .dkA__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 8px 0 0;
}

/* Раскрытие «Подробнее о враче» снимает выравнивание высот: иначе одна
   открытая карточка растягивает всю строку сетки. */
.dkAb .dkA__grid:has(.dkA__more[open]) { align-items: start; }

.dkAb .dkA__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow .22s var(--ease);
}

.dkAb .dkA__card:hover { transform: translateY(-4px); box-shadow: var(--sh2); }

.dkAb .dkA__photo { position: relative; aspect-ratio: 4 / 5; background: var(--tint); overflow: hidden; }
.dkAb .dkA__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dkAb .dkA__initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 44px;
  color: #fff;
  background: linear-gradient(160deg, var(--blue), var(--cyan));
}

/* Ромб — единственный маркёр списка и ярлыка в системе. */
.dkAb .dkA__tag {
  position: absolute;
  left: 16px; top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .94);
  border-radius: var(--r-pill);
  padding: 7px 14px 7px 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  color: var(--navy);
}

.dkAb .dkA__tag::before {
  content: "";
  width: 12px; height: 12px;
  transform: rotate(45deg);
  background: var(--cyan);
  flex: none;
}

.dkAb .dkA__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }

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

.dkAb .dkA__nameLink { color: inherit; text-decoration: none; }
.dkAb .dkA__nameLink:hover { color: var(--cyan); }

.dkAb .dkA__role { font-size: 14.5px; line-height: 1.45; color: var(--muted); margin: 6px 0 0; }

.dkAb .dkA__facts { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; }

.dkAb .dkA__fact {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  background: var(--air);
  border: 1px solid var(--line);
  color: var(--navy);
  padding: 6px 11px;
  border-radius: var(--r-pill);
}

.dkAb .dkA__fact--key { background: var(--tint); border-color: #cfe6fb; }

.dkAb .dkA__proof {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  min-height: 44px;
  padding: 12px 14px;
  background: var(--air);
  border-radius: var(--r-md);
  font-size: 13.5px;
  color: var(--body);
  text-decoration: none;
}

.dkAb .dkA__proof:hover { background: var(--tint); }
.dkAb .dkA__stars { color: var(--star); letter-spacing: 1px; font-size: 13px; flex: none; }
.dkAb .dkA__score { font-family: var(--font-head); font-weight: 800; color: var(--ink); }
.dkAb .dkA__src { color: var(--muted); }

.dkAb .dkA__proof--empty {
  color: var(--muted);
  font-size: 13px;
  background: #fff;
  border: 1px dashed var(--line);
}

.dkAb .dkA__spacer { flex: 1; }

.dkAb .dkA__cta {
  margin: 18px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fz-btn);
  padding: 13px 22px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--blue);
  color: var(--navy);
  background: #fff;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.dkAb .dkA__cta:hover { background: var(--blue); color: #fff; }

/* --- Карточка врача: раскрытие на месте ----------------------------------- */

.dkAb .dkA__more { margin: 16px 0 0; }

.dkAb .dkA__more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-meta);
  color: var(--navy);
  padding: 6px 0;
}

.dkAb .dkA__more > summary::-webkit-details-marker { display: none; }

.dkAb .dkA__more > summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}

.dkAb .dkA__more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.dkAb .dkA__more > summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.dkAb .dkA__moreClose { display: none; }
.dkAb .dkA__more[open] .dkA__moreOpen { display: none; }
.dkAb .dkA__more[open] .dkA__moreClose { display: inline; }

.dkAb .dkA__moreBody {
  margin-top: 8px;
  padding: 16px 18px;
  background: var(--air);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.dkAb .dkA__moreTitle {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 8px;
}

.dkAb .dkA__moreList + .dkA__moreTitle { margin-top: 16px; }

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

.dkAb .dkA__moreList li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  font-size: var(--fz-meta);
  line-height: 1.5;
  color: var(--body);
}

.dkAb .dkA__moreList li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: var(--cyan);
}

.dkAb .dkA__moreList--edu li::before { background: var(--line); }

/* --- Адаптив по брейкпоинтам проекта: 1200 · 960 · 640 -------------------- */

@media (max-width: 1199px) {
  .dkAb .dkA__grid { gap: 20px; }
}

@media (max-width: 959px) {
  .dkAb .dkA__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  /* На странице услуги врачи на мобильном превращаются в карусель: их там
     три-четыре. Здесь их шестнадцать, и карусель на шестнадцать свайпов —
     способ спрятать состав клиники, а не показать его. Одна колонка. */
  .dkAb .dkA__grid { grid-template-columns: 1fr; gap: 16px; }

  .dkAb__stat { padding: 20px; }
  .dkAb .dkAb__statLink { margin: -20px; padding: 20px; }

  .dkAb__dir { flex-wrap: wrap; }
  .dkAb__photo { aspect-ratio: 3 / 2; }
  .dkAb__actions > .dkAb__btn { flex: 1 1 100%; }
}

/* ============================================================================
   Правки по замечаниям владельца 01.08.2026:
   плашка направления кликабельна целиком, шесть отзывов до кнопки.
   ========================================================================== */

/* Ссылкой становится вся плашка, а не заголовок: попасть пальцем в строку
   из двух слов на телефоне — отдельный вид спорта. */
.dkAb .dkAb__dirLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  min-height: 56px;
  padding: 14px 18px;
  margin: -14px -18px;
  border-radius: var(--r-md);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.dkAb .dkAb__dirLink:hover { background: var(--tint); transform: translateX(2px); }
.dkAb .dkAb__dirLink:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* Стрелка появляется только там, где есть куда идти. */
.dkAb .dkAb__dirLink .dkAb__dirName::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 10px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg) translateY(-2px);
}

/* --- Шесть отзывов до кнопки --------------------------------------------- */
.dkAb__revs {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--grid-gap);
}

.dkAb__rev {
  display: flex;
  flex-direction: column;
  padding: 22px 24px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh1);
}

.dkAb__revTop { display: flex; align-items: flex-start; gap: 12px; }

.dkAb__revAva {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
}

.dkAb__revWho { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.dkAb__revName {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  color: var(--ink);
}

.dkAb__revDate { font-size: var(--fz-meta); color: var(--muted); }

.dkAb__revRate { flex: none; color: var(--star); font-size: 13px; letter-spacing: 1px; }

/* Обрезаем: шесть карточек разной высоты рвут сетку, а раскрытие здесь лишнее —
   ниже кнопка на полную ленту, там отзыв читается целиком. */
.dkAb__revText {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}

/* Автор — имя, площадка — ярлык. Одинаковое начертание у обоих читалось бы
   как вторая строка имени: эту ошибку уже ловили на странице услуги. */
.dkAb__revPlat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  align-self: flex-start;
  margin: 14px 0 0;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--air);
  border: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.2;
}

.dkAb__revPlatLabel { font-family: var(--font-body); font-weight: 400; color: var(--muted); }
.dkAb__revPlatName { font-family: var(--font-head); font-weight: 700; color: var(--navy); }

.dkAb .dkAb__revLink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-meta);
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dkAb .dkAb__revLink:hover { color: var(--cyan); }

.dkAb__actions { margin-top: 28px; }