/* «Дело Кожи» — копия сайта для домена (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; }

@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; }
}