/* Bloki wpisu bloga (MON-255). Motyw ciemny: klasa .dark na <html> (layouts/landing.html). */

.blog-content h2[id], .blog-content h3[id], .blog-content h4[id] {
    scroll-margin-top: 6rem; /* fixed navbar */
}
.blog-content sup[id], .blog-content li[id] { scroll-margin-top: 6rem; }

/* Callout */
.blog-content .blog-callout {
    --callout-accent: #6b7280;
    --callout-bg: #f9fafb;
    --callout-title: #374151;
    border: 1px solid #e5e7eb;
    border-left: 4px solid var(--callout-accent);
    border-radius: 0.5rem;
    background: var(--callout-bg);
    padding: 0.875rem 1rem;
}
.dark .blog-content .blog-callout {
    border-color: #1f2937;
    border-left-color: var(--callout-accent);
    background: var(--callout-bg);
}
.blog-content .blog-callout > * + * { margin-top: 0.5rem; }
.blog-content .blog-callout p { margin: 0; }
.blog-content .blog-callout > p + p { margin-top: 0.5rem; }
.blog-content .blog-callout-title {
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--callout-title);
}

.blog-content .blog-callout-note {
    --callout-accent: #3b82f6; --callout-bg: #eff6ff; --callout-title: #1d4ed8;
}
.blog-content .blog-callout-tip {
    --callout-accent: #10b981; --callout-bg: #ecfdf5; --callout-title: #047857;
}
.blog-content .blog-callout-important {
    --callout-accent: #8b5cf6; --callout-bg: #f5f3ff; --callout-title: #6d28d9;
}
.blog-content .blog-callout-warning {
    --callout-accent: #f59e0b; --callout-bg: #fffbeb; --callout-title: #b45309;
}
.blog-content .blog-callout-caution {
    --callout-accent: #ef4444; --callout-bg: #fef2f2; --callout-title: #b91c1c;
}
.dark .blog-content .blog-callout-note {
    --callout-accent: #60a5fa; --callout-bg: rgba(59, 130, 246, 0.1); --callout-title: #93c5fd;
}
.dark .blog-content .blog-callout-tip {
    --callout-accent: #34d399; --callout-bg: rgba(16, 185, 129, 0.1); --callout-title: #6ee7b7;
}
.dark .blog-content .blog-callout-important {
    --callout-accent: #a78bfa; --callout-bg: rgba(139, 92, 246, 0.12); --callout-title: #c4b5fd;
}
.dark .blog-content .blog-callout-warning {
    --callout-accent: #fbbf24; --callout-bg: rgba(245, 158, 11, 0.1); --callout-title: #fcd34d;
}
.dark .blog-content .blog-callout-caution {
    --callout-accent: #f87171; --callout-bg: rgba(239, 68, 68, 0.1); --callout-title: #fca5a5;
}

/* TL;DR: wyróżniona ramka */
.blog-content .blog-callout-tldr {
    --callout-accent: #4f46e5; --callout-bg: #eef2ff; --callout-title: #4338ca;
    border: 2px solid var(--callout-accent);
    border-radius: 0.75rem;
    padding: 1.125rem 1.25rem;
}
.dark .blog-content .blog-callout-tldr {
    --callout-accent: #818cf8; --callout-bg: rgba(99, 102, 241, 0.12); --callout-title: #c7d2fe;
    border-color: var(--callout-accent);
}
.blog-content .blog-callout-tldr .blog-callout-title { font-size: 0.9375rem; }

/* Callout quote: duży cytat bez etykiety */
.blog-content .blog-callout-quote {
    --callout-accent: #6366f1; --callout-bg: transparent;
    border: 0;
    border-left: 4px solid var(--callout-accent);
    border-radius: 0;
    padding: 0.25rem 0 0.25rem 1.25rem;
    font-size: 1.375rem;
    line-height: 1.5;
    font-weight: 500;
    color: #111827;
}
.dark .blog-content .blog-callout-quote {
    --callout-accent: #818cf8; --callout-bg: transparent;
    border-left-color: var(--callout-accent);
    color: #f9fafb;
}

/* Cytat z autorem */
.blog-content .blog-quote {
    border-left: 3px solid #d1d5db;
    padding-left: 1rem;
}
.dark .blog-content .blog-quote { border-left-color: #374151; }
.blog-content .blog-quote blockquote { border: 0; padding-left: 0; }
.blog-content .blog-quote figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
}
.blog-content .blog-quote figcaption::before { content: "-\00a0"; }
.dark .blog-content .blog-quote figcaption { color: #9ca3af; }

/* Obrazek z podpisem */
.blog-content .blog-figure { text-align: center; }
.blog-content .blog-figure img { display: block; margin: 0 auto; height: auto; }
.blog-content .blog-figure figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
}
.dark .blog-content .blog-figure figcaption { color: #9ca3af; }

/* Kod z nagłówkiem */
.blog-content .blog-code {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #f9fafb;
    overflow: hidden;
}
.dark .blog-content .blog-code { border-color: #1f2937; background: #111827; }
.blog-content .blog-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.375rem 0.75rem;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.8125rem;
}
.dark .blog-content .blog-code-header { background: #1f2937; border-bottom-color: #374151; }
.blog-content .blog-code-title {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #4b5563;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dark .blog-content .blog-code-title { color: #d1d5db; }
.blog-content .blog-code-copy {
    margin-left: auto;
    flex-shrink: 0;
    padding: 0.125rem 0.625rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background: #ffffff;
    color: #374151;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.blog-content .blog-code-copy:hover { background: #eef2ff; color: #4338ca; }
.blog-content .blog-code-copy:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.dark .blog-content .blog-code-copy { border-color: #4b5563; background: #111827; color: #d1d5db; }
.dark .blog-content .blog-code-copy:hover { background: #374151; color: #ffffff; }
.blog-content .blog-code pre,
.dark .blog-content .blog-code pre {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* Przypisy */
.blog-content .blog-footnotes {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    font-size: 0.875rem;
    color: #6b7280;
}
.dark .blog-content .blog-footnotes { border-top-color: #1f2937; color: #9ca3af; }
.blog-content .blog-footnotes ol { padding-left: 1.25rem; }
.blog-content sup a { padding: 0 0.125rem; }

/* Bloki strukturalne (MON-256) */

/* FAQ: akordeon na natywnym <details> */
.blog-content .blog-faq { margin: 1.5rem 0; }
.blog-content .blog-faq-item {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #ffffff;
}
.blog-content .blog-faq-item + .blog-faq-item { margin-top: 0.5rem; }
.dark .blog-content .blog-faq-item { border-color: #1f2937; background: #111827; }
.blog-content .blog-faq-question {
    position: relative;
    display: block;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
    list-style: none;
    border-radius: 0.5rem;
}
.dark .blog-content .blog-faq-question { color: #f9fafb; }
.blog-content .blog-faq-question::-webkit-details-marker { display: none; }
.blog-content .blog-faq-question::after {
    content: "+";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    line-height: 1;
    color: #6366f1;
}
.dark .blog-content .blog-faq-question::after { color: #a5b4fc; }
.blog-content .blog-faq-item[open] > .blog-faq-question::after { content: "\2212"; }
.blog-content .blog-faq-question:hover { background: #f9fafb; }
.dark .blog-content .blog-faq-question:hover { background: #1f2937; }
.blog-content .blog-faq-question:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.blog-content .blog-faq-answer { padding: 0 1rem 0.875rem; }
.blog-content .blog-faq-answer > :first-child { margin-top: 0; }
.blog-content .blog-faq-answer > :last-child { margin-bottom: 0; }

/* Kroki: oś z numerami */
.blog-content .blog-steps {
    counter-reset: blog-step;
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
}
.blog-content .blog-step {
    counter-increment: blog-step;
    position: relative;
    margin: 0;
    padding: 0 0 1.5rem 3rem;
}
.blog-content .blog-step:last-child { padding-bottom: 0; }
.blog-content .blog-step::before {
    content: counter(blog-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: #4f46e5;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 2rem;
    text-align: center;
}
.blog-content .blog-step::after {
    content: "";
    position: absolute;
    left: 0.9375rem;
    top: 2.25rem;
    bottom: 0.25rem;
    width: 2px;
    background: #c7d2fe;
}
.blog-content .blog-step:last-child::after { display: none; }
.dark .blog-content .blog-step::before { background: #6366f1; }
.dark .blog-content .blog-step::after { background: #3730a3; }
.blog-content .blog-step-name {
    display: block;
    font-weight: 700;
    line-height: 2rem;
    color: #111827;
}
.dark .blog-content .blog-step-name { color: #f9fafb; }
.blog-content .blog-step-body > :first-child { margin-top: 0; }
.blog-content .blog-step-body > :last-child { margin-bottom: 0; }

/* Statystyki: kafle */
.blog-content .blog-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.blog-content .blog-stat {
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #f9fafb;
    text-align: center;
}
.dark .blog-content .blog-stat { border-color: #1f2937; background: #111827; }
.blog-content .blog-stat-value {
    display: block;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
    color: #4338ca;
    overflow-wrap: anywhere;
}
.dark .blog-content .blog-stat-value { color: #a5b4fc; }
.blog-content .blog-stat-label {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.875rem;
    color: #4b5563;
}
.dark .blog-content .blog-stat-label { color: #9ca3af; }

/* Porównanie: wrapper przewijany poziomo */
.blog-content .blog-compare {
    margin: 1.5rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.blog-content .blog-compare table { margin: 0; min-width: 100%; border-collapse: collapse; }
.blog-content .blog-compare th,
.blog-content .blog-compare td {
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
}
.dark .blog-content .blog-compare th,
.dark .blog-content .blog-compare td { border-color: #374151; }
.blog-content .blog-compare th { background: #f3f4f6; font-weight: 700; }
.dark .blog-content .blog-compare th { background: #1f2937; }
.blog-content .blog-compare .blog-compare-highlight { background: #eef2ff; }
.blog-content .blog-compare th.blog-compare-highlight { background: #c7d2fe; color: #312e81; }
.dark .blog-content .blog-compare .blog-compare-highlight { background: rgba(99, 102, 241, 0.15); }
.dark .blog-content .blog-compare th.blog-compare-highlight { background: rgba(99, 102, 241, 0.35); color: #e0e7ff; }

/* Szczegóły */
.blog-content .blog-details {
    margin: 1.25rem 0;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #f9fafb;
}
.dark .blog-content .blog-details { border-color: #1f2937; background: #111827; }
.blog-content .blog-details-summary {
    padding: 0.625rem 1rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    border-radius: 0.5rem;
}
.dark .blog-content .blog-details-summary { color: #e5e7eb; }
.blog-content .blog-details-summary:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.blog-content .blog-details-body { padding: 0 1rem 0.875rem; }
.blog-content .blog-details-body > :first-child { margin-top: 0; }
.blog-content .blog-details-body > :last-child { margin-bottom: 0; }

/* Galeria */
.blog-content .blog-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0;
}
.blog-content .blog-gallery-item {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 0.5rem;
    background: #e5e7eb;
}
.dark .blog-content .blog-gallery-item { background: #1f2937; }
.blog-content .blog-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

/* Wideo: placeholder bez zewnętrznych obrazków, iframe dopiero po kliknięciu */
.blog-content .blog-video {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 1.5rem 0;
}
.blog-content .blog-video-play {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    width: 100%;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #1e1b4b, #4338ca);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    gap: 0.75rem;
    transition: filter 0.15s;
}
.dark .blog-content .blog-video-play { background: linear-gradient(135deg, #111827, #3730a3); }
.blog-content .blog-video-play::before {
    content: "";
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234338ca' d='M9 7v10l8-5z'/%3E%3C/svg%3E") center / 2rem no-repeat;
}
.blog-content .blog-video-play:hover { filter: brightness(1.15); }
.blog-content .blog-video-play:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 3px; }
.blog-content .blog-video iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 0.75rem;
}
.blog-content .blog-video-caption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
}
.dark .blog-content .blog-video-caption { color: #9ca3af; }
.blog-content .blog-video-caption > :first-child { margin-top: 0; }
.blog-content .blog-video-caption > :last-child { margin-bottom: 0; }

/* CTA */
.blog-content .blog-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    border: 1px solid #c7d2fe;
    border-radius: 0.75rem;
    background: #eef2ff;
}
.dark .blog-content .blog-cta { border-color: #3730a3; background: rgba(99, 102, 241, 0.12); }
.blog-content .blog-cta-text {
    flex: 1 1 14rem;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e1b4b;
}
.dark .blog-content .blog-cta-text { color: #e0e7ff; }
.blog-content .blog-cta-button {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    background: #4f46e5;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s;
}
.blog-content .blog-cta-button:hover { background: #4338ca; color: #ffffff; }
.blog-content .blog-cta-button:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }
.dark .blog-content .blog-cta-button { background: #6366f1; }
.dark .blog-content .blog-cta-button:hover { background: #818cf8; }

/* Słownik */
.blog-content .blog-glossary { margin: 1.5rem 0; }
.blog-content .blog-glossary dt {
    margin-top: 1rem;
    font-weight: 700;
    color: #111827;
}
.dark .blog-content .blog-glossary dt { color: #f9fafb; }
.blog-content .blog-glossary dt:first-child { margin-top: 0; }
.blog-content .blog-glossary dd {
    margin: 0.25rem 0 0;
    padding-left: 1rem;
    border-left: 2px solid #c7d2fe;
    color: #4b5563;
}
.dark .blog-content .blog-glossary dd { border-left-color: #3730a3; color: #d1d5db; }

/* Wykres SVG (MON-257): kolory serii ze zmiennych, SVG generuje serwer */
.blog-content .blog-chart {
    --blog-chart-1: #4f46e5;
    --blog-chart-2: #0891b2;
    --blog-chart-3: #d97706;
    --blog-chart-4: #db2777;
    --blog-chart-5: #059669;
    --blog-chart-6: #7c3aed;
    --blog-chart-axis: #6b7280;
    --blog-chart-grid: #e5e7eb;
    --blog-chart-label: #374151;
    --blog-chart-surface: #ffffff;
    margin: 1.5rem 0;
}
.dark .blog-content .blog-chart {
    --blog-chart-1: #818cf8;
    --blog-chart-2: #22d3ee;
    --blog-chart-3: #fbbf24;
    --blog-chart-4: #f472b6;
    --blog-chart-5: #34d399;
    --blog-chart-6: #a78bfa;
    --blog-chart-axis: #9ca3af;
    --blog-chart-grid: #374151;
    --blog-chart-label: #d1d5db;
    --blog-chart-surface: #030712;
}
.blog-content .blog-chart-svg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}
.blog-content .blog-chart-axis { stroke: var(--blog-chart-axis); fill: none; stroke-width: 1; }
.blog-content .blog-chart-grid { stroke: var(--blog-chart-grid); fill: none; stroke-width: 1; }
.blog-content .blog-chart-label { fill: var(--blog-chart-label); stroke: none; font-size: 12px; }
.blog-content .blog-chart-series-1 { fill: var(--blog-chart-1); stroke: var(--blog-chart-1); }
.blog-content .blog-chart-series-2 { fill: var(--blog-chart-2); stroke: var(--blog-chart-2); }
.blog-content .blog-chart-series-3 { fill: var(--blog-chart-3); stroke: var(--blog-chart-3); }
.blog-content .blog-chart-series-4 { fill: var(--blog-chart-4); stroke: var(--blog-chart-4); }
.blog-content .blog-chart-series-5 { fill: var(--blog-chart-5); stroke: var(--blog-chart-5); }
.blog-content .blog-chart-series-6 { fill: var(--blog-chart-6); stroke: var(--blog-chart-6); }
.blog-content .blog-chart-swatch { stroke: none; }
.blog-content .blog-chart-swatch-1 { fill: var(--blog-chart-1); }
.blog-content .blog-chart-swatch-2 { fill: var(--blog-chart-2); }
.blog-content .blog-chart-swatch-3 { fill: var(--blog-chart-3); }
.blog-content .blog-chart-swatch-4 { fill: var(--blog-chart-4); }
.blog-content .blog-chart-swatch-5 { fill: var(--blog-chart-5); }
.blog-content .blog-chart-swatch-6 { fill: var(--blog-chart-6); }
.blog-content .blog-chart-bar .blog-chart-svg rect[class*="blog-chart-series-"] { stroke: none; }
.blog-content .blog-chart-pie .blog-chart-svg [class*="blog-chart-series-"] {
    stroke: var(--blog-chart-surface);
    stroke-width: 2;
}
.blog-content .blog-chart-line .blog-chart-svg path[class*="blog-chart-series-"],
.blog-content .blog-chart-line .blog-chart-svg polyline[class*="blog-chart-series-"] {
    fill: none;
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.blog-content .blog-chart-line .blog-chart-svg circle[class*="blog-chart-series-"] { stroke: none; }
.blog-content .blog-chart figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    text-align: center;
}
.dark .blog-content .blog-chart figcaption { color: #9ca3af; }
.blog-content .blog-chart-data { margin-top: 0.75rem; font-size: 0.875rem; }
.blog-content .blog-chart-data > summary {
    cursor: pointer;
    color: #4f46e5;
    font-weight: 600;
}
.dark .blog-content .blog-chart-data > summary { color: #818cf8; }
.blog-content .blog-chart-data > summary:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }
.blog-content .blog-chart-data table { margin-top: 0.5rem; }

/* Diagram: opis i źródło widoczne bez JS, canvas po renderze Mermaid */
.blog-content .blog-diagram {
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #f9fafb;
}
.dark .blog-content .blog-diagram { border-color: #1f2937; background: #111827; }
.blog-content .blog-diagram figcaption {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #111827;
}
.dark .blog-content .blog-diagram figcaption { color: #f9fafb; }
.blog-content .blog-diagram-description > :first-child { margin-top: 0; }
.blog-content .blog-diagram-description > :last-child { margin-bottom: 0; }
.blog-content .blog-diagram-canvas {
    margin-top: 0.75rem;
    overflow-x: auto;
    text-align: center;
}
.blog-content .blog-diagram-canvas[hidden] { display: none; }
.blog-content .blog-diagram-canvas svg { max-width: 100%; height: auto; }
.blog-content .blog-diagram-source {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    border-radius: 0.5rem;
    background: #f3f4f6;
    font-size: 0.8125rem;
    line-height: 1.6;
}
.dark .blog-content .blog-diagram-source { background: #1f2937; }
.blog-content .blog-diagram-rendered .blog-diagram-source { display: none; }

/* Terminal */
.blog-content .blog-terminal {
    --terminal-bg: #111827;
    --terminal-bar: #1f2937;
    --terminal-text: #e5e7eb;
    margin: 1.5rem 0;
    border: 1px solid #1f2937;
    border-radius: 0.75rem;
    background: var(--terminal-bg);
    overflow: hidden;
}
.dark .blog-content .blog-terminal {
    --terminal-bg: #030712;
    --terminal-bar: #111827;
    border-color: #374151;
}
.blog-content .blog-terminal-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--terminal-bar);
    border-bottom: 1px solid #374151;
}
.blog-content .blog-terminal-bar::before {
    content: "";
    flex-shrink: 0;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background: #ef4444;
    box-shadow: 1rem 0 0 #f59e0b, 2rem 0 0 #10b981;
    margin-right: 2rem;
}
.blog-content .blog-terminal-title {
    font-size: 0.8125rem;
    color: #9ca3af;
}
.blog-content .blog-terminal-body {
    margin: 0;
    padding: 0.875rem 1rem;
    overflow-x: auto;
    background: transparent;
    color: var(--terminal-text);
    font-size: 0.875rem;
    line-height: 1.6;
}
.blog-content .blog-terminal-body code { background: transparent; color: inherit; }
.blog-content .blog-terminal-typing .blog-terminal-body code::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 1em;
    margin-left: 1px;
    vertical-align: text-bottom;
    background: var(--terminal-text);
    animation: blog-terminal-blink 1s steps(1) infinite;
}
@keyframes blog-terminal-blink { 50% { opacity: 0; } }

/* Grafika z rejestru: opis jest fallbackiem, po zamontowaniu tylko dla czytników ekranu */
.blog-content .blog-graphic { margin: 1.5rem 0; }
.blog-content .blog-graphic-description > :first-child { margin-top: 0; }
.blog-content .blog-graphic-description > :last-child { margin-bottom: 0; }
.blog-content .blog-graphic-mounted { position: relative; }
.blog-content .blog-graphic-mounted > .blog-graphic-description {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .blog-content .blog-terminal-typing .blog-terminal-body code::after { animation: none; }
}