/* ============================================================
   Soofos — Blog post (single.php) styles
   Matches Blog Post.dc.html (2026-07-20 design pass, v2).
   Replaces the v1 single-post styles that previously lived at
   the bottom of pages/blog.css. The archive (pages/blog.css)
   handles the listing; this stylesheet handles the article.

   Layout summary:
     - Article header: 2-col (left = H1 + meta + category pill,
       right = featured image, rounded + soft shadow).
     - Article body: 2-col (250px sticky left rail + 1fr
       article column). Left rail = sticky TOC card + Plus
       card. Article column = post body as white section
       cards (one per H2 section) + inline course CTA
       + topic chips.
     - End-CTA banner: full-width navy card (max 1100px)
       with course-wall photo.
     - Newsletter + related posts follow below.

   Class prefix: sf-post-*
   All values reference CSS custom properties from tokens.css
   (canonical brand) and assets/css/tokens.css (legacy alias
   bridge). No raw hex / px / em values.
   ============================================================ */

/* ---------- Page wrap ---------- */
.sf-post-wrap {
    max-width: calc(var(--soofos-space-3xl) * 25); /* 1200 */
    margin: 0 auto;
    padding: 0 var(--soofos-space-2xl);
    font-family: var(--font);
    color: var(--body);
    background: var(--page);
}

/* ============================================================
   1. Article header — breadcrumb + 2-col (text | image)
   ============================================================ */
.sf-post-header {
    background: var(--white);
    border-bottom: thin solid var(--card-border);
    margin: 0 calc(-1 * var(--soofos-space-2xl)) var(--soofos-space-2xl);
    padding: var(--soofos-space-2xl) var(--soofos-space-2xl) calc(var(--soofos-space-2xl) + var(--soofos-space-sm));
}
.sf-post-header__inner {
    max-width: calc(var(--soofos-space-3xl) * 25); /* 1200 */
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: calc(var(--soofos-space-2xl) + var(--soofos-space-sm));
    align-items: center;
}

/* Breadcrumb */
.sf-post-breadcrumb {
    font-size: var(--soofos-player-text-sm);
    font-weight: var(--soofos-font-weight-bold);
    color: var(--muted-2);
    margin-bottom: var(--soofos-space-md);
}
.sf-post-breadcrumb a {
    color: var(--deep-blue);
    text-decoration: none;
}
.sf-post-breadcrumb a:hover { text-decoration: underline; }
.sf-post-breadcrumb__sep {
    margin: 0 var(--soofos-space-xs);
    color: var(--muted-2);
}

/* H1 + sub */
.sf-post-title {
    font-size: 2.25rem;       /* 36px */
    font-weight: var(--soofos-font-weight-black);
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -.0375rem;
    margin: 0 0 var(--soofos-space-md);
}
.sf-post-sub {
    font-size: 1rem;     /* 15.5px */
    color: var(--muted);
    line-height: 1.55;
    margin: 0 0 var(--soofos-space-lg);
}

/* Meta row */
.sf-post-meta {
    display: flex;
    align-items: center;
    gap: var(--soofos-space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--soofos-space-md);
}
.sf-post-avatar {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    background: var(--blue-fill);
    color: var(--deep-blue);
    font-weight: var(--soofos-font-weight-black);
    font-size: var(--soofos-player-text-sm);
    display: grid;
    place-items: center;
    flex: none;
}
.sf-post-meta__name {
    font-size: var(--soofos-player-text-sm);
    font-weight: var(--soofos-font-weight-extrabold);
    color: var(--ink);
}
.sf-post-meta__detail {
    font-size: var(--soofos-player-text-sm);
    color: var(--muted-2);
    font-weight: var(--soofos-font-weight-bold);
}

/* Category pill */
.sf-post-cat-pill {
    display: inline-flex;
    align-items: center;
    font-size: var(--soofos-player-text-2xs);
    font-weight: var(--soofos-font-weight-extrabold);
    color: var(--deep-blue);
    background: var(--blue-fill);
    border-radius: var(--soofos-radius-pill);
    padding: var(--soofos-space-xs) var(--soofos-space-md);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.sf-post-cat-pill:hover {
    background: var(--blue-border);
    color: var(--ink);
}

/* Featured image (right column) */
.sf-post-hero {
    border-radius: var(--r-card-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    background: var(--blue-fill);
    min-height: 18.75rem;
}
.sf-post-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sf-post-hero--placeholder {
    display: grid;
    place-items: center;
    color: var(--muted-2);
    font-size: var(--soofos-player-text-sm);
    font-weight: var(--soofos-font-weight-bold);
}

/* ============================================================
   2. Article body — 2-col (sticky left rail + article column)
   ============================================================ */
.sf-post-body {
    display: grid;
    grid-template-columns: 15.625rem 1fr;  /* 250px + 1fr */
    gap: calc(var(--soofos-space-2xl) + var(--soofos-space-md));
    align-items: start;
    margin-top: var(--soofos-space-2xl);
}

/* Left rail (sticky container) */
.sf-post-rail {
    position: sticky;
    top: 5.375rem;       /* 86px — below header */
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-md);
    align-self: start;
}

/* TOC card */
.sf-post-toc {
    background: var(--white);
    border: thin solid var(--card-border);
    border-radius: var(--r-card);
    padding: var(--soofos-space-lg) var(--soofos-space-lg);
    box-shadow: var(--shadow-soft);
}
.sf-post-toc__label {
    font-size: var(--soofos-player-text-2xs);
    font-weight: var(--soofos-font-weight-black);
    color: var(--muted-2);
    margin: 0 0 var(--soofos-space-sm);
}
.sf-post-toc__list {
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-2xs);
    list-style: none;
    margin: 0;
    padding: 0;
}
.sf-post-toc__list li { margin: 0; }
.sf-post-toc__list a {
    display: block;
    padding: var(--soofos-space-xs) var(--soofos-space-sm);
    border-radius: var(--r-btn);
    font-size: var(--soofos-player-text-sm);
    font-weight: var(--soofos-font-weight-bold);
    color: var(--deep-blue);
    text-decoration: none;
    line-height: 1.4;
    transition: background .15s, color .15s;
}
.sf-post-toc__list a:hover {
    background: var(--blue-tint);
    color: var(--ink);
}
.sf-post-toc__list a:target {
    background: var(--blue-fill);
    color: var(--deep-blue);
}

/* Plus card under the TOC — small navy card */
.sf-post-plus {
    background: var(--player-dark);
    border-radius: var(--r-card);
    padding: var(--soofos-space-lg);
    color: var(--on-navy);
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-sm);
}
.sf-post-plus__title {
    font-size: .9375rem;     /* 15px */
    font-weight: var(--soofos-font-weight-black);
    color: var(--on-navy);
    line-height: 1.3;
    margin: 0;
}
.sf-post-plus__sub {
    font-size: .8125rem;       /* 12px */
    color: var(--faint);
    font-weight: var(--soofos-font-weight-semibold);
    line-height: 1.5;
    margin: 0;
}
.sf-post-plus__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--on-navy);
    border-radius: var(--r-btn);
    padding: var(--soofos-space-sm) var(--soofos-space-md);
    font-size: var(--soofos-player-text-sm);
    font-weight: var(--soofos-font-weight-extrabold);
    text-decoration: none;
    transition: background .15s;
}
.sf-post-plus__cta:hover { background: var(--blue-hover); }

/* ============================================================
   3. Article column (right of the rail)
   ============================================================ */
.sf-post-article {
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-md);   /* design: 18px between section cards */
    min-width: 0;            /* prevent overflow of long words/figures */
}

/* Post content typography — post body itself, no layout wrapper */
.sf-post-content {
    font-size: .9375rem;     /* 15px */
    color: var(--near-ink);
    line-height: 1.75;
}
.sf-post-content p { margin: 0 0 1rem; }

/* Section card — one white card per H2 section (Blog Post.dc.html) */
.sf-post-section {
    background: var(--white);
    border: thin solid var(--card-border);
    border-radius: var(--r-card-lg);
    padding: var(--soofos-space-xl) var(--soofos-space-2xl);
}
.sf-post-section > :last-child { margin-bottom: 0; }
.sf-post-content h2 {
    font-size: 1.4375rem;    /* 23px */
    font-weight: var(--soofos-font-weight-black);
    color: var(--ink);
    margin: 0 0 var(--soofos-space-md);
    line-height: 1.25;
    letter-spacing: -.01875rem;
    scroll-margin-top: 6rem;
}
.sf-post-content h3 {
    font-size: 1.0625rem;
    font-weight: var(--soofos-font-weight-extrabold);
    color: var(--ink);
    margin: calc(var(--soofos-space-xl) - var(--soofos-space-xs)) 0 var(--soofos-space-sm);
    line-height: 1.3;
    scroll-margin-top: 6rem;
}
.sf-post-content a { color: var(--blue); }
.sf-post-content a:hover { text-decoration: underline; }
.sf-post-content strong { font-weight: var(--soofos-font-weight-extrabold); color: var(--ink); }
.sf-post-content em { font-style: italic; }
.sf-post-content ul, .sf-post-content ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}
.sf-post-content li { margin-bottom: var(--soofos-space-xs); }
.sf-post-content img {
    border-radius: var(--r-card);
    margin: 1rem 0;
    max-width: 100%;
    height: auto;
}
.sf-post-content blockquote {
    border-left: thin solid var(--blue);
    margin: 1rem 0;
    padding: var(--soofos-space-sm) 1rem;
    color: var(--muted);
    font-style: italic;
}

/* ============================================================
   4. Inline course CTA — mid-body, light-blue card
   ============================================================ */
.sf-post-cta-inline {
    display: flex;
    align-items: center;
    gap: var(--soofos-space-md);
    background: var(--blue-fill);   /* design: #e6effa card between white sections */
    border: thin solid var(--blue-border);
    border-radius: var(--r-card);
    padding: var(--soofos-space-lg) var(--soofos-space-lg);
}
.sf-post-cta-inline__avatar {
    width: 3.5rem;           /* 56px */
    height: 3.5rem;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--blue-fill);
    border: thin solid var(--card-border);
}
.sf-post-cta-inline__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sf-post-cta-inline__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-2xs);
}
.sf-post-cta-inline__eyebrow {
    font-size: var(--soofos-player-text-2xs);
    font-weight: var(--soofos-font-weight-black);
    color: var(--deep-blue);
}
.sf-post-cta-inline__title {
    font-size: 1.0625rem;    /* 17px */
    font-weight: var(--soofos-font-weight-black);
    color: var(--ink);
    line-height: 1.3;
    margin: 0;
}
.sf-post-cta-inline__sub {
    font-size: .875rem;     /* 13px */
    color: var(--muted);
    line-height: 1.5;
}
.sf-post-cta-inline__cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    background: var(--blue);
    color: var(--on-navy);
    border-radius: var(--r-btn);
    padding: var(--soofos-space-sm) var(--soofos-space-lg);
    font-size: var(--soofos-player-text-sm);
    font-weight: var(--soofos-font-weight-extrabold);
    text-decoration: none;
    transition: background .15s;
}
.sf-post-cta-inline__cta:hover { background: var(--blue-hover); }

/* ============================================================
   5. Topic chips — at the end of the article column
   ============================================================ */
.sf-post-topics {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--soofos-space-sm);
}
.sf-post-topics__label {
    font-size: var(--soofos-player-text-2xs);
    font-weight: var(--soofos-font-weight-black);
    color: var(--muted-2);
}
.sf-post-topics__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--soofos-space-sm);
}
.sf-post-topic-chip {
    display: inline-flex;
    align-items: center;
    font-size: var(--soofos-player-text-sm);
    font-weight: var(--soofos-font-weight-extrabold);
    color: var(--ink);
    background: var(--white);
    border: .09375rem solid var(--blue-border);   /* design: 1.5px outline chip */
    border-radius: var(--soofos-radius-pill);
    padding: var(--soofos-space-xs) var(--soofos-space-md);
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.sf-post-topic-chip:hover {
    border-color: var(--blue);
    color: var(--ink);
}

/* ============================================================
   6. End-CTA banner — full-width navy card, 1100px max
   ============================================================ */
.sf-post-cta-end {
    max-width: calc(var(--soofos-space-3xl) * 23); /* ~1100 */
    margin: var(--soofos-space-3xl) auto 0;
    background: var(--player-dark);
    border-radius: var(--r-card-lg);
    padding: var(--soofos-space-2xl);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--soofos-space-2xl);
    align-items: center;
    color: var(--on-navy);
}
.sf-post-cta-end__body {
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-sm);
}
.sf-post-cta-end__title {
    font-size: 1.5rem;       /* 24px */
    font-weight: var(--soofos-font-weight-black);
    color: var(--on-navy);
    line-height: 1.2;
    letter-spacing: -.025rem;
    margin: 0;
}
.sf-post-cta-end__sub {
    font-size: .875rem;     /* 13px */
    color: var(--faint);
    font-weight: var(--soofos-font-weight-semibold);
    line-height: 1.55;
    margin: 0 0 var(--soofos-space-md);
}
.sf-post-cta-end__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--soofos-space-sm);
}
.sf-post-cta-end__btn {
    display: inline-flex;
    align-items: center;
    background: var(--blue);
    color: var(--on-navy);
    border-radius: var(--r-btn);
    padding: var(--soofos-space-sm) var(--soofos-space-lg);
    font-size: var(--soofos-player-text-sm);
    font-weight: var(--soofos-font-weight-extrabold);
    text-decoration: none;
    transition: background .15s;
}
.sf-post-cta-end__btn:hover { background: var(--blue-hover); }
.sf-post-cta-end__btn--ghost {
    background: transparent;
    border: medium solid var(--soofos-on-navy-border);
    color: var(--on-navy);
}
.sf-post-cta-end__btn--ghost:hover {
    background: var(--soofos-on-navy-surface);
    color: var(--on-navy);
}
.sf-post-cta-end__img {
    border-radius: var(--r-card);
    overflow: hidden;
    min-height: 12.5rem;     /* 200px */
    background: var(--soofos-on-navy-surface);
    box-shadow: var(--shadow-card);
}
.sf-post-cta-end__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   7. "Keep reading" related posts
   ============================================================ */
.sf-post-related {
    max-width: calc(var(--soofos-space-3xl) * 25); /* 1200 */
    margin: calc(var(--soofos-space-3xl) + var(--soofos-space-sm)) auto 0;
}
.sf-post-related__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 var(--soofos-space-lg);
}
.sf-post-related__heading {
    font-size: 1.25rem;      /* 20px */
    font-weight: var(--soofos-font-weight-black);
    color: var(--ink);
    margin: 0;
}
.sf-post-related__all {
    font-size: .875rem;     /* 13px */
    font-weight: var(--soofos-font-weight-extrabold);
    color: var(--deep-blue);
    text-decoration: none;
}
.sf-post-related__all:hover { text-decoration: underline; }
.sf-post-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--soofos-space-lg);
}
.sf-post-related__card {
    background: var(--white);
    border: thin solid var(--card-border);
    border-radius: var(--r-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s;
}
.sf-post-related__card:hover {
    border-color: var(--blue);   /* design: text cards, hover = blue outline */
}
.sf-post-related__body {
    padding: var(--soofos-space-md) var(--soofos-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-2xs);
    flex: 1;
}
.sf-post-related__cat {
    font-size: var(--soofos-player-text-2xs);
    font-weight: var(--soofos-font-weight-extrabold);
    color: var(--deep-blue);
    background: var(--blue-fill);
    border-radius: var(--soofos-radius-pill);
    padding: var(--soofos-space-2xs) var(--soofos-space-sm);
    align-self: flex-start;
}
.sf-post-related__title {
    font-size: .9375rem;    /* 14.5px */
    font-weight: var(--soofos-font-weight-extrabold);
    color: var(--ink);
    line-height: 1.35;
    margin: var(--soofos-space-xs) 0 0;
}
.sf-post-related__meta {
    font-size: var(--soofos-player-text-sm);
    color: var(--muted-2);
    font-weight: var(--soofos-font-weight-bold);
    margin-top: auto;
    padding-top: var(--soofos-space-sm);
}

/* ============================================================
   8. Responsive
   ============================================================ */
@media (max-width: 64rem) {
    .sf-post-wrap { padding: 0 var(--soofos-space-xl); }
    .sf-post-header { margin: 0 calc(-1 * var(--soofos-space-xl)) var(--soofos-space-xl); padding: var(--soofos-space-xl); }
    .sf-post-header__inner { grid-template-columns: 1fr; }
    .sf-post-hero { min-height: 14rem; }
    .sf-post-body { grid-template-columns: 1fr; }
    .sf-post-rail { position: static; }
    .sf-post-cta-end { grid-template-columns: 1fr; padding: var(--soofos-space-xl); }
    .sf-post-cta-end__img { min-height: 10rem; }
    .sf-post-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 37.5rem) {
    .sf-post-wrap { padding: 0 1rem; }
    .sf-post-header { margin: 0 -1rem var(--soofos-space-lg); padding: var(--soofos-space-lg) 1rem; }
    .sf-post-title { font-size: 1.625rem; }
    .sf-post-section { padding: var(--soofos-space-lg) var(--soofos-space-md); }
    .sf-post-cta-inline { flex-direction: column; align-items: flex-start; }
    .sf-post-cta-end__actions { flex-direction: column; align-items: stretch; }
    .sf-post-related__grid { grid-template-columns: 1fr; }
}