/* =====================================================================
   SocialRise — Blog design system
   Scope: завантажується ТІЛЬКИ на /blog/* сторінках через $extraHeadHtml.
   CSS-змінні скоуповані під .blog-scope щоб не перекривати site-vars.
   .btn / .btn-* теж скоуповані.
   ===================================================================== */

/* ── CSS custom properties блогу ── */
.blog-scope {
  /* ── Фони — як на сайті ── */
  --bg:          #0A0A0F;
  --bg-2:        #111118;
  --card:        #111118;
  --card-2:      #16141f;
  /* ── Рамки — як --border / --border-hover сайту ── */
  --line:        rgba(168,85,247,.2);
  --line-soft:   rgba(255,255,255,.05);
  --line-strong: rgba(168,85,247,.5);
  /* ── Текст — як на сайті ── */
  --text:        #FFFFFF;
  --muted:       rgba(255,255,255,.55);
  --muted-2:     rgba(255,255,255,.3);
  /* ── Акценти — фіолетова гамма сайту ── */
  --accent:      #7C3AED;
  --accent-2:    #A855F7;
  /* ── Кольори соц.мереж (не змінювати) ── */
  --ig-1:#f5572c;--ig-2:#e64583;--ig-3:#a13fe5;
  --tt-1:#25f4ee;--tt-2:#fe2c55;
  --tg-1:#229ED9;--tg-2:#38bdf8;
  --yt-1:#ff0000;--yt-2:#ff5e5e;
  /* ── Rainbow-градієнт лишається ТІЛЬКИ для обкладинки cv-br ── */
  --br-grad:       linear-gradient(135deg,#f5572c 0%,#e64583 35%,#a13fe5 70%,#25f4ee 100%);
  --br-line:       rgba(230,69,131,.25);
  /* ── UI-градієнт: фіолетовий як на сайті ── */
  --purple-grad:   linear-gradient(135deg,#7c3aed 0%,#a855f7 100%);
  --purple-soft:   linear-gradient(135deg,rgba(124,58,237,.15),rgba(168,85,247,.12));
  --ok:#4dffb8;--warn:#ffb84d;
  --maxw: 1180px;
  --radius: 18px;
  --accent-grad:      var(--purple-grad);
  --accent-grad-soft: var(--purple-soft);
  --accent-line:      rgba(168,85,247,.2);
}

/* ── Утиліти ── */
.blog-scope .mono { font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace }
.blog-scope .wrap { max-width:var(--maxw);margin:0 auto;padding:0 32px }
.blog-scope .ico  { width:24px;height:24px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round }

/* ── Кнопки (скоуповано щоб не конфліктувати з site .btn) ── */
.blog-scope .btn {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:999px;font-weight:500;font-size:14px;
  cursor:pointer;transition:all .2s;border:0;white-space:nowrap;
  font-family:inherit
}
.blog-scope .btn .ico { width:17px;height:17px }
.blog-scope .btn-ghost { background:#16121f;color:var(--text);border:1px solid rgba(255,255,255,.08) }
.blog-scope .btn-ghost:hover { border-color:var(--accent-line) }
.blog-scope .btn-primary {
  background:var(--accent-grad);color:#fff;
  background-size:200% 200%;animation:blogGradShift 6s ease infinite
}
.blog-scope .btn-primary:hover { box-shadow:0 10px 34px -6px rgba(124,58,237,.5) }
.blog-scope .btn-lg { padding:15px 30px;font-size:15px }
@keyframes blogGradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ── Page shell ── */
.blog-scope { padding-bottom:80px;display:block }
.blog-scope .page-head { padding:54px 0 30px }
.blog-scope .eyebrow {
  display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px
}
.blog-scope .eyebrow::before { content:"";width:22px;height:2px;border-radius:2px;background:var(--accent-grad) }
.blog-scope h1.page-title { font-size:52px;font-weight:800;letter-spacing:-.03em;line-height:1.02 }
.blog-scope .page-sub { margin-top:18px;max-width:560px;color:var(--muted);font-size:17px }

/* Хлібні крихти */
.blog-scope .crumb { display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted-2);margin-bottom:22px;flex-wrap:wrap }
.blog-scope .crumb a:hover { color:var(--text) }
.blog-scope .crumb .sep { opacity:.5 }

/* ── CSS-обкладинки (gradient art) ── */
.blog-scope .cover { position:relative;overflow:hidden;border-radius:var(--radius);background:#120e1c;isolation:isolate }
.blog-scope .cover::after { content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 110%,rgba(8,7,13,.55),transparent 60%);z-index:2 }
.blog-scope .cover .glyph { position:absolute;right:-12px;bottom:-18px;z-index:1;opacity:.9 }
.blog-scope .cover .glyph .ico { width:130px;height:130px;stroke-width:1.1;stroke:rgba(255,255,255,.5) }
.blog-scope .cover .ctag { position:absolute;left:14px;top:14px;z-index:3;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:6px 12px;border-radius:999px;background:rgba(8,7,13,.42);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.16) }
.blog-scope .cover .num { position:absolute;left:16px;bottom:8px;z-index:3;font-weight:800;font-size:62px;letter-spacing:-.04em;color:rgba(255,255,255,.92);line-height:1;text-shadow:0 8px 30px rgba(0,0,0,.35) }
/* Сітка-mesh на фоні (як на референс-банерах) */
.blog-scope .cover::before { content:"";position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:radial-gradient(130% 110% at 82% 28%,#000,transparent 72%);mask-image:radial-gradient(130% 110% at 82% 28%,#000,transparent 72%) }
/* Glow під 3D-елементом */
.blog-scope .cover .cv-glow { position:absolute;right:7%;bottom:2%;z-index:1;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,.5),transparent 64%);filter:blur(28px);pointer-events:none }
/* 3D-елемент (Fluent Emoji PNG, прозорий фон) */
.blog-scope .cover .cv3d { position:absolute;right:-8px;bottom:-8px;z-index:2;width:46%;max-width:188px;height:auto;filter:drop-shadow(0 16px 28px rgba(0,0,0,.42));pointer-events:none }
/* Верхній бар обкладинки: лого SocialRise + категорія (як на рефах) */
.blog-scope .cover .cv-head { position:absolute;left:13px;top:12px;z-index:3;display:flex;align-items:center;gap:8px }
.blog-scope .cover .cv-head .cv-logo { width:26px;height:26px;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)) }
.blog-scope .cover .cv-head .ctag { position:static;left:auto;top:auto }
/* Заголовок на банері (featured + шапка статті) */
.blog-scope .cover .cv-title { position:absolute;left:18px;right:36%;bottom:16px;z-index:3;margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.12;color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.5);font-size:clamp(19px,2.6vw,30px);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden }
.blog-scope .featured .cover .cv3d { width:40%;max-width:280px }
.blog-scope .featured .cover .cv-glow { width:230px;height:230px }
.blog-scope .art-cover .cv3d { max-width:230px }
.blog-scope .art-cover .cv-glow { width:210px;height:210px }
.blog-scope .art-cover .cv-title { font-size:clamp(23px,3.4vw,38px);-webkit-line-clamp:5;right:34% }
/* Режим повної AI-сцени (background-image + текст/лого зверху) */
.blog-scope .art-cover--img { background-size:cover;background-position:center;background-repeat:no-repeat }
/* Банер-картинка як фон картки / featured (коли є covers/<key>.png) */
.blog-scope .cover--img { background-size:cover;background-repeat:no-repeat;background-position:72% center }
.blog-scope .cover--img::before { display:none }
.blog-scope .featured .cover--img { background-position:center }
.blog-scope .art-cover--img::before { display:none } /* mesh уже в картинці */
.blog-scope .art-cover--img::after { background:linear-gradient(90deg,rgba(8,7,13,.9) 0%,rgba(8,7,13,.5) 42%,rgba(8,7,13,0) 72%) }
/* Більші лого + чип-кнопка (залита кольором, як на рефах) */
.blog-scope .art-cover--img .cv-head { left:22px;top:20px;gap:12px }
.blog-scope .art-cover--img .cv-head .cv-logo { width:68px;height:68px }
/* Чип = eyebrow без рамки: капс + розрядка + акцент-риска знизу */
.blog-scope .art-cover--img .cv-head .ctag { font-family:var(--font-base);font-size:16px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:none;border:none;backdrop-filter:none;box-shadow:none;border-radius:0;padding:0 0 9px;position:relative }
.blog-scope .art-cover--img .cv-head .ctag::after { content:"";position:absolute;left:0;bottom:0;width:46px;height:3px;border-radius:2px;background:linear-gradient(90deg,#7C3AED,#A855F7) }
/* Короткий хук — ВЕЛИКИЙ, зліва, вертикально по центру + акцент-слово (легка підсвітка) */
.blog-scope .art-cover--img .cv-hook { position:absolute;left:30px;right:40%;top:50%;transform:translateY(-50%);z-index:3;margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.04;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.7);font-size:clamp(34px,6vw,64px);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden }
.blog-scope .art-cover--img .cv-hook .cv-accent { color:#c084fc;text-shadow:0 0 14px rgba(192,132,252,.4) }
@media (max-width:640px){
  .blog-scope .art-cover--img .cv-hook { right:30%;left:18px;font-size:clamp(23px,7vw,36px) }
  .blog-scope .art-cover--img .cv-head { left:16px;top:14px }
  .blog-scope .art-cover--img .cv-head .cv-logo { width:50px;height:50px }
  .blog-scope .art-cover--img .cv-head .ctag { font-size:13px;letter-spacing:.14em;padding:0 0 7px }
}

.blog-scope .cv-ig { background:radial-gradient(90% 95% at 78% 12%,rgba(245,87,44,.62),transparent 55%),radial-gradient(80% 90% at 18% 88%,rgba(161,63,229,.55),transparent 60%),linear-gradient(140deg,#2a0f1e,#140a1d) }
.blog-scope .cv-tt { background:radial-gradient(90% 95% at 78% 12%,rgba(37,244,238,.5),transparent 55%),radial-gradient(80% 90% at 18% 88%,rgba(254,44,85,.5),transparent 60%),linear-gradient(140deg,#0d2530,#140a1d) }
.blog-scope .cv-tg { background:radial-gradient(90% 95% at 78% 12%,rgba(56,189,248,.55),transparent 55%),radial-gradient(80% 90% at 18% 88%,rgba(34,158,217,.5),transparent 60%),linear-gradient(140deg,#0c2236,#140a1d) }
.blog-scope .cv-yt { background:radial-gradient(90% 95% at 78% 12%,rgba(255,94,94,.55),transparent 55%),radial-gradient(80% 90% at 18% 88%,rgba(255,0,0,.42),transparent 60%),linear-gradient(140deg,#2a1014,#140a1d) }
.blog-scope .cv-br { background:radial-gradient(85% 95% at 80% 10%,rgba(245,87,44,.5),transparent 52%),radial-gradient(75% 85% at 12% 30%,rgba(230,69,131,.45),transparent 55%),radial-gradient(85% 90% at 30% 96%,rgba(161,63,229,.5),transparent 58%),radial-gradient(70% 80% at 96% 92%,rgba(37,244,238,.4),transparent 55%),#140a1d }
.blog-scope .cv-pu { background:radial-gradient(90% 95% at 78% 12%,rgba(168,85,247,.6),transparent 55%),radial-gradient(80% 90% at 18% 88%,rgba(124,58,237,.5),transparent 60%),linear-gradient(140deg,#1d1030,#140a1d) }

/* ── Рубрикна панель ── */
.blog-scope .rubric-rail { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:6px 0 8px }
.blog-scope .rubric { position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:128px;padding:16px;border-radius:16px;border:1px solid var(--line);overflow:hidden;transition:transform .2s,border-color .2s;text-decoration:none;color:inherit }
.blog-scope .rubric:hover { transform:translateY(-3px);border-color:var(--accent-line) }
.blog-scope .rubric .glyph { position:absolute;right:10px;top:8px;opacity:.5 }
.blog-scope .rubric .glyph .ico { width:74px;height:74px;stroke:rgba(255,255,255,.4);stroke-width:1.2 }
.blog-scope .rubric b { font-size:16px;font-weight:700;letter-spacing:-.01em;position:relative;z-index:2 }
.blog-scope .rubric span { position:relative;z-index:2;margin-top:4px;font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,.62) }

/* ── Секція-заголовок ── */
.blog-scope .section-head { display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:48px 0 22px }
.blog-scope .section-head h2 { font-size:28px;font-weight:800;letter-spacing:-.02em }
.blog-scope .section-head .sub { color:var(--muted);font-size:14.5px;margin-top:4px }
.blog-scope .section-head a.more { font-size:14px;color:var(--accent);font-weight:600;white-space:nowrap }

/* ── Тулбар фільтрів ── */
.blog-scope .toolbar { display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:8px 0 26px }
.blog-scope .filters { display:flex;gap:10px;flex-wrap:wrap }
.blog-scope .fchip { padding:9px 17px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:13.5px;font-weight:600;transition:all .18s;font-family:inherit;cursor:pointer }
.blog-scope .fchip:hover { color:var(--text);border-color:var(--accent-line) }
.blog-scope .fchip.act { color:#fff;background:var(--accent-grad);border-color:transparent }
.blog-scope .sortbox { display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted-2) }
.blog-scope .sortbox .seg { display:flex;padding:4px;background:var(--card);border:1px solid var(--line);border-radius:999px;gap:2px;position:relative }
.blog-scope .sortbox .seg-thumb { position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:var(--accent-grad);box-shadow:0 2px 12px rgba(124,58,237,.4);transition:left .22s cubic-bezier(.4,0,.2,1),width .22s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:0 }
.blog-scope .sortbox .seg .fchip { position:relative;z-index:1;padding:7px 18px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--muted-2);background:transparent;border:none;transition:color .18s }
.blog-scope .sortbox .seg .fchip.act { color:#fff;background:transparent;box-shadow:none }
.blog-scope .sortbox .seg .fchip:not(.act):hover { color:var(--text) }

/* ── Сітка карток ── */
.blog-scope .grid { display:grid;grid-template-columns:1fr;gap:12px }
/* Крапки-індикатори свайп-каруселі (видимі лише на мобільному) */
.blog-scope .grid-dots { display:none }
.blog-scope .grid-dots .dot { width:7px;height:7px;border-radius:50%;background:var(--line);cursor:pointer;transition:width .25s,background .25s }
.blog-scope .grid-dots .dot.act { width:22px;border-radius:99px;background:var(--accent-grad) }
.blog-scope .card { display:flex;flex-direction:row;align-items:stretch;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;transition:transform .22s,border-color .22s,box-shadow .22s;text-decoration:none;color:inherit }
.blog-scope .card:hover { transform:translateY(-2px);border-color:var(--accent-line);box-shadow:0 12px 36px -16px rgba(124,58,237,.5) }
.blog-scope .card .cover { width:192px;min-width:192px;aspect-ratio:auto;min-height:136px;border-radius:var(--radius) 0 0 var(--radius) }
.blog-scope .card .cover .glyph { right:50%;bottom:50%;transform:translate(50%,50%);opacity:.65 }
.blog-scope .card .cover .glyph .ico { width:86px;height:86px }
.blog-scope .card .body { padding:16px 22px;display:flex;flex-direction:column;justify-content:center;gap:8px;flex:1 }
.blog-scope .card .meta { display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted-2) }
.blog-scope .card .meta .dot { width:3px;height:3px;border-radius:50%;background:var(--muted-2) }
.blog-scope .card .rub { color:var(--accent) }
.blog-scope .card h3 { font-size:17px;font-weight:700;letter-spacing:-.015em;line-height:1.3 }
.blog-scope .card:hover h3 { color:#fff }
.blog-scope .card p { color:var(--muted);font-size:13.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden }
.blog-scope .card .readmore { display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text);margin-top:2px }
.blog-scope .card .readmore .ico { width:14px;height:14px;color:var(--accent);transition:transform .2s }
.blog-scope .card:hover .readmore .ico { transform:translateX(4px) }

/* ── Featured (magazine) ── */
.blog-scope .featured { display:grid;grid-template-columns:1fr;gap:0;background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;margin-bottom:14px;text-decoration:none;color:inherit }
.blog-scope .featured .cover { border-radius:0;aspect-ratio:1000/380;min-height:0 }
.blog-scope .featured .cover .glyph .ico { width:200px;height:200px }
.blog-scope .featured .cover .num { font-size:96px }
.blog-scope .featured .fbody { padding:46px 44px;display:flex;flex-direction:column;justify-content:center;gap:18px }
.blog-scope .featured .fbody .meta { display:flex;align-items:center;gap:11px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted-2) }
.blog-scope .featured .fbody .rub { color:var(--accent) }
.blog-scope .featured .fbody .dot { width:3px;height:3px;border-radius:50%;background:var(--muted-2) }
.blog-scope .featured .fbody h2 { font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1.05 }
.blog-scope .featured .fbody p { color:var(--muted);font-size:16px;max-width:46ch }
.blog-scope .featured .fbody .btn { align-self:flex-start;margin-top:6px }

/* ── Пагінація / loadmore ── */
.blog-scope .loadmore { display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:48px }
.blog-scope .btn-load { padding:15px 40px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font-weight:600;font-size:14.5px;transition:all .2s;cursor:pointer;font-family:inherit }
.blog-scope .btn-load:hover { border-color:var(--accent-line);background:var(--card-2) }
.blog-scope .pager { display:flex;align-items:center;gap:8px }
.blog-scope .pager a { width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--muted);font-size:14px;font-weight:600;font-family:'JetBrains Mono',monospace;transition:all .18s;text-decoration:none }
.blog-scope .pager a:hover { color:var(--text);border-color:var(--accent-line) }
.blog-scope .pager a.act { background:var(--accent-grad);color:#fff;border-color:transparent }
.blog-scope .pager a.arrow .ico { width:17px;height:17px }

/* ── TG CTA (замість newsletter) ── */
.blog-scope .newsletter { margin-top:64px;border:1px solid var(--line);border-radius:24px;background:var(--accent-grad-soft);padding:46px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;position:relative;overflow:hidden }
.blog-scope .newsletter::before { content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:var(--accent-grad);opacity:.16;filter:blur(20px) }
.blog-scope .newsletter .nl-text { position:relative;z-index:2 }
.blog-scope .newsletter h3 { font-size:26px;font-weight:800;letter-spacing:-.02em }
.blog-scope .newsletter p { color:var(--muted);margin-top:8px;max-width:42ch }
.blog-scope .newsletter .nl-cta { position:relative;z-index:2 }

/* ── Стаття ── */
.blog-scope .article { max-width:760px;margin:0 auto }
.blog-scope .art-hero { padding:40px 0 8px }
.blog-scope .art-meta { display:flex;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--muted-2);flex-wrap:wrap;margin-bottom:20px }
.blog-scope .art-meta .rub { color:#fff;background:var(--accent-grad);padding:5px 13px;border-radius:999px;font-weight:700;font-size:11px;letter-spacing:.04em }
.blog-scope .art-meta .dot { width:3px;height:3px;border-radius:50%;background:var(--muted-2) }
.blog-scope h1.art-title { font-size:46px;font-weight:800;letter-spacing:-.03em;line-height:1.05 }
/* У режимі-картинки H1 (повний заголовок) йде під банером — менший, бо хук уже великий */
.blog-scope .art-hero h1.art-title { font-size:31px;line-height:1.12;margin:0 0 4px }
.blog-scope .art-lead { margin-top:20px;font-size:20px;line-height:1.55;color:var(--muted) }
.blog-scope .art-author { display:flex;align-items:center;gap:13px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line-soft) }
.blog-scope .art-author .av { width:46px;height:46px;border-radius:50%;background:var(--accent-grad);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:17px;flex-shrink:0 }
.blog-scope .art-author .ai b { font-size:14.5px;font-weight:700;display:block }
.blog-scope .art-author .ai span { font-size:12.5px;color:var(--muted-2) }
.blog-scope .art-cover { aspect-ratio:16/8;margin:34px 0 8px;border-radius:22px }
.blog-scope .art-cover .glyph .ico { width:240px;height:240px }
.blog-scope .art-cover .num { display:none }

/* ── Prose (тіло статті) ── */
.blog-scope .prose { font-size:17.5px;line-height:1.72;color:#d9d4e6 }
.blog-scope .prose > * + * { margin-top:22px }
.blog-scope .prose h2 { font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--text);margin-top:46px;line-height:1.15 }
.blog-scope .prose h3 { font-size:21px;font-weight:700;color:var(--text);margin-top:34px }
.blog-scope .prose p { }
.blog-scope .prose a { color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-line) }
.blog-scope .prose strong { color:var(--text);font-weight:700 }
.blog-scope .prose ul,.blog-scope .prose ol { padding-left:24px;display:flex;flex-direction:column;gap:10px }
.blog-scope .prose li { padding-left:6px }
.blog-scope .prose li::marker { color:var(--accent) }
.blog-scope .prose-table { overflow-x:auto;margin:26px 0;border:1px solid var(--line);border-radius:14px;-webkit-overflow-scrolling:touch }
.blog-scope .prose table { width:100%;border-collapse:collapse;font-size:15px;min-width:420px }
.blog-scope .prose thead th { text-align:left;font-weight:700;color:var(--text);background:rgba(168,85,247,.10);padding:12px 16px;white-space:nowrap }
.blog-scope .prose tbody td { padding:11px 16px;border-top:1px solid var(--line-soft);color:#d9d4e6 }
.blog-scope .prose tbody tr:first-child td { border-top:1px solid var(--line) }
.blog-scope .prose tbody td:first-child { color:var(--text);font-weight:600 }
.blog-scope .prose blockquote { border-left:3px solid;border-image:var(--accent-grad) 1;padding:6px 0 6px 26px;font-size:21px;line-height:1.45;color:var(--text);font-weight:500;font-style:italic }
.blog-scope .prose figure { margin-top:30px }
.blog-scope .prose figure .cover { aspect-ratio:16/9 }
.blog-scope .prose figure figcaption { margin-top:12px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted-2);text-align:center }
.blog-scope .prose code { background:var(--card-2);color:var(--accent);padding:2px 7px;border-radius:6px;font-size:.9em;font-family:'JetBrains Mono',monospace }
.blog-scope .prose pre { background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:20px;overflow-x:auto }
.blog-scope .prose pre code { background:none;padding:0;color:#d9d4e6 }

/* ── Callout ── */
.blog-scope .callout { border:1px solid var(--accent-line);background:var(--accent-grad-soft);border-radius:16px;padding:22px 24px;display:flex;gap:16px }
.blog-scope .callout .ci { flex-shrink:0;width:38px;height:38px;border-radius:11px;background:var(--accent-grad);display:flex;align-items:center;justify-content:center;color:#fff }
.blog-scope .callout .ci .ico { width:20px;height:20px }
.blog-scope .callout .cc b { display:block;margin-bottom:4px }
.blog-scope .callout .cc p { margin:0;color:var(--muted);font-size:15px }

/* ── Share + Tags ── */
.blog-scope .share { display:flex;align-items:center;gap:12px;margin:44px 0;padding:22px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft) }
.blog-scope .share span { font-size:13.5px;color:var(--muted);font-weight:600 }
.blog-scope .share .sbtns { display:flex;gap:10px;margin-left:auto }
.blog-scope .share .sbtn { width:42px;height:42px;border-radius:11px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .18s;background:transparent;cursor:pointer }
.blog-scope .share .sbtn:hover { color:var(--text);border-color:var(--accent-line) }
.blog-scope .share .sbtn .ico { width:18px;height:18px }
.blog-scope .tags { display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px }
.blog-scope .tag { font-size:12.5px;font-family:'JetBrains Mono',monospace;color:var(--muted);padding:7px 14px;border-radius:999px;border:1px solid var(--line);transition:all .18s;text-decoration:none;display:inline-block }
.blog-scope .tag:hover { color:var(--text);border-color:var(--accent-line) }

/* ── Article CTA ── */
.blog-scope .art-cta { max-width:760px;margin:48px auto 0;border:1px solid var(--accent-line);border-radius:24px;background:var(--accent-grad-soft);padding:42px;text-align:center;position:relative;overflow:hidden }
.blog-scope .art-cta::before { content:"";position:absolute;left:50%;top:-80px;transform:translateX(-50%);width:300px;height:200px;background:var(--accent-grad);opacity:.18;filter:blur(50px) }
.blog-scope .art-cta > * { position:relative;z-index:2 }
.blog-scope .art-cta h3 { font-size:28px;font-weight:800;letter-spacing:-.02em }
.blog-scope .art-cta p { color:var(--muted);margin:12px auto 24px;max-width:48ch }
.blog-scope .art-cta-links { margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;font-size:14px }
.blog-scope .art-cta-links__h { color:var(--muted);font-weight:600 }
.blog-scope .art-cta-links a { padding:6px 14px;border-radius:999px;border:1px solid var(--accent-line);background:rgba(255,255,255,.04);color:#fff;font-weight:600;transition:border-color .15s,background .15s }
.blog-scope .art-cta-links a:hover { border-color:var(--accent-2,#a855f7);background:rgba(168,85,247,.12) }

/* ── Related ── */
.blog-scope .related { margin-top:72px }

/* ── Відсутність статей ── */
.blog-scope .blog-empty { text-align:center;padding:80px 20px;color:var(--muted) }
.blog-scope .blog-empty h2 { font-size:24px;font-weight:700;margin-bottom:12px;color:var(--text) }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1040px) {
  .blog-scope .rubric-rail { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:760px) {
  .blog-scope .wrap { padding:0 20px }
  .blog-scope .page-head { padding:34px 0 22px }
  .blog-scope h1.page-title { font-size:34px }
  .blog-scope .page-sub { font-size:15.5px }
  .blog-scope .section-head { margin:36px 0 18px }
  .blog-scope .section-head h2 { font-size:23px }
  .blog-scope .featured { grid-template-columns:1fr !important }
  .blog-scope .featured .cover { aspect-ratio:16/9 !important;min-height:0 !important }
  .blog-scope .featured .cover--img { background-position:center }
  /* Категорії-чипи в один рядок з горизонт. скролом + fade-край (натяк «є ще →») */
  .blog-scope .toolbar { display:block;position:relative }
  .blog-scope .toolbar .filters { display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;min-width:0;width:100%;padding-bottom:2px }
  .blog-scope .toolbar .filters::-webkit-scrollbar { display:none }
  .blog-scope .toolbar .filters .fchip { flex:0 0 auto;white-space:nowrap }
  .blog-scope .toolbar .sortbox { margin-top:12px }
  .blog-scope .toolbar::after { content:"";position:absolute;top:0;right:0;width:40px;height:40px;background:linear-gradient(90deg,transparent,#0A0A0F);pointer-events:none;z-index:2 }
  .blog-scope .featured .cover .glyph .ico { width:130px;height:130px }
  .blog-scope .featured .cover .num { font-size:64px }
  .blog-scope .featured .fbody { padding:28px 24px !important }
  .blog-scope .featured .fbody h2 { font-size:27px !important }
  /* Картки — горизонтальний свайп-карусель + крапки */
  .blog-scope .grid { display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -20px;padding:2px 20px 0 }
  .blog-scope .grid::-webkit-scrollbar { display:none }
  .blog-scope .grid .card { flex:0 0 86%;scroll-snap-align:center }
  .blog-scope .grid-dots { display:flex;justify-content:center;gap:7px;margin-top:16px }
  .blog-scope .card { flex-direction:column }
  .blog-scope .card .cover { width:100%;min-width:0;aspect-ratio:16/10;min-height:auto;border-radius:var(--radius) var(--radius) 0 0 }
  .blog-scope .card .cover .glyph { right:-12px;bottom:-18px;transform:none;opacity:.9 }
  .blog-scope .card .cover .glyph .ico { width:130px;height:130px }
  .blog-scope .card .body { justify-content:flex-start;padding:16px 18px 20px }
  .blog-scope .newsletter { padding:30px 26px }
  .blog-scope .newsletter h3 { font-size:22px }
  .blog-scope .art-hero { padding:24px 0 4px }
  .blog-scope h1.art-title { font-size:32px }
  .blog-scope .art-lead { font-size:17px }
  .blog-scope .art-cover { aspect-ratio:16/10;margin:26px 0 }
  .blog-scope .art-cover .glyph .ico { width:150px;height:150px }
  .blog-scope .prose { font-size:16.5px }
  .blog-scope .prose h2 { font-size:24px }
  .blog-scope .prose blockquote { font-size:18px }
  .blog-scope .art-cta { padding:32px 24px }
  .blog-scope .art-cta h3 { font-size:23px }
  .blog-scope .rubric-rail { grid-template-columns:repeat(2,1fr) }
}