/* ============================================================================
   Software4.net — Blog premium layer
   ----------------------------------------------------------------------------
   Covers /Blog (listing) and /Blog/{slug} (post). Shares the palette used
   across the redesigned pages: #071A33, #0B3B73, #1677FF, #18BFE8.
   ========================================================================== */

/* ── Hero ────────────────────────────────────────────────────────────── */
.blog-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(140deg, #050F1F 0%, #071A33 46%, #0B3B73 100%);
    padding: clamp(112px, 13vw, 164px) 0 clamp(60px, 7vw, 88px);
}
.blog-hero-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 76% at 50% 42%, #000 16%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 70% 76% at 50% 42%, #000 16%, transparent 72%);
}
.blog-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(700px circle at 50% 0%, rgba(24,191,232,.15), transparent 62%);
}
.blog-hero > .container { position: relative; z-index: 2; }
.blog-hero-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.blog-hero-eyebrow {
    display: inline-block;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.88);
    padding: .4rem .9rem; border-radius: 6px;
    font-size: .71rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    backdrop-filter: blur(8px);
}
.blog-hero-title {
    margin: 1.3rem 0 1rem;
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    font-weight: 800; line-height: 1.08; letter-spacing: -.032em; color: #fff;
}
.blog-hero-sub {
    font-size: clamp(.97rem, 1.1vw, 1.08rem);
    line-height: 1.72; color: rgba(255,255,255,.68);
    max-width: 34em; margin: 0 auto;
}

.blog-body { padding: clamp(56px, 6.5vw, 84px) 0; background: #F7F9FC; }

/* ── Search ──────────────────────────────────────────────────────────── */
.blog-search { position: relative; margin-bottom: 1.75rem; }
.blog-search i {
    position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
    color: #94A3B8; font-size: .9rem; pointer-events: none;
}
.blog-search-input {
    width: 100%; padding: .95rem 1.1rem .95rem 2.85rem;
    background: #fff; border: 1px solid #E2E8F0; border-radius: 12px;
    font-size: .95rem; color: #071A33;
    transition: border-color .24s ease, box-shadow .24s ease;
}
.blog-search-input::placeholder { color: #94A3B8; }
.blog-search-input:focus {
    outline: none; border-color: rgba(22,119,255,.55);
    box-shadow: 0 0 0 4px rgba(22,119,255,.12);
}

/* ── Shared meta row ─────────────────────────────────────────────────── */
.blog-meta { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; flex-wrap: wrap; }
.blog-cat {
    background: rgba(22,119,255,.09); color: #1677FF;
    padding: .24rem .7rem; border-radius: 6px;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}
.blog-date { color: #94A3B8; font-size: .78rem; }

/* ── Featured post ───────────────────────────────────────────────────── */
.blog-featured {
    background: #fff; border: 1px solid #E8EEF6; border-radius: 16px;
    overflow: hidden; margin-bottom: 1.5rem;
    transition: transform .34s cubic-bezier(.22,1,.36,1),
                box-shadow .34s cubic-bezier(.22,1,.36,1), border-color .3s ease;
}
.blog-featured:hover {
    transform: translateY(-4px); border-color: #D6E3F5;
    box-shadow: 0 28px 54px -26px rgba(7,26,51,.26);
}
.blog-featured-media {
    position: relative; display: block; height: 280px;
    /* `contain`, not `cover`. Several of these article images are generated
       artwork with the headline baked into the picture, and cover crops the
       sides — which sliced the first character off the title in the featured
       card. contain shows the whole image; the tinted panel behind it fills
       whatever letterboxing that leaves. */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #EEF2F8;
    text-decoration: none;
}
.blog-featured-media.no-img { background: linear-gradient(135deg, #071A33 0%, #0B3B73 100%); }
/* Scrim only where it's needed — over the fallback gradient. Across a real
   image it dulled the artwork and tinted the letterbox bars. */
.blog-featured-media.no-img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(7,26,51,.1) 0%, rgba(7,26,51,.45) 100%);
}
.blog-featured-tag {
    position: absolute; top: 1.1rem; left: 1.1rem; z-index: 2;
    /* Solid rather than translucent: with the scrim gone it may now sit over
       a light area of the artwork, where white-on-white would vanish. */
    background: #071A33;
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 6px 18px -8px rgba(7,26,51,.8);
    color: #fff; padding: .3rem .8rem; border-radius: 6px;
    font-size: .64rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
}
.blog-featured-body { padding: clamp(1.5rem, 2.6vw, 2.1rem); }
.blog-featured-title { font-size: clamp(1.25rem, 2.1vw, 1.7rem); font-weight: 800; letter-spacing: -.024em; line-height: 1.25; margin: 0 0 .85rem; }
.blog-featured-title a { color: #071A33; text-decoration: none; transition: color .22s ease; }
.blog-featured-title a:hover { color: #1677FF; }
.blog-featured-excerpt {
    font-size: .94rem; line-height: 1.8; color: #64748B; margin: 0 0 1.4rem;
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-read-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    background: linear-gradient(135deg, #1677FF, #0E5FD8); color: #fff;
    padding: .72rem 1.4rem; border-radius: 8px;
    font-size: .86rem; font-weight: 650; text-decoration: none;
    box-shadow: 0 10px 24px -12px rgba(22,119,255,.8);
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.blog-read-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(22,119,255,.92); }
.blog-read-btn i { transition: transform .25s cubic-bezier(.22,1,.36,1); }
.blog-read-btn:hover i { transform: translateX(3px); }

/* ── Post grid ───────────────────────────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.blog-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #E8EEF6; border-radius: 14px;
    overflow: hidden;
    transition: transform .32s cubic-bezier(.22,1,.36,1),
                box-shadow .32s cubic-bezier(.22,1,.36,1), border-color .3s ease;
}
.blog-card:hover {
    transform: translateY(-4px); border-color: #D6E3F5;
    box-shadow: 0 24px 46px -24px rgba(7,26,51,.24);
}
.blog-card-media {
    position: relative; display: flex; align-items: center; justify-content: center;
    height: 168px;
    /* Same reasoning as the featured card: these article images frequently
       carry their headline in the artwork, so contain avoids cropping words
       off the edge. The tinted panel fills any letterboxing. */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #EEF2F8;
    text-decoration: none; color: rgba(255,255,255,.65); font-size: 1.9rem;
}
/* Icon fallback rather than an emoji — emoji render inconsistently across
   platforms and read as placeholder art on a professional site. */
.blog-card-media.no-img { background: linear-gradient(135deg, #0B3B73 0%, #1677FF 120%); }
.blog-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.blog-card-title { font-size: 1.02rem; font-weight: 750; letter-spacing: -.018em; line-height: 1.32; margin: 0 0 .55rem; }
.blog-card-title a { color: #071A33; text-decoration: none; transition: color .22s ease; }
.blog-card-title a:hover { color: #1677FF; }
.blog-card-excerpt {
    font-size: .84rem; line-height: 1.7; color: #64748B; margin: 0 0 1.1rem; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card-link {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: auto;
    color: #1677FF; font-weight: 650; font-size: .84rem; text-decoration: none;
}
.blog-card-link i { transition: transform .25s cubic-bezier(.22,1,.36,1); }
.blog-card-link:hover i { transform: translateX(3px); }

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.blog-side {
    background: #fff; border: 1px solid #E8EEF6; border-radius: 14px;
    padding: 1.35rem; margin-bottom: 1.25rem;
}
.blog-side-title {
    font-size: .7rem; font-weight: 700; letter-spacing: .15em;
    text-transform: uppercase; color: #94A3B8; margin: 0 0 1rem;
}
.blog-cats { list-style: none; margin: 0; padding: 0; }
.blog-cats li + li { border-top: 1px solid #F1F5F9; }
.blog-cats a {
    display: flex; align-items: center; justify-content: space-between;
    padding: .72rem .2rem; text-decoration: none;
    transition: padding-left .24s ease;
}
.blog-cats a:hover { padding-left: .5rem; }
.blog-cat-name { display: flex; align-items: center; gap: .6rem; font-size: .875rem; font-weight: 600; color: #334155; }
.blog-cat-name i { color: #1677FF; width: 16px; font-size: .82rem; }
.blog-cats a:hover .blog-cat-name { color: #1677FF; }
.blog-cat-count {
    background: #F1F5F9; color: #64748B;
    padding: .16rem .55rem; border-radius: 6px;
    font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

.blog-tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.blog-tag {
    background: #F1F5F9; color: #475569;
    padding: .34rem .8rem; border-radius: 7px;
    font-size: .77rem; font-weight: 600; text-decoration: none;
    transition: background .22s ease, color .22s ease, transform .22s ease;
}
.blog-tag:hover { background: #1677FF; color: #fff; transform: translateY(-1px); }

/* Newsletter card */
.blog-news {
    position: relative; overflow: hidden;
    background: linear-gradient(150deg, #071A33 0%, #0B3B73 100%);
    border-radius: 16px; padding: 1.7rem 1.4rem; margin-bottom: 1.25rem;
    text-align: center;
    box-shadow: 0 26px 52px -26px rgba(7,26,51,.5);
}
.blog-news-glow {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(380px circle at 50% 0%, rgba(24,191,232,.24), transparent 62%);
}
.blog-news-inner { position: relative; z-index: 1; }
.blog-news-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 12px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
    color: #18BFE8; font-size: 1.05rem; margin-bottom: .9rem;
    backdrop-filter: blur(8px);
}
.blog-news-title { font-size: 1.05rem; font-weight: 750; color: #fff; margin: 0 0 .45rem; letter-spacing: -.018em; }
.blog-news-sub { font-size: .82rem; line-height: 1.65; color: rgba(255,255,255,.64); margin: 0 0 1.2rem; }
.blog-news-input {
    width: 100%; text-align: center;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
    color: #fff; border-radius: 9px; padding: .68rem .9rem;
    font-size: .875rem; margin-bottom: .6rem;
    transition: border-color .24s ease, box-shadow .24s ease, background .24s ease;
}
.blog-news-input::placeholder { color: rgba(255,255,255,.45); }
.blog-news-input:focus {
    outline: none; background: rgba(255,255,255,.12);
    border-color: rgba(24,191,232,.6); box-shadow: 0 0 0 4px rgba(24,191,232,.14);
}
.blog-news-btn {
    width: 100%; border: none; border-radius: 9px; cursor: pointer;
    background: linear-gradient(120deg, #F59E0B, #F0731A);
    color: #fff; padding: .72rem; font-size: .87rem; font-weight: 700;
    box-shadow: 0 10px 24px -10px rgba(240,115,26,.8);
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.blog-news-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(240,115,26,.92); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-featured-media { height: 208px; }
}
@media (max-width: 575.98px) {
    .blog-search-input { font-size: 16px; }   /* stops iOS zoom-on-focus */
    .blog-news-input { font-size: 16px; }
}

.blog-search-input:focus-visible, .blog-read-btn:focus-visible,
.blog-tag:focus-visible, .blog-news-btn:focus-visible {
    outline: 2px solid #1677FF; outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .blog-featured:hover, .blog-card:hover, .blog-read-btn:hover,
    .blog-tag:hover, .blog-news-btn:hover { transform: none; }
    .blog-cats a:hover { padding-left: .2rem; }
}

/* ============================================================================
   BLOG POST (/Blog/{slug})
   ========================================================================== */
.post-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(140deg, #050F1F 0%, #071A33 46%, #0B3B73 100%);
    padding: clamp(108px, 12vw, 152px) 0 clamp(48px, 6vw, 72px);
}
.post-hero-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 68% 76% at 50% 40%, #000 14%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 68% 76% at 50% 40%, #000 14%, transparent 72%);
}
.post-hero > .container { position: relative; z-index: 2; }
.post-hero-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.post-hero-cat {
    display: inline-block;
    background: rgba(24,191,232,.16);
    border: 1px solid rgba(24,191,232,.38);
    color: #A8E4F7;
    padding: .34rem .85rem; border-radius: 6px;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    backdrop-filter: blur(8px);
}
.post-hero-title {
    margin: 1.2rem 0 1.1rem;
    font-size: clamp(1.8rem, 3.9vw, 3rem);
    font-weight: 800; line-height: 1.16; letter-spacing: -.03em;
    color: #fff; text-wrap: balance;
}
.post-hero-meta {
    display: flex; align-items: center; justify-content: center;
    gap: .75rem; flex-wrap: wrap;
    font-size: .82rem; color: rgba(255,255,255,.62);
}
.post-hero-meta i { margin-right: .4rem; color: rgba(255,255,255,.45); }
.post-hero-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.3); }

/* ── Share row ───────────────────────────────────────────────────────── */
.post-share {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: #fff; border: 1px solid #E8EEF6; border-radius: 12px;
    padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.post-share-label {
    font-size: .72rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: #94A3B8;
}
.post-share-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.post-share-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    background: #F1F5F9; border: 1px solid transparent; color: #475569;
    padding: .48rem .95rem; border-radius: 8px;
    font-size: .82rem; font-weight: 600; text-decoration: none;
    transition: background .22s ease, color .22s ease, transform .22s ease;
}
.post-share-btn:hover { background: #1677FF; color: #fff; transform: translateY(-2px); }

.post-back {
    display: inline-flex; align-items: center; gap: .55rem;
    color: #475569; font-size: .87rem; font-weight: 650; text-decoration: none;
    padding: .6rem 1.15rem; border: 1px solid #DCE5F0; border-radius: 8px;
    transition: border-color .22s ease, color .22s ease, transform .22s ease;
}
.post-back:hover { color: #1677FF; border-color: #1677FF; transform: translateX(-3px); }

/* ── Sidebar CTA ─────────────────────────────────────────────────────── */
.post-cta {
    position: relative; overflow: hidden;
    background: linear-gradient(150deg, #071A33 0%, #0B3B73 100%);
    border-radius: 16px; padding: 1.8rem 1.4rem; margin-bottom: 1.25rem;
    text-align: center;
    box-shadow: 0 26px 52px -26px rgba(7,26,51,.5);
}
.post-cta-glow {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(360px circle at 50% 0%, rgba(24,191,232,.26), transparent 62%);
}
.post-cta-inner { position: relative; z-index: 1; }
.post-cta-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 13px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
    color: #18BFE8; font-size: 1.1rem; margin-bottom: .95rem;
    backdrop-filter: blur(8px);
}
.post-cta-title { font-size: 1.1rem; font-weight: 750; color: #fff; margin: 0 0 .45rem; letter-spacing: -.018em; }
.post-cta-sub { font-size: .83rem; line-height: 1.65; color: rgba(255,255,255,.64); margin: 0 0 1.25rem; }
.post-cta-btn {
    display: inline-block; background: #fff; color: #0B3B73;
    padding: .66rem 1.4rem; border-radius: 8px;
    font-size: .855rem; font-weight: 650; text-decoration: none;
    transition: transform .25s cubic-bezier(.22,1,.36,1), background .25s ease;
}
.post-cta-btn:hover { color: #0B3B73; background: #F2F7FF; transform: translateY(-2px); }

/* Sidebar newsletter (light variant of the listing card) */
.post-news-sub { font-size: .82rem; line-height: 1.6; color: #64748B; margin: 0 0 1rem; }
.post-news-input {
    width: 100%; background: #F8FAFC; border: 1px solid #E2E8F0;
    border-radius: 9px; padding: .66rem .9rem; font-size: .875rem;
    color: #071A33; margin-bottom: .55rem;
    transition: border-color .22s ease, box-shadow .22s ease;
}
.post-news-input:focus {
    outline: none; border-color: rgba(22,119,255,.55);
    box-shadow: 0 0 0 4px rgba(22,119,255,.12); background: #fff;
}
.post-news-btn {
    width: 100%; border: none; cursor: pointer;
    background: linear-gradient(135deg, #1677FF, #0E5FD8); color: #fff;
    padding: .68rem; border-radius: 9px; font-size: .86rem; font-weight: 650;
    box-shadow: 0 10px 22px -10px rgba(22,119,255,.8);
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.post-news-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(22,119,255,.92); }

.blog-side-title i { color: #18BFE8; margin-right: .3rem; }

@media (max-width: 575.98px) {
    .post-news-input { font-size: 16px; }
    .post-share { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .post-share-btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .post-share-btn:hover, .post-cta-btn:hover, .post-news-btn:hover { transform: none; }
    .post-back:hover { transform: none; }
}

/* ============================================================================
   FULL-WIDTH LAYOUT (sidebar removed)
   ----------------------------------------------------------------------------
   The right column is gone on both blog pages. Content now spans the
   container, but capped at a comfortable reading measure — a blog running
   edge to edge at 1200px gives very long line lengths, which hurts
   readability far more than the extra width helps.
   ========================================================================== */
.blog-main { max-width: 1280px; margin: 0 auto; }

/* With the extra room, cards go three-up on wide screens. */
.blog-main .blog-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991.98px) { .blog-main .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) { .blog-main .blog-grid { grid-template-columns: 1fr; } }

/* Featured post becomes a side-by-side split at desktop width. */
@media (min-width: 992px) {
    .blog-main .blog-featured {
        display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch;
    }
    .blog-main .blog-featured-media { height: 100%; min-height: 340px; }
    .blog-main .blog-featured-body { display: flex; flex-direction: column; justify-content: center; }
}

/* Article page. The 74ch cap that used to sit on the running text has been
   removed — inside an already-constrained panel it produced visible empty
   gutters on both sides of the paragraphs. The panel width alone now sets
   the measure, and slightly looser line-height keeps longer lines readable. */
.post-main { max-width: 1240px; margin: 0 auto; }
.post-main .blog-content { line-height: 1.9; }

/* ── Newsletter band (listing) ───────────────────────────────────────── */
.blog-news-band {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #071A33 0%, #0B3B73 100%);
    padding: clamp(2.6rem, 5vw, 4rem) 0;
}
.blog-news-band-glow {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(700px circle at 25% 0%, rgba(24,191,232,.2), transparent 62%);
}
.blog-news-band > .container { position: relative; z-index: 1; }
.blog-news-band-inner {
    display: grid; grid-template-columns: 1.15fr .85fr;
    gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
    max-width: 1000px; margin: 0 auto;
}
.blog-news-band-copy .blog-news-icon { margin-bottom: .8rem; }
.blog-news-band-copy .blog-news-title { font-size: clamp(1.2rem, 2vw, 1.55rem); margin-bottom: .4rem; }
.blog-news-band-copy .blog-news-sub { margin-bottom: 0; }
.blog-news-band-form { display: flex; gap: .6rem; }
.blog-news-band-form .blog-news-input { margin-bottom: 0; text-align: left; flex: 1; }
.blog-news-band-form .blog-news-btn { width: auto; white-space: nowrap; padding: .72rem 1.5rem; }

@media (max-width: 767.98px) {
    .blog-news-band-inner { grid-template-columns: 1fr; text-align: center; }
    .blog-news-band-form { flex-direction: column; }
    .blog-news-band-form .blog-news-btn { width: 100%; }
}

/* ── Post footer conversion blocks ───────────────────────────────────── */
.post-foot { padding: 0 0 clamp(3rem, 6vw, 5rem); background: #F7F9FC; }
.post-foot-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1.25rem; max-width: 1240px; margin: 0 auto;
}
.post-foot .post-cta { margin-bottom: 0; }
.post-news-card {
    background: #fff; border: 1px solid #E8EEF6; border-radius: 16px;
    padding: 1.8rem 1.4rem;
    display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 767.98px) {
    .post-foot-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   ARTICLE CONTENT SAFETY (author-supplied HTML)
   ----------------------------------------------------------------------------
   .blog-content is rendered with @Html.Raw from CMS/API content, so its
   markup isn't controlled here — a pasted wide table, a data URI image, a
   long code sample or an unbroken URL can all push the page wider than the
   viewport and cause horizontal scroll on mobile. These are containment
   guards for that content, not styling preferences.
   ========================================================================== */
.blog-content img {
    max-width: 100%; height: auto;
    border-radius: 10px;
}
/* Tables scroll inside their own box rather than stretching the page. */
.blog-content table {
    display: block; width: 100%; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-collapse: collapse; margin: 0 0 1.5rem; font-size: .9rem;
}
.blog-content th, .blog-content td {
    padding: .65rem .8rem; border: 1px solid #E8EEF6; text-align: left;
    white-space: nowrap;
}
.blog-content th { background: #F7F9FC; color: #071A33; font-weight: 700; }

.blog-content pre {
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: #071A33; color: #E2E8F0;
    padding: 1rem 1.15rem; border-radius: 10px;
    font-size: .84rem; line-height: 1.6; margin: 0 0 1.4rem;
}
.blog-content code { word-break: break-word; }
.blog-content pre code { word-break: normal; }

/* A long unbroken URL in body copy is a classic source of mobile overflow. */
.blog-content a, .blog-content p { overflow-wrap: anywhere; word-break: break-word; }

.blog-content iframe,
.blog-content video { max-width: 100%; }

/* Same guards for the legal pages, which also render CMS HTML via Html.Raw. */
.legal-doc img { max-width: 100%; height: auto; }
.legal-doc table { display: block; overflow-x: auto; max-width: 100%; }
.legal-doc a, .legal-doc p { overflow-wrap: anywhere; }