/* ==================================================================
   BLOG POST  (blog/post.php only — loaded via $page['css'], 2026-11-11)
   ------------------------------------------------------------------
   Polish pass on the article layout. Keeps the site's type, palette and
   card language (site.css); this file only:
     1. gives the reading column ONE right edge (title, image, body, cards)
     2. closes the dead band between the header and the body
     3. adds the "On this page" contents list (sidebar + folded on mobile)
     4. stops cards that are not links from lifting on hover
     5. tidies the related-guide cards (thumbnail, 3-line excerpt)
   Small text links use --brand-700: --brand (#e2208c) is 4.36:1 on white
   and fails AA at these sizes.
   ================================================================== */

.post-main { --post-measure: 46rem; }

/* 1. One measure for everything in the reading column. */
.post-main > .post-head,
.post-main > .post-body { max-width: var(--post-measure); }
.post-main .prose { max-width: none; }

.post-head .h-display { text-wrap: balance; }
.post-head .lede { text-wrap: pretty; }

/* Byline */
.post-byline {
    display: flex; align-items: center; gap: 14px;
    margin-top: 28px; padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: .88rem; line-height: 1.45;
}
.post-byline-pic {
    flex: 0 0 44px; width: 44px; height: 44px;
    border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line);
}
.post-byline-name { display: block; font-weight: 700; color: var(--ink); }
.post-byline-name a { color: inherit; text-decoration: none; }
.post-byline-name a:hover { color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; }
.post-byline-meta { display: block; color: var(--ink-50); }

/* 2. The body now starts the white section directly under the hero. */
.post-body { margin-top: 0; }
.post-layout { padding-top: clamp(40px, 5vw, 72px); }

/* 3a. Sidebar: the enquiry card, then the contents list. */
.post-aside { margin-top: 40px; }
@media (min-width: 992px) { .post-aside { margin-top: 0; } }

.post-ask {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: 0 1px 2px rgba(8,8,8,.04), 0 12px 32px -18px rgba(8,8,8,.18);
}
.post-ask::after {                     /* quiet brand keyline instead of a pink fill */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.post-ask .s-card-meta { color: var(--brand-700); }
.post-ask-products { font-size: .9rem; line-height: 1.45; }
.post-ask-products li { margin-bottom: 4px; }
.post-ask-products a {
    display: inline-block; padding: 4px 0;
    color: var(--ink); text-decoration: underline;
    text-decoration-color: rgba(168, 18, 100, .35);
    text-underline-offset: 4px;
}
.post-ask-products a:hover { color: var(--brand-700); text-decoration-color: currentColor; }
.post-phone { color: var(--brand-700); }

.post-sticky { position: sticky; top: calc(var(--header-h) + 24px); }
/* Why the sidebar card never stuck before: head.php wraps every page in
   .overflow-x-hidden, and overflow-x:hidden turns that div into a scroll
   container that never scrolls, so sticky children ride along with the page.
   `clip` cuts sideways overflow the same way without making a scroll
   container. Scoped to blog posts; browsers without `clip` keep `hidden`
   (no sticky, exactly as before). Bootstrap's utility is !important. */
body > .overflow-x-hidden:has(.post-aside) { overflow-x: clip !important; }

.post-toc {
    margin-top: 24px;
    padding: 22px 24px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
.post-toc-title {
    margin: 0 0 12px;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-50);
}
.post-toc-list {
    list-style: none; margin: 0; padding: 0;
    max-height: calc(100vh - var(--header-h) - 190px);
    overflow-y: auto;
    border-left: 2px solid var(--line);
    counter-reset: toc;
}
.post-toc-list li { counter-increment: toc; }
.post-toc-list a {
    position: relative;
    display: flex; gap: 10px;
    margin-left: -2px;
    padding: 7px 4px 7px 14px;
    border-left: 2px solid transparent;
    font-size: .875rem; line-height: 1.4;
    color: var(--ink-70); text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
}
.post-toc-list a::before {
    content: counter(toc, decimal-leading-zero);
    flex: 0 0 auto;
    font-size: .74rem; font-weight: 700; line-height: 1.9;
    font-variant-numeric: tabular-nums;
    color: var(--ink-40);
}
.post-toc-list a:hover { color: var(--ink); border-left-color: var(--line-strong); }
.post-toc-list a.is-active {
    color: var(--brand-700); font-weight: 600;
    border-left-color: var(--brand);
}
.post-toc-list a.is-active::before { color: var(--brand-700); }
.post-toc-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: .84rem; color: var(--ink-50);
}
.post-toc-foot .link-arrow { color: var(--brand-700); min-height: 32px; }

/* 3b. Folded contents list on small screens. */
.post-toc-mobile {
    margin: 0 0 32px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface-2);
}
.post-toc-mobile summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 52px; padding: 12px 18px;
    font-weight: 700; color: var(--ink);
    cursor: pointer; list-style: none;
}
.post-toc-mobile summary::-webkit-details-marker { display: none; }
.post-toc-mobile summary::after {
    content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-left: 8px;
    border-right: 2px solid var(--ink-50); border-bottom: 2px solid var(--ink-50);
    transform: rotate(45deg) translateY(-3px);
    transition: transform .2s ease;
}
.post-toc-mobile[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.post-toc-count { margin-left: auto; font-weight: 500; font-size: .84rem; color: var(--ink-50); }
.post-toc-mobile ol { margin: 0; padding: 0 18px 14px 40px; }
.post-toc-mobile li { padding: 2px 0; }
.post-toc-mobile li::marker { color: var(--ink-40); font-size: .85em; }
.post-toc-mobile a { display: inline-block; padding: 6px 0; color: var(--ink-70); text-decoration: none; }
.post-toc-mobile a:hover { color: var(--brand-700); }

/* Headings land clear of the sticky header. */
.post-main .prose h2[id] { scroll-margin-top: calc(var(--header-h) + 28px); }

/* 4. Cards that are not links do not pretend to be. */
.s-card.post-static:hover {
    transform: none; box-shadow: none; border-color: var(--line);
}
.s-card.post-ask.post-static:hover { border-color: var(--line); box-shadow: 0 1px 2px rgba(8,8,8,.04), 0 12px 32px -18px rgba(8,8,8,.18); }
.s-card.post-static:hover::before { opacity: 0; }

/* FAQ section: the empty left column gets a way out. */
.post-faq-help { margin: 14px 0 20px; max-width: 30ch; color: var(--ink-70); }

/* 5. Related guides. */
.post-related .blog-card-media { margin: -6px -6px 18px; }
.post-related-text {
    display: -webkit-box;
    -webkit-line-clamp: 3; line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 16px;
}
.post-related .link-arrow { color: var(--brand-700); }
.post-related:hover .link-arrow::after { transform: translateX(4px); }
.post-related .stretched-link:focus-visible { outline: none; }
.post-related:has(.stretched-link:focus-visible) {
    outline: 3px solid var(--accent); outline-offset: 3px;
}

/* Reading progress (drawn by blog-post.js; absent without JS). It sits on the
   header's bottom edge, clear of the 2px brand hairline on its top edge. */
.post-progress {
    position: absolute; left: 0; bottom: -1px; z-index: 1;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    transform-origin: 0 50%; transform: scaleX(0);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .post-toc-list a, .post-toc-mobile summary::after { transition: none; }
}


/* ==================================================================
   PREMIUM PASS (2026-11-11, second package)
   Dark brand hero, a larger and darker reading face, a calmer end of
   article. Colour pairs: #fff on the .section-ink ground is > 15:1;
   rgba(255,255,255,.72) is > 9:1; --ink-800 on white is 15.6:1.
   ================================================================== */

/* Hero */
.post-crumbs { padding-bottom: 18px; }
.post-hero { padding: clamp(44px, 6vw, 88px) 0 clamp(48px, 6.5vw, 96px); overflow: hidden; }
.post-hero .eyebrow { margin-bottom: 18px; }
.post-title {
    font-size: clamp(2rem, 1.35rem + 2.6vw, 3.4rem);
    line-height: 1.12; letter-spacing: -.01em;
    margin: 0 0 20px; text-wrap: balance;
}
.post-hero .lede {
    max-width: 40rem; margin: 0;
    font-size: clamp(1.02rem, .97rem + .3vw, 1.18rem); line-height: 1.7;
    text-wrap: pretty;
}
.post-hero .post-byline {
    margin-top: 28px; padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.14);
}
.post-hero .post-byline-pic { box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px rgba(255,255,255,.35); }
.post-hero .post-byline-name { color: #fff; }
.post-hero .post-byline-name a:hover { color: #fff; }
.post-hero .post-byline-meta { color: rgba(255,255,255,.72); }
.post-hero-actions { margin-top: 30px; }
.post-hero-actions a { min-height: 48px; white-space: normal; text-align: center; }

.post-hero-media { margin: 0; }
.post-hero-media img {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r-lg);
    box-shadow: 0 30px 70px -28px rgba(0,0,0,.75);
    aspect-ratio: 4 / 3; object-fit: cover;
    background: var(--ink-800);
}
.post-hero-media figcaption { color: rgba(255,255,255,.66); margin-top: 14px; }

/* Hero panel when a post has no lead image */
.post-hero-panel {
    padding: 28px 30px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r-lg);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.post-hero-panel-title {
    margin: 0 0 14px; font-size: .72rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72);
}
.post-hero-panel ol { list-style: none; margin: 0; padding: 0; counter-reset: hp; }
.post-hero-panel li { counter-increment: hp; border-top: 1px solid rgba(255,255,255,.1); }
.post-hero-panel li:first-child { border-top: 0; }
.post-hero-panel a {
    display: flex; gap: 14px; padding: 11px 0;
    color: #fff; text-decoration: none; font-size: .95rem; line-height: 1.4;
}
.post-hero-panel a::before {
    content: counter(hp, decimal-leading-zero);
    font-size: .76rem; font-weight: 700; line-height: 1.85; color: var(--accent-bright);
    font-variant-numeric: tabular-nums;
}
.post-hero-panel a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* Reading face: 18px, near-black, roomy. Section headings get a hairline above. */
.post-main .prose {
    font-size: clamp(1.03rem, .98rem + .22vw, 1.125rem);
    line-height: 1.78;
    color: var(--ink-800);
}
.post-main .prose > p:first-child { font-size: 1.08em; color: var(--ink); }
.post-main .prose h2 {
    font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.05rem);
    line-height: 1.22;
    margin: 2.1em 0 .75em; padding-top: 1.1em;
    border-top: 1px solid var(--line);
}
.post-main .prose h3 { color: var(--ink); }
.post-main .prose a { color: var(--brand-700); }
.post-main .prose a:hover { color: var(--ink); }
.post-main .prose .art-figure img { border-radius: var(--r-lg); }

/* End of article: a quiet strip and a byline block, not two boxes. */
.s-card.post-source {
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 20px;
    padding: 18px 22px; background: var(--surface-2); border-color: transparent;
}
.s-card.post-source:hover { border-color: transparent; }
.post-source .s-card-meta { display: none; }
.post-source .s-card-title { margin: 0; flex: 1 1 260px; }
.post-source .s-card-text { display: none; }
.post-source .s-card-foot { margin: 0; padding: 0; border: 0; }
.s-card.post-author {
    padding: 28px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0;
}
.s-card.post-author::before { display: none; }

@media (max-width: 991.98px) {
    .post-hero-media img { aspect-ratio: auto; }
    .post-hero-actions a { flex: 1 1 100%; }
}