/* ── Blog (shared across en/he/ru, index and post) ─────────────────────────
   Measured 2026-09-30: twenty-eight classes across these six pages were
   defined in no stylesheet at all. The index rendered as an undifferentiated
   column of headings, dates and "Read more" links; the article body, which is
   raw HTML from the database, inherited nothing but browser defaults. Every
   page returned 200 with all its words, which is why three content audits and
   the uptime monitor walked past it.

   Written in this site's tokens, alongside check-site.css and demo.css. RTL is
   handled by the page living inside dir="rtl" on /he/: everything here is
   flow-relative, and the two places that are not use logical properties. */

/* ── Index ─────────────────────────────────────────────────────────────── */
.blog-index-section {
    padding: 8px 0 72px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #E8ECF3;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .18s, transform .18s, box-shadow .18s;
}

.blog-card:hover {
    border-color: #C7D6F5;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .09);
}

/* The inline background is a per-post gradient set in the markup; this only
   gives it a size and centres the glyph. */
.blog-thumb {
    height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.blog-thumb-icon {
    font-size: 2.6rem;
    line-height: 1;
}

.blog-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 20px 18px;
}

.blog-body h3 {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-on-light-primary, #0F172A);
    margin: 0 0 8px;
}

.blog-tag {
    align-self: flex-start;
    display: inline-block;
    background: var(--icon-bg-blue, #EFF6FF);
    color: #2563EB;
    border-radius: 20px;
    padding: 3px 11px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.blog-excerpt {
    font-size: .89rem;
    line-height: 1.6;
    color: var(--text-on-light-secondary, #475569);
    margin: 0 0 16px;
}

/* Pushed to the bottom so cards of different text length still line up. */
.blog-meta {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.blog-date {
    font-size: .78rem;
    color: var(--text-on-light-muted, #94A3B8);
}

.blog-read-more {
    font-size: .84rem;
    font-weight: 700;
    color: #2563EB;
    text-decoration: none;
    white-space: nowrap;
}

.blog-read-more:hover { text-decoration: underline; }

/* ── The invitation under the index ────────────────────────────────────── */
.blog-index-cta {
    margin-top: 44px;
    padding: 26px;
    border-radius: 18px;
    background: linear-gradient(135deg, #F1F5FF 0%, #EEF7F4 100%);
    border: 1px solid #DCE6FA;
}

.blog-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}

.blog-cta-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-on-light-primary, #0F172A);
    margin: 0 0 6px;
}

/* Heebo stops at 700, so 800 renders as a synthesised bold on /he/. */
html[lang="he"] .blog-cta-title,
html[lang="he"] .blog-post-title,
html[lang="he"] .blog-related-title { font-weight: 700; }

.blog-cta-text {
    font-size: .93rem;
    line-height: 1.6;
    color: var(--text-on-light-secondary, #475569);
    margin: 0;
}

/* ── Post: breadcrumb ──────────────────────────────────────────────────── */
.breadcrumb-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 18px 0 0;
    font-size: .8rem;
    color: var(--text-on-light-muted, #94A3B8);
}

.breadcrumb-list a {
    color: var(--text-on-light-secondary, #475569);
    text-decoration: none;
}

.breadcrumb-list a:hover { text-decoration: underline; }

.blog-post-breadcrumb { background: var(--bg-light-secondary, #F8F9FB); }

/* ── Post: header ──────────────────────────────────────────────────────── */
.blog-post-hero {
    padding: 34px 0 40px;
    background: var(--bg-light-secondary, #F8F9FB);
    border-bottom: 1px solid #E8ECF3;
}

.blog-post-hero-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.blog-post-hero-inner .blog-tag { align-self: center; }

.blog-post-title {
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.22;
    color: var(--text-on-light-primary, #0F172A);
    margin: 4px 0 14px;
}

.blog-post-excerpt {
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--text-on-light-secondary, #475569);
    margin: 0 0 20px;
}

.blog-post-meta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    font-size: .82rem;
    color: var(--text-on-light-muted, #94A3B8);
}

.bpm-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Post: the article itself ───────────────────────────────────────────
   The body is raw HTML out of the database, so the tags are styled rather
   than classes. Measured against what the published posts actually contain:
   h2, p, strong, ul, ol, li, a, br. h3, blockquote, code and tables are
   covered too - the editor can produce them and an unstyled table is how
   this class of bug looks the next time. */
.blog-post-body-section {
    padding: 44px 0 72px;
}

/* A measure, not a column width. col-lg-8 of this container renders about
   1050px on a desktop, which is roughly 150 characters a line - far past the
   width where reading gets harder rather than easier. Applied to the column so
   the article, its call to action and the way back stay one aligned block. */
.blog-post-body-section .col-lg-8 {
    max-width: 760px;
    margin-inline: auto;
}

.blog-post-content {
    display: block;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--text-on-light-secondary, #334155);
}

.blog-post-content > *:first-child { margin-top: 0; }

.blog-post-content h2 {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-on-light-primary, #0F172A);
    margin: 40px 0 14px;
}

.blog-post-content h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-on-light-primary, #0F172A);
    margin: 30px 0 10px;
}

html[lang="he"] .blog-post-content h2 { font-weight: 700; }

.blog-post-content p { margin: 0 0 18px; }

.blog-post-content strong { color: var(--text-on-light-primary, #0F172A); }

.blog-post-content ul,
.blog-post-content ol {
    margin: 0 0 20px;
    padding-inline-start: 24px;
}

.blog-post-content li { margin-bottom: 8px; }

.blog-post-content a {
    color: #2563EB;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.blog-post-content blockquote {
    margin: 24px 0;
    padding: 4px 0 4px 18px;
    border-inline-start: 3px solid #C7D6F5;
    color: var(--text-on-light-muted, #64748B);
    font-style: italic;
}

.blog-post-content code {
    background: #F1F5F9;
    border-radius: 5px;
    padding: 1px 6px;
    font-size: .88em;
    color: #0F172A;
}

.blog-post-content pre {
    background: #0F172A;
    color: #E2E8F0;
    border-radius: 12px;
    padding: 16px 18px;
    overflow-x: auto;
    margin: 0 0 20px;
}

.blog-post-content pre code { background: none; color: inherit; padding: 0; }

/* A wide table must scroll inside itself rather than widen the page. */
.blog-post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 22px;
    font-size: .92rem;
    display: block;
    overflow-x: auto;
}

.blog-post-content th,
.blog-post-content td {
    border: 1px solid #E8ECF3;
    padding: 9px 12px;
    text-align: start;
}

.blog-post-content th { background: var(--bg-light-secondary, #F8F9FB); font-weight: 700; }

.blog-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* ── Post: the invitation and the way back ─────────────────────────────── */
.blog-post-cta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 40px;
    padding: 22px;
    border-radius: 16px;
    background: linear-gradient(135deg, #F1F5FF 0%, #EEF7F4 100%);
    border: 1px solid #DCE6FA;
}

.blog-post-cta-icon {
    font-size: 1.9rem;
    line-height: 1;
    flex: none;
}

.blog-post-cta-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-on-light-primary, #0F172A);
    margin-bottom: 4px;
}

.blog-post-cta-text {
    font-size: .88rem;
    line-height: 1.55;
    color: var(--text-on-light-secondary, #475569);
}

.blog-back-link {
    font-size: .9rem;
    font-weight: 600;
    color: #2563EB;
    text-decoration: none;
}

.blog-back-link:hover { text-decoration: underline; }

/* ── Post: related ─────────────────────────────────────────────────────── */
.blog-related-section {
    padding: 56px 0 72px;
    background: var(--bg-light-secondary, #F8F9FB);
    border-top: 1px solid #E8ECF3;
}

.blog-related-title {
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    font-weight: 800;
    color: var(--text-on-light-primary, #0F172A);
    text-align: center;
    margin-bottom: 28px;
}

@media (prefers-reduced-motion: reduce) {
    .blog-card { transition: none; }
    .blog-card:hover { transform: none; }
}