/* ============================================================
   blog.css — Blog index + blog post styles for MapOutcomes
   Mirrors structural patterns from pricing.css and privacy-policy.css
   ============================================================ */

/* ---- Reset section defaults (match pricing/legal pattern) ---- */
section.blog-hero,
section.blog-section,
section.blog-index-hero {
    border: none;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
    overflow: visible;
    animation: none;
}

/* Grid overlay — light lines on dark, dark lines on light */
section.blog-hero::before,
section.blog-section::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 44px, rgba(255,255,255,0.02) 44px, rgba(255,255,255,0.02) 45px),
        repeating-linear-gradient(90deg, transparent, transparent 44px, rgba(255,255,255,0.02) 44px, rgba(255,255,255,0.02) 45px);
    pointer-events: none;
    z-index: 0;
}

/* Light sections — dark grid lines */
section.blog-list-section::before {
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 44px, rgba(0,0,0,0.02) 44px, rgba(0,0,0,0.02) 45px),
        repeating-linear-gradient(90deg, transparent, transparent 44px, rgba(0,0,0,0.02) 44px, rgba(0,0,0,0.02) 45px);
}

/* Blog post reading page — no grid texture behind the article; it never
   read as more than near-invisible margin decoration here (unlike the
   hero/card sections where it has other visual richness to sit among),
   so it's dropped rather than kept at a barely-perceptible opacity. */
section.blog-post-body::before {
    display: none;
}

/* Section backgrounds */
section.blog-hero          { position: relative; background: linear-gradient(135deg, var(--topographic-teal) 0%, var(--contour-green) 100%); padding: 0; }
section.blog-list-section  { position: relative; background: var(--parchment-cream); padding: clamp(60px, 8vh, 100px) 0 clamp(60px, 8vh, 100px); }
section.blog-post-body     { position: relative; background: var(--white); padding: clamp(48px, 6vh, 80px) 0 clamp(60px, 8vh, 100px); scroll-margin-top: 71px; }

/* ============================================================
   HERO (matches legal-hero / pricing-hero)
   ============================================================ */

.blog-hero {
    position: relative;
    min-height: 34vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.blog-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(201, 166, 97, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(10, 122, 140, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 80%, rgba(45, 95, 63, 0.07) 0%, transparent 50%),
        linear-gradient(to bottom, rgba(5, 15, 20, 0.15) 0%, rgba(5, 15, 20, 0.00) 45%, rgba(5, 15, 20, 0.30) 100%);
    background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%;
    animation: meshDrift 30s ease-in-out infinite;
    pointer-events: none;
}

@keyframes meshDrift {
    0%   { background-position: 0% 50%, 100% 0%, 50% 100%, 0% 0%; }
    50%  { background-position: 100% 50%, 0% 100%, 100% 0%, 0% 0%; }
    100% { background-position: 0% 50%, 100% 0%, 50% 100%, 0% 0%; }
}

.blog-compass-bg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0.07;
    pointer-events: none;
}

.blog-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--white);
    padding: clamp(56px, 9vh, 100px) 24px clamp(44px, 6vh, 72px);
    max-width: 820px;
    width: 100%;
}

/* Photo hero variant — post's own cover photo as background instead of the
   gradient+compass treatment. Same 34vh min-height as .blog-hero/
   .blog-index-hero (kept consistent across blog.php and blog-post.php);
   only the content padding is reduced here since the photo, not the
   gradient mesh, carries the visual weight. */
.blog-post-hero--photo .blog-hero-content {
    padding: clamp(32px, 5vh, 64px) 24px clamp(24px, 4vh, 48px);
}

/* Smaller title in the photo variant — the 48px/54px size was sized for the
   taller 50vh gradient hero; at 38vh it reads oversized against the photo. */
.blog-post-hero--photo .blog-post-h1 {
    font-size: clamp(22px, 3.2vw, 36px);
}

.blog-post-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.blog-post-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(5, 15, 20, 0.5);
    pointer-events: none;
}

.blog-h1 {
    font-family: var(--font-display);
    font-size: clamp(30px, 4.8vw, 54px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.5px;
    margin: 0 0 20px;
    color: var(--white);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
    text-align: center;
}

.blog-post-h1 {
    font-size: clamp(28px, 4.2vw, 48px);
}

/* Scroll hint (reused from pricing/legal) */
.scroll-hint {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: scrollBounce 2.4s ease-in-out infinite;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.scroll-hint:hover {
  color: rgba(255, 255, 255, 0.9); text-decoration: none; }
.scroll-arrow {
    display: block;
    width: 18px;
    height: 18px;
    border-right: 2px solid rgba(255, 255, 255, 0.65);
    border-bottom: 2px solid rgba(255, 255, 255, 0.65);
    transform: rotate(45deg);
}
@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.65; }
    50%      { transform: translateX(-50%) translateY(9px); opacity: 1; }
}

/* ============================================================
   BLOG CONTAINER
   ============================================================ */

.blog-container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px);
    width: 100%;
    position: relative;
    z-index: 1;
}

/* ============================================================
   BLOG INDEX — POST LIST
   ============================================================ */

.blog-index-header {
    background: none;
    border-bottom: none;
    padding: 0;
    text-align: center;
    max-width: 640px;
    margin: 0 auto clamp(32px, 5vh, 48px);
}

.blog-index-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    color: rgba(201, 166, 97, 0.95);
    margin-bottom: 16px;
}

.blog-index-h1 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.4px;
    margin: 0 0 12px;
    color: var(--charcoal);
    text-align: center;
}

.blog-index-sub {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.3vw, 16px);
    color: var(--slate-gray);
    line-height: 1.6;
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   BLOG INDEX — PHOTO HERO
   ============================================================ */

.blog-index-hero {
    position: relative;
    width: 100%;
    min-height: 34vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    margin-bottom: 0;
    background: none;
}

.blog-index-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.blog-index-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Flat, always-dark tint (not a gradient) so the white title/sub stay
       readable regardless of how bright the underlying photo is — the hero
       text must read as white for every vertical, not just ones with a
       naturally dark photo. */
    background: rgba(5, 15, 20, 0.5);
    pointer-events: none;
}

.blog-index-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: clamp(32px, 5vh, 56px) 24px;
    max-width: 640px;
    width: 100%;
}

.blog-index-hero .blog-index-h1,
.blog-index-hero .blog-index-sub {
    color: var(--white);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.blog-list-section .blog-container {
    max-width: 1480px;
}

.blog-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.blog-card {
    background: var(--white);
    border: 1px solid var(--mist);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(44, 53, 57, 0.07);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 48px rgba(44, 53, 57, 0.14);
}

.blog-card-link-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.blog-card-body {
    padding: clamp(18px, 2vw, 24px);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-card-image {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.blog-card-dot {
    color: #8A7333;
    font-weight: 700;
}

.blog-card-title {
    font-family: var(--font-display);
    font-size: clamp(16px, 1.4vw, 18px);
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 14px;
    letter-spacing: -0.2px;
    color: var(--charcoal);
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
}

.blog-card:hover .blog-card-title {
    color: var(--topographic-teal);
}

.blog-card-readtime {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #646E73;
    text-transform: uppercase;
    margin: 0 0 12px;
}

.blog-card-excerpt {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--slate-gray);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-tag {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #8A7333;
    background: rgba(138, 115, 51, 0.15);
    padding: 6px 14px;
    border-radius: 999px;
}

.blog-list-note {
    text-align: center;
    font-family: var(--font-body);
    font-size: 14px;
    color: #646E73;
    margin-top: 40px;
    margin-bottom: 0;
}

.blog-list-note a {
    color: var(--topographic-teal);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(10, 122, 140, 0.25);
    transition: border-color 0.2s ease;
}

.blog-list-note a:hover {
    border-bottom-color: var(--topographic-teal);
}

/* ============================================================
   BLOG POST BODY — long-form content
   ============================================================ */

/* Wraps meta + (optional photo credit) + article body in a single opaque
   white panel, so the grid background (section.blog-post-body::before)
   only ever shows in the margins around the text, never in the gaps
   between individual text blocks. The text column is 920px centered (same
   as the legal pages), sitting inside the footer's 1160px width. The
   margin centers the panel when there's room and goes up to 40px negative
   when there isn't, so the white edge runs out into the container gutter
   and the text still fills a narrow container edge to edge. Excludes .blog-post-cta (the
   end-of-article action card) on purpose; that card already has its own
   background. */
.blog-post-text-panel {
    margin: 0 max(-40px, calc((100% - 1000px) / 2));
    background: var(--white);
    padding: 0 40px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* Medium-style tag + dek + byline — sits above the article body, left-aligned
   to the same 780px text column, in place of the old white-on-photo meta
   line and back-link that used to live inside the hero itself. */
.blog-post-meta {
    margin: 0 0 40px;
    text-align: left;
}

.blog-post-tag-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

/* .blog-card-tag is the same pill used for category tags on the blog index
   cards — reused here (instead of the old plain-text .blog-eyebrow) so the
   category label reads as a distinct tag rather than competing with the
   plain-text byline below it for the same line. */
.blog-post-tag {
    margin-bottom: 0;
}

/* Same pill sizing as .blog-card-tag, but in the teal used for interactive
   links/actions elsewhere on the page (not the tag's gold) so it reads as a
   navigation action sitting beside a category label, not a second tag. */
.blog-post-back-pill {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--topographic-teal);
    background: rgba(10, 122, 140, 0.08);
    border: 1px solid rgba(10, 122, 140, 0.25);
    padding: 6px 14px;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.blog-post-back-pill:hover {
    background: rgba(10, 122, 140, 0.14);
    border-color: var(--topographic-teal);
    color: var(--topographic-teal);
    text-decoration: none;
}

/* Share pill: a <button> wearing .blog-post-back-pill, so it needs the
   button's own line-height/cursor reset. Its fallback menu (browsers without a
   share sheet) drops below the pill. */
.blog-share {
    position: relative;
    display: inline-block;
}

.blog-share-pill {
    cursor: pointer;
    line-height: inherit;
}

.blog-post-back-pill:focus-visible,
.blog-share-item:focus-visible {
    outline: 2px solid var(--topographic-teal);
    outline-offset: 2px;
}

.blog-share-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    min-width: 160px;
    padding: 6px;
    background: #fff;
    border: 1px solid rgba(10, 122, 140, 0.25);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.blog-share-menu[hidden] {
    display: none;
}

.blog-share-item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    font-family: var(--font-body);
    font-size: 14px;
    text-align: left;
    color: var(--topographic-teal);
    background: none;
    border: 0;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
}

.blog-share-item:hover {
    background: rgba(10, 122, 140, 0.08);
    text-decoration: none;
}

.blog-post-dek {
    font-family: var(--font-body);
    font-size: clamp(19px, 2.2vw, 22px);
    font-weight: 400;
    color: var(--slate-gray);
    line-height: 1.55;
    margin: 0 0 18px;
}

.blog-post-byline {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #646E73;
    margin: 0;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--mist);
}

.blog-post-content {
    position: relative;
}

.blog-post-content h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 800;
    color: var(--charcoal);
    margin: 48px 0 18px;
    line-height: 1.25;
    letter-spacing: -0.2px;
}

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

.blog-post-content h3 {
    font-family: var(--font-body);
    font-size: 19px;
    font-weight: 700;
    color: var(--charcoal);
    margin: 32px 0 12px;
}

.blog-post-content p {
    font-family: var(--font-body);
    font-size: 17px;
    color: #3D4F58;
    line-height: 1.78;
    margin: 0 0 20px;
    text-align: justify;
}

/* .blog-lede (first-paragraph emphasis) is intentionally unstyled here — it
   renders as a plain .blog-post-content p now. 57 of 58 existing posts'
   body_html still carry the class inline, but giving the first paragraph its
   own bold/20px treatment duplicated the job .blog-post-dek now does right
   above it (see .blog-post-meta): two large emphasized blocks stacked back
   to back with only a thin divider between them, competing for the same
   "this is the important line" attention instead of a clear single hand-off
   from dek to body copy. */

.blog-post-content ul,
.blog-post-content ol {
    font-family: var(--font-body);
    font-size: 17px;
    color: #3D4F58;
    line-height: 1.78;
    margin: 0 0 22px;
    padding-left: 24px;
}

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

/* Tables in body_html are bare <table>/<thead>/<tbody> markup (17 posts as of
   2026-09-30), so all styling lives here rather than in per-post classes. */
.blog-post-content table {
    width: 100%;
    margin: 8px 0 28px;
    border-collapse: collapse;
    border: 1px solid var(--mist);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: #3D4F58;
}

.blog-post-content th,
.blog-post-content td {
    padding: 12px 16px;
    border: 1px solid var(--mist);
    text-align: left;
    vertical-align: top;
}

.blog-post-content th {
    background: var(--frost);
    color: var(--charcoal);
    font-weight: 700;
}

.blog-post-content tbody tr:nth-child(even) td {
    background: #FAFBFB;
}

/* Phones: let a wide table scroll sideways instead of squeezing its columns. */
@media (max-width: 640px) {
    .blog-post-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* WCAG: Visual scroll hint to indicate overflow. */
        box-shadow: inset -12px 0 8px -8px rgba(0, 0, 0, 0.15);
    }

    .blog-post-content th,
    .blog-post-content td {
        padding: 10px 12px;
        min-width: 140px;
    }
}

.blog-post-content strong {
    color: var(--charcoal);
    font-weight: 700;
}

.blog-post-content em {
    color: var(--slate-gray);
}

.blog-post-content a {
    color: var(--topographic-teal);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(10, 122, 140, 0.25);
    transition: border-color 0.2s ease;
}

.blog-post-content a:hover {
    border-bottom-color: var(--topographic-teal);
}

/* "Text box" callout inserted via the admin body editor's Text Box toolbar button
   (createUpdateBlogPostModalBody.php) — a plain <blockquote>, styled here so it renders as a
   pulled-out box rather than the browser's unstyled default indent. */
.blog-post-content blockquote {
    margin: 28px 0;
    padding: 18px 24px;
    background: rgba(10, 122, 140, 0.06);
    border-left: 3px solid var(--topographic-teal);
    border-radius: 6px;
}

.blog-post-content blockquote p {
    margin: 0;
    font-size: 17px;
    text-align: left;
}

.blog-post-content hr {
    border: none;
    border-top: 1px solid #C3CBD1;
    margin: 44px 0;
}

/* In-body images — inserted by insertBlogPostImages() (blogImageSources.php) in place of
   [[image:N]] tokens in body_html. Held at 780px (centered) inside the 920px text column —
   the photos were already the right size, only the text widened. Also
   capped to a 16/9 aspect ratio (matching .blog-card-image's thumbnail ratio elsewhere on
   this page) instead of the source photo's native ~3:2 — that extra height (e.g. 780x520)
   was what made a full-width photo read as an oversized slab, not the width itself. */
.blog-post-inline-image {
    max-width: 780px;
    margin: 36px auto;
}

.blog-post-inline-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    object-fit: cover;
}

.blog-post-inline-image .blog-post-image-credit {
    padding: 0 20px;
}

/* Stylized list of "questions a coordinator can't answer" */
.blog-questions {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 8px 0 24px !important;
    border-left: 3px solid var(--compass-gold);
}

.blog-questions li {
    padding: 6px 0 6px 20px;
    font-style: italic;
    color: var(--charcoal) !important;
    font-size: 17px;
    line-height: 1.65;
}

.blog-post-footnote {
    margin-top: 32px !important;
    padding-top: 24px;
    border-top: 1px solid var(--mist);
    font-size: 14.5px !important;
    color: #646E73 !important;
    line-height: 1.7 !important;
}

/* Hero CTA buttons (matching home.css / pricing.css) */
.btn-hero-primary {
    background: var(--compass-gold);
    color: var(--charcoal); /* WCAG 1.4.3: charcoal on gold ≈ 5.45:1 (was hardcoded #1E1E1E) */
    padding: var(--btn-padding-lg, 12px 28px);
    border-radius: var(--btn-radius, 6px);
    font-size: var(--btn-font-size-lg, 17px);
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    letter-spacing: 0.2px;
    box-shadow: 0 4px 20px rgba(201, 166, 97, 0.45);
    transition: var(--btn-transition, transform 0.2s ease, box-shadow 0.2s ease);
}

.btn-hero-primary:hover {
    background: var(--compass-gold);
    transform: var(--btn-hover-lift, translateY(-2px));
    box-shadow: 0 10px 28px rgba(201, 166, 97, 0.55);
    color: var(--charcoal); /* WCAG 1.4.3: charcoal on gold ≈ 5.45:1 */
    text-decoration: none;
}

.btn-hero-ghost {
    background: transparent;
    color: var(--white);
    padding: 10px 26px; /* --btn-padding-lg less the 2px border */
    border-radius: var(--btn-radius, 6px);
    font-size: var(--btn-font-size-lg, 17px);
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.60);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    letter-spacing: 0.2px;
    transition: var(--btn-transition, transform 0.2s ease, box-shadow 0.2s ease);
}

.btn-hero-ghost:hover {
    background: transparent;
    transform: var(--btn-hover-lift, translateY(-2px));
    color: var(--white);
    text-decoration: none;
    box-shadow: var(--btn-hover-shadow, 0 4px 8px rgba(44, 53, 57, 0.2));
}

/* Light-background ghost button variant for the CTA on white */
.btn-hero-ghost--on-light {
    color: var(--topographic-teal);
    border-color: rgba(10, 122, 140, 0.45);
}

.btn-hero-ghost--on-light:hover {
    border-color: rgba(10, 122, 140, 0.45);
    color: var(--topographic-teal);
    transform: var(--btn-hover-lift, translateY(-2px));
    box-shadow: var(--btn-hover-shadow, 0 4px 8px rgba(44, 53, 57, 0.2));
}

/* End-of-article card — was a "See MapOutcomes in Action" sales pitch box;
   now holds the post's exit actions (leave to the blog index, or convert via
   Connect/Demo) instead, in the same card chrome. */
.blog-post-cta {
    max-width: 780px;
    margin: 56px auto 0;
    padding: clamp(28px, 3.4vw, 40px);
    background: linear-gradient(135deg, rgba(10, 122, 140, 0.05) 0%, rgba(45, 95, 63, 0.04) 100%);
    border: 1px solid rgba(10, 122, 140, 0.18);
    border-radius: 18px;
}

/* Reuses .btn-hero-primary / .btn-hero-ghost--on-light — the same gold-fill +
   teal-outline pairing pricing.php and roi-calculator.php use for their CTAs
   — rather than inventing new button styling here. */
.blog-post-end-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Medium screens — the panel's side padding stacks on top of
   .blog-container's own clamp() gutter, so a full 40px here left ~70-80px
   of dead space either side of the text on tablets. Keep just enough to
   hold the grid background off the text; phones drop it entirely and rely
   on the container gutter alone. */
@media (max-width: 1024px) {
    .blog-post-text-panel {
        margin: 0 max(-8px, calc((100% - 936px) / 2));
        padding: 0 8px;
    }

    /* Keeps images exactly as wide as the old 860px panel's text column
       (844px max, 8px in from the container edge on each side). */
    .blog-post-inline-image {
        max-width: min(844px, calc(100% - 16px));
    }
}

@media (max-width: 640px) {
    .blog-hero-content {
        padding: 44px 20px 36px;
    }

    .blog-post-text-panel {
        margin: 0;
        padding: 0;
    }

    .blog-post-inline-image {
        max-width: none;
    }

    .blog-post-hero--photo .blog-hero-content {
        padding: 28px 20px 24px;
    }

    .blog-card-body {
        padding: 18px 18px;
    }

    .blog-index-header {
        margin-bottom: 24px;
    }

    .blog-post-content p,
    .blog-post-content ul,
    .blog-post-content ol {
        font-size: 16px;
    }

    .blog-post-end-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .blog-post-end-actions .btn-hero-primary,
    .blog-post-end-actions .btn-hero-ghost {
        width: 100%;
        text-align: center;
    }
}

/* ============================================================
   LARGE SCREENS — blog post reading column
   The clamp()-based title/heading sizes above all stop growing
   around an ~1980px viewport (their vw component hits its cap), and
   the container/panel widths are flat px values with no scaling at
   all. Below that width everything is still actively scaling, so it
   reads fine; above it, everything freezes while the viewport keeps
   growing, which is what makes the reading column look like a
   shrinking island on a 4K/ultrawide screen. This picks growth back
   up right where the clamps above plateau, scaling the column width,
   hero title, and article type together — rather than just widening
   the text column, which would push line length past a readable
   measure. Threshold raised from 1140px to 1980px 2026-08-06 — 1140px
   was catching ordinary maximized laptop/desktop browser widths
   (1280-1536px range), making body text/headings look oversized on
   completely typical screens, not just genuinely wide monitors.
   ============================================================ */
@media (min-width: 1980px) {
    .blog-container {
        max-width: 1320px;
    }

    /* Post body stays at the footer's 1160px — the footer doesn't grow
       on wide screens, so the reading column shouldn't either. */
    .blog-post-body .blog-container {
        max-width: 1160px;
    }

    /* Same image width as before the text column widened (was the
       1000px panel minus its 60px padding). */
    .blog-post-inline-image {
        max-width: 880px;
    }

    .blog-hero-content {
        max-width: 960px;
    }

    .blog-post-h1 {
        font-size: 58px;
    }

    .blog-post-hero--photo .blog-post-h1 {
        font-size: 42px;
    }

    .blog-post-dek {
        font-size: 24px;
    }

    .blog-post-content h2 {
        font-size: 36px;
    }

    .blog-post-content h3 {
        font-size: 22px;
    }

    .blog-post-content p,
    .blog-post-content ul,
    .blog-post-content ol,
    .blog-questions li {
        font-size: 19px;
    }

    .blog-post-cta {
        max-width: 880px;
    }
}

/* ============================================================
   VERY LARGE SCREENS — 4K / ultrawide
   Same rationale as the equivalent block in home.css: the 1980px
   tier stops growing around ~2560px. The hero/container and heading
   sizes get another bump here; the reading column
   (.blog-post-text-panel) and body copy only grow slightly — a
   Medium-style reading column shouldn't widen to fill a 4K display,
   that would blow past a comfortable line length.
   ============================================================ */
@media (min-width: 2560px) {
    .blog-container {
        max-width: 1680px;
    }

    .blog-post-body .blog-container {
        max-width: 1160px;
    }

    /* Was the 1080px panel minus its 70px padding. */
    .blog-post-inline-image {
        max-width: 940px;
    }

    .blog-hero-content {
        max-width: 1160px;
    }

    .blog-post-h1 {
        font-size: 68px;
    }

    .blog-post-hero--photo .blog-post-h1 {
        font-size: 48px;
    }

    .blog-post-dek {
        font-size: 26px;
    }

    .blog-post-content h2 {
        font-size: 40px;
    }

    .blog-post-content h3 {
        font-size: 24px;
    }

    .blog-post-content p,
    .blog-post-content ul,
    .blog-post-content ol,
    .blog-questions li {
        font-size: 20px;
    }

    .blog-post-cta {
        max-width: 960px;
    }
}

/* ============================================================
   ACCESSIBILITY — Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    /* Disable mesh gradient drift animation */
    .blog-hero-overlay {
        animation: none;
    }

    /* Disable scroll-bounce arrow animation */
    .scroll-hint {
        animation: none;
    }
}

/* ============================================================
   DB-backed single post — image attribution (Openverse-sourced
   images only, per the design doc's "attribution only where
   required")
   ============================================================ */

.blog-post-image-credit {
    font-size: 0.8rem;
    color: var(--text-muted, #666);
    margin-top: 8px;
}

/* ============================================================
   DB-backed single post — AI-authorship disclosure footer
   (Decision #857). Small print, visually distinct from body copy:
   a hairline top rule separates it from the article, and an "AI"
   badge signals the disclosure at a glance.
   ============================================================ */
.blog-post-ai-disclosure {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--mist);
    font-family: var(--font-body);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted, #666);
}

.blog-post-ai-disclosure__badge {
    flex: none;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid var(--mist);
    border-radius: 999px;
    color: var(--topographic-teal, #0d7a80);
    /* WCAG 2.1 AA: Minimum font size is 14px (0.875rem = 14px at 16px base). Increased padding for touch target. */
}