/* ==========================================================================
   BLOG DETAIL — page-scoped styles
   Article layout: sticky contents/share rail beside a measured column of prose.
   Loaded only on /blog/post/:slug.
   ========================================================================== */

.bd-page {
    --bd-ink: var(--gf-navy);
    --bd-ink-soft: rgba(48, 68, 79, 0.82);
    --bd-ink-faint: rgba(48, 68, 79, 0.55);
    --bd-line: rgba(94, 179, 70, 0.24);
    --bd-shadow: 0 14px 34px rgba(48, 68, 79, 0.1);

    font-family: "Poppins", sans-serif;
    background: linear-gradient(to right, #f1f6f7, #d5f1f1);
}

/* The theme sets a global `img, svg { border-radius: 15px }`; media here is
   clipped by its own wrapper instead. Scoped, not removed globally. */
.bd-page img {
    border-radius: 0;
}

.bd-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- reading progress ---------- */
.bd-progress {
    position: fixed;
    /* Sits directly under the fixed 72px site header. */
    top: 72px;
    left: 0;
    right: 0;
    z-index: 40;
    height: 3px;
    background: rgba(48, 68, 79, 0.08);
}

.bd-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--gf-green), var(--gf-green-dark));
    transition: width 0.08s linear;
}

/* ==========================================================================
   TITLE BAND + COVER
   Title on the page background, cover image beneath it. Nothing is full-bleed
   at the very top of the document, so the fixed 72px header can never cover it.
   ========================================================================== */
.bd-hero {
    position: relative;
    padding: calc(72px + clamp(2rem, 5vw, 3.5rem)) 0 clamp(1.5rem, 3vw, 2.2rem);
    color: var(--bd-ink);
}

.bd-hero-inner {
    max-width: 48rem;
    margin: 0 auto;
    text-align: center;
}

.bd-crumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
    font-size: 0.78rem;
    color: var(--bd-ink-faint);
}

.bd-crumbs a {
    font-weight: 600;
    color: var(--gf-green-dark);
    text-decoration: none;
}

.bd-crumbs a:hover {
    text-decoration: underline;
}

.bd-crumb-current {
    opacity: 0.85;
}

.bd-title {
    margin: 0 0 1rem;
    font-weight: 700;
    font-size: clamp(1.9rem, 4.2vw, 3rem);
    line-height: 1.16;
    letter-spacing: -0.028em;
    color: inherit;
}

/* Standfirst: the post summary, set larger than body copy. */
.bd-standfirst {
    max-width: 40rem;
    margin: 0 auto 1.3rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--bd-ink-soft);
}

.bd-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--bd-ink-faint);
}

.bd-dot {
    opacity: 0.6;
}

/* ---------- cover image ---------- */
.bd-cover {
    margin: 0 0 clamp(0.5rem, 2vw, 1.5rem);
}

.bd-cover .container {
    max-width: 72rem;
}

.bd-cover img {
    display: block;
    width: 100%;
    max-height: 30rem;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 24px 54px -24px rgba(48, 68, 79, 0.5);
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.bd-layout {
    display: grid;
    /* Prose column first, contents rail on the right. */
    grid-template-columns: minmax(0, 46rem) 15rem;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
    max-width: 72rem;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 2.8rem) 0 clamp(2rem, 5vw, 3.5rem);
}

/* The aside comes first in the markup so that on narrow screens the contents
   list lands above the article instead of being stranded below it. On desktop
   it is ordered back to the right-hand column. */
.bd-aside {
    order: 2;
}

.bd-body {
    order: 1;
}

.bd-aside-inner {
    position: sticky;
    /* Clears the header and the progress bar beneath it. */
    top: 6.5rem;
    display: grid;
    gap: 1.6rem;
}

.bd-aside-title {
    margin: 0 0 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bd-ink-faint);
}

/* ---------- contents ---------- */
.bd-toc-list {
    margin: 0;
    padding: 0 0 0 0.9rem;
    list-style: none;
    border-left: 2px solid rgba(94, 179, 70, 0.22);
}

.bd-toc-list li + li {
    margin-top: 0.6rem;
}

.bd-toc-list a {
    display: block;
    font-size: 0.85rem;
    line-height: 1.5;
    text-decoration: none;
    color: var(--bd-ink-faint);
    transition: color 0.25s ease, transform 0.25s ease;
}

.bd-toc-list a:hover {
    color: var(--gf-green-dark);
    transform: translateX(2px);
}

/* Set by blog-detail.js as the reader passes each section. */
.bd-toc-list a.is-current {
    font-weight: 600;
    color: var(--gf-green-dark);
}

/* ---------- share ---------- */
.bd-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bd-share-btn {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border-radius: 50%;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--bd-ink-soft);
    background: #ffffff;
    border: 1px solid var(--bd-line);
    transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease,
        box-shadow 0.25s ease;
}

.bd-share-btn:hover {
    color: var(--gf-green-dark);
    border-color: var(--gf-green);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -8px rgba(94, 179, 70, 0.6);
}

.bd-copy-note {
    margin: 0.6rem 0 0;
    min-height: 1rem;
    font-size: 0.76rem;
    color: var(--gf-green-dark);
}

/* ==========================================================================
   PROSE
   The post bodies carry theme classes authored in the CMS (.blog-desc for
   paragraphs, .paraTitle for section titles), and some end with a run of inline
   social links. All of it is styled here rather than left to the global sheet.
   ========================================================================== */
.bd-body {
    min-width: 0;
}

.bd-prose {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: #ffffff;
    border: 1px solid rgba(94, 179, 70, 0.18);
    border-radius: 22px;
    box-shadow: var(--bd-shadow);
}

.bd-prose > :first-child {
    margin-top: 0;
}

.bd-prose > :last-child {
    margin-bottom: 0;
}

.bd-prose p,
.bd-prose .blog-desc {
    /* ~68ch keeps the line length readable instead of running the full width. */
    max-width: 68ch;
    margin: 0 0 1.3rem;
    font-size: 1rem;
    line-height: 1.85;
    color: var(--bd-ink-soft);
    text-align: left;
}

.bd-prose h2,
.bd-prose .bd-h2 {
    max-width: 68ch;
    margin: 2.4rem 0 1rem;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--bd-ink);
    /* The source markup used .paraTitle, which the global sheet styles as body
       copy; these rules win because the element is now a real heading. */
    scroll-margin-top: 7rem;
}

.bd-prose h3 {
    max-width: 68ch;
    margin: 1.8rem 0 0.8rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bd-ink);
    scroll-margin-top: 7rem;
}

.bd-prose a {
    color: var(--gf-green-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bd-prose a:hover {
    color: var(--gf-green);
}

.bd-prose ul,
.bd-prose ol {
    max-width: 68ch;
    margin: 0 0 1.4rem;
    padding-left: 1.3rem;
    color: var(--bd-ink-soft);
}

.bd-prose li {
    margin-bottom: 0.6rem;
    line-height: 1.8;
}

.bd-prose ul li::marker {
    color: var(--gf-green);
}

.bd-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.8rem 0;
    border-radius: 16px;
}

.bd-prose blockquote {
    max-width: 68ch;
    margin: 1.8rem 0;
    padding: 1.2rem 1.4rem;
    border-left: 3px solid var(--gf-green);
    border-radius: 0 14px 14px 0;
    background: rgba(94, 179, 70, 0.07);
    font-style: italic;
    color: var(--bd-ink);
}

.bd-prose table {
    width: 100%;
    margin: 1.6rem 0;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.bd-prose th,
.bd-prose td {
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(48, 68, 79, 0.12);
    text-align: left;
}

.bd-prose th {
    background: rgba(94, 179, 70, 0.08);
    font-weight: 600;
    color: var(--bd-ink);
}

/* Some posts end with bare inline social links; give them a shape instead of
   leaving three unstyled glyphs adrift at the bottom of the article. */
.bd-prose .socialLinksfintech {
    display: flex;
    gap: 0.6rem;
    margin-top: 2rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(48, 68, 79, 0.1);
}

.bd-prose .socialLinksfintech a {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    font-size: 0.82rem;
    text-decoration: none;
    color: var(--bd-ink-soft);
    background: rgba(94, 179, 70, 0.1);
    border: 1px solid var(--bd-line);
    transition: color 0.25s ease, transform 0.25s ease;
}

.bd-prose .socialLinksfintech a:hover {
    color: var(--gf-green-dark);
    transform: translateY(-2px);
}

/* ---------- governance note ---------- */
.bd-govern {
    display: flex;
    gap: 1.1rem;
    margin-top: 1.6rem;
    padding: 1.5rem 1.6rem;
    border-radius: 20px;
    background:
        radial-gradient(ellipse 70% 90% at 90% 10%, rgba(120, 185, 69, 0.3), transparent 62%),
        linear-gradient(125deg, var(--gf-navy-deep), var(--gf-navy) 70%);
    color: #ffffff;
}

.bd-govern-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    font-size: 0.95rem;
    color: #d8ecc4;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.bd-govern-title {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    font-weight: 700;
}

.bd-govern-text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.84);
}

.bd-govern-text a {
    color: #d8ecc4;
    text-decoration: underline;
}

.bd-back {
    margin-top: 1.6rem;
}

.bd-link,
.bd-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--gf-green-dark);
}

.bd-link i {
    transition: transform 0.25s ease;
}

.bd-link:hover i {
    transform: translateX(-4px);
}

/* ==========================================================================
   PREV / NEXT
   ========================================================================== */
.bd-postnav {
    padding: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}

.bd-postnav-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 72rem;
    margin: 0 auto;
}

.bd-postnav-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.2rem 1.4rem;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid rgba(94, 179, 70, 0.2);
    border-radius: 18px;
    box-shadow: var(--bd-shadow);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.bd-postnav-item:hover {
    transform: translateY(-4px);
    border-color: rgba(94, 179, 70, 0.5);
    box-shadow: 0 20px 40px -18px rgba(94, 179, 70, 0.5);
}

.bd-postnav-item--next {
    text-align: right;
    align-items: flex-end;
}

.bd-postnav-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gf-green-dark);
}

.bd-postnav-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--bd-ink);
}

/* ==========================================================================
   RELATED
   ========================================================================== */
.bd-related {
    padding: 0 0 clamp(3rem, 6vw, 4.5rem);
}

.bd-related-title {
    max-width: 72rem;
    margin: 0 auto 1.3rem;
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    font-weight: 700;
    color: var(--bd-ink);
}

.bd-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    max-width: 72rem;
    margin: 0 auto;
}

.bd-rcard-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid rgba(94, 179, 70, 0.2);
    border-radius: 18px;
    box-shadow: var(--bd-shadow);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.bd-rcard-link:hover {
    transform: translateY(-6px);
    border-color: rgba(94, 179, 70, 0.5);
    box-shadow: 0 22px 42px -20px rgba(94, 179, 70, 0.5);
}

.bd-rcard-media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #e3ece6;
}

.bd-rcard-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.bd-rcard-link:hover .bd-rcard-media img {
    transform: scale(1.06);
}

.bd-media-blank {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse 70% 70% at 50% 40%, rgba(94, 179, 70, 0.16), transparent 70%),
        linear-gradient(135deg, #eef5ea, #dcebe4);
}

.bd-media-blank i {
    font-size: 1.6rem;
    color: rgba(94, 179, 70, 0.75);
}

.bd-rcard-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.1rem 1.2rem 1.3rem;
}

.bd-rcard-date {
    margin-bottom: 0.45rem;
    font-size: 0.74rem;
    color: var(--bd-ink-faint);
}

.bd-rcard-title {
    margin: 0 0 0.9rem;
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--bd-ink);
    transition: color 0.25s ease;
}

.bd-rcard-link:hover .bd-rcard-title {
    color: var(--gf-green-dark);
}

.bd-rcard-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gf-green-dark);
}

.bd-rcard-more i {
    transition: transform 0.25s ease;
}

.bd-rcard-link:hover .bd-rcard-more i {
    transform: translateX(4px);
}

/* ---------- missing post ---------- */
.bd-missing {
    padding: calc(72px + 4rem) 1rem 6rem;
    text-align: center;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media only screen and (max-width: 991px) {
    .bd-layout {
        grid-template-columns: 1fr;
    }
    /* Contents and share move above the article and stop sticking. */
    .bd-aside {
        order: 1;
    }
    .bd-body {
        order: 2;
    }
    .bd-aside-inner {
        position: static;
        grid-template-columns: 1fr;
    }
    .bd-toc {
        padding: 1rem 1.1rem;
        background: #ffffff;
        border: 1px solid rgba(94, 179, 70, 0.2);
        border-radius: 16px;
    }
    .bd-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 767px) {
    .bd-postnav-grid { grid-template-columns: 1fr; }
    .bd-postnav-item--next { text-align: left; align-items: flex-start; }
}

@media only screen and (max-width: 575px) {
    .bd-related-grid { grid-template-columns: 1fr; }
    .bd-govern { flex-direction: column; }
    .bd-crumb-current { display: none; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .bd-page *,
    .bd-page *::before,
    .bd-page *::after {
        animation: none !important;
        transition: none !important;
    }
    .bd-prose h2,
    .bd-prose h3 {
        scroll-margin-top: 7rem;
    }
}