/* «Дело Кожи» — копия сайта для домена (tools/build-dk.mjs, папка dk-site, порт 9500). Внутренние страницы — в оформлении
   главной (/variant/): стена студии с золотистыми волнами (waves.js), всё читаемое — на тёплом молочном стекле, заголовки —
   фирменным Patefon в два тона синего (шрифты — client.css, html[data-font="4"]). Заглушек фото в копии нет (build-dk.mjs
   убирает figure.ph) — блоки, где было фото, собираются в одну колонку (:has). Когда клиника пришлёт фото, они встанут на
   свои места (img вместо заглушки) — правила ниже срабатывают только там, где фото нет */

html { background: #ddd0c1; }
body.page.dk { background: radial-gradient(120% 90% at 72% 10%, #f0e6da 0%, #e2d5c6 55%, #cdbca9 100%) fixed; }
.dk-waves { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 0.8s ease; }
.dk-waves.on { opacity: 1; }
.dk main { z-index: 2; }

/* ── стекло — как плашки главной: молочное, тёплое; чуть плотнее (на внутренних страницах много текста) ── */
.dk .glass { background: linear-gradient(to bottom, rgba(250, 246, 239, 0.76) 0%, rgba(250, 246, 239, 0.84) 100%);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 22px 54px -36px rgba(66, 47, 25, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(6px) saturate(1.05); backdrop-filter: blur(6px) saturate(1.05); }
.dk .glass::before { display: none; }
.dk .glass.accent { background: var(--blue); border-color: rgba(255, 255, 255, 0.25); }
.dk .glass.warm { background: linear-gradient(150deg, rgba(255, 236, 212, 0.92), rgba(250, 246, 239, 0.84)); }

/* ── заголовки — фирменный Patefon, глубокий синий + синий акцент (как на главной) ── */
.dk .h1, .dk .h2, .dk .h3, .dk .cardp h3, .dk .step h3, .dk .person h3, .dk .bk-title, .dk .quiz-q, .dk .prose h2, .dk .prose h3,
.dk .stat b, .dk .pg-hero-tag b, .dk .case-c p, .dk .doc-c p {
  font-family: var(--head), var(--font); font-weight: 700; letter-spacing: -0.01em; }
.dk .h1, .dk .h2, .dk .bk-title { color: var(--ink); }
.dk .h1 { font-size: clamp(34px, 3.5vw, 58px); line-height: 1.04; }
.dk .h2 { font-size: clamp(28px, 2.6vw, 44px); line-height: 1.06; }
.dk .h1 .acc, .dk .h1 .acc-t, .dk .h2 .acc, .dk .h2 .acc-t, .dk .bk-title .acc-t { color: var(--blue); }
.dk .cardp h3, .dk .step h3 { font-size: 19px; line-height: 1.2; }
.dk .person h3 span { font-family: var(--font); font-weight: 400; }
.dk .glass.accent h3 { color: #fff; }

/* ── первый экран страницы: текст — на стеклянной плашке (как первый экран главной); без фото — плашка во всю колонку,
   рядом — отметка (pg-hero-tag: «Бесплатно», «5.0» и т. п.) отдельной плашкой ── */
.dk .pg-hero { padding-top: calc(var(--hdr) + 4vh); align-items: end; }
.dk .pg-hero-copy { padding: clamp(26px, 3vw, 48px); border-radius: 28px; max-width: 900px;
  background: linear-gradient(to bottom, rgba(250, 246, 239, 0.7) 0%, rgba(250, 246, 239, 0.8) 100%); border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 22px 54px -36px rgba(66, 47, 25, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(6px) saturate(1.05); backdrop-filter: blur(6px) saturate(1.05); }
.dk .pg-hero:not(:has(.pg-hero-media img)) { grid-template-columns: minmax(0, 1fr) auto; }
.dk .pg-hero-media:not(:has(img)) { position: relative; height: auto; align-self: end; }
.dk .pg-hero-media:not(:has(img)) .pg-hero-tag { position: static; display: block; max-width: 300px; padding: 22px 26px; border-radius: 24px; }
.dk .pg-hero-tag b { font-size: clamp(26px, 2.2vw, 34px); }
.dk .pg-hero-tag span { font-size: 14px; }
.dk .pg-hero.slim .pg-hero-copy { max-width: 900px; }

/* ── заголовок раздела — на фоне волн: чуть плотнее текст подписи ── */
.dk .sec-head .lead { color: var(--ink); opacity: 0.86; }

/* ── «текст + фото»: текст — на плашке (как всё читаемое на главной); без фото — плашка во всю ширину колонки ── */
.dk .split:not(:has(.split-media)) { grid-template-columns: minmax(0, 1fr); }
.dk .split:not(:has(.split-media)) > .split-copy { max-width: 980px; }
.dk .split > .split-copy { padding: clamp(26px, 3vw, 48px); border-radius: 28px;
  background: linear-gradient(to bottom, rgba(250, 246, 239, 0.76) 0%, rgba(250, 246, 239, 0.84) 100%); border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 22px 54px -36px rgba(66, 47, 25, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(6px) saturate(1.05); backdrop-filter: blur(6px) saturate(1.05); }

/* ── акции: без фото — одна колонка; светло-терракотовая плашка — тёплое стекло ── */
.dk .promo:not(:has(.promo-media)) { grid-template-columns: minmax(0, 1fr); }
.dk .promo.terra { background: linear-gradient(150deg, rgba(255, 236, 212, 0.92), rgba(250, 246, 239, 0.84)); border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 22px 54px -36px rgba(66, 47, 25, 0.45); }

/* ── юридические тексты — на плашке ── */
.dk .prose { padding: clamp(26px, 3.4vw, 56px); border-radius: 28px;
  background: linear-gradient(to bottom, rgba(250, 246, 239, 0.84) 0%, rgba(250, 246, 239, 0.9) 100%); border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 22px 54px -36px rgba(66, 47, 25, 0.45); }
.dk .prose .ed { font-size: 14px; color: var(--ink2); }

/* ── карта — в белой рамке, как на главной ── */
.dk .map { border: 5px solid rgba(255, 255, 255, 0.82); border-radius: 22px; box-shadow: 0 24px 46px -30px rgba(22, 41, 74, 0.5); background: linear-gradient(160deg, #ece8e4, #e2ddd7); }

/* ── запись (только «Консультация», «Лечение акне», «Акции», «Контакты»): без фото — одна плашка с формой ── */
.dk .bk-in { background: linear-gradient(to bottom, rgba(250, 246, 239, 0.84) 0%, rgba(250, 246, 239, 0.9) 100%); border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 22px 54px -36px rgba(66, 47, 25, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(6px) saturate(1.05); backdrop-filter: blur(6px) saturate(1.05); }
.dk .bk-in:not(:has(.bk-media img)) { grid-template-columns: minmax(0, 1fr); }
.dk .bk-media:not(:has(img)) { display: none; }
.dk .bk-main { max-width: 980px; }

/* ── 404 ── */
.dk .e404::after { background: rgba(255, 255, 255, 0.55); opacity: 0.6; }

/* ── «Команда» → «Администрация»: с 10.11 три карточки (портреты Мингазовой и Воротниковой со старого сайта убраны,
      build-dk.mjs) — на компьютере в один ряд, где по две в ряд — третья по центру ── */
@media (min-width: 1101px) { .dk .people.three { --cols: 3; } }
@media (max-width: 1100px) { .dk .people.three > .person:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); } }
@media (max-width: 600px) { .dk .people.three > .person:last-child:nth-child(odd) { width: calc(50% - 5px); } }

/* ═══ 10.11.2026, правки владельца по внутренним страницам ═══ */

/* шапка — на тех же местах, что на главной: от края до края с полями var(--pad), а не в колонке 1360 px
   (base.css: .page .hdr → var(--gut)) — при переходе с главной ничего не съезжает к центру */
.dk .hdr { padding-left: var(--pad); padding-right: var(--pad); }

/* первый экран без фото: отметка («5.0», «10 визитов», цена) — не отдельной маленькой плашкой сбоку, а внутри плашки
   с текстом, под кнопками, через тонкую линию (build-dk.mjs переносит p.pg-hero-tag в .pg-hero-copy → .pg-hero-stat) */
.dk .pg-hero:not(:has(.pg-hero-media)) { grid-template-columns: minmax(0, 1fr); }
.dk .pg-hero-copy > .pg-hero-stat { position: static; z-index: auto; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 4px;
  align-self: stretch; max-width: none; margin-top: clamp(8px, 1.2vw, 16px); padding: clamp(18px, 1.8vw, 24px) 0 0; border: 0;
  border-top: 1px solid rgba(22, 41, 74, 0.12); border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.dk .pg-hero-copy > .pg-hero-stat b { font-size: clamp(28px, 2.4vw, 38px); white-space: nowrap; }
.dk .pg-hero-copy > .pg-hero-stat span { margin-top: 0; font-size: 15px; max-width: 30em; }

/* синяя полоса (.band, «Команда» и др.): заголовок — белый (общее правило выше красило его тёмным) */
.dk .band .h2, .dk .band .h3 { color: #fff; }

/* «текст + фото»: плашка с текстом и фото — одной высоты (фото заполняет высоту плашки) */
@media (min-width: 861px) {
  .dk .split:has(> .split-media > img) { align-items: stretch; }
  .dk .split-media:has(> img) { min-height: 380px; }
  .dk .split-media > img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; }
  /* «до/после» рядом с текстом («Лечение акне» → «Результаты»): снимок не больше 540 px в ширину, плашка — его высоты,
     текст в ней по центру */
  .dk .split:has(> .split-media > .ba) { align-items: stretch; }
  .dk .split-media:has(> .ba) { width: 100%; max-width: 540px; justify-self: end; }
  .dk .split.rev .split-media:has(> .ba), .dk .split-copy + .split-media:has(> .ba) { justify-self: start; }
  .dk .split:has(> .split-media > .ba) > .split-copy { justify-content: center; }
}

/* «О клинике» → «Лицензия и заключения»: текст слева, документы справа; текст не прилипает при прокрутке (раньше
   плашка ехала вниз поверх документов — в копии раздел сложился в одну колонку, а липкость осталась) */
.dk .docs-split .split-copy { position: static; }
@media (min-width: 861px) {
  .dk .split.docs-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
}

/* «Тест на акне»: вопросы — той же ширины и по тому же левому краю, что плашка заголовка (раньше — по центру, уже) */
.dk .quiz { margin-left: 0; max-width: 900px; }
.dk .qz-fine { margin-left: 0; max-width: 900px; text-align: left; }

/* «Вопросы и ответы»: ответ раскрывается плавно (faq.js); при закрытии плюс поворачивается сразу */
.dk .faq details.closing summary::after { transform: none; }

/* «Контакты»: «Как связаться» и карта — рядом, одной высоты (раньше карта уходила отдельным блоком под плашку) */
@media (min-width: 861px) {
  .dk .split.contacts-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: stretch; gap: clamp(16px, 2vw, 28px); }
  .dk .contacts-split > .split-copy { max-width: none; }
  .dk .contacts-split .map { min-height: 520px; height: 100%; }
}

/* подвал — как на главной (b10.css, body.variant .ftr): сплошное синее поле без бледного знака, шрифты главной;
   переход к нему плавный — низ страницы уходит в синий длинным градиентом (владелец 10.11: «разретушируй футер на
   других страницах так же, как на главной»). Градиент — над подвалом, позади содержимого страницы (main выше по z) */
.dk .ftr { z-index: 1; overflow: visible; margin-top: clamp(150px, 22vh, 240px); padding: clamp(64px, 9vh, 100px) var(--gut) calc(30px + env(safe-area-inset-bottom));
  background: var(--blue); font-family: var(--font); }
.dk .ftr::before { content: ''; display: block; position: absolute; left: 0; right: 0; top: auto; bottom: calc(100% - 1px); width: auto; max-width: none;
  height: clamp(300px, 46vh, 460px); aspect-ratio: auto; opacity: 1; pointer-events: none; -webkit-mask: none; mask: none;
  background: linear-gradient(to bottom, rgba(39, 93, 167, 0) 0%, rgba(39, 93, 167, 0.04) 18%, rgba(39, 93, 167, 0.12) 34%,
    rgba(39, 93, 167, 0.27) 50%, rgba(39, 93, 167, 0.48) 65%, rgba(39, 93, 167, 0.72) 80%, rgba(39, 93, 167, 0.9) 91%, #275da7 100%); }
.dk .ftr-top { gap: clamp(28px, 4vw, 64px); padding-bottom: clamp(40px, 6vh, 60px); border-bottom-color: rgba(255, 255, 255, 0.2); }
.dk .ftr-logo { width: min(380px, 100%); }
.dk .ftr-slogan { margin-top: 26px; max-width: 13em; font-family: var(--head), var(--font); font-weight: 700; font-size: clamp(24px, 1.9vw, 30px);
  line-height: 1.12; letter-spacing: -0.005em; color: #fff; }
.dk .ftr h4 { margin-bottom: 14px; font: 600 13px/1.2 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.dk .ftr-col a, .dk .ftr-col p { font-size: 17px; line-height: 1.4; padding: 5px 0; color: rgba(255, 255, 255, 0.92); }
.dk .ftr-col a:hover { color: #fff; }
.dk .ftr .ftr-tel { margin-top: 8px; font-family: var(--head), var(--font); font-weight: 700; font-size: 24px !important; line-height: 1.2; color: #fff; white-space: nowrap; }
.dk .ftr-bot { gap: 14px 30px; padding-top: 24px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }
.dk .ftr-legal { gap: 6px 24px; }
.dk .ftr-legal a { font-size: 15px; color: rgba(255, 255, 255, 0.88); }
.dk .ftr-bot a:hover { color: #fff; }
.dk .ftr-warn { margin-top: 10px; padding-top: 24px; font-family: var(--head), var(--font); font-weight: 700; font-size: clamp(16px, 1.55vw, 24px);
  letter-spacing: 0.05em; line-height: 1.3; color: rgba(255, 255, 255, 0.94); }
@media (max-width: 760px) {
  .dk .ftr { margin-top: 110px; padding: 52px 20px calc(28px + env(safe-area-inset-bottom)); }
  .dk .ftr::before { height: 320px; }
  .dk .ftr-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px 18px; padding-bottom: 34px; }
  .dk .ftr-brand, .dk .ftr-col:last-child { grid-column: 1 / -1; }
  .dk .ftr-logo { width: min(290px, 100%); }
  .dk .ftr-slogan { margin-top: 20px; font-size: 24px; }
  .dk .ftr h4 { margin-bottom: 10px; font-size: 12.5px; }
  .dk .ftr-col a, .dk .ftr-col p { padding: 6px 0; }
  .dk .ftr .ftr-tel { margin-top: 6px; font-size: 27px !important; }
  .dk .ftr-bot { flex-direction: column; gap: 14px; padding-top: 24px; }
  .dk .ftr-legal { flex-direction: column; align-items: flex-start; gap: 0; }
  .dk .ftr-legal a { padding: 6px 0; }
  .dk .ftr-warn { margin-top: 6px; padding-top: 22px; font-size: 16px; line-height: 1.35; text-align: left; }
}

@media (max-width: 860px) {
  .dk .pg-hero:not(:has(.pg-hero-media img)) { grid-template-columns: minmax(0, 1fr); }
  .dk .pg-hero-media:not(:has(img)) .pg-hero-tag { max-width: none; }
  .dk .pg-hero-copy { padding: 22px 20px 22px; border-radius: 24px; }
  .dk .split > .split-copy, .dk .prose { padding: 22px 20px; border-radius: 24px; }
}