/* ============================================================
MedGrade Article Kit — типографика тела + выделения + боксы
Микс: Tailwind Typography (#5 prose) + Docs-callouts (#2 Nextra/Docusaurus)
+ LaTeX.css боксы (#4 определение/выводы). Всё на плоских токенах.
Scope: .article-body (обёртка вокруг DETAIL_TEXT статьи блога)
============================================================ */
/* ---------- #5 PROSE — ритм тела ---------- */
.article-body{
font-family:var(--font-body);
font-size:var(--fs-md,17px);
line-height:1.72;
color:color-mix(in oklch, var(--ink) 88%, var(--white-warm));
max-width:72ch;
}
.article-body > * + *{margin-top:1.15em}
.article-body p{margin:0 0 1.15em}
.article-body a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;
text-decoration-thickness:1px;transition:color var(--dur-fast,120ms) var(--ease)}
.article-body a:hover{color:var(--green,#5AAA28)}
.article-body strong{font-weight:700;color:var(--ink)}
.article-body em{font-style:italic}
/* заголовки — бренд (Bebas display H2, Manrope H3) */
.article-body h2{
font-family:var(--font-display,'Bebas Neue');font-weight:400;letter-spacing:.01em;
font-size:var(--fs-3xl,32px);line-height:1.12;color:var(--brand);
margin:2em 0 .6em;padding-top:.2em}
.article-body h3{
font-family:var(--font-body);font-weight:700;
font-size:var(--fs-xl,22px);line-height:1.25;color:var(--ink);
margin:1.7em 0 .5em}
.article-body h4{font-family:var(--font-body);font-weight:700;font-size:var(--fs-lg,18px);color:var(--ink);margin:1.4em 0 .4em}
/* списки */
.article-body ul,.article-body ol{margin:0 0 1.15em;padding-left:1.4em}
.article-body li{margin:.4em 0;padding-left:.2em}
.article-body ul > li::marker{color:var(--green,#5AAA28)}
.article-body ol > li::marker{color:var(--brand);font-weight:700}
.article-body li > ul,.article-body li > ol{margin:.4em 0}
/* цитата (обычная) — сбрасываем legacy border-top/bottom, оставляем акцент слева */
.article-body blockquote{
margin:1.6em 0;padding:.4em 0 .4em 1.4em;
border:0;border-left:3px solid var(--green,#5AAA28);
font-size:var(--fs-lg,19px);line-height:1.5;font-style:italic;font-weight:500;
color:color-mix(in oklch, var(--ink) 75%, var(--white-warm))}
.article-body blockquote p:last-child{margin-bottom:0}
/* картинки + подпись */
.article-body img{max-width:100%;height:auto;border-radius:var(--r-lg,12px);display:block;margin:1.6em auto}
.article-body figure{margin:1.6em 0}
.article-body figcaption{margin-top:.6em;font-size:var(--fs-sm,13px);color:var(--graphite,#87888C);text-align:center}
/* код */
.article-body code{font-family:var(--font-mono,monospace);font-size:.9em;
background:color-mix(in oklch, var(--brand) 7%, var(--white-warm));padding:.15em .4em;border-radius:var(--r-sm,6px)}
.article-body pre{background:var(--ink);color:#e8e8e8;padding:var(--sp-4,16px);border-radius:var(--r-lg,12px);
overflow-x:auto;font-size:var(--fs-sm,14px);line-height:1.5;margin:1.4em 0}
.article-body pre code{background:transparent;padding:0;color:inherit}
/* таблица */
.article-body table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:var(--fs-base,15px)}
.article-body th,.article-body td{padding:.7em .9em;text-align:left;border-bottom:1px solid color-mix(in oklch, var(--brand) 12%, transparent)}
.article-body thead th{background:color-mix(in oklch, var(--brand) 8%, var(--white-warm));color:var(--brand);
font-weight:700;border-bottom:2px solid color-mix(in oklch, var(--brand) 25%, transparent)}
.article-body tbody tr:hover{background:color-mix(in oklch, var(--brand) 3%, transparent)}
.article-body hr{border:0;border-top:1px solid color-mix(in oklch, var(--brand) 14%, transparent);margin:2em 0}
/* ---------- #2 CALLOUT-боксы (выделения) ---------- */
.mg-callout{
display:flex;gap:var(--sp-3,12px);align-items:flex-start;
margin:1.6em 0;padding:var(--sp-4,16px) var(--sp-5,20px);
border:1px solid color-mix(in oklch, var(--brand) 16%, transparent);
border-left:4px solid var(--brand);
border-radius:var(--r-lg,12px);
background:color-mix(in oklch, var(--brand) 4%, var(--white-warm));
font-size:var(--fs-base,15px);line-height:1.6}
.mg-callout__icon{flex-shrink:0;width:22px;height:22px;color:var(--brand);margin-top:1px}
.mg-callout__body{min-width:0}
.mg-callout__title{font-weight:700;color:var(--ink);margin-bottom:.2em;font-size:var(--fs-md,16px)}
.mg-callout p:last-child{margin-bottom:0}
.mg-callout--tip{border-left-color:var(--green,#5AAA28);background:color-mix(in oklch, var(--green) 6%, var(--white-warm))}
.mg-callout--tip .mg-callout__icon{color:var(--green,#5AAA28)}
.mg-callout--warn{border-left-color:#C8881A;background:color-mix(in oklch, #E8A93B 12%, var(--white-warm))}
.mg-callout--warn .mg-callout__icon{color:#C8881A}
.mg-callout--norm{border-left-color:var(--sage,#CDD1B9);background:color-mix(in oklch, var(--sage) 22%, var(--white-warm))}
.mg-callout--norm .mg-callout__icon{color:color-mix(in oklch, var(--brand) 70%, black)}
/* ---------- #4 БОКС «Определение» (что такое X) ---------- */
.mg-definition{
margin:1.6em 0;padding:var(--sp-5,20px) var(--sp-6,24px);
border-radius:var(--r-xl,16px);
background:color-mix(in oklch, var(--brand) 6%, var(--white-warm));
border:1px solid color-mix(in oklch, var(--brand) 14%, transparent)}
.mg-definition__eyebrow{font-size:var(--fs-xs,11px);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--green,#5AAA28);margin-bottom:.4em}
.mg-definition__term{font-family:var(--font-body);font-weight:700;font-size:var(--fs-xl,22px);color:var(--brand);margin-bottom:.3em}
.mg-definition__body{font-size:var(--fs-md,16px);line-height:1.6;color:var(--ink)}
.mg-definition__body p:last-child{margin-bottom:0}
/* ---------- #4 БОКС «Коротко / Ключевые выводы» ---------- */
.mg-takeaways{
margin:1.8em 0;padding:var(--sp-5,20px) var(--sp-6,24px);
border-radius:var(--r-xl,16px);
background:var(--brand);color:var(--white-warm,#efefef)}
.mg-takeaways__title{font-family:var(--font-display,'Bebas Neue');font-weight:400;letter-spacing:.02em;
font-size:var(--fs-2xl,26px);color:#fff;margin-bottom:.5em;display:flex;align-items:center;gap:var(--sp-2,8px)}
.mg-takeaways__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6em}
.mg-takeaways__list li{position:relative;padding-left:1.7em;line-height:1.5;font-size:var(--fs-base,15px)}
.mg-takeaways__list li::before{content:"";position:absolute;left:0;top:.15em;width:18px;height:18px;
background:var(--accent,#DBFE02);border-radius:50%;
-webkit-mask:url('data:image/svg+xml;utf8,') center/12px no-repeat;
mask:url('data:image/svg+xml;utf8,') center/12px no-repeat}
/* ---------- #3 Pull-quote — особая бренд-врезка (бокс + декоративная кавычка) ---------- */
/* специфичность .article-body blockquote.mg-pullquote (0,1,2) перебивает legacy + .article-body blockquote */
.mg-pullquote,
.article-body blockquote.mg-pullquote{
position:relative;margin:2em 0;
padding:var(--sp-6,24px) var(--sp-6,24px) var(--sp-5,20px) 64px;
border:0;border-radius:var(--r-2xl,20px);
background:color-mix(in oklch, var(--brand) 6%, var(--white-warm));
font-family:var(--font-body);font-weight:600;font-style:normal;
font-size:var(--fs-xl,22px);line-height:1.4;color:var(--brand)}
.mg-pullquote::before{content:"\201C";position:absolute;left:18px;top:14px;
font-family:Georgia,'Times New Roman',serif;font-size:48px;line-height:1;color:var(--green,#5AAA28)}
.mg-pullquote p{margin:0}
.mg-pullquote cite{display:block;margin-top:.6em;text-align:right;font-size:var(--fs-sm,14px);font-weight:600;font-style:normal;color:var(--graphite,#87888C)}
@media (max-width:560px){
.article-body{font-size:var(--fs-base,16px)}
.article-body h2{font-size:var(--fs-2xl,28px)}
}
/* ============================================================
Обложка / автор / товар-галерея — паттерны texterra + auto.ru,
адаптировано под бренд MedGrade (свои токены, не копия).
============================================================ */
/* ---------- Обложка-герой (texterra) — full-bleed, всё внутри ---------- */
.article-cover{position:relative;overflow:hidden;margin:0 0 var(--sp-7,32px);
min-height:clamp(320px,38vw,440px);display:flex;background:var(--brand) center/cover no-repeat}
.article-cover__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* двухслойный overlay: слева темнее под текст + нижнее затемнение под мету, фото остаётся читаемым */
.article-cover::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg, transparent 38%, rgba(1,20,15,.72) 100%),
linear-gradient(100deg, rgba(1,15,11,.92) 0%, rgba(1,24,18,.7) 58%, rgba(1,38,28,.32) 100%)}
/* max-width 1440 + padding 24 = единая рельса сайта (header-логотип на 24).
Контент обложки (крошки/H1) выровнен с телом статьи и шапкой. Фон .article-cover full-bleed. */
.article-cover__inner{position:relative;z-index:2;width:100%;max-width:1440px;margin:0 auto;
padding:var(--sp-7,32px) 24px var(--sp-6,24px);
display:flex;flex-direction:column;color:#fff}
.article-cover__crumbs{font-size:var(--fs-sm,13px);color:rgba(255,255,255,.78);margin-bottom:var(--sp-5,20px);
text-shadow:0 1px 6px rgba(0,0,0,.35)}
.article-cover__crumbs a{color:rgba(255,255,255,.85);text-decoration:none}
.article-cover__crumbs a:hover{color:#fff}
.article-cover__title{font-family:var(--font-display,'Bebas Neue');font-weight:400;letter-spacing:.01em;
font-size:clamp(30px,2vw + 18px,52px);line-height:1.06;color:#fff;margin:0 0 var(--sp-4,16px);max-width:28ch;
text-shadow:0 2px 14px rgba(0,0,0,.28);text-wrap:balance}
.article-cover__lead{max-width:80ch;font-size:var(--fs-md,17px);line-height:1.5;
color:rgba(255,255,255,.92);margin:0 0 var(--sp-5,20px);text-shadow:0 1px 10px rgba(0,0,0,.32)}
.article-cover__tag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
padding:7px 14px;border-radius:var(--r-full,9999px);background:var(--accent,#DBFE02);color:var(--ink);
font:700 12px/1 var(--font-body);letter-spacing:.05em;text-transform:uppercase}
/* нижняя строка: автор + дата + время + просмотры */
.article-cover__meta{margin-top:auto;display:flex;align-items:center;gap:var(--sp-5,20px);flex-wrap:wrap;
padding-top:var(--sp-7,32px);font-size:var(--fs-sm,14px);color:rgba(255,255,255,.85)}
.article-cover__author{display:flex;align-items:center;gap:var(--sp-2,8px);margin-right:auto;font-weight:600;color:#fff}
.article-cover__author-ava{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;
background:linear-gradient(135deg,var(--green),var(--accent))}
.article-cover__mi{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.article-cover__mi svg{width:16px;height:16px;opacity:.75}
@media (max-width:560px){
.article-cover{min-height:auto}
.article-cover__meta{gap:var(--sp-3,12px)}
.article-cover__author{margin-right:0;width:100%}
}
/* ---------- Автор + meta (E-E-A-T) ---------- */
.article-author{display:flex;align-items:center;gap:var(--sp-3,12px);flex-wrap:wrap;
padding:0 0 var(--sp-5,20px);border-bottom:1px solid color-mix(in oklch,var(--brand) 12%,transparent);margin-bottom:var(--sp-6,24px)}
.article-author__ava{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0;
background:linear-gradient(135deg,var(--brand),var(--green))}
.article-author__info{display:flex;flex-direction:column;gap:1px;margin-right:auto}
.article-author__name{font-weight:700;color:var(--ink);font-size:var(--fs-md,16px)}
.article-author__role{font-size:var(--fs-sm,13px);color:var(--graphite,#87888C)}
.article-author__meta{display:flex;gap:var(--sp-4,16px);font-size:var(--fs-sm,13px);color:var(--graphite,#87888C)}
.article-author__meta span{display:inline-flex;align-items:center;gap:5px}
.article-author__meta svg{width:15px;height:15px;opacity:.7}
/* Товар в потоке статьи — НЕ рисуем заново: используем готовый компонент
C3-слайдера «Оборудование по теме» (catalog.section/catalog_slider_with_title),
тот же, что в листинге блога (2.4) и на боевых статьях. Стилей здесь нет. */