/* ============================================================================
   /assets/css/blog-details.css
   ----------------------------------------------------------------------------
   Editorial essay / journal vibe for /blog/{slug}. Deliberately distinct
   from the news article and service detail pages:

     · news-and-updates-details.css = newspaper folio strip + Reuters byline.
     · service.css                  = magazine plate hero with gold-foil
                                      hairlines and corner brackets.
     · this file                    = personal essay: author-forward
                                      masthead, full-width cover, soft sidebar
                                      with a writer card and auto-built TOC.

   The article PROSE itself reuses .zc-naud-prose from the news article so
   editors get the same rich-text rendering everywhere on the site. This
   file only adds the surrounding chrome: masthead, cover, footer, sidebar
   cards, end-of-article author line, and the closing CTA.

   Class prefix: .zc-bd-{section}__{element}
   Brand grammar: amber + navy on snow. No italics in chrome. No em-dashes.
   No numeric max-width on outer wrappers — only --zc-pad-x / --zc-pad-x-mb
   for breathing room (per the Zivah brand & layout rules).
   ============================================================================ */


/* ============================================================================
   §0  Page reset — kill the inherited content-wrap padding so each band
       can manage its own horizontal padding via --zc-pad-x.
   ============================================================================ */
body .content-wrap.my-wrap-no-padding,
body .container { /* legacy theme containers stay wide-open */ }


/* ============================================================================
   §1  COVER HERO — 16:9 plate that carries the photograph.
       Source images are 1920x1080. The hero now lives INSIDE the article
       column (left side of the 2-col grid) so the sticky sidebar runs
       flush from the same top edge — no negative space alongside the
       cover. The aspect ratio stays 16/9 so any 1920x1080 source fills
       edge-to-edge without letterboxing or stretching.
   ============================================================================ */

/* Breadcrumb sits ABOVE the grid as a full-width strip. */
.zc-bd-crumb {
    padding: clamp(14px, 1.6vw, 22px) var(--zc-pad-x) clamp(8px, 1vw, 14px);
    font-family: var(--zc-f-heading);
    font-size: 12px;
    letter-spacing: 0.4px;
    color: var(--zc-warm-mid);
    background: var(--zc-white);
}
@media (max-width: 991px) {
    .zc-bd-crumb { padding-left: var(--zc-pad-x-mb); padding-right: var(--zc-pad-x-mb); }
}
.zc-bd-crumb a {
    color: var(--zc-warm-dk);
    text-decoration: none;
    transition: color 0.25s var(--zc-ease);
}
.zc-bd-crumb a:hover { color: var(--zc-amber-dk); }
.zc-bd-crumb span { margin: 0 8px; color: var(--zc-amber-a45); }
.zc-bd-crumb-current { color: var(--zc-charcoal); font-weight: 600; }

.zc-bd-hero {
    /* Inside the article column — no padding of its own, just sits at
       the top of the column. */
    margin: 0 0 clamp(20px, 2vw, 32px);
}

/* The 16:9 plate. Image is positioned to absolute-fill so any source
   that isn't exactly 1920x1080 still covers the frame edge-to-edge. */
.zc-bd-hero__plate {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 9;
    /* Cap the plate height on tall wide screens so the photo never
       eats the entire viewport. Mobile gets a sensible floor so the
       title overlay never collapses onto itself. */
    max-height: clamp(420px, 78vh, 820px);
    min-height: clamp(320px, 50vh, 460px);
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(160deg, var(--zc-charcoal) 0%, var(--zc-deep) 100%);
    box-shadow: 0 40px 80px -42px rgba(46, 75, 113, 0.45),
                0 16px 32px -22px rgba(207, 138, 63, 0.28);
}
.zc-bd-hero__plate-img {
    position: absolute; inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center 35%;
    display: block;
    /* Subtle warm-amber colour wash — keeps the image on-brand even
       when the source photo is a cool clinical shot. */
    filter: saturate(1.05);
}
/* Graduated dark wash for legibility — transparent at the top, dense
   at the bottom-left where the title sits. */
.zc-bd-hero__plate-wash {
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(46, 75, 113, 0.45) 0%,
            rgba(46, 75, 113, 0.08) 24%,
            rgba(0, 0, 0, 0.00) 42%,
            rgba(0, 0, 0, 0.55) 78%,
            rgba(0, 0, 0, 0.85) 100%),
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.30) 0%,
            rgba(0, 0, 0, 0.06) 38%,
            transparent 60%);
}
/* Hero in no-image mode — fall back to a textured navy plate so the
   layout still works when a post has no cover. */
.zc-bd-hero--no-img .zc-bd-hero__plate {
    background:
        radial-gradient(ellipse at 10% 0%, rgba(207, 138, 63, 0.20) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 100%, rgba(207, 138, 63, 0.12) 0%, transparent 55%),
        linear-gradient(160deg, var(--zc-charcoal) 0%, var(--zc-deep) 100%);
}
.zc-bd-hero--no-img .zc-bd-hero__plate-img,
.zc-bd-hero--no-img .zc-bd-hero__plate-wash { display: none; }

/* Top-left badge row inside the plate */
.zc-bd-hero__plate-top {
    position: absolute;
    top: clamp(14px, 1.8vw, 24px);
    left: clamp(16px, 2.2vw, 32px);
    right: clamp(16px, 2.2vw, 32px);
    display: flex; align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    z-index: 2;
}
.zc-bd-hero__brand {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 10px 5px 5px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.30);
}
.zc-bd-hero__brand-z {
    display: inline-grid; place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zc-amber-dk), var(--zc-amber));
    color: var(--zc-white);
    font-family: var(--zc-f-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.4px;
    flex-shrink: 0;
}
.zc-bd-hero__brand-pub {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
}
.zc-bd-hero__topic {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-white);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.zc-bd-hero__topic-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--zc-amber-lt);
    box-shadow: 0 0 0 3px rgba(207, 138, 63, 0.28);
}
.zc-bd-hero__date {
    margin-left: auto;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
@media (max-width: 540px) {
    .zc-bd-hero__date { margin-left: 0; }
}

/* Bottom-left title block inside the plate */
.zc-bd-hero__plate-text {
    position: absolute;
    left: clamp(16px, 2.4vw, 40px);
    right: clamp(16px, 2.4vw, 40px);
    bottom: clamp(20px, 2.6vw, 40px);
    color: var(--zc-white);
    margin: 0;
    z-index: 2;
}
.zc-bd-hero__plate-rule {
    display: block;
    width: 48px; height: 2px;
    margin-bottom: 14px;
    background: linear-gradient(90deg, var(--zc-amber), var(--zc-amber-dk));
    border-radius: 2px;
    box-shadow: 0 0 14px rgba(207, 138, 63, 0.55);
}
.zc-bd-hero__title {
    margin: 0 0 clamp(10px, 1.2vw, 18px);
    font-family: var(--zc-f-display);
    font-size: clamp(26px, 3.2vw + 10px, 58px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -1.2px;
    color: var(--zc-white);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
    text-wrap: balance;
    max-width: 70ch; /* readable measure — relaxes to plate width on mobile */
}
.zc-bd-hero__dek {
    margin: 0;
    font-family: var(--zc-f-body);
    font-size: clamp(13.5px, 0.4vw + 12px, 17px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.50);
    max-width: 64ch;
    text-wrap: balance;
}

/* Optional caption — sits OUTSIDE the plate as a small italic-free
   credit line below the photo. */
.zc-bd-hero__cap {
    margin: 10px clamp(0px, 0.6vw, 8px) 0;
    padding-left: 12px;
    border-left: 2px solid var(--zc-amber-a45);
    font-family: var(--zc-f-body);
    font-size: 12px;
    color: var(--zc-warm-mid);
    line-height: 1.5;
}

/* Byline strip — sits below the plate as its own band so the photo
   reads as one frame. Avatar + name/role on the left, read-time &
   stats on the right. */
.zc-bd-hero__byline-strip {
    margin-top: clamp(16px, 2vw, 26px);
    padding: clamp(14px, 1.8vw, 22px) 0;
    border-top: 1px solid var(--zc-linen);
    border-bottom: 1px solid var(--zc-linen);
}
.zc-bd-hero__byline-inner {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 14px clamp(18px, 2vw, 32px);
    justify-content: space-between;
}
@media (max-width: 600px) {
    .zc-bd-hero__byline-inner { gap: 12px; justify-content: flex-start; }
}
.zc-bd-hero__byline {
    display: inline-flex; align-items: center; gap: 12px;
}
.zc-bd-hero__avatar {
    position: relative;
    display: inline-grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zc-amber-dk), var(--zc-amber));
    color: var(--zc-white);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 2px var(--zc-white);
}
.zc-bd-hero__avatar-init {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: var(--zc-f-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--zc-white);
    letter-spacing: -0.5px;
    z-index: 0;
}
.zc-bd-hero__avatar-img {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    z-index: 1;
}
.zc-bd-hero__byline-meta {
    display: flex; flex-direction: column; gap: 1px;
    line-height: 1.2;
}
.zc-bd-hero__byline-meta small {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--zc-warm-mid);
}
.zc-bd-hero__byline-meta b {
    font-family: var(--zc-f-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--zc-charcoal);
    letter-spacing: -0.2px;
}
.zc-bd-hero__byline-role {
    font-family: var(--zc-f-body);
    font-size: 12px;
    color: var(--zc-warm-mid);
    margin-top: 1px;
}

.zc-bd-hero__stats {
    display: inline-flex; align-items: center; flex-wrap: wrap;
    gap: 10px 14px;
    font-family: var(--zc-f-heading);
    font-size: 12px;
    color: var(--zc-warm-mid);
}
.zc-bd-hero__stat {
    display: inline-flex; align-items: center; gap: 6px;
}
.zc-bd-hero__stat i {
    font-size: 13px;
    color: var(--zc-amber-dk);
}
.zc-bd-hero__stat b {
    color: var(--zc-charcoal);
    font-weight: 700;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.4px;
}
.zc-bd-hero__stat-sep {
    width: 1px; height: 12px;
    background: var(--zc-linen);
}
@media (max-width: 600px) {
    .zc-bd-hero__stat-sep--hide-mb,
    .zc-bd-hero__stat--hide-mb { display: none; }
}


/* ============================================================================
   §3  BODY — single 2-col grid that holds the WHOLE article.
       LEFT  (zc-bd-body__main): hero plate → byline strip → prose → faq
                                 → tags/share → inline author bio
       RIGHT (sidebar): TOC, author card, related posts, resources, CTA.
                        Sticky from the same top edge as the hero so the
                        eye never sees negative space beside the cover.
   ============================================================================ */
.zc-bd-body {
    background: var(--zc-white);
    padding: 0 0 clamp(40px, 4.6vw, 72px);
}
.zc-bd-body__inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: clamp(24px, 2.6vw, 48px);
    padding-left: var(--zc-pad-x);
    padding-right: var(--zc-pad-x);
    align-items: start;
}
@media (max-width: 991px) {
    .zc-bd-body__inner { padding-left: var(--zc-pad-x-mb); padding-right: var(--zc-pad-x-mb); }
}
@media (max-width: 980px) {
    .zc-bd-body__inner { grid-template-columns: 1fr; }
}
.zc-bd-body__main { min-width: 0; }


/* ============================================================================
   §3.1  FOOT — tags + share row. Lives below the prose / FAQ.
   ============================================================================ */
.zc-bd-foot {
    margin-top: clamp(28px, 3vw, 44px);
    padding-top: clamp(20px, 2vw, 28px);
    border-top: 1px solid var(--zc-linen);
    display: flex; flex-direction: column;
    gap: 18px;
}
.zc-bd-foot__tags {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.zc-bd-foot__tags-label {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-warm-mid);
    margin-right: 4px;
}
.zc-bd-foot__tag {
    display: inline-block;
    padding: 5px 12px;
    background: var(--zc-off-white);
    border: 1px solid var(--zc-linen);
    border-radius: 999px;
    font-family: var(--zc-f-heading);
    font-size: 12px;
    font-weight: 600;
    color: var(--zc-warm-dk) !important;
    text-decoration: none;
    transition: all 0.25s var(--zc-ease);
}
.zc-bd-foot__tag:hover {
    background: var(--zc-amber-a08);
    border-color: var(--zc-amber-a35);
    color: var(--zc-amber-dk) !important;
}

.zc-bd-foot__share {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.zc-bd-foot__share-label {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-warm-mid);
    margin-right: 6px;
}
.zc-bd-foot__share-btn {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    color: var(--zc-warm-dk);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s var(--zc-ease-spring),
                background 0.25s var(--zc-ease),
                border-color 0.25s var(--zc-ease),
                color 0.25s var(--zc-ease);
}
.zc-bd-foot__share-btn:hover {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    border-color: transparent;
    color: var(--zc-white);
    transform: translateY(-2px);
}
.zc-bd-foot__share-btn.is-copied {
    background: linear-gradient(135deg, #2e6b56, #1f4d3b);
    border-color: transparent;
    color: var(--zc-white);
}


/* ============================================================================
   §3.2  INLINE AUTHOR LINE — magazine-style end-of-essay author strip.
         A horizontal block under the prose with avatar + bio.
   ============================================================================ */
.zc-bd-authorline {
    margin-top: clamp(32px, 3.4vw, 48px);
    padding: clamp(18px, 2vw, 28px);
    background:
        radial-gradient(ellipse at 100% 0%, rgba(207, 138, 63, 0.08) 0%, transparent 60%),
        var(--zc-off-white);
    border: 1px solid var(--zc-amber-a25);
    border-radius: 12px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: clamp(14px, 1.6vw, 22px);
    align-items: start;
    position: relative;
}
.zc-bd-authorline::before {
    content: "";
    position: absolute; top: -1px; left: 22px; right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--zc-amber-a35) 22%, var(--zc-amber-dk) 50%, var(--zc-amber-a35) 78%, transparent);
}
.zc-bd-authorline__avatar {
    position: relative;
    display: grid; place-items: center;
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zc-amber-dk), var(--zc-amber));
    color: var(--zc-white);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 12px 22px -12px rgba(207, 138, 63, 0.45),
                inset 0 0 0 3px var(--zc-white);
}
.zc-bd-authorline__init {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: var(--zc-f-display);
    font-size: 26px;
    font-weight: 600;
    color: var(--zc-white);
    letter-spacing: -0.8px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    z-index: 0;
}
.zc-bd-authorline__img {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    z-index: 1;
}
.zc-bd-authorline__body small {
    display: block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    margin-bottom: 4px;
}
.zc-bd-authorline__body b {
    display: block;
    font-family: var(--zc-f-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--zc-charcoal);
    letter-spacing: -0.3px;
    margin-bottom: 6px;
}
.zc-bd-authorline__body p {
    margin: 0;
    font-family: var(--zc-f-body);
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--zc-warm-dk);
}
@media (max-width: 560px) {
    .zc-bd-authorline { grid-template-columns: 1fr; text-align: left; }
    .zc-bd-authorline__avatar { margin: 0; }
}


/* ============================================================================
   §4  SIDEBAR — sticky rail with TOC, author card, related posts,
        helpful resources, soft consult CTA.
   ============================================================================ */
.zc-bd-side-wrap {
    align-self: start;
    min-width: 0;
}
.zc-bd-side {
    display: flex; flex-direction: column;
    gap: clamp(14px, 1.6vw, 20px);
    padding-bottom: 4px;
}

/* Base sidebar card — minimal cream-and-snow, no gold-foil hairline. */
.zc-bd-side__card {
    position: relative;
    padding: clamp(18px, 2vw, 24px);
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    border-radius: 12px;
    box-shadow: 0 14px 28px -22px rgba(46, 75, 113, 0.18);
}

.zc-bd-side__head { margin-bottom: 14px; }
.zc-bd-side__head-mark {
    display: inline-block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    margin-bottom: 6px;
}
.zc-bd-side__head-h {
    margin: 0;
    font-family: var(--zc-f-display);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.3px;
    color: var(--zc-charcoal);
}
.zc-bd-side__head-h span {
    color: var(--zc-amber-dk);
    font-weight: 600;
}


/* §4.1  TABLE OF CONTENTS — auto-built from prose h2/h3 by inline JS. */
.zc-bd-toc__list {
    list-style: none; margin: 0; padding: 0;
    counter-reset: zcBdToc;
    display: flex; flex-direction: column; gap: 2px;
}
.zc-bd-toc__list li { counter-increment: zcBdToc; }
.zc-bd-toc__list a {
    position: relative;
    display: block;
    padding: 8px 10px 8px 32px;
    border-left: 2px solid transparent;
    border-radius: 6px;
    font-family: var(--zc-f-display);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--zc-warm-dk) !important;
    text-decoration: none;
    transition: all 0.25s var(--zc-ease);
}
.zc-bd-toc__list a::before {
    content: counter(zcBdToc, decimal-leading-zero);
    position: absolute;
    left: 10px;
    top: 9px;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--zc-amber-dk);
    opacity: 0.65;
}
.zc-bd-toc__list a:hover {
    background: rgba(207, 138, 63, 0.06);
    border-left-color: var(--zc-amber-dk);
    color: var(--zc-amber-dk) !important;
    padding-left: 36px;
}
/* H3-level entries get a smaller indent + colour shift */
.zc-bd-toc__h3 a {
    padding-left: 44px;
    font-size: 12.5px;
    color: var(--zc-warm-mid) !important;
}
.zc-bd-toc__h3 a::before { left: 22px; }
.zc-bd-toc__h3 a:hover { padding-left: 48px; }


/* §4.2  AUTHOR CARD — premium magazine "slate" for the writer.
         Layout: gold-foil hairline · "§ Writer" hood with a fading
         rule · large centered avatar with a verify badge · serif name ·
         mono role · bio prose · hairline divider · "more from the blog"
         link with an arrow that nudges right on hover.
         The avatar layers the INITIALS underneath the image so a broken
         or missing image falls back gracefully to a typographic monogram
         instead of leaking alt-text into the layout. */
.zc-bd-side__card--author {
    padding: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(207, 138, 63, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(46, 75, 113, 0.05) 0%, transparent 55%),
        var(--zc-white);
    border-color: var(--zc-amber-a25);
    position: relative;
}
.zc-bd-side__card-foil {
    position: absolute; top: -1px; left: 22px; right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--zc-amber-dk) 50%, transparent);
}
.zc-bd-author {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(20px, 2vw, 28px) clamp(18px, 2vw, 24px) clamp(20px, 2vw, 26px);
}

/* "§ Writer" hood — a small mono mark with a fading rule on the right,
   pinned at the top edge of the card. */
.zc-bd-author__hood {
    display: flex; align-items: center;
    width: 100%;
    gap: 10px;
    margin-bottom: clamp(18px, 2vw, 24px);
}
.zc-bd-author__hood-mark {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    white-space: nowrap;
}
.zc-bd-author__hood-rule {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--zc-amber-a35), transparent 80%);
}

/* Avatar — layered. The init letter is painted INSIDE the circle as the
   default; the image lays on top via position: absolute. If the image
   fails (onerror in HTML), it removes itself and the initials reappear. */
.zc-bd-author__avatar-wrap {
    position: relative;
    margin-bottom: clamp(14px, 1.6vw, 18px);
}
.zc-bd-author__avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 88px; height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zc-amber-dk) 0%, var(--zc-amber) 60%, var(--zc-amber-lt) 100%);
    color: var(--zc-white);
    overflow: hidden;
    box-shadow: 0 16px 28px -14px rgba(207, 138, 63, 0.45),
                inset 0 0 0 4px var(--zc-white);
}
.zc-bd-author__init {
    /* Sits behind the image (z-index: 0) — shows through whenever the
       image element is hidden or has no src loaded. */
    position: absolute;
    inset: 0;
    display: grid; place-items: center;
    font-family: var(--zc-f-display);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -1px;
    color: var(--zc-white);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.20);
    z-index: 0;
}
.zc-bd-author__avatar-img {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    z-index: 1;
}

/* Verify badge — small amber-bordered check pinned to the bottom-right
   of the avatar. Signals "this is a real, doctor-reviewed writer". */
.zc-bd-author__verify {
    position: absolute;
    right: -2px; bottom: -2px;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--zc-white);
    border: 2px solid var(--zc-white);
    color: var(--zc-amber-dk);
    font-size: 15px;
    box-shadow: 0 6px 14px -6px rgba(207, 138, 63, 0.55);
    z-index: 2;
}

.zc-bd-author__name {
    margin: 0;
    font-family: var(--zc-f-display);
    font-size: clamp(18px, 0.5vw + 14px, 22px);
    font-weight: 600;
    color: var(--zc-charcoal);
    letter-spacing: -0.4px;
    line-height: 1.15;
}
.zc-bd-author__role {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 10px;
    background: var(--zc-amber-a08);
    border: 1px solid var(--zc-amber-a25);
    border-radius: 999px;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
}
.zc-bd-author__bio {
    margin: 14px 0 0;
    font-family: var(--zc-f-body);
    font-size: 13px;
    line-height: 1.65;
    color: var(--zc-warm-dk);
    text-wrap: balance;
}
.zc-bd-author__divider {
    width: 36px; height: 1px;
    margin: 18px 0 14px;
    background: linear-gradient(90deg, transparent, var(--zc-amber-dk), transparent);
}
.zc-bd-author__more {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--zc-f-heading);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--zc-amber-dk) !important;
    text-decoration: none;
    transition: gap 0.25s var(--zc-ease);
}
.zc-bd-author__more:hover { gap: 12px; }
.zc-bd-author__more i { font-size: 13px; }


/* §4.3  RELATED BLOG LIST — numbered, image + title, distinct from the
         news "more from the news" tile-row. */
.zc-bd-rel {
    list-style: none; margin: 0; padding: 0;
    counter-reset: zcBdRel;
    display: flex; flex-direction: column;
    gap: 2px;
}
.zc-bd-rel > li { counter-increment: zcBdRel; }
.zc-bd-rel a {
    position: relative;
    display: grid;
    grid-template-columns: 28px 62px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px 8px;
    border-radius: 8px;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background 0.25s var(--zc-ease),
                border-color 0.25s var(--zc-ease),
                padding-left 0.25s var(--zc-ease);
}
.zc-bd-rel a:hover {
    background: rgba(207, 138, 63, 0.06);
    border-left-color: var(--zc-amber-dk);
    padding-left: 12px;
}
.zc-bd-rel__idx {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--zc-amber-dk);
    opacity: 0.7;
}
.zc-bd-rel__img {
    display: block;
    width: 62px; height: 62px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--zc-off-white);
    border: 1px solid var(--zc-linen);
}
.zc-bd-rel__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.zc-bd-rel__body b {
    display: block;
    font-family: var(--zc-f-display);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.2px;
    color: var(--zc-charcoal);
    margin-bottom: 4px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.zc-bd-rel a:hover .zc-bd-rel__body b { color: var(--zc-amber-dk); }
.zc-bd-rel__body small {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--zc-warm-mid);
}
.zc-bd-rel__more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--zc-amber-a25);
    font-family: var(--zc-f-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--zc-amber-dk) !important;
    text-decoration: none;
    transition: gap 0.25s var(--zc-ease);
}
.zc-bd-rel__more:hover { gap: 10px; }
.zc-bd-rel__more i { font-size: 13px; }


/* §4.4  HELPFUL RESOURCES — same engine as news, simplified card. */
.zc-bd-side__card--res {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(207, 138, 63, 0.06) 0%, transparent 60%),
        var(--zc-white);
}
.zc-bd-res {
    padding: 12px 0;
    border-bottom: 1px dashed var(--zc-amber-a25);
}
.zc-bd-res:last-child { border-bottom: none; padding-bottom: 0; }
.zc-bd-res:first-of-type { padding-top: 4px; }
.zc-bd-res__h {
    margin: 0 0 8px;
    font-family: var(--zc-f-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--zc-deep);
}
.zc-bd-res__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.zc-bd-res__list a {
    display: block;
    padding: 8px 10px 8px 14px;
    border-radius: 6px;
    border-left: 2px solid transparent;
    text-decoration: none;
    transition: all 0.25s var(--zc-ease);
}
.zc-bd-res__list a:hover {
    background: rgba(207, 138, 63, 0.06);
    border-left-color: var(--zc-amber-dk);
    padding-left: 18px;
}
.zc-bd-res__t {
    display: block;
    font-family: var(--zc-f-display);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.2px;
    color: var(--zc-charcoal);
    margin-bottom: 3px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.zc-bd-res__list a:hover .zc-bd-res__t { color: var(--zc-amber-dk); }
.zc-bd-res__d {
    display: block;
    font-family: var(--zc-f-body);
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--zc-warm-mid);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* §4.5  CONSULT CTA — soft, conversational. Different from news's "Stay
         in the loop" — blog readers come for guidance, not news drops. */
.zc-bd-side__card--cta {
    background:
        radial-gradient(ellipse at 100% 100%, rgba(46, 75, 113, 0.08) 0%, transparent 55%),
        linear-gradient(180deg, var(--zc-amber-a08), var(--zc-white));
    border-color: var(--zc-amber-a25);
    text-align: left;
}
.zc-bd-side__cta-mark {
    display: inline-grid; place-items: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    color: var(--zc-white);
    font-size: 18px;
    margin-bottom: 12px;
    box-shadow: 0 10px 22px -8px var(--zc-amber-a45);
}
.zc-bd-side__cta-h {
    margin: 0 0 6px;
    font-family: var(--zc-f-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--zc-charcoal);
    letter-spacing: -0.3px;
    line-height: 1.2;
}
.zc-bd-side__cta-p {
    margin: 0 0 14px;
    font-family: var(--zc-f-body);
    font-size: 13px;
    line-height: 1.6;
    color: var(--zc-warm-dk);
}
.zc-bd-side__cta-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    color: var(--zc-white) !important;
    text-decoration: none;
    font-family: var(--zc-f-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    box-shadow: 0 12px 24px -8px var(--zc-amber-a45);
    transition: transform 0.25s var(--zc-ease-spring), box-shadow 0.3s var(--zc-ease);
}
.zc-bd-side__cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 36px -10px var(--zc-amber-a45);
}
.zc-bd-side__cta-link {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 10px;
    font-family: var(--zc-f-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--zc-amber-dk) !important;
    text-decoration: none;
    transition: gap 0.25s var(--zc-ease);
}
.zc-bd-side__cta-link:hover { gap: 10px; }


/* ============================================================================
   §5  CLOSING CTA — full-width band, warmer + softer than the news CTA.
       A note-from-the-team treatment with amber gradient title accent.
   ============================================================================ */
.zc-bd-cta {
    position: relative;
    padding: clamp(56px, 5.6vw, 96px) var(--zc-pad-x);
    background:
        radial-gradient(ellipse at 8% 0%, rgba(207, 138, 63, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 92% 100%, rgba(46, 75, 113, 0.08) 0%, transparent 55%),
        var(--zc-off-white);
    border-top: 1px solid var(--zc-linen);
    overflow: hidden;
}
@media (max-width: 991px) {
    .zc-bd-cta { padding-left: var(--zc-pad-x-mb); padding-right: var(--zc-pad-x-mb); }
}
.zc-bd-cta__inner {
    text-align: center;
    position: relative;
    z-index: 1;
}
.zc-bd-cta__rule {
    display: block;
    width: 64px; height: 1px;
    margin: 0 auto 22px;
    background: linear-gradient(90deg, transparent, var(--zc-amber-dk), transparent);
}
.zc-bd-cta__eyebrow {
    display: inline-block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    margin-bottom: 14px;
}
.zc-bd-cta__title {
    margin: 0 auto 18px;
    font-family: var(--zc-f-display);
    font-size: clamp(26px, 2vw + 14px, 44px);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.8px;
    color: var(--zc-charcoal);
    text-wrap: balance;
}
.zc-bd-cta__title span {
    font-weight: 500;
    font-style: normal;
    background: linear-gradient(135deg, var(--zc-amber-dk) 0%, var(--zc-amber) 50%, var(--zc-amber-lt) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.zc-bd-cta__sub {
    margin: 0 auto 26px;
    font-family: var(--zc-f-body);
    font-size: clamp(14px, 0.3vw + 12.5px, 16px);
    line-height: 1.7;
    color: var(--zc-warm-dk);
    text-wrap: balance;
}
.zc-bd-cta__btns {
    display: inline-flex; flex-wrap: wrap; gap: 12px;
    justify-content: center;
}
.zc-bd-cta__btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 22px;
    border-radius: 999px;
    font-family: var(--zc-f-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.25s var(--zc-ease-spring), box-shadow 0.3s var(--zc-ease), background 0.3s var(--zc-ease), color 0.3s var(--zc-ease);
}
.zc-bd-cta__btn--primary {
    background: linear-gradient(135deg, var(--zc-amber) 0%, var(--zc-amber-dk) 100%);
    color: var(--zc-white) !important;
    box-shadow: 0 16px 32px -10px var(--zc-amber-a45);
}
.zc-bd-cta__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 38px -10px var(--zc-amber-a45);
}
.zc-bd-cta__btn--ghost {
    background: var(--zc-white);
    border: 1px solid var(--zc-amber-a35);
    color: var(--zc-warm-dk) !important;
}
.zc-bd-cta__btn--ghost:hover {
    background: var(--zc-amber-a08);
    color: var(--zc-amber-dk) !important;
    transform: translateY(-2px);
}


/* ============================================================================
   VERIFIED-BY CARD (blog) — same magazine slate as the news article's
   verify card, just inside the blog .zc-bd-side rail. Layered photo with
   initial-letter behind so missing images fall back to a typographic
   monogram instead of leaking alt text.
   ============================================================================ */
.zc-bd-side__card--verify {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(207, 138, 63, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(46, 75, 113, 0.05) 0%, transparent 55%),
        var(--zc-white);
    border-color: var(--zc-amber-a25);
    transition: transform 0.3s var(--zc-ease-spring),
                box-shadow 0.3s var(--zc-ease),
                border-color 0.3s var(--zc-ease);
}
.zc-bd-side__card--verify:hover {
    transform: translateY(-2px);
    border-color: var(--zc-amber-a35);
    box-shadow: 0 22px 38px -22px rgba(207, 138, 63, 0.40),
                0 10px 20px -16px rgba(46, 75, 113, 0.16);
}

.zc-bd-verify__head {
    display: flex; align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.zc-bd-verify__check {
    display: inline-grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    color: var(--zc-white);
    font-size: 15px;
    box-shadow: 0 8px 16px -6px rgba(207, 138, 63, 0.55);
    flex-shrink: 0;
}
.zc-bd-verify__tag {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
}

.zc-bd-verify__body {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
}
.zc-bd-verify__photo {
    position: relative;
    width: 76px; height: 76px;
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--zc-amber-dk), var(--zc-amber));
    color: var(--zc-white);
    box-shadow: 0 12px 24px -14px rgba(207, 138, 63, 0.55),
                inset 0 0 0 3px var(--zc-white);
}
.zc-bd-verify__init {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: var(--zc-f-display);
    font-size: 30px;
    font-weight: 600;
    color: var(--zc-white);
    letter-spacing: -0.5px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    z-index: 0;
}
.zc-bd-verify__img {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    z-index: 1;
}

.zc-bd-verify__meta {
    display: flex; flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.zc-bd-verify__name {
    font-family: var(--zc-f-display);
    font-size: clamp(15px, 0.3vw + 13px, 17.5px);
    font-weight: 600;
    color: var(--zc-charcoal);
    letter-spacing: -0.3px;
    line-height: 1.2;
}
.zc-bd-side__card--verify:hover .zc-bd-verify__name { color: var(--zc-amber-dk); }
.zc-bd-verify__role {
    display: inline-block;
    align-self: flex-start;
    padding: 3px 9px;
    margin-top: 1px;
    background: var(--zc-amber-a08);
    border: 1px solid var(--zc-amber-a25);
    border-radius: 999px;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
}
.zc-bd-verify__spec {
    font-family: var(--zc-f-body);
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--zc-warm-mid);
    margin-top: 3px;
}

.zc-bd-verify__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--zc-amber-a25);
    font-family: var(--zc-f-heading);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    transition: gap 0.25s var(--zc-ease);
}
.zc-bd-verify__foot i {
    font-size: 13px;
    transition: transform 0.3s var(--zc-ease-spring);
}
.zc-bd-side__card--verify:hover .zc-bd-verify__foot { gap: 14px; }
.zc-bd-side__card--verify:hover .zc-bd-verify__foot i { transform: translateX(2px) translateY(-2px); }

@media (max-width: 480px) {
    .zc-bd-verify__body { grid-template-columns: 1fr; row-gap: 12px; justify-items: start; }
}