/* ==========================================================================
   KVX BLOG — Журнал: архив /blog/, статья /blog/{slug}/, блок на главной.
   Подключается на /blog/, /blog/{slug}/ и главной (секция «Журнал»).
   Токены/база — kvx.css (грузится на всех стр.). Гаттер — только .kvx-wrap
   (factory-layout-primitives §A), вертикальный ритм — только padding-block/margin.
   ========================================================================== */

/* ---- кнопка .kvx-btn: дубль базового правила из kvx-home.css.
   kvx-home.css грузится ТОЛЬКО на главной/lp — на /blog/ его нет, поэтому кнопка
   нужна тут (тот же паттерн self-contained CSS, что и в kv-shop.css). ---- */
.kvx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--kvx-head);font-weight:600;font-size:16px;line-height:1.2;min-height:56px;padding:0 32px;border-radius:8px;border:0;cursor:pointer;transition:.15s;white-space:nowrap;max-width:100%;text-align:center}
.kvx-btn.kvx-btn--accent{background:var(--kvx-accent);color:#fff;box-shadow:0 10px 20px rgba(255,119,2,.3)}
.kvx-btn.kvx-btn--accent:hover{background:var(--kvx-accent-h);color:#fff;box-shadow:0 12px 24px rgba(255,119,2,.38)}
.kvx-btn.kvx-btn--ghost{background:#fff;color:#666;border:1px solid #dbdbdb;font-weight:500}
.kvx-btn.kvx-btn--ghost:hover{border-color:var(--kvx-accent);color:var(--kvx-accent)}
.kvx-btn svg{width:18px;height:18px}
@media(max-width:640px){.kvx-article__cta,.kvx-blog-latest__footer{flex-wrap:wrap}.kvx-article__cta .kvx-btn{width:100%}}

/* ---- хлебные крошки: дубль из kv-shop.css (тот грузится только на shell-стр.) ---- */
.kvx-bc{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:13px;color:#888;padding-block:12px 4px;margin-bottom:8px}
.kvx-bc__item{display:inline-flex;align-items:center;min-height:44px;color:#888;text-decoration:none;transition:color .15s}
.kvx-bc__item:hover{color:var(--kvx-accent)}
.kvx-bc__sep{color:#ccc;padding:0 2px}
.kvx-bc__current{color:#444;font-weight:500}

/* ==========================================================================
   АРХИВ /blog/
   ========================================================================== */
.kvx-blog-archive{padding-bottom:24px}
.kvx-blog__head{margin-bottom:8px}
.kvx-blog__head .kvx-page__title{margin-bottom:14px}

/* фильтр по категориям — чипы, горизонтальный скролл на узких экранах */
.kvx-blog-filters{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 8px}
@media(max-width:640px){
	.kvx-blog-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;margin:22px -16px 8px;padding-inline:16px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
	.kvx-blog-filters::-webkit-scrollbar{display:none}
}
.kvx-blog-filters__btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--kvx-line);background:#fff;color:var(--kvx-muted);font-family:var(--kvx-head);font-weight:600;font-size:14px;white-space:nowrap;cursor:pointer;transition:.15s}
.kvx-blog-filters__btn span{color:#a9afb7;font-weight:500;font-size:12.5px}
.kvx-blog-filters__btn:hover{border-color:var(--kvx-accent);color:var(--kvx-accent)}
.kvx-blog-filters__btn.is-active{background:var(--kvx-accent);border-color:var(--kvx-accent);color:#fff}
.kvx-blog-filters__btn.is-active span{color:rgba(255,255,255,.75)}

.kvx-blog__empty{color:var(--kvx-muted);font-size:16px;margin:32px 0 0}

/* ==========================================================================
   СЕТКА КАРТОЧЕК СТАТЕЙ — общая для архива, «Читайте также», главной.
   ========================================================================== */
.kvx-blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px;align-items:stretch}
@media(max-width:1099px){.kvx-blog__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:699px){.kvx-blog__grid{grid-template-columns:1fr}}

.kvx-article-card{background:var(--kvx-card);border-radius:16px;overflow:hidden;box-shadow:0 2px 16px rgba(0,0,0,.07);transition:transform .2s,box-shadow .2s}
.kvx-article-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.12)}
.kvx-article-card__inner{display:flex;flex-direction:column;gap:8px;padding:16px;height:100%;text-decoration:none;color:inherit}
.kvx-article-card__top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.kvx-article-card__cat{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--kvx-accent);background:rgba(255,119,2,.1);border:1px solid rgba(255,119,2,.22);padding:3px 9px;border-radius:999px;white-space:nowrap}
.kvx-article-card__read{font-size:12px;color:#9aa1a9;white-space:nowrap}
.kvx-article-card__title{font-family:var(--kvx-head);font-size:19px;font-weight:800;line-height:1.28;letter-spacing:-.01em;color:var(--kvx-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.kvx-article-card__excerpt{font-size:14.5px;color:var(--kvx-muted);line-height:1.5;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kvx-article-card__more{font-family:var(--kvx-head);font-weight:700;color:var(--kvx-accent);font-size:14.5px;margin-top:auto}

/* обложка — фото (16:10) или фирменный акцентный паттерн, если фото ещё нет */
.kvx-article-card__cover{display:block;position:relative;aspect-ratio:16/10;margin:-16px -16px 0;overflow:hidden;
	background:
		radial-gradient(120% 150% at 85% 12%,hsl(var(--cover-hue,24) 92% 56% / .9),transparent 60%),
		linear-gradient(135deg,hsl(var(--cover-hue,24) 60% 24%),hsl(calc(var(--cover-hue,24) + 30) 55% 13%))}
.kvx-article-card__cover::before{content:'';position:absolute;inset:0;pointer-events:none;
	background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
	background-size:28px 28px;
	-webkit-mask-image:radial-gradient(120% 100% at 100% 0%,#000 30%,transparent 78%);
	mask-image:radial-gradient(120% 100% at 100% 0%,#000 30%,transparent 78%)}
.kvx-article-card__cover--img{background-size:cover;background-position:center}
.kvx-article-card__cover--img::before{display:none}
/* body.kvx img{height:auto} в kvx.css имеет специфичность (0,1,2) — выше, чем класс-селектор
   ниже (0,1,1), и побеждал бы, оставляя фото в своих природных пропорциях (см. house-ui-rules §6:
   тот же паттерн "body.kvx a{color:inherit}"). Префикс body.kvx поднимает специфичность до (0,2,2).
   position:absolute;inset:0 — надёжное заполнение контейнера независимо от интринсик-пропорций фото. */
/* inset-ok: заполнение image-only спана (object-fit:cover), без гаттера/текста внутри — не декор, но и не контент с отступами */
body.kvx .kvx-article-card__cover--img img{position:absolute;inset:0; /* inset-ok */ width:100%;height:100%;object-fit:cover;display:block}

/* ==========================================================================
   ГОРИЗОНТАЛЬНЫЙ СЛАЙДЕР («Читайте также», «Журнал» на главной) — стрелки +
   точки, автоскрытие если листать нечего (house-ui-rules §22).
   ========================================================================== */
/* padding даёт box-shadow карточек «место для дыхания» внутри скролл-контейнера
   (overflow-x:auto клипует всё, что выходит за паддинг-бокс, включая чужую тень —
   тень не расширяет scrollable-область сама по себе). Верх/низ — с запасом (тень
   покоя 0 2px 16px + большая часть hover-тени 0 12px 30px), margin-top компенсирует
   верхний паддинг, низ НЕ компенсируем (лишний воздух перед следующим блоком).
   Гор. паддинг/margin ОБЯЗАН быть ≤ гаттера .kvx-wrap на этой ширине (иначе минус-
   маргин продавит реальный horizontal overflow страницы — было поймано QA на
   768/390) — поэтому 3 отдельных шага, зеркалящих брейкпоинты .kvx-wrap (40/20/16). */
.kvx-blog__grid--slider{display:flex;align-items:stretch;gap:24px;overflow-x:auto;touch-action:pan-x;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding:24px 32px 40px;margin:-24px -32px 0;scroll-padding-inline:32px;position:relative}
@media(max-width:960px){.kvx-blog__grid--slider{padding:20px 20px 32px;margin:-20px -20px 0;scroll-padding-inline:20px}}
@media(max-width:480px){.kvx-blog__grid--slider{padding:16px 16px 28px;margin:-16px -16px 0;scroll-padding-inline:16px}}
.kvx-blog__grid--slider::-webkit-scrollbar{display:none;height:0}
.kvx-blog__grid--slider .kvx-article-card{flex:0 0 calc((100% - 48px) / 3);scroll-snap-align:start}
@media(max-width:1099px){.kvx-blog__grid--slider .kvx-article-card{flex-basis:calc((100% - 24px) / 2)}}
@media(max-width:699px){.kvx-blog__grid--slider .kvx-article-card{flex-basis:82%}}

.kvx-hslider{position:relative}
.kvx-hslider__arrow{display:none;position:absolute;top:calc(50% - 22px);transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;border:0;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.16);cursor:pointer;align-items:center;justify-content:center;color:var(--kvx-accent);transition:.15s}
.kvx-hslider.is-scrollable .kvx-hslider__arrow{display:flex}
.kvx-hslider__arrow:hover{background:var(--kvx-accent);color:#fff}
.kvx-hslider__arrow.is-disabled{opacity:0;pointer-events:none}
.kvx-hslider__arrow svg{width:20px;height:20px}
.kvx-hslider__arrow--prev{left:-8px}
.kvx-hslider__arrow--next{right:-8px}
.kvx-hslider__dots{display:none;justify-content:center;gap:8px;margin-top:16px}
.kvx-hslider.is-scrollable .kvx-hslider__dots{display:flex}
.kvx-hslider__dot{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--kvx-line);opacity:.8;transition:all .18s ease}
.kvx-hslider__dot.is-active{background:var(--kvx-accent);opacity:1;width:22px;border-radius:4px}
@media(max-width:960px){.kvx-hslider__arrow{display:none!important}}

/* ==========================================================================
   БЛОК «ЖУРНАЛ» НА ГЛАВНОЙ
   ========================================================================== */
.kvx-blog-latest__footer{display:flex;justify-content:center;margin-top:36px}

/* ==========================================================================
   СТАТЬЯ /blog/{slug}/
   ========================================================================== */
.kvx-article{padding-block:8px 96px}
.kvx-article__container{max-width:1080px}
.kvx-article__head{max-width:760px;margin:4px 0 32px}
.kvx-article__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.kvx-article__date{font-size:13.5px;color:#9aa1a9}
.kvx-article__title{font-family:var(--kvx-head);font-weight:800;font-size:clamp(30px,4vw,46px);line-height:1.12;letter-spacing:-.02em;color:var(--kvx-ink);text-wrap:balance;margin:0}
.kvx-article__lead{font-size:18px;color:var(--kvx-muted);margin-top:14px;line-height:1.55}

/* обложка статьи */
.kvx-article__cover{position:relative;height:clamp(180px,26vw,320px);border-radius:16px;overflow:hidden;margin:8px 0 40px;
	background:
		radial-gradient(120% 140% at 85% 12%,hsl(var(--cover-hue,24) 92% 56% / .88),transparent 60%),
		linear-gradient(135deg,hsl(var(--cover-hue,24) 60% 24%),hsl(calc(var(--cover-hue,24) + 30) 55% 13%))}
.kvx-article__cover::before{content:'';position:absolute;inset:0;pointer-events:none;
	background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
	background-size:42px 42px;
	-webkit-mask-image:radial-gradient(120% 100% at 100% 0%,#000 30%,transparent 78%);
	mask-image:radial-gradient(120% 100% at 100% 0%,#000 30%,transparent 78%)}
.kvx-article__cover-tag{position:absolute;left:20px;bottom:20px;color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.kvx-article__cover--img{background-size:cover;background-position:center}
.kvx-article__cover--img::before{display:none}

/* оглавление слева (sticky) + текст */
.kvx-article__layout{display:block}
@media(min-width:1000px){
	.kvx-article__layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;align-items:start}
}
.kvx-article__toc{margin-bottom:32px}
@media(min-width:1000px){
	.kvx-article__toc{position:sticky;top:calc(72px + 16px);margin-bottom:0;max-height:calc(100vh - 110px);overflow:auto}
}
.kvx-toc__title{font-family:var(--kvx-head);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9aa1a9;margin:0 0 12px}
.kvx-toc__list{display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--kvx-line)}
.kvx-toc__link{display:block;padding:7px 0 7px 16px;margin-left:-2px;border-left:2px solid transparent;font-size:14px;line-height:1.35;color:var(--kvx-muted);text-decoration:none;transition:color .15s,border-color .15s}
.kvx-toc__link:hover{color:var(--kvx-ink)}
.kvx-toc__link.is-active{color:var(--kvx-accent);border-left-color:var(--kvx-accent);font-weight:700}

/* типографика тела статьи */
.kvx-article__body{font-size:17px;line-height:1.7;color:var(--kvx-ink)}
.kvx-article__body h2{font-family:var(--kvx-head);font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.01em;margin:48px 0 18px;scroll-margin-top:calc(72px + 16px)}
.kvx-article__body h3{font-family:var(--kvx-head);font-size:20px;font-weight:700;margin:32px 0 12px}
.kvx-article__body p{margin:0 0 18px}
.kvx-article__body ul,.kvx-article__body ol{margin:0 0 24px;padding-left:1.4em}
.kvx-article__body li{margin-bottom:10px}
.kvx-article__body a{color:var(--kvx-accent);text-decoration:underline}
.kvx-article__body img{border-radius:12px;margin:8px 0}

/* callout — из markdown-цитаты (>) делаем типизированный акцентный блок (JS проставляет класс) */
.kvx-article__body blockquote{margin:28px 0;padding:20px 20px 20px 24px;background:rgba(255,119,2,.07);border:1px solid rgba(255,119,2,.16);border-left:4px solid var(--kvx-accent);border-radius:10px;color:var(--kvx-ink);font-size:16px}
.kvx-article__body blockquote p{margin:0}
.kvx-article__body blockquote p+p{margin-top:10px}
.kvx-article__body .kvx-callout{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;margin:28px 0;padding:18px 20px;border:1px solid;border-left-width:4px;border-radius:10px;font-size:16px;color:var(--kvx-ink)}
.kvx-callout__icon{display:inline-flex}
.kvx-callout__icon svg{width:22px;height:22px}
.kvx-callout--tip{background:rgba(255,119,2,.07);border-color:rgba(255,119,2,.18);border-left-color:var(--kvx-accent)}
.kvx-callout--tip .kvx-callout__icon{color:var(--kvx-accent)}
.kvx-callout--warn{background:#fff6ea;border-color:#f4d9a6;border-left-color:#e2971a}
.kvx-callout--warn .kvx-callout__icon{color:#c97a0a}
.kvx-callout--ex{background:#eefaf1;border-color:#bfe8cb;border-left-color:#1f9d4a}
.kvx-callout--ex .kvx-callout__icon{color:#1f9d4a}
.kvx-callout--danger{background:#fdeeee;border-color:#f3c6c6;border-left-color:#d33}
.kvx-callout--danger .kvx-callout__icon{color:#d33}

/* врезка-цитата (крупная, акцентная полоса слева) */
.kvx-article__body .kvx-pullquote{margin:36px 0;padding:2px 0 2px 22px;background:none;border:none;border-left:3px solid var(--kvx-accent);font-family:var(--kvx-head);font-weight:700;font-size:clamp(20px,2.4vw,26px);line-height:1.32;letter-spacing:-.01em;color:var(--kvx-ink)}

/* мягкий CTA в середине статьи */
.kvx-midcta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:40px 0;padding:22px 24px;background:#1a1a1a;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.14)}
.kvx-midcta__text{display:flex;flex-direction:column;gap:3px}
.kvx-midcta__text b{color:#fff;font-family:var(--kvx-head);font-size:18px;font-weight:700}
.kvx-midcta__text span{color:#b7bcc3;font-size:14px}
.kvx-midcta .kvx-btn{flex:none}
@media(max-width:520px){.kvx-midcta{flex-direction:column;align-items:stretch}.kvx-midcta .kvx-btn{width:100%}}

/* FAQ (частые вопросы) — переиспользует .kvx-acc из kvx.css */
.kvx-article__faq{margin-top:48px}
.kvx-article__faq-title{font-family:var(--kvx-head);font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-.01em;margin:0 0 18px}

/* CTA-блок в конце статьи */
.kvx-article__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:56px;padding-top:32px;border-top:1px solid var(--kvx-line)}

/* «Читайте также» */
.kvx-article__related{margin-top:72px;padding-top:40px;border-top:1px solid var(--kvx-line)}
.kvx-article__related-title{font-family:var(--kvx-head);font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-.01em;margin:0 0 24px}

/* полоса прогресса чтения */
.kvx-reading-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:100060;background:var(--kvx-accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .08s linear}
@media(prefers-reduced-motion:reduce){.kvx-reading-progress{transition:none}}

/* инфографика чисел (если понадобится, зарезервировано под будущие статьи) —
   грид, автоперенос в 1 колонку на узких экранах, чтобы значение не резалось */
.kvx-article__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:24px 0 32px;align-items:start}
.kvx-stat{background:var(--kvx-card);border:1px solid var(--kvx-line);border-radius:14px;box-shadow:0 2px 16px rgba(0,0,0,.05);padding:16px;display:flex;flex-direction:column;gap:6px}
.kvx-stat__value{font-family:var(--kvx-head);font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.01em;color:var(--kvx-accent);line-height:1;white-space:nowrap}
.kvx-stat__label{font-size:13.5px;color:var(--kvx-muted);line-height:1.35}
@media(max-width:560px){.kvx-article__stats{grid-template-columns:1fr}}

/* мобайл: воздух вертикальной секции чуть плотнее */
@media(max-width:640px){
	.kvx-article{padding-block:4px 64px}
	.kvx-article__cover{margin-bottom:28px}
	.kvx-article__body h2{margin:36px 0 14px}
}