/* blog.css — /blog, /blog/category/<slug>, /blog/<slug>, /research/<slug>.
 *
 * Visual language follows onboarding.html and welcomeNocd2.html: soft light ground, white
 * and glass surfaces, 18-28px radii, the #6c5fc0 purple accent, generous line height and no
 * hard borders. Everything is prefixed .bl- so it cannot reach the rest of the site.
 *
 * Colours that carry meaning (text, links, focus, borders) come from the --bia-* tokens so
 * they stay AA and swap correctly in high-contrast mode. Raw hex is only used for decorative
 * surfaces that sit under already-tokened text. */

.bl-index-main,
.bl-post-main {
    max-width: 1120px;
    margin: 0 auto;
    padding: 8px 20px 64px;
}

.bl-post-main { max-width: 860px; }

/* ── Breadcrumb ─────────────────────────────────────────────── */

.bl-breadcrumb { margin: 16px 0 8px; }

.bl-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.86rem;
    color: var(--bia-muted);
}

.bl-breadcrumb li { display: flex; align-items: center; gap: 6px; }

/* Separator is decorative, so it is generated content a screen reader never reaches. */
.bl-breadcrumb li + li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #cfcbe0;
    flex: none;
}

.bl-breadcrumb a { color: var(--bia-muted); text-decoration: none; }
.bl-breadcrumb a:hover { color: var(--bia-link); text-decoration: underline; }
.bl-breadcrumb [aria-current="page"] { color: var(--bia-fg); font-weight: 600; }

/* ── Index hero ─────────────────────────────────────────────── */

.bl-hero {
    text-align: center;
    padding: 40px 24px 32px;
    max-width: 720px;
    margin: 0 auto;
}

.bl-hero-title {
    font-size: clamp(2rem, 4.5vw, 2.9rem);
    font-weight: 900;
    line-height: 1.15;
    margin: 0 0 16px;
    color: var(--bia-fg);
}

.bl-hero-sub,
.bl-hero-copy {
    font-size: 1.06rem;
    line-height: 1.7;
    color: var(--bia-muted);
    margin: 0;
}

.bl-hero-copy p { margin: 0 0 14px; }
.bl-hero-copy p:last-child { margin-bottom: 0; }

/* ── Controls: search + category chips ──────────────────────── */

.bl-controls {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    margin: 8px auto 28px;
    max-width: 780px;
}

.bl-search { width: 100%; max-width: 460px; }

.bl-search-label {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--bia-muted);
    margin: 0 0 6px 4px;
}

.bl-search-input {
    width: 100%;
    padding: 14px 20px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 1rem;
    color: var(--bia-fg);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.bl-search-input::placeholder { color: var(--bia-muted); opacity: 1; }

.bl-search-input:focus {
    border-color: var(--bia-accent);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(108, 95, 192, 0.14);
}

.bl-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.bl-chip {
    display: inline-flex;
    align-items: center;
    /* min-height keeps the target at least 24px tall per 2.5.8. */
    min-height: 36px;
    padding: 7px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e3dff2;
    color: var(--bia-fg);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.bl-chip:hover {
    border-color: var(--bia-accent);
    background: #f5f3ff;
    color: var(--bia-fg);
    text-decoration: none;
    transform: translateY(-1px);
}

/* Active chip is marked by fill AND aria-current, never by colour alone. */
.bl-chip-on {
    background: var(--bia-accent);
    border-color: var(--bia-accent);
    color: var(--bia-on-accent);
}

.bl-chip-on:hover { background: var(--bia-focus); border-color: var(--bia-focus); color: var(--bia-on-accent); }

/* ── Result count ───────────────────────────────────────────── */

.bl-count {
    text-align: center;
    font-size: 0.9rem;
    color: var(--bia-muted);
    margin: 0 0 20px;
    min-height: 1.2em;
}

/* ── Featured post ──────────────────────────────────────────── */

.bl-featured { margin: 0 0 44px; }

.bl-eyebrow {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--bia-accent);
    margin: 0 0 10px;
}

.bl-featured-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 28px;
    padding: 36px 34px;
    box-shadow: 0 8px 32px rgba(119, 106, 200, 0.1);
}

.bl-featured-title {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    line-height: 1.25;
    margin: 12px 0 12px;
}

.bl-featured-excerpt {
    font-size: 1.04rem;
    line-height: 1.7;
    color: var(--bia-muted);
    margin: 0 0 14px;
}

@media (max-width: 640px) {
    .bl-featured-card { padding: 26px 22px; border-radius: 22px; }
}

/* ── Grid + cards ───────────────────────────────────────────── */

.bl-section-heading {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--bia-fg);
    margin: 0 0 18px;
}

.bl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

@media (max-width: 900px) { .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .bl-grid { grid-template-columns: 1fr; } }

/* Hidden by "show more" and by search. Both use the same mechanism so they cannot fight:
   an item is visible only when neither has hidden it. */
.bl-hidden-overflow,
.bl-hidden-search { display: none; }

.bl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #ece9f7;
    border-radius: 22px;
    padding: 22px 22px 20px;
    box-shadow: 0 2px 10px rgba(119, 106, 200, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.bl-card:hover {
    transform: translateY(-3px);
    border-color: #ddd6f5;
    box-shadow: 0 12px 28px rgba(119, 106, 200, 0.14);
}

.bl-card-tags,
.bl-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}

/* A long category name ("Exposure and response prevention") wraps to a second line on a narrow
   card while a short one does not, which leaves the titles in a row starting at different
   heights. Reserving two lines keeps every card in a row aligned whatever its tags are. */
.bl-card .bl-card-tags { min-height: 52px; align-content: flex-start; }

/* Text colour is --bia-link (#5b4fb8), NOT --bia-pal-lav-fg. The --bia-pal-*-fg tokens are
   tuned to the 3:1 graphics bar, as custom.css records next to them, so the lavender pair is
   4.22:1 and fails the 4.5:1 text bar. axe caught this on every page carrying a tag.
   --bia-link on the same tint is 5.38:1. */
.bl-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--bia-pal-lav-bg);
    color: var(--bia-link);
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
}

a.bl-tag:hover { background: #ded7fa; color: var(--bia-focus); text-decoration: underline; }

.bl-tag-quiet { background: #f4f2fc; color: var(--bia-muted); }

.bl-card-title {
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 10px;
}

/* The title link is the only link in the card, but its hit area covers the whole card. This
   keeps the card clickable without giving the link an accessible name made of every word in
   the card, which is what wrapping the card in an <a> does. */
.bl-card-link { color: var(--bia-fg); text-decoration: none; }
.bl-card-link:hover { color: var(--bia-link); text-decoration: underline; }

.bl-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.bl-card-excerpt {
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--bia-muted);
    margin: 0 0 14px;
    /* Three lines, so a long excerpt cannot make one card twice the height of its neighbours. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bl-card-meta {
    font-size: 0.84rem;
    color: var(--bia-muted);
    margin: auto 0 0;
}

.bl-empty {
    text-align: center;
    color: var(--bia-muted);
    padding: 32px 12px;
    margin: 0;
}

.bl-more-wrap { display: flex; justify-content: center; margin: 32px 0 0; }

/* ── Post header ────────────────────────────────────────────── */

.bl-article { max-width: 720px; margin: 0 auto; }

.bl-post-header { margin: 8px 0 32px; }

.bl-post-title {
    font-size: clamp(1.9rem, 4.2vw, 2.7rem);
    font-weight: 900;
    line-height: 1.18;
    margin: 6px 0 16px;
    color: var(--bia-fg);
}

.bl-post-standfirst {
    font-size: 1.14rem;
    line-height: 1.65;
    color: var(--bia-muted);
    margin: 0 0 26px;
}

.bl-byline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid #eceaf5;
    border-bottom: 1px solid #eceaf5;
}

.bl-byline-avatar { border-radius: 50%; flex: none; background: #f4f2fc; }

.bl-byline-text { display: flex; flex-direction: column; }
.bl-byline-name { font-weight: 700; color: var(--bia-fg); font-size: 0.95rem; }
.bl-byline-meta { font-size: 0.85rem; color: var(--bia-muted); }

.bl-byline-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--bia-muted);
}

@media (max-width: 560px) {
    .bl-byline-dates { margin-left: 0; width: 100%; }
}

/* ── Table of contents ──────────────────────────────────────── */

.bl-toc {
    background: #f7f6ff;
    border-radius: 18px;
    padding: 20px 24px;
    margin: 0 0 32px;
}

.bl-toc-heading {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--bia-muted);
    margin: 0 0 10px;
}

.bl-toc ol {
    margin: 0;
    padding: 0 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.bl-toc a { color: var(--bia-link); text-decoration: none; font-size: 0.95rem; }
.bl-toc a:hover { text-decoration: underline; }

/* ── Post body ──────────────────────────────────────────────── */

.bl-body {
    font-size: 1.06rem;
    line-height: 1.78;
    color: var(--bia-fg);
}

.bl-body p { margin: 0 0 20px; }

.bl-body h2 {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 40px 0 14px;
    color: var(--bia-fg);
    /* Anchor links from the TOC land below the sticky nav rather than under it. */
    scroll-margin-top: 90px;
}

.bl-body h3 {
    font-size: 1.18rem;
    font-weight: 800;
    margin: 28px 0 10px;
    color: var(--bia-fg);
    scroll-margin-top: 90px;
}

.bl-body ul,
.bl-body ol { margin: 0 0 20px; padding-left: 26px; }
.bl-body li { margin: 0 0 9px; }

.bl-body a,
.bl-link { color: var(--bia-link); text-decoration: underline; }
.bl-body a:hover,
.bl-link:hover { color: var(--bia-focus); }

.bl-lead { font-size: 1.25rem; font-weight: 700; color: var(--bia-fg); }

.bl-figure { margin: 28px 0; text-align: center; }

.bl-figure img {
    max-width: 100%;
    height: auto;
    border-radius: 18px;
}

.bl-figure figcaption {
    font-size: 0.88rem;
    color: var(--bia-muted);
    margin: 10px auto 0;
    max-width: 90%;
    line-height: 1.55;
}

.bl-pullquote {
    margin: 30px 0;
    padding: 24px 28px;
    background: linear-gradient(108.07deg, #ece8fb -5.2%, #e3f9f3 103.39%);
    border-radius: 20px;
    font-size: 1.16rem;
    font-weight: 700;
    line-height: 1.55;
    color: var(--bia-fg);
    text-align: center;
}

.bl-callout {
    margin: 30px 0;
    padding: 26px 28px;
    background: #f7f6ff;
    border-radius: 22px;
}

.bl-callout > :first-child { margin-top: 0; }
.bl-callout > :last-child { margin-bottom: 0; }

.bl-qa { margin: 0 0 26px; }

.bl-q {
    font-weight: 800;
    color: var(--bia-accent);
    margin: 0 0 12px;
}

.bl-sources { font-size: 0.92rem; line-height: 1.6; }
.bl-sources li { margin-bottom: 10px; }

.bl-timeline li { margin-bottom: 12px; }

/* Inline CTA row used inside a body. */
.bl-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 26px 0;
}

.bl-inline-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 11px 22px;
    border-radius: 14px;
    background: var(--bia-accent);
    color: var(--bia-on-accent);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
}

.bl-inline-cta:hover { background: var(--bia-focus); color: var(--bia-on-accent); text-decoration: none; }

.bl-inline-cta-quiet {
    background: #fff;
    color: var(--bia-accent);
    border: 1px solid var(--bia-accent);
}

.bl-inline-cta-quiet:hover { background: #f5f3ff; color: var(--bia-accent); }

/* ── The 8-in-100 dot grid on how-common-is-emetophobia ─────── */

.bl-dotgrid-figure { margin: 8px 0 28px; }

.bl-dotgrid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
    max-width: 260px;
    margin: 0 auto;
}

/* Both colours clear 3:1 against white so the chart is perceivable on its own; the
   role="img" label carries the actual number either way. */
.bl-dot {
    aspect-ratio: 3 / 5;
    border-radius: 2px;
    background: var(--bia-border);
}

.bl-dot-on { background: var(--bia-accent); }

/* ── Author card ────────────────────────────────────────────── */

.bl-author-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    max-width: 720px;
    margin: 48px auto 0;
    padding: 26px 28px;
    background: #f7f6ff;
    border-radius: 24px;
}

.bl-author-card img { border-radius: 50%; flex: none; background: #fff; }
.bl-author-heading { font-size: 1.05rem; font-weight: 800; margin: 0 0 2px; }
.bl-author-role { font-size: 0.88rem; color: var(--bia-muted); margin: 0 0 10px; }
.bl-author-bio { font-size: 0.95rem; line-height: 1.65; color: var(--bia-fg); margin: 0 0 10px; }

@media (max-width: 560px) {
    .bl-author-card { flex-direction: column; gap: 14px; padding: 22px; }
}

/* ── Related ────────────────────────────────────────────────── */

.bl-related { max-width: 1120px; margin: 56px auto 0; }

/* ── End CTA ────────────────────────────────────────────────── */

.bl-cta {
    max-width: 720px;
    margin: 56px auto 0;
    padding: 40px 34px;
    text-align: center;
    background: linear-gradient(108.07deg, #ece8fb -5.2%, #e3f9f3 103.39%);
    border-radius: 28px;
}

.bl-cta-heading {
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    font-weight: 900;
    margin: 0 0 12px;
    color: var(--bia-fg);
}

.bl-cta-body {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--bia-muted);
    margin: 0 auto 24px;
    max-width: 480px;
}

.bl-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.bl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 14px 30px;
    border-radius: 16px;
    border: none;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.bl-btn:hover { transform: translateY(-2px); text-decoration: none; }

/* A class that sets `display` outranks the user-agent's `[hidden] { display: none }`, so
   setting .hidden on the show-more button from JS did nothing and the button stayed on screen
   after every post was already revealed. */
.bl-btn[hidden] { display: none; }

.bl-btn-primary {
    background: var(--bia-accent);
    color: var(--bia-on-accent);
    box-shadow: 0 8px 24px rgba(119, 106, 200, 0.3);
}

.bl-btn-primary:hover { background: var(--bia-focus); color: var(--bia-on-accent); box-shadow: 0 12px 32px rgba(119, 106, 200, 0.4); }

.bl-btn-secondary {
    background: #fff;
    color: var(--bia-fg);
    border: 1px solid #ded7f5;
}

.bl-btn-secondary:hover { background: #f7f6ff; color: var(--bia-fg); }

/* ── Focus ──────────────────────────────────────────────────── */

.bl-chip:focus-visible,
.bl-btn:focus-visible,
.bl-card-link:focus-visible,
.bl-search-input:focus-visible,
.bl-toc a:focus-visible,
.bl-breadcrumb a:focus-visible,
.bl-tag:focus-visible {
    outline: 3px solid var(--bia-focus);
    outline-offset: 2px;
}

/* A card whose title link has focus reads as focused, since the link's hit area is the card. */
.bl-card:has(.bl-card-link:focus-visible) {
    border-color: var(--bia-accent);
    box-shadow: 0 12px 28px rgba(119, 106, 200, 0.18);
}

/* ── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .bl-card,
    .bl-chip,
    .bl-btn,
    .bl-search-input { transition: none; }

    .bl-card:hover,
    .bl-chip:hover,
    .bl-btn:hover { transform: none; }
}

[data-a11y-motion="reduce"] .bl-card,
[data-a11y-motion="reduce"] .bl-chip,
[data-a11y-motion="reduce"] .bl-btn,
[data-a11y-motion="reduce"] .bl-search-input { transition: none; }

[data-a11y-motion="reduce"] .bl-card:hover,
[data-a11y-motion="reduce"] .bl-chip:hover,
[data-a11y-motion="reduce"] .bl-btn:hover { transform: none; }