/* Страницы статей /blog/*.html в новом дизайне. Меняется только вид:
   тексты, заголовки и порядок блоков в разметке те же, что на бою.
   Образец раскладки — статьи thesispartners.ru/stories: крупный заголовок
   слева, обложка справа, текст без коробки. Содержание статьи на компьютере
   стоит справа от начала текста, текст его обтекает и дальше идёт во всю ширину. Значения — из zhurnal.css. */

html body .article-wrap{max-width:1320px;margin:0 auto;padding:34px 48px 72px}
html body .bg-art{background:var(--dv-page)}

/* крошки: одна строка мелким, без капса */
html body .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 28px;font:500 13px/1.3 Inter,Arial,sans-serif;letter-spacing:0;text-transform:none;color:var(--dv-muted)}
html body .crumb :is(a,span){font:inherit;letter-spacing:0;text-transform:none}
html body .crumb a{color:var(--dv-muted);text-decoration:none}
html body .crumb a:hover{color:var(--dv-terracotta)}
html body .crumb span.sep{opacity:.5}
html body .crumb .crumb__last{flex-basis:auto;margin:0;color:var(--dv-ink);white-space:normal}

/* ── раскладка: колонка текста и правая колонка (обложка, затем содержание) ── */
html body .article{display:flow-root;max-width:none}
@media(min-width:1101px){
  /* обтекание вместо сетки (21.10, Никита: «оглавление кончилось — растягивать
     статью на всю ширину»): обложка справа от заголовка, содержание справа от
     начала текста, ниже конца содержания текст идёт во всю ширину, как у Тезиса */
  html body .article:has(>.st-cover){display:flow-root;max-width:none}
  .article>.st-cover{float:right;width:calc(50% + 10px);margin:0 0 40px 60px}
  .article:has(>.st-cover)>:is(.article-meta,h1,.dates){max-width:calc(50% - 70px)}
  html body .article:has(>.st-cover) h1{font-size:42px}
  .article:has(>.st-cover)>.kratko{clear:both}
  .article:has(>.st-cover)>.toc{float:right;width:320px;margin:0 0 32px 60px}
  .article:has(>.st-cover)>.toc summary{pointer-events:none}
  .article:has(>.st-cover)>.toc summary::after{content:none}
  /* плашки и таблицы рядом с содержанием сужаются, а не залезают под него */
  /* таблицы и списки-флексы сами не залезают под содержание; плашке и нумерованному
     списку это даёт flow-root. Таблице display не менять — иначе она сжимается */
  .article:has(>.st-cover) .article-card :is(.urgent,ol){display:flow-root}
  .article:has(>.st-cover)>:is(.author-box,.useful,.article-cta,.article-back){clear:both}
}

/* шапка статьи */
html body .article-meta{display:flex;align-items:center;gap:14px;margin:0 0 16px}
html body .article-meta .badge,html body .article-meta .badge.solid{padding:0;border:0;border-radius:0;background:none;font:600 12px/1 Inter,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--dv-terracotta)}
html body a.badge:hover{color:var(--dv-terracotta-hover)}
html body .article-meta .date{font:400 13px/1 Inter,Arial,sans-serif;color:var(--dv-muted)}
html body .article h1{margin:0 0 22px;font:600 44px/1.1 Inter,Arial,sans-serif;letter-spacing:-.04em;color:var(--dv-ink);text-wrap:pretty}
html body .dates{margin:0 0 30px;font:400 14px/1.6 Inter,Arial,sans-serif;color:var(--dv-muted)}
html body .dates a{color:var(--dv-ink);font-weight:500;text-decoration:none;border-bottom:1px solid var(--dv-line)}
html body .dates a:hover{color:var(--dv-terracotta);border-color:var(--dv-terracotta)}
.st-cover img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:12px;background:var(--dv-soft)}

/* «Коротко» — мягкая плашка без полосы */
html body .kratko{margin:0 0 36px;padding:22px 26px;border:0;border-radius:16px;background:var(--dv-soft)}
html body .kratko .mono{display:block;margin:0 0 10px;font:600 12px/1 Inter,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--dv-terracotta)}
html body .kratko p{margin:0;font:500 17px/1.6 Inter,Arial,sans-serif;color:var(--dv-ink)}

/* содержание */
html body .toc{margin:0 0 36px;padding:0;border:0;border-radius:0;background:none}
html body .toc summary{padding:0 0 4px;font:600 12px/1 Inter,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--dv-terracotta)}
html body .toc ol{margin:12px 0 0;padding:0;list-style:none;counter-reset:st}
html body .toc li{counter-increment:st;display:grid;grid-template-columns:26px minmax(0,1fr);margin:0;padding:9px 0;border-top:1px solid var(--dv-line);font:400 14.5px/1.45 Inter,Arial,sans-serif;color:var(--dv-ink-soft)}
html body .toc li:last-child{border-bottom:1px solid var(--dv-line)}
html body .toc li::before{content:counter(st);color:var(--dv-muted);font-variant-numeric:tabular-nums}
html body .toc a{color:var(--dv-ink);text-decoration:none;border:0}
html body .toc a:hover{color:var(--dv-terracotta)}

/* текст: без белой коробки и тени */
html body .article-card{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
html body .article-card p{margin:0 0 20px;font:400 18px/1.7 Inter,Arial,sans-serif;color:var(--dv-ink)}
html body .article-card h2{margin:52px 0 16px;font:600 30px/1.2 Inter,Arial,sans-serif;letter-spacing:-.03em;color:var(--dv-ink)}
html body .article-card h2:first-child{margin-top:0}
html body .article-card h3{margin:32px 0 12px;font:600 21px/1.3 Inter,Arial,sans-serif;letter-spacing:-.02em;color:var(--dv-ink)}
html body .article-card ul{margin:0 0 22px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
html body .article-card ol{margin:0 0 22px;padding-left:24px}
html body .article-card li{position:relative;padding-left:26px;font:400 18px/1.6 Inter,Arial,sans-serif;color:var(--dv-ink)}
html body .article-card ol>li{padding-left:4px}
html body .article-card ul>li::before{content:"";position:absolute;left:4px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--dv-terracotta)}
html body .article-card a{color:var(--dv-terracotta);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
html body .article-card a:hover{color:var(--dv-terracotta-hover)}
html body .article-card strong,html body .article-card b{font-weight:600}
/* у таблиц оформление прописано прямо в разметке (min-width:480px, отступы ячеек 0) —
   перебиваем его !important: иначе на телефоне таблица шире экрана (так было и на бою) */
html body .article-card table{display:table;width:100%!important;min-width:0!important;margin:8px 0 28px;border-collapse:collapse;font:400 16px/1.5 Inter,Arial,sans-serif}
html body .article-card table :is(th,td){padding:12px 14px!important;border-bottom:1px solid var(--dv-line);text-align:left;vertical-align:top;color:var(--dv-ink)}
html body .article-card table th{font-weight:600;background:var(--dv-soft)}
html body .article-card img{max-width:100%;height:auto;border-radius:12px}

/* «Когда срочно к врачу» — тёплая плашка, без жирной рамки */
html body .urgent{margin:44px 0 24px;padding:26px 30px;border:0;border-radius:16px;background:var(--dv-peach)}
html body .article-card .urgent h2{margin:0 0 14px;font-size:24px;color:var(--dv-wine)}
html body .urgent li::before{background:var(--dv-terracotta)}
html body .cta-line{font-weight:400}
html body .a-disc{font-size:15px;line-height:1.6;color:var(--dv-muted)}

/* автор */
html body .author-box{display:flex;gap:20px;align-items:center;margin:48px 0 0;padding:28px 0;border:0;border-top:1px solid var(--dv-line);border-bottom:1px solid var(--dv-line);border-radius:0;background:none}
html body .author-box img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 16%;flex:none}
html body .author-box__name{font:600 19px/1.25 Inter,Arial,sans-serif;letter-spacing:-.02em;color:var(--dv-ink)}
html body .author-box__role{margin:3px 0 8px;font:400 14px/1.4 Inter,Arial,sans-serif;color:var(--dv-muted)}
html body .author-box p{margin:0 0 8px;font:400 15px/1.55 Inter,Arial,sans-serif;color:var(--dv-ink-soft)}
html body .author-box a{font:600 14px/1.4 Inter,Arial,sans-serif;color:var(--dv-terracotta);text-decoration:none}

/* полезные материалы — как карточки журнала */
html body .useful{margin:64px 0 0}
html body .useful>.mono{display:block;margin:0 0 22px;font:600 22px/1.3 Inter,Arial,sans-serif;letter-spacing:-.02em;text-transform:none;color:var(--dv-ink)}
html body .useful__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
/* в 25 статьях на бою три полезных материала, а не четыре: три — на всю ширину, без дыры справа */
html body .useful__grid:has(>.useful__card:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
html body .useful__card{display:flex;flex-direction:column;padding:0;border:0;border-radius:0;background:none;color:inherit;text-decoration:none}
html body .useful__card .zh-k__img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:10px;margin:0 0 14px;background:var(--dv-soft)}
html body .useful__card b{display:block;margin:0 0 8px;font:550 17px/1.35 Inter,Arial,sans-serif;letter-spacing:-.02em;color:var(--dv-ink);transition:color .15s}
html body .useful__card span{font:400 14px/1.55 Inter,Arial,sans-serif;color:var(--dv-ink-soft);-webkit-line-clamp:3}
html body .useful__card:hover b{color:var(--dv-terracotta)}

/* запись — мягкая плашка нового дизайна вместо чёрной */
html body .article-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;margin:64px 0 0;padding:34px 40px;border-radius:16px;background:var(--dv-soft);color:var(--dv-ink)}
html body .article-cta h3{margin:0;font:600 26px/1.2 Inter,Arial,sans-serif;letter-spacing:-.03em;color:var(--dv-ink)}
html body .article-cta p{max-width:520px;margin:8px 0 0;font:400 15px/1.55 Inter,Arial,sans-serif;color:var(--dv-ink-soft)}
html body .article-cta .btn{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;border-radius:10px;background:var(--dv-terracotta);border-color:var(--dv-terracotta);color:#fff;font:600 15px/1 Inter,Arial,sans-serif;text-decoration:none}
html body .article-cta .btn:hover{background:var(--dv-terracotta-hover)}
html body .article-back{display:inline-flex;margin-top:36px;font:600 15px/1 Inter,Arial,sans-serif;color:var(--dv-terracotta);text-decoration:none}

@media(max-width:1100px){
  /* обложка в разметке стоит первой — на узком экране ставим её после строки «Автор…» */
  html body .article:has(>.st-cover){display:flex;flex-direction:column}
  .article:has(>.st-cover)>*{order:2;min-width:0}
  .article:has(>.st-cover)>:is(.article-meta,h1,.dates){order:0}
  .article>.st-cover{order:1}
  html body .useful__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body .useful__grid:has(>.useful__card:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  html body .article-wrap{padding:22px 32px 56px}
  .st-cover{margin:0 0 28px}
}
@media(max-width:640px){
  html body .article-wrap{padding:16px 20px 48px}
  html body .crumb{margin-bottom:20px;font-size:12.5px}
  /* длинное слово в заголовке (на бою «аттенуированная(ослабленная» без пробела)
     не должно распирать страницу: перенос по слогам, в крайнем случае — разрыв */
  html body .article h1{font-size:30px;line-height:1.14;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  html body .dates{margin-bottom:22px}
  .st-cover{margin:0 -16px 24px}
  .st-cover img{border-radius:0}
  html body .kratko{padding:18px 18px;margin-bottom:28px}
  html body .kratko p{font-size:16px}
  html body .article-card p,html body .article-card li{font-size:17px}
  html body .article-card h2{margin-top:40px;font-size:24px}
  html body .article-card h3{font-size:19px}
  html body .article-card table{font-size:14.5px}
  /* узкие столбцы на телефоне: переносы по слогам, длинное слово не распирает таблицу */
  html body .article-card table :is(th,td){padding:10px 8px!important;font-size:14px!important;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  html body .urgent{padding:20px 18px}
  html body .author-box{align-items:flex-start}
  html body .author-box img{width:60px;height:60px}
  html body .useful__grid,html body .useful__grid:has(>.useful__card:nth-child(3):last-child){grid-template-columns:minmax(0,1fr);gap:28px}
  html body .article-cta{flex-direction:column;align-items:flex-start;padding:26px 20px}
  html body .article-cta h3{font-size:22px}
  html body .article-cta .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){html body .useful__card b{transition:none}}

/* блок записи сразу после «Когда обратиться к врачу» (21.10) */
html body .article-card .article-cta{margin:22px 0 20px}

/* призыв в статьях: кнопка вопроса врачу, под ней запись на консультацию мелким кеглем (30.10) */
html body .article-cta__deystvie{display:flex;flex-direction:column;align-items:center;gap:10px}
/* Никита 03.11: кнопка «Спросить врача» во всю ширину строки «Нужен подробный разбор? Записаться на видеоконсультацию» под ней */
html body .article-cta .article-cta__deystvie{align-items:stretch}
html body .article-cta .article-cta__deystvie .btn{justify-content:center}
html body .article-cta .article-cta__zapis{max-width:none;margin:0;font-size:13px;line-height:1.4;text-align:center}
html body .article-cta__zapis a{white-space:nowrap;color:var(--dv-terracotta);text-decoration:underline;text-underline-offset:2px}
@media(max-width:640px){
  html body .article-cta__deystvie{width:100%}
  html body .article-cta .article-cta__zapis{text-align:left;align-self:flex-start}
}