/* The blog, recolored to the site tokens. Headings are set in the display face; everything else keeps the source's sizes and spacing. */
/* ── Blog Layout ─────────────────────────────────────── */
.blog-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px 60px;
    flex: 1;
    position: relative;
    z-index: 1;
}

.blog-container-narrow {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px 60px;
    flex: 1;
    position: relative;
    z-index: 1;
}

/* ── Blog List: Card Grid ────────────────────────────── */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}

.blog-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 12%, transparent);
}

.blog-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.blog-card-link:hover {
    text-decoration: none;
    color: inherit;
}

.blog-card-image {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

.blog-card-image-placeholder {
    width: 100%;
    height: 260px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-3);
    font-size: 2.5rem;
}

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

.blog-card-category {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tide);
    margin-bottom: 8px;
    text-align: right;
}

.blog-card-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 10px;
    line-height: 1.35;
}

.blog-card-excerpt {
    font-size: 0.875rem;
    color: var(--ink-2);
    line-height: 1.55;
    margin: 0;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.775rem;
    color: var(--ink-2);
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}

.blog-card-readmore {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tide);
    margin-left: auto;
}

/* ── Featured Post carousel ───────────────────────────────
   The featured slides live inside .blog-featured-track. Every carousel style
   is scoped behind .is-carousel, which JS adds on init, so with JS disabled or
   broken the slides simply stack full width, which is the original behaviour.
   Nothing here hides content that JS is not there to bring back.            */
.blog-featured-carousel {
    grid-column: 1 / -1;
    position: relative;
}

/* Slides share one grid cell so the track is as tall as the tallest slide and
   nothing reflows as they cross-fade. */
.blog-featured-carousel.is-carousel .blog-featured-track {
    display: grid;
}
.blog-featured-carousel.is-carousel .blog-featured-slide {
    grid-area: 1 / 1;
    opacity: 0;
    /* visibility (not just opacity) also pulls inactive slides out of the tab
       order, so keyboard users cannot land on a link they cannot see. */
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.blog-featured-carousel.is-carousel .blog-featured-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Controls only exist once JS is running. */
.blog-featured-nav,
.blog-featured-dots {
    display: none;
}
.blog-featured-carousel.is-carousel .blog-featured-nav {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: color-mix(in srgb, var(--ink) 72%, transparent);
    backdrop-filter: blur(6px);
    color: var(--bg);
    font-size: 18px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease, background 0.2s ease;
}
.blog-featured-carousel.is-carousel:hover .blog-featured-nav,
.blog-featured-carousel.is-carousel:focus-within .blog-featured-nav {
    opacity: 1;
}
.blog-featured-nav:hover {
    background: color-mix(in srgb, var(--ink) 92%, transparent);
}
/* Always reachable by keyboard even though they fade in on hover. */
.blog-featured-nav:focus-visible {
    opacity: 1;
    outline: 2px solid var(--tide);
    outline-offset: 2px;
}
.blog-featured-nav--prev { left: 14px; }
.blog-featured-nav--next { right: 14px; }

.blog-featured-carousel.is-carousel .blog-featured-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.blog-featured-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--line);
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease;
}
.blog-featured-dot.is-active {
    width: 22px;
    border-radius: 4px;
    background: var(--tide);
}
.blog-featured-dot:focus-visible {
    outline: 2px solid var(--tide);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    /* Arrows crowd a narrow slide; dots are enough on mobile. */
    .blog-featured-carousel.is-carousel .blog-featured-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-featured-carousel.is-carousel .blog-featured-slide {
        transition: none;
    }
}

/* ── Featured Post (full-width banner) ────────────────── */
.blog-featured {
    grid-column: 1 / -1;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: transform 0.2s, box-shadow 0.2s;
}
.blog-featured:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 12%, transparent);
}

.blog-featured-inner {
    display: grid;
    grid-template-columns: 3fr 2fr;
    overflow: hidden;
    border-radius: 10px;
}

.blog-featured-image-wrap {
    overflow: hidden;
    min-width: 0;
}

.blog-featured-image {
    width: 100%;
    height: auto;
    display: block;
}

.blog-featured-body {
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.blog-featured .blog-featured-excerpt {
    margin-bottom: 0;
}

.blog-featured .blog-card-meta {
    margin-top: auto;
}

/* Featured card with no image: collapse to single column so body is full-width */
.blog-featured-inner--no-image {
    grid-template-columns: 1fr;
}

.blog-featured-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.blog-featured-top .blog-card-category {
    margin-bottom: 0;
}

.blog-featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--tide);
    color: var(--tide-ink);
    font-size: 0.65rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
}

.blog-featured-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 10px;
    line-height: 1.3;
}

.blog-featured-excerpt {
    font-size: 0.95rem;
    color: var(--ink-2);
    line-height: 1.55;
    margin: 0 0 16px;
}

/* ── Single Post ──────────────────────────────────────── */
.blog-post-header {
    text-align: center;
    margin-bottom: 32px;
}


.blog-post-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 14px;
    line-height: 1.2;
}

.blog-post-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 0.875rem;
    color: var(--ink-2);
    flex-wrap: wrap;
}

.blog-post-hero {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 24px;
}

.blog-post-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--ink);
    max-width: 760px;
    margin: 0 auto;
}

.blog-post-content h2 {
    color: var(--tide);
    font-size: 1.4rem;
    margin: 36px 0 14px;
    font-weight: 700;
}

.blog-post-content h3 {
    color: var(--ink);
    font-size: 1.15rem;
    margin: 28px 0 10px;
    font-weight: 700;
}

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

.blog-post-content a {
    color: var(--tide);
    text-decoration: underline;
}

.blog-post-content blockquote {
    border-left: 3px solid var(--tide);
    margin: 24px 0;
    padding: 14px 20px;
    background: color-mix(in srgb, var(--tide) 6%, transparent);
    border-radius: 0 6px 6px 0;
    font-style: italic;
    color: var(--ink-2);
}

.blog-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 16px 0;
}

.blog-post-content ul,
.blog-post-content ol {
    margin: 0 0 18px 20px;
}

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

/* ── Single Post Tag Row ──────────────────────────────── */
.blog-post-tags {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* ── Tags ─────────────────────────────────────────────── */
.blog-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.blog-tag {
    display: inline-block;
    padding: 4px 12px;
    background: color-mix(in srgb, var(--tide) 8%, transparent);
    color: var(--tide);
    border-radius: 14px;
    font-size: 0.775rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.blog-tag:hover {
    background: color-mix(in srgb, var(--tide) 18%, transparent);
    color: var(--tide);
}

/* ── Draft Preview Banner ─────────────────────────────── */
.blog-preview-banner {
    background: var(--tide-tint);
    color: var(--tide);
    text-align: center;
    padding: 10px 20px;
    font-size: 0.8125rem;
    font-weight: 600;
    border-bottom: 2px solid color-mix(in srgb, var(--tide) 30%, transparent);
}

/* ── Empty State ──────────────────────────────────────── */
.blog-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--ink-2);
}
.blog-empty-icon {
    font-size: 3rem;
    opacity: 0.3;
    margin-bottom: 16px;
}
.blog-empty p {
    font-size: 1rem;
    margin: 0;
}

/* ── Page Header ──────────────────────────────────────── */
.blog-page-header {
    text-align: center;
    margin-bottom: 16px;
    padding: 20px 0 0;
}
.blog-page-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 6px;
    letter-spacing: -0.5px;
}
.blog-page-tagline {
    font-size: 1rem;
    color: var(--ink-2);
    margin: 0;
}

/* ── Filter bar ───────────────────────────────────────── */
.blog-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    justify-content: center;
}
.blog-filter {
    padding: 5px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 16px;
    text-decoration: none;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
    transition: all 0.15s;
}
.blog-filter:hover, .blog-filter.active {
    background: var(--tide-tint);
    color: var(--tide);
    border-color: color-mix(in srgb, var(--tide) 30%, transparent);
}

/* ── Pagination ──────────────────────────────────────── */
.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    /* The page list is windowed in PHP, but wrap is the safety net: without it
       a long run of links overflows the viewport sideways instead of wrapping. */
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 36px;
}
.blog-page-gap {
    padding: 6px 2px;
    font-size: 0.8125rem;
    color: var(--ink-2);
    user-select: none;
}
.blog-page-link {
    padding: 6px 14px;
    font-size: 0.8125rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
}
.blog-page-link:hover, .blog-page-link.active {
    background: var(--tide-tint);
    color: var(--tide);
    border-color: color-mix(in srgb, var(--tide) 30%, transparent);
}

/* ── Back Link ───────────────────────────────────────── */
.blog-back {
    font-size: 0.8125rem;
    color: var(--ink-2);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 24px;
}
.blog-back:hover {
    color: var(--tide);
}

/* ── Related Posts ────────────────────────────────────── */
.blog-related {
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid var(--line);
    margin-bottom: 32px;
}
.blog-related-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.blog-related-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.blog-related-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--tide);
    background: color-mix(in srgb, var(--tide) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--tide) 20%, transparent);
    border-radius: 50px;
    padding: 2px 10px;
    text-decoration: none;
    transition: background 0.15s;
}
.blog-related-badge:hover {
    background: color-mix(in srgb, var(--tide) 15%, transparent);
}
.blog-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.blog-related-card {
    display: block;
    padding: 1.125rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    text-decoration: none;
    background: var(--bg);
    transition: border-color 0.18s, background 0.18s;
}
.blog-related-card:hover {
    border-color: color-mix(in srgb, var(--tide) 40%, transparent);
    background: color-mix(in srgb, var(--tide) 5%, transparent);
}
.blog-related-card-date {
    display: block;
    font-size: 0.75rem;
    color: var(--tide);
    font-weight: 600;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.blog-related-card-title {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.35;
}
.blog-related-card-excerpt {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ink-2);
    line-height: 1.5;
}

/* ── CTA Block ───────────────────────────────────────── */
.blog-cta {
    margin-top: 48px;
    padding: 36px 32px;
    text-align: center;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.blog-cta-heading {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 16px;
}
.blog-cta-btn {
    display: inline-block;
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--tide-ink);
    background: var(--tide);
    border-radius: 6px;
    text-decoration: none;
    transition: opacity 0.15s;
}
.blog-cta-btn:hover {
    opacity: 0.88;
    color: var(--tide-ink);
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
    .blog-container,
    .blog-container-narrow {
        padding: 24px 16px 48px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }
    .blog-card-image,
    .blog-card-image-placeholder {
        height: 200px;
    }

    .blog-featured-inner {
        grid-template-columns: 1fr;
    }
    .blog-featured-image {
        min-height: 200px;
        max-height: 200px;
    }
    .blog-featured-body {
        padding: 20px;
    }
    .blog-featured-title {
        font-size: 1.2rem;
    }

    .blog-post-title {
        font-size: 1.5rem;
    }
    .blog-post-content {
        font-size: 1rem;
    }
    .blog-post-content img {
        max-width: 100%;
        height: auto;
    }

    .blog-related-grid {
        grid-template-columns: 1fr;
    }
    .blog-cta {
        padding: 28px 20px;
    }

    .blog-filters {
        justify-content: flex-start;
        margin-bottom: 28px;
    }

    .blog-page-header {
        padding: 24px 0 16px;
    }
    .blog-page-title {
        font-size: 1.75rem;
    }
}

/* ── Blog post: Sources + FAQ (LLM/content standards) ─────────────────────── */
.post-sources, .post-faq { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.post-sources h2, .post-faq h2 { font-size: 1.25rem; margin-bottom: 16px; }
.post-sources ul { padding-left: 20px; }
.post-sources li { margin-bottom: 8px; }
.post-sources a { word-break: break-word; }
.post-faq-item { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; padding: 4px 16px; }
.post-faq-item summary { cursor: pointer; font-weight: 600; padding: 12px 0; list-style: none; }
.post-faq-item summary::-webkit-details-marker { display: none; }
.post-faq-item[open] summary { border-bottom: 1px solid var(--line); }
.post-faq-answer { padding: 12px 0; line-height: 1.7; }

/* Headings in the display face, at the site's heading weight. */
.blog-page-title,
.blog-post-title,
.blog-card-title,
.blog-featured-title,
.blog-cta-heading,
.blog-related-card-title,
.blog-post-content h2,
.blog-post-content h3,
.post-sources h2,
.post-faq h2 {
    font-family: var(--display);
    font-weight: 500;
    letter-spacing: -0.01em;
}
.blog-filter-clear {
    font-size: 0.75rem;
    color: var(--ink-2);
    text-decoration: none;
    align-self: center;
}
.blog-featured-badge svg { flex: none; }
.blog-featured-nav svg { display: block; }

/* Key takeaways: the answer first, then the facts a skimmer should keep. */
.post-takeaways { max-width: 760px; margin: 0 auto 32px; padding: 20px 24px; background: var(--tide-tint); border-left: 4px solid var(--tide); border-radius: 0 10px 10px 0; }
.post-takeaways-label { margin: 0 0 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tide); }
.post-takeaways-answer { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--ink); }
.post-takeaways ul { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); }

/* Tables from the API: scroll sideways on a phone instead of breaking the layout. */
.blog-post-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 24px 0; font-size: 0.95rem; }
.blog-post-content th, .blog-post-content td { padding: 10px 14px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.blog-post-content th { background: var(--surface-2); font-weight: 600; }

/* Contents, the next read, hub pages, and the topic list on the index. */
.post-toc { max-width: 760px; margin: 0 auto 32px; padding: 18px 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.post-toc ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 0.95rem; }
.post-toc .toc-l3 { margin-left: 18px; list-style-type: circle; }
.post-toc a { color: var(--ink-2); text-decoration: none; }
.post-toc a:hover { color: var(--tide); text-decoration: underline; }
.blog-post-content h2, .blog-post-content h3 { scroll-margin-top: 80px; }
.blog-next { display: block; max-width: 760px; margin: 40px auto 0; padding: 18px 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-decoration: none; color: var(--ink); }
.blog-next:hover { border-color: var(--tide); }
.blog-next-label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tide); }
.blog-next-title { display: block; margin-top: 6px; font-size: 1.1rem; font-weight: 600; }
.hub-heading { font-size: 1.25rem; margin: 32px 0 14px; }
.hub-start { padding: 20px 24px; background: var(--tide-tint); border-left: 4px solid var(--tide); border-radius: 0 10px 10px 0; }
.hub-start .hub-heading { margin-top: 0; }
.hub-start-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.blog-topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 0 0 32px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.blog-topic-name { margin: 0 0 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tide); }
.blog-topic ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.blog-topic a { color: var(--ink); text-decoration: none; }
.blog-topic a:hover { color: var(--tide); text-decoration: underline; }
.blog-topic-count { color: var(--ink-3); font-size: 0.85rem; }