/* ==========================================================================
   Public Blog (/blog, /blog/{slug})
   Built on top of site.css (light, graphite-accent design system — see
   app/static/css/site.css and the live reference at /produkty). Loaded
   together with site.css and WITHOUT style.css (the dark theme of the
   private cabinet and knowledge base).

   Article bodies are HTML fragments shared verbatim with the dark
   /knowledge-base (app/templates/blog/articles/*.html, rendered there via
   app/templates/knowledge/view.html + style.css). Those fragments — and two
   of them (article_rotation.html, creative_rules.html) even ship their own
   inline <style> blocks — use the SAME CSS custom-property names and the
   same "kb-*" class names that style.css defines for the dark cabinet.

   Rather than editing the shared fragments, this file:
   1) redeclares those exact custom-property names at :root with light
      values (harmless: style.css is never loaded on the blog, so there is
      no conflict, and the knowledge base never loads blog.css, so it keeps
      the original dark values untouched), and
   2) redeclares every "kb-*" class the fragments use, scoped under
      "body.blog-page" for specificity so these rules always win over a
      fragment's own inline <style> tag regardless of source order.
   Net effect: blog articles render light, the knowledge base stays exactly
   as dark as before. Verified: style.css itself is untouched (md5 unchanged).
   ========================================================================== */

:root {
    --bg-primary: var(--ground);
    --bg-secondary: var(--surface);
    --glass-bg: var(--surface);
    --glass-border: var(--line-soft);
    --glass-hover: var(--line-soft);

    --text-primary: var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted: var(--ink-3);

    --accent-purple: var(--ink);
    --accent-blue: #2563eb;
    --accent-gradient: var(--ink);

    --status-active: #15803d;
    --status-paused: #b45309;
    --status-banned: #dc2626;
    --status-lost: var(--ink-3);

    --font-main: var(--sans);
    --font-mono: var(--mono);
    --border-radius-lg: 16px;
    --border-radius-md: 10px;
    --border-radius-sm: 6px;
    --transition-smooth: all 0.2s ease;
    --box-shadow-glow: none;
}

body.blog-page {
    background-color: var(--ground);
    color: var(--ink);
    min-height: 100vh;
}

/* ---------- Buttons (site.css only ships the plain, dark-pill .btn) ---------- */
.blog-page .btn-secondary {
    background: var(--ground);
    border: 1px solid var(--line);
    color: var(--ink);
}
.blog-page .btn-secondary:hover { background: var(--surface); opacity: 1; }
.blog-page .btn-sm { padding: 9px 18px; font-size: 14px; }

/* ---------- Layout ---------- */
.blog-main { padding-block: 8px 96px; }

/* ---------- Index: hero ---------- */
.blog-hero { max-width: 640px; margin: 24px 0 48px; }
.blog-hero .lede { margin-top: 16px; }

/* ---------- Index: article grid (site.css .article-grid/.article-card) ---------- */
.blog-grid.article-grid { margin-top: 8px; }

/* ---------- Breadcrumbs (shared with the private KB; redeclared light) ---------- */
body.blog-page .kb-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--ink-3);
    margin-bottom: 28px;
}
body.blog-page .kb-breadcrumb-link { color: var(--ink-3); text-decoration: none; }
body.blog-page .kb-breadcrumb-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
body.blog-page .kb-breadcrumb-separator { color: var(--line); }
body.blog-page .kb-breadcrumb-current { color: var(--ink); font-weight: 500; }

/* ---------- Article page ---------- */
.blog-article-title {
    font-size: clamp(30px, 5vw, 42px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.12;
    margin: 0 0 16px;
    max-width: 20ch;
}

body.blog-page .kb-article-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: var(--ink-3);
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 24px;
    margin-bottom: 8px;
}
body.blog-page .kb-meta-divider {
    width: 4px; height: 4px; border-radius: 50%; background-color: var(--ink-3);
}

/* Readable prose column */
body.blog-page .kb-article-body { max-width: 68ch; font-size: 17px; line-height: 1.65; color: var(--ink); }

/* ---------- CTA block (styled like site.css .callout) ---------- */
.blog-cta {
    margin-top: 48px;
    padding: 28px 32px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    max-width: 68ch;
}
.blog-cta h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 10px; }
.blog-cta p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 20px; }
.blog-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Related articles ---------- */
.blog-related { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line-soft); max-width: 68ch; }
.blog-related h3 { font-size: 15px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 16px; }
.blog-related-links { display: flex; flex-direction: column; }
.blog-related-link {
    padding: 14px 0;
    border-top: 1px solid var(--line-soft);
    text-decoration: none;
    color: var(--ink);
    font-size: 16px;
}
.blog-related-links a:first-child { border-top: none; }
.blog-related-link:hover { opacity: 0.7; text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Shared "kb-*" article-body typography and components
   (light re-implementation of app/static/css/style.css lines ~984-1416,
   scoped to body.blog-page so it never leaks into and never loses to the
   dark knowledge base or a fragment's own inline <style> tag)
   ========================================================================== */

body.blog-page .kb-article-body h2 {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 44px 0 18px;
    padding-top: 32px;
    border-top: 1px solid var(--line-soft);
    color: var(--ink);
}

body.blog-page .kb-article-body h3 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 24px 0 12px;
}

body.blog-page .kb-article-body p { margin-bottom: 16px; color: var(--ink-2); }
body.blog-page .kb-article-body strong { color: var(--ink); }

body.blog-page .kb-lead {
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink) !important;
    font-weight: 400;
    margin-bottom: 24px;
}

body.blog-page .kb-code {
    background-color: var(--surface);
    border: 1px solid var(--line-soft);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 14px;
    color: var(--accent-blue);
}

/* Callout box */
body.blog-page .kb-callout-box {
    display: flex;
    gap: 16px;
    background-color: rgba(37, 99, 235, 0.05);
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-left: 4px solid var(--accent-blue);
    border-radius: var(--border-radius-md);
    padding: 20px;
    margin: 24px 0;
}
body.blog-page .kb-callout-box.warning {
    background-color: rgba(180, 83, 9, 0.06);
    border: 1px solid rgba(180, 83, 9, 0.2);
    border-left: 4px solid var(--status-paused);
}
body.blog-page .kb-callout-icon { font-size: 20px; flex-shrink: 0; }
body.blog-page .kb-callout-content { font-size: 15px; color: var(--ink); line-height: 1.6; }

/* Bullet & number lists */
body.blog-page .kb-bullets { margin: 16px 0 24px 20px; list-style-type: disc; }
body.blog-page .kb-bullets li { margin-bottom: 10px; color: var(--ink-2); }
body.blog-page .kb-numbers { margin: 16px 0 24px 20px; list-style-type: decimal; }
body.blog-page .kb-numbers li { margin-bottom: 12px; color: var(--ink-2); padding-left: 4px; }

/* Steps list */
body.blog-page .kb-steps-container { display: flex; flex-direction: column; gap: 28px; margin: 32px 0; }
body.blog-page .kb-step-item { display: flex; gap: 20px; }
body.blog-page .kb-step-badge {
    flex-shrink: 0; width: 36px; height: 36px;
    background: var(--ink); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
body.blog-page .kb-step-num { font-size: 16px; font-weight: 700; color: var(--accent-ink); }
body.blog-page .kb-step-title { font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 8px; margin-top: 4px; }

/* Tip box */
body.blog-page .kb-tip-box {
    display: flex; gap: 12px;
    background-color: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--border-radius-md);
    padding: 16px; margin-top: 16px;
    font-size: 14px; line-height: 1.5; color: var(--ink-2);
}
body.blog-page .kb-tip-icon { font-size: 16px; color: var(--ink); }

/* Factors list */
body.blog-page .kb-factors-list { display: flex; flex-direction: column; gap: 16px; margin: 24px 0; }
body.blog-page .kb-factor-item { background-color: var(--surface); border: 1px solid var(--line-soft); padding: 20px; border-radius: var(--border-radius-md); }
body.blog-page .kb-factor-item h4 { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
body.blog-page .kb-factor-item p { font-size: 14px; color: var(--ink-2); margin-bottom: 0; line-height: 1.6; }

/* Comparison grid */
body.blog-page .kb-comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; }
body.blog-page .kb-comparison-card { background-color: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--border-radius-lg); padding: 24px; }
body.blog-page .kb-comparison-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
body.blog-page .kb-comparison-card.incorrect h3 { color: var(--status-banned); }
body.blog-page .kb-comparison-card.correct h3 { color: var(--status-active); }
body.blog-page .kb-comparison-card.waba { border-color: rgba(37, 99, 235, 0.25); background-color: rgba(37, 99, 235, 0.04); }
body.blog-page .kb-comparison-card.waba h3 { color: var(--accent-blue); }

/* Case study container */
body.blog-page .kb-case-container { background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--border-radius-lg); padding: 24px; margin: 24px 0; }
body.blog-page .kb-case-metrics {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 20px; text-align: center;
}
body.blog-page .kb-case-metric { display: flex; flex-direction: column; }
body.blog-page .kb-metric-num { font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
body.blog-page .kb-metric-lbl { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
body.blog-page .kb-case-content { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
body.blog-page .kb-case-content p { margin-bottom: 12px; }
body.blog-page .kb-case-content p:last-child { margin-bottom: 0; }

/* Scheme box */
body.blog-page .kb-scheme-box { background-color: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--border-radius-lg); padding: 24px; margin: 24px 0; }
body.blog-page .kb-scheme-box h4 { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 20px; text-align: center; }
body.blog-page .kb-scheme-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
body.blog-page .kb-scheme-step { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
body.blog-page .kb-scheme-step:not(:last-child)::after {
    content: "\2192"; position: absolute; top: 10px; right: -15px; color: var(--ink-3); font-size: 18px;
}
body.blog-page .kb-step-icon {
    width: 28px; height: 28px; background-color: var(--ground); border: 1px solid var(--line);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: bold; color: var(--ink); margin-bottom: 12px;
}
body.blog-page .kb-scheme-step strong { font-size: 14px; color: var(--ink); margin-bottom: 6px; }
body.blog-page .kb-scheme-step span { font-size: 12px; color: var(--ink-2); line-height: 1.4; }

/* Table styling */
body.blog-page .kb-table-wrapper { width: 100%; overflow-x: auto; margin: 16px 0 28px; border-radius: var(--border-radius-md); border: 1px solid var(--line-soft); }
body.blog-page .kb-preview-table { width: 100%; border-collapse: collapse; text-align: left; background-color: var(--ground); }
body.blog-page .kb-preview-table th {
    background-color: var(--surface); color: var(--ink-2); font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
    white-space: nowrap;
}
body.blog-page .kb-preview-table td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); font-size: 14px; color: var(--ink-2); }
body.blog-page .kb-highlight-row td { background-color: rgba(220, 38, 38, 0.04); }

body.blog-page .kb-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; }
body.blog-page .kb-badge.success { background-color: rgba(21, 128, 61, 0.1); color: var(--status-active); }
body.blog-page .kb-badge.danger { background-color: rgba(220, 38, 38, 0.1); color: var(--status-banned); }
body.blog-page .kb-danger-text { color: var(--status-banned) !important; font-weight: 600; }

/* ==========================================================================
   Loss calculator (article_lost_clicks.html / poteryannye-kliki)
   ========================================================================== */
body.blog-page .kb-calc-wrapper { background-color: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--border-radius-lg); padding: 28px; margin: 28px 0; }
body.blog-page .kb-calc-header h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
body.blog-page .kb-calc-header p { font-size: 14px; color: var(--ink-2); margin-bottom: 20px; }
body.blog-page .kb-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
body.blog-page .kb-calc-inputs { display: flex; flex-direction: column; gap: 18px; }
body.blog-page .kb-calc-field { display: flex; flex-direction: column; gap: 8px; }
body.blog-page .kb-calc-label { font-size: 13px; color: var(--ink-2); font-weight: 500; }
body.blog-page .kb-calc-input {
    background-color: var(--ground); border: 1px solid var(--line); border-radius: var(--border-radius-md);
    padding: 10px 14px; color: var(--ink); font-family: var(--sans); font-size: 15px;
}
body.blog-page .kb-calc-input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
body.blog-page .kb-calc-slider-box { display: flex; align-items: center; gap: 12px; }
body.blog-page .kb-calc-slider { flex: 1; accent-color: var(--ink); }
body.blog-page .kb-calc-slider-val { font-weight: 700; color: var(--ink); min-width: 42px; text-align: right; }
body.blog-page .kb-calc-outputs { background-color: var(--ground); border: 1px solid var(--line-soft); border-radius: var(--border-radius-md); padding: 20px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
body.blog-page .kb-calc-result-item { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
body.blog-page .kb-calc-result-item.highlight { padding-top: 14px; border-top: 1px dashed var(--line); }
body.blog-page .kb-calc-result-lbl { color: var(--ink-2); }
body.blog-page .kb-calc-result-val { font-size: 16px; font-weight: 700; color: var(--ink); }
body.blog-page .kb-calc-result-val.success { color: var(--status-active); }
body.blog-page .kb-calc-result-val.warning { color: var(--status-paused); }
body.blog-page .kb-calc-result-val.danger { color: var(--status-banned); }

/* ==========================================================================
   Number-rotation simulator (article_rotation.html / rotaciya-nomerov-whatsapp)
   The fragment ships its own inline <style> with a handful of hardcoded
   dark literals ("color: white", dark rgba backgrounds) that the var()
   aliases above cannot reach. Reproduced here as a deliberate "dark device
   panel" floating on the light page — same technique used for real product
   screenshots/consoles embedded in light docs — with body.blog-page giving
   every rule enough specificity to beat the fragment's own <style> tag
   regardless of where it sits in the DOM.
   ========================================================================== */
body.blog-page .kb-sim-wrapper {
    background-color: var(--ink);
    border: 1px solid var(--ink);
    border-radius: var(--border-radius-lg);
    padding: 24px;
    margin: 32px 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.blog-page .kb-sim-header h3 { font-size: 18px; font-weight: 700; color: #ffffff; margin-bottom: 6px; }
body.blog-page .kb-sim-header p { font-size: 13px; color: rgba(255, 255, 255, 0.65); margin-bottom: 20px; }
body.blog-page .kb-sim-status {
    font-size: 14px; color: #ffffff; margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
}
body.blog-page .kb-sim-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
body.blog-page .kb-sim-card {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--border-radius-md);
    padding: 16px; cursor: pointer; transition: var(--transition-smooth); position: relative; user-select: none;
}
body.blog-page .kb-sim-card:hover { border-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.09); }
body.blog-page .kb-sim-card-badge {
    font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 6px; border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.1); display: inline-block; margin-bottom: 12px; color: rgba(255, 255, 255, 0.75);
}
body.blog-page .kb-sim-card-badge.waba { background-color: rgba(96, 165, 250, 0.2); color: #93c5fd; }
body.blog-page .kb-sim-phone { font-size: 16px; font-weight: 700; color: #ffffff; margin-bottom: 8px; }
body.blog-page .kb-sim-clicks { font-size: 13px; color: rgba(255, 255, 255, 0.65); margin-bottom: 16px; }
body.blog-page .kb-sim-indicator { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
body.blog-page .kb-sim-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
body.blog-page .kb-sim-card.active { border-color: rgba(16, 185, 129, 0.4); background-color: rgba(16, 185, 129, 0.08); }
body.blog-page .kb-sim-card.active .kb-sim-dot { background-color: #34d399; box-shadow: 0 0 8px #34d399; }
body.blog-page .kb-sim-card.active .kb-sim-status-text { color: #34d399; }
body.blog-page .kb-sim-card.banned { opacity: 0.6; border-color: rgba(239, 68, 68, 0.4); background-color: rgba(239, 68, 68, 0.08); }
body.blog-page .kb-sim-card.banned .kb-sim-dot { background-color: #f87171; box-shadow: 0 0 8px #f87171; }
body.blog-page .kb-sim-card.banned .kb-sim-status-text { color: #f87171; }
body.blog-page .kb-sim-actions { margin-bottom: 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
body.blog-page .kb-sim-console { background-color: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--border-radius-md); padding: 16px; font-family: var(--mono); font-size: 12px; }
body.blog-page .kb-sim-console-header { color: #ffffff; font-weight: 600; margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); padding-bottom: 8px; font-size: 13px; }
body.blog-page .kb-sim-console-lines { height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
body.blog-page .kb-console-line { color: rgba(255, 255, 255, 0.65); }
body.blog-page .kb-console-line.success { color: #93c5fd; }
body.blog-page .kb-console-line.warn { color: #fbbf24; }
body.blog-page .kb-console-line.danger { color: #f87171; font-weight: 600; }
body.blog-page .kb-console-line.system { color: rgba(255, 255, 255, 0.45); }
/* This panel is the one part of the blog that stays intentionally dark
   (a device/console mockup) -- the buttons underneath it are page buttons,
   not part of the panel, so they keep the normal light .btn styling. */

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    body.blog-page .kb-comparison-grid { grid-template-columns: 1fr; }
    body.blog-page .kb-calc-grid { grid-template-columns: 1fr; }
    body.blog-page .kb-case-metrics { grid-template-columns: repeat(2, 1fr); }
    body.blog-page .kb-sim-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    body.blog-page .kb-scheme-steps { grid-template-columns: 1fr; gap: 28px; }
    body.blog-page .kb-scheme-step:not(:last-child)::after {
        content: "\2193"; top: auto; bottom: -18px; right: auto; left: 50%; transform: translateX(-50%);
    }
    .blog-cta { padding: 22px; }
}