/* ==========================================================================
   Blog article layout - shared by every /blog/<slug>.html article.
   Structure:  hero  ->  .post-shell (.post-main + .post-sidebar)  ->  .post-cta  ->  .post-more
   Loaded after each page's inline styles, so it only adds the layout shell and
   overrides the hero / heading rhythm. Article body components (.highlight-box,
   .comparison-table, .faq-item ...) keep their existing per-page styles.
   ========================================================================== */

:root {
    --bp-navy: #102753;
    --bp-navy-2: #1a3a7a;
    --bp-orange: #ff760b;
    --bp-orange-dark: #e56a0a;
    --bp-ink: #1e293b;
    --bp-muted: #64748b;
    --bp-line: #e2e8f0;
    --bp-surface: #f6f8fc;
    --bp-radius: 16px;
    --bp-sticky-top: 124px;
}

html { scroll-behavior: smooth; scroll-padding-top: var(--bp-sticky-top); }
body { background: #fff; }

/* ---------- Hero ---------- */
.hero-section { margin-bottom: 0; padding: 3.5rem 0 3rem; }
.hero-section > .container { max-width: 1200px; padding: 0 1.5rem; }
.hero-section .hero-content { max-width: 820px; margin: 0; }
.hero-section .hero-title { font-size: clamp(2rem, 4.4vw, 3.1rem); margin-bottom: 1.1rem; letter-spacing: -.01em; }
.hero-section .hero-subtitle { font-size: 1.15rem; margin-bottom: 1.75rem; max-width: 680px; }
.hero-section .hero-badge { margin-bottom: 1.1rem; }
.hero-section .hero-meta { gap: .6rem 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .16); }

/* the category now lives in the breadcrumb, so the pill above the title is redundant */
.post-page .hero-section .hero-badge { display: none; }
.post-crumbs { margin: 0 0 1.4rem; padding: 0; }
.post-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0; padding: 0; font-size: .82rem; color: rgba(255, 255, 255, .72); }
.post-crumbs li { margin: 0; display: inline-flex; align-items: center; gap: .45rem; }
.post-crumbs li + li::before { content: "\203A"; opacity: .55; }
.post-crumbs a { color: #fff; text-decoration: none; font-weight: 500; }
.post-crumbs a:hover { color: #ffb877; }
.post-crumbs [aria-current] { color: rgba(255, 255, 255, .72); }

/* ---------- Shell: article column + sticky sidebar ---------- */
.post-shell { max-width: 1200px; margin: 0 auto; padding: 3.25rem 1.5rem 4rem; }
.post-grid { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 4rem; align-items: start; }
.post-main { min-width: 0; }

/* ---------- Article typography ---------- */
.post-shell .article-body { font-size: 1.0625rem; line-height: 1.8; color: var(--bp-ink); }
.post-shell .article-body > :first-child { margin-top: 0; }
.post-shell .article-body p { max-width: none; }
.post-shell .article-body h2 {
    display: block;
    font-size: 1.75rem;
    line-height: 1.25;
    letter-spacing: -.01em;
    margin: 3rem 0 1.1rem;
    padding: 0 0 .85rem;
    border-bottom: 1px solid var(--bp-line);
    position: relative;
    scroll-margin-top: var(--bp-sticky-top);
}
.post-shell .article-body h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 48px; height: 3px; background: var(--bp-orange); border-radius: 3px; }
.post-shell .article-body h3 { font-size: 1.25rem; line-height: 1.35; margin: 2rem 0 .75rem; scroll-margin-top: var(--bp-sticky-top); }
.post-shell .article-body h4 { scroll-margin-top: var(--bp-sticky-top); }
.post-shell .article-body img { max-width: 100%; height: auto; border-radius: 12px; }
.post-shell .article-body table { width: 100%; }

/* ---------- Sidebar ---------- */
.post-sidebar {
    position: sticky;
    top: var(--bp-sticky-top);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-height: calc(100vh - var(--bp-sticky-top) - 1.5rem);
}

/* Table of contents */
.post-toc {
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--bp-line);
    border-radius: var(--bp-radius);
    box-shadow: 0 14px 32px -22px rgba(16, 39, 83, .35);
    overflow: hidden;
}
.post-toc:empty { display: none; }
.post-toc__head {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: .55rem; width: 100%;
    padding: 1rem 1.15rem .85rem;
    background: none; border: 0; text-align: left; cursor: default;
    font-family: inherit; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bp-orange);
}
.post-toc__head i { font-size: .8rem; }
.post-toc__pct { margin-left: auto; font-weight: 700; letter-spacing: 0; color: var(--bp-muted); font-variant-numeric: tabular-nums; }
.post-toc__chev { display: none; margin-left: .5rem; transition: transform .2s ease; }
.post-toc__bar { flex: 0 0 auto; height: 3px; margin: 0 1.15rem .6rem; background: var(--bp-line); border-radius: 3px; overflow: hidden; }
.post-toc__bar > span { display: block; height: 100%; width: 0; background: var(--bp-orange); border-radius: 3px; transition: width .15s linear; }
.post-toc__list { list-style: none; margin: 0; padding: .15rem .6rem .75rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.post-toc__list li { margin: 0; padding: 0; }
.post-toc__list a {
    display: block;
    padding: .5rem .65rem .5rem .85rem;
    border-left: 2px solid transparent;
    border-radius: 0 8px 8px 0;
    font-size: .85rem; line-height: 1.4; font-weight: 500; color: var(--bp-muted); text-decoration: none;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.post-toc__list a:hover { color: var(--bp-navy); background: var(--bp-surface); }
.post-toc__list a.is-active { color: var(--bp-navy); font-weight: 700; background: #fff4ea; border-left-color: var(--bp-orange); }
.post-toc__list .is-sub a { padding-left: 1.6rem; font-size: .8rem; }

/* Sidebar CTA card */
.post-cta-card {
    flex: 0 0 auto;
    padding: 1.3rem 1.25rem 1.25rem;
    border-radius: var(--bp-radius);
    background: linear-gradient(145deg, var(--bp-navy) 0%, var(--bp-navy-2) 100%);
    color: #fff;
}
.post-cta-card h3 { margin: 0 0 .4rem; font-size: 1.05rem; line-height: 1.3; color: #fff; }
.post-cta-card p { margin: 0 0 1rem; font-size: .86rem; line-height: 1.55; color: rgba(255, 255, 255, .85); }
.post-cta-card .pc-btn { width: 100%; justify-content: center; }
.post-cta-card__phone { display: block; margin-top: .75rem; text-align: center; font-size: .85rem; font-weight: 600; color: #ffb877; text-decoration: none; }
.post-cta-card__phone:hover { color: #fff; }

/* Buttons shared by sidebar card + CTA band */
.pc-btn {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .8rem 1.35rem;
    border-radius: 10px;
    font-family: inherit; font-size: .92rem; font-weight: 700; line-height: 1.2; text-decoration: none;
    border: 2px solid transparent;
    transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}
.pc-btn--primary { background: var(--bp-orange); color: #fff; }
.pc-btn--primary:hover { background: var(--bp-orange-dark); transform: translateY(-2px); }
.pc-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.pc-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* ---------- Author + share strip (end of article column) ---------- */
.post-author {
    display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
    margin-top: 3.5rem; padding: 1.4rem 1.5rem;
    background: var(--bp-surface);
    border: 1px solid var(--bp-line);
    border-radius: var(--bp-radius);
}
.post-author__avatar {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--bp-navy), var(--bp-navy-2)); color: #fff; font-weight: 800; font-size: .95rem; letter-spacing: .02em;
}
.post-author__body { flex: 1 1 280px; min-width: 0; }
.post-author__label { margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bp-muted); }
.post-author__name { margin: .1rem 0 .3rem; font-size: 1.05rem; color: var(--bp-navy); }
.post-author__bio { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--bp-muted); }
.post-share { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.post-share__label { margin-right: .25rem; font-size: .8rem; font-weight: 700; color: var(--bp-muted); }
.post-share a, .post-share button {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--bp-line); background: #fff; color: var(--bp-navy);
    font-size: .95rem; text-decoration: none; cursor: pointer; font-family: inherit;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.post-share a:hover, .post-share button:hover { background: var(--bp-navy); border-color: var(--bp-navy); color: #fff; transform: translateY(-2px); }
.post-share button.is-copied { background: #16a34a; border-color: #16a34a; color: #fff; }

/* ---------- Closing CTA band ---------- */
.post-end { background: var(--bp-surface); border-top: 1px solid var(--bp-line); padding: 4rem 0 4.5rem; }
.post-end__inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.post-cta {
    position: relative; overflow: hidden;
    padding: 2.5rem 2.75rem 2rem;
    border-radius: 22px;
    background: linear-gradient(120deg, var(--bp-navy) 0%, var(--bp-navy-2) 100%);
    color: #fff;
}
.post-cta::before { content: ""; position: absolute; top: -45%; right: -6%; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 118, 11, .32), transparent 62%); pointer-events: none; }
.post-cta__main { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem 3rem; flex-wrap: wrap; }
.post-cta__copy { flex: 1 1 420px; }
.post-cta__copy h2 { margin: 0 0 .5rem; font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height: 1.25; color: #fff; }
.post-cta__copy p { margin: 0; max-width: 56ch; color: rgba(255, 255, 255, .88); }
.post-cta__actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.post-cta__facts {
    position: relative; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    margin: 1.9rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid rgba(255, 255, 255, .18);
}
.post-cta__facts li { margin: 0; text-align: left; }
.post-cta__facts strong { display: block; font-size: 1.35rem; line-height: 1.2; color: #ffb877; }
.post-cta__facts span { font-size: .82rem; color: rgba(255, 255, 255, .78); }

/* ---------- Continue reading ---------- */
.post-more { margin-top: 3.75rem; }
.post-more__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.post-more__head h2 { margin: 0; font-size: 1.5rem; color: var(--bp-navy); }
.post-more__head a { font-size: .92rem; font-weight: 700; color: var(--bp-orange); text-decoration: none; white-space: nowrap; }
.post-more__head a:hover { text-decoration: underline; }
.post-more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.post-card {
    display: flex; flex-direction: column; gap: .6rem;
    padding: 1.5rem; background: #fff; border: 1px solid var(--bp-line); border-radius: 14px; text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.post-card:hover { transform: translateY(-4px); border-color: var(--bp-orange); box-shadow: 0 18px 34px -22px rgba(16, 39, 83, .4); }
.post-card__cat { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bp-orange); }
.post-card h3 { margin: 0; font-size: 1.05rem; line-height: 1.4; font-weight: 700; color: var(--bp-navy); }
.post-card__go { margin-top: auto; padding-top: .5rem; font-size: .88rem; font-weight: 700; color: var(--bp-navy); }
.post-card:hover .post-card__go { color: var(--bp-orange); }

.post-explore { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--bp-line); }
.post-explore__label { margin-right: .4rem; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bp-muted); }
.post-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem .95rem; background: #fff; border: 1px solid var(--bp-line); border-radius: 999px;
    font-size: .85rem; font-weight: 600; color: var(--bp-navy); text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}
.post-chip i { color: var(--bp-orange); font-size: .8rem; }
.post-chip:hover { border-color: var(--bp-orange); color: var(--bp-orange); }

/* ---------- Reading progress + back to top ---------- */
#post-progress { position: fixed; top: 0; left: 0; z-index: 4000; width: 0; height: 3px; background: linear-gradient(90deg, #ff760b, #ffb26b); }
#post-top {
    position: fixed; right: 1.2rem; bottom: 5.4rem; z-index: 3500; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 12px; background: var(--bp-navy); color: #fff; font-size: 1.05rem; cursor: pointer;
    box-shadow: 0 12px 24px -10px rgba(16, 39, 83, .45);
    opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .3s ease;
}
#post-top.show { opacity: 1; visibility: visible; transform: none; }
#post-top:hover { background: var(--bp-navy-2); }

/* ---------- Tablet / mobile: sidebar collapses, TOC becomes an accordion above the article ---------- */
@media (max-width: 1023px) {
    .post-shell { padding-top: 2rem; }
    .post-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    .post-sidebar { display: contents; }
    .post-toc { order: -1; flex: 0 0 auto; margin-bottom: 1.75rem; }
    .post-main { order: 0; }
    .post-cta-card { display: none; }

    .post-toc__head { cursor: pointer; padding-bottom: 1rem; }
    .post-toc__chev { display: inline-block; }
    .post-toc.is-open .post-toc__chev { transform: rotate(180deg); }
    .post-toc__pct, .post-toc__bar { display: none; }
    .post-toc__list { display: none; max-height: 55vh; border-top: 1px solid var(--bp-line); padding-top: .6rem; }
    .post-toc.is-open .post-toc__list { display: block; }
}
@media (max-width: 767px) {
    .hero-section { padding: 2.5rem 0 2.25rem; }
    .hero-section .hero-subtitle { font-size: 1.05rem; }
    .hero-section .hero-meta { gap: .5rem 1.25rem; font-size: .85rem; }
    .post-shell .article-body { font-size: 1rem; line-height: 1.75; }
    .post-shell .article-body h2 { font-size: 1.45rem; margin-top: 2.5rem; }
    .post-shell .article-body h3 { font-size: 1.15rem; }
    .post-shell .article-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .post-author { padding: 1.25rem; }
    .post-share { width: 100%; }
    .post-end { padding: 2.75rem 0 3rem; }
    .post-cta { padding: 1.75rem 1.4rem 1.5rem; border-radius: 18px; }
    .post-cta__actions { width: 100%; }
    .post-cta__actions .pc-btn { flex: 1 1 100%; justify-content: center; }
    .post-cta__facts { grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
    .post-cta__facts strong { font-size: 1.1rem; }
    .post-more { margin-top: 2.75rem; }
    .post-more__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .post-card, .pc-btn, .post-toc__bar > span { transition: none; }
}