/*
 * blog-post.css — BeautsGO blog (CPT `blog`).
 *
 * 加载于: single-blog.php / archive-blog.php / blog-category 分类页(见 blog.php 16a)。
 * 依赖 archive-search.css 提供的 .bgo-archive / .bgo-grid / .bgo-card / .bgo-term-nav
 * 外壳样式; 本文件只补充:
 *   1) 博客卡片的 eyebrow / excerpt / 占位图配色
 *   2) 单篇文章版式(.bgo-post*)
 * 字号用 bgo-tokens.css 的 --bgo-fs-* / --bgo-lh-* 令牌。
 * 品牌色: 粉 #DC6495 / 蓝 #2C92B9。
 */

:root {
    --bgo-blog-pink: #DC6495;
    --bgo-blog-pink-deep: #c0406b; /* 深粉: 小字/图标对比达标 (WCAG ≥4.5:1 文字 / ≥3:1 图标) */
    --bgo-blog-blue: #2C92B9;
    --bgo-blog-ink:  #1d2733;
    --bgo-blog-mute: #5d6b78;
    --bgo-blog-line: #e7ebf0;
    --bgo-blog-soft: #f6f8fa;
}

/* ============================================================
   1. Blog card additions (on top of .bgo-card from archive-search.css)
   ============================================================ */
.bgo-card--blog .bgo-card__eyebrow {
    display: inline-block;
    margin-bottom: 0.4rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: var(--bgo-fs-3xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bgo-blog-pink);
}

.bgo-card--blog .bgo-card__excerpt {
    margin: 0.35rem 0 0;
    font-size: var(--bgo-fs-sm);
    line-height: var(--bgo-lh-snug);
    color: var(--bgo-blog-mute);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bgo-card__img-placeholder--blog {
    background: linear-gradient(135deg, #eaf4f8 0%, #f7eef3 100%);
}

/* Blog archive search box */
.bgo-blog-search {
    display: flex;
    align-items: center;
    max-width: 420px;
    margin-top: 1.1rem;
    border: 1px solid var(--bgo-blog-line);
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
}
.bgo-blog-search:focus-within {
    border-color: var(--bgo-blog-blue);
}
.bgo-blog-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0.7rem 1rem;
    font-size: var(--bgo-fs-sm);
    font-family: inherit;
    background: transparent;
    color: var(--bgo-blog-ink);
}
.bgo-blog-search__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 42px;
    border: 0;
    background: transparent;
    color: var(--bgo-blog-blue);
    cursor: pointer;
}
.bgo-blog-search__btn:hover { color: var(--bgo-blog-pink); }

/* Campaign card — "Related offers" on blog singles */
.bgo-card__img-placeholder--campaign {
    background: linear-gradient(135deg, #fdeef4 0%, #f7eef3 100%);
    min-height: 180px;
}
/* Show the FULL promo image (campaign graphics shouldn't be cropped to 200px) */
.bgo-card--campaign .bgo-card__media { height: auto; }
.bgo-card--campaign .bgo-card__img  { height: auto; }

/* ============================================================
   2. Single article shell
   ============================================================ */

/* Rank Math breadcrumbs (single + archive) */
.rank-math-breadcrumb {
    margin: 0 0 1.1rem;
    font-size: var(--bgo-fs-xs);
    line-height: var(--bgo-lh-snug);
    color: var(--bgo-blog-mute);
}
.rank-math-breadcrumb a {
    color: var(--bgo-blog-blue);
    text-decoration: none;
}
.rank-math-breadcrumb a:hover { text-decoration: underline; }

.bgo-post {
    max-width: 880px;
    margin: 0 auto;
    color: var(--bgo-blog-ink);
    font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- Header ---- */
.bgo-post__head {
    padding-bottom: 1.5rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--bgo-blog-line);
}

.bgo-post__eyebrow {
    display: inline-block;
    margin-bottom: 0.9rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: var(--bgo-fs-3xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bgo-blog-pink);
    text-decoration: none;
}
.bgo-post__eyebrow:hover { text-decoration: underline; }

.bgo-post__title {
    margin: 0 0 0.75rem;
    font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    font-size: var(--bgo-fs-2xl);
    line-height: var(--bgo-lh-tight);
    font-weight: 400;
    color: var(--bgo-blog-ink);
}

.bgo-post__dek {
    margin: 0 0 1.1rem;
    font-size: var(--bgo-fs-md);
    line-height: var(--bgo-lh-snug);
    color: var(--bgo-blog-mute);
}

/* ---- Meta strip ---- */
.bgo-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    font-size: var(--bgo-fs-xs);
    color: var(--bgo-blog-mute);
}
.bgo-post__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.bgo-post__meta-item a {
    color: var(--bgo-blog-ink);
    text-decoration: none;
    font-weight: 500;
}
.bgo-post__meta-item a:hover { text-decoration: underline; }
.bgo-post__meta-item--reviewed {
    color: var(--bgo-blog-blue);
    font-weight: 500;
}
.bgo-post__meta-item--reviewed a { color: var(--bgo-blog-blue); }
.bgo-post__meta-item--reviewed svg { flex: none; }

/* ---- Hero image ---- */
.bgo-post__hero {
    margin: 0 0 1.75rem;
}
.bgo-post__hero-img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    display: block;
}

/* ============================================================
   3. Key takeaways box
   ============================================================ */
.bgo-post__takeaways {
    margin: 0 0 1.9rem;
    padding: 1.25rem 1.4rem;
    background: #fff;
    border: 1px solid var(--bgo-blog-line);
    border-left: 3px solid var(--bgo-blog-pink);
    border-radius: 10px;
}
.bgo-post__takeaways-title {
    margin: 0 0 0.6rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: var(--bgo-fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bgo-blog-ink);
}
.bgo-post__takeaways ul {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.45rem;
}
.bgo-post__takeaways li {
    font-size: var(--bgo-fs-sm);
    line-height: var(--bgo-lh-snug);
    color: var(--bgo-blog-ink);
}
/* WYSIWYG 渲染时每条要点会被 <p> 包裹 — 去掉多余间距, 保持紧凑 */
.bgo-post__takeaways li p { margin: 0; }
.bgo-post__takeaways li a { color: var(--bgo-blog-blue); }

/* ============================================================
   4. Body prose (native block content)
   ============================================================ */
.bgo-post__body {
    font-size: var(--bgo-fs-base);
    line-height: var(--bgo-lh-base);
    color: var(--bgo-blog-ink);
}
.bgo-post__body > * { margin-top: 0; margin-bottom: 1.15rem; }
.bgo-post__body h2 {
    margin: 2.2rem 0 0.85rem;
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: var(--bgo-fs-xl);
    line-height: var(--bgo-lh-snug);
    font-weight: 400;
}
.bgo-post__body h3 {
    margin: 1.8rem 0 0.7rem;
    font-size: var(--bgo-fs-lg);
    line-height: var(--bgo-lh-snug);
    font-weight: 600;
}
.bgo-post__body a {
    color: var(--bgo-blog-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bgo-post__body ul,
.bgo-post__body ol { padding-left: 1.4rem; }
.bgo-post__body li { margin-bottom: 0.45rem; }
.bgo-post__body img { max-width: 100%; height: auto; border-radius: 10px; }
.bgo-post__body blockquote {
    margin: 1.5rem 0;
    padding: 0.4rem 0 0.4rem 1.2rem;
    border-left: 3px solid var(--bgo-blog-blue);
    color: var(--bgo-blog-mute);
    font-style: italic;
}
.bgo-post__body table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--bgo-fs-sm);
}
.bgo-post__body th,
.bgo-post__body td {
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--bgo-blog-line);
    text-align: left;
}
.bgo-post__body th { background: var(--bgo-blog-soft); font-weight: 600; }

/* ============================================================
   5. Shared section title (FAQ / Related)
   ============================================================ */
.bgo-post__section-title {
    margin: 2.4rem 0 1rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--bgo-blog-line);
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: var(--bgo-fs-xl);
    line-height: var(--bgo-lh-snug);
    font-weight: 400;
}

/* ---- FAQ accordion (native <details>) — white card style ---- */
.bgo-post__faq {
    margin-bottom: 0.5rem;
    display: grid;
    gap: 0.75rem;
}
.bgo-faq__item {
    background: #fff;
    border: 1px solid var(--bgo-blog-line);
    border-radius: 14px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.bgo-faq__item:hover {
    border-color: #d6dde5;
    box-shadow: 0 2px 12px rgba(29, 39, 51, 0.05);
}
.bgo-faq__item[open] {
    border-color: var(--bgo-blog-pink);
    box-shadow: 0 6px 20px rgba(220, 100, 149, 0.12);
}
.bgo-faq__q {
    cursor: pointer;
    list-style: none;
    position: relative;
    padding: 1.15rem 3.6rem 1.15rem 1.35rem;
    font-size: var(--bgo-fs-md);
    font-weight: 600;
    line-height: var(--bgo-lh-snug);
    color: var(--bgo-blog-ink);
}
.bgo-faq__q::-webkit-details-marker { display: none; }
/* +/− as a pink circular badge, top-right */
.bgo-faq__q::after {
    content: '+';
    position: absolute;
    right: 1.1rem;
    top: 0.95rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fce8f0;
    color: var(--bgo-blog-pink);
    font-size: 1.25rem;
    line-height: 1;
    transition: background 0.18s ease, color 0.18s ease;
}
.bgo-faq__item[open] .bgo-faq__q::after {
    content: '−';
    background: var(--bgo-blog-pink);
    color: #fff;
}
.bgo-faq__a {
    padding: 0 1.35rem 1.25rem;
    font-size: var(--bgo-fs-base);
    line-height: var(--bgo-lh-base);
    color: var(--bgo-blog-mute);
}
.bgo-faq__a > *:first-child { margin-top: 0; }
.bgo-faq__a a { color: var(--bgo-blog-blue); }

/* ---- Related CPT cards ---- */
.bgo-post__related .bgo-grid {
    margin-top: 0.5rem;
}

/* ---- "More from the Journal" — 细线列表(非卡片, 区别于 FAQ 白卡) + 「分类 · 阅读时长」 ----
   细线分隔 + 右侧常驻深粉裸箭头(无圆底): 干净「线条」感, 但静止/触屏都能看出可点。 */
.bgo-post__more-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    border-top: 1px solid var(--bgo-blog-line);
}
.bgo-post__more-item {
    border-bottom: 1px solid var(--bgo-blog-line);
}
.bgo-post__more-link {
    position: relative;
    display: block;
    padding: 1.1rem 2.6rem 1.1rem 0;   /* 右侧留出箭头位 */
    text-decoration: none;
}
.bgo-post__more-link:focus-visible {
    outline: 2px solid var(--bgo-blog-blue);
    outline-offset: 2px;
    border-radius: 6px;
}
/* 常驻深粉 → 箭头(纯箭头无圆底, 不撞 FAQ 的粉圈; #c0406b 对比 ~4.3:1 达标) */
.bgo-post__more-link::after {
    content: '\2192';
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bgo-blog-pink-deep);
    font-size: 1.4rem;
    line-height: 1;
    transition: transform 0.18s ease;
}
.bgo-post__more-link:hover::after,
.bgo-post__more-link:focus-visible::after {
    transform: translateY(-50%) translateX(3px);
}
.bgo-post__more-meta {
    display: block;
    margin-bottom: 0.3rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: var(--bgo-fs-3xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bgo-blog-mute);
}
.bgo-post__more-cat { color: var(--bgo-blog-pink-deep); }   /* 深粉, 小字对比达标 */
.bgo-post__more-dot { margin: 0 0.45rem; }
.bgo-post__more-title {
    display: block;
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: var(--bgo-fs-lg);
    line-height: var(--bgo-lh-snug);
    font-weight: 400;
    color: var(--bgo-blog-ink);
    transition: color 0.2s ease;
}
.bgo-post__more-link:hover .bgo-post__more-title,
.bgo-post__more-link:focus-visible .bgo-post__more-title { color: var(--bgo-blog-blue); }
@media (prefers-reduced-motion: reduce) {
    .bgo-post__more-link:hover::after,
    .bgo-post__more-link:focus-visible::after { transform: translateY(-50%); }
}

/* ============================================================
   6. CTA — warm "consult" card (mirrors procedure-page .pp-offer)
   ============================================================ */
.bgo-post__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 4vw, 48px);
    margin: 3rem 0 1rem;
    padding: clamp(1.4rem, 3.2vw, 2.25rem) clamp(1.5rem, 3.6vw, 2.75rem);
    border-radius: 20px;
    border: 1px solid #f1c4d5;
    background: linear-gradient(120deg, #fff4f8 0%, #fbdce8 100%);
    box-shadow: 0 14px 30px -18px rgba(220, 100, 149, 0.45);
}

/* 左列: 标题 + 副文 */
.bgo-post__cta-main {
    flex: 1 1 auto;
    min-width: 0;
}
.bgo-post__cta-heading {
    margin: 0 0 0.4rem;
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: var(--bgo-fs-xl);
    line-height: 1.18;
    font-weight: 400;
    color: var(--bgo-blog-ink);
}
.bgo-post__cta-sub {
    margin: 0;
    max-width: 52ch;
    font-size: var(--bgo-fs-base);
    line-height: var(--bgo-lh-snug);
    color: var(--bgo-blog-mute);
}

/* 右侧按钮: 深粉实心 pill + 动画箭头 */
.bgo-post__cta-btn {
    flex: 0 0 auto;
    box-sizing: border-box;  
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.85rem 1.9rem;
    background: #c0406b;
    color: #fff;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: var(--bgo-fs-base);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 999px;
    box-shadow: 0 10px 24px -10px rgba(192, 64, 107, 0.6);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bgo-post__cta-btn::after {
    content: '\2192';               /* → */
    font-size: 1.05em;
    transition: transform 0.25s ease;
}
.bgo-post__cta-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -12px rgba(192, 64, 107, 0.7);
}
.bgo-post__cta-btn:hover::after { transform: translateX(3px); }
.bgo-post__cta-btn:active { transform: translateY(0); }
.bgo-post__cta-btn:focus-visible {
    outline: 3px solid rgba(192, 64, 107, 0.55);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .bgo-post__cta-btn,
    .bgo-post__cta-btn::after { transition: none; }
    .bgo-post__cta-btn:hover { transform: none; }
    .bgo-post__cta-btn:hover::after { transform: none; }
}

/* 手机端: 上下堆叠, 按钮占满整行 (同 .pp-offer 的 680px 断点) */
@media (max-width: 680px) {
    .bgo-post__cta {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 1.1rem;
    }
    .bgo-post__cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   7. Responsive
   ============================================================ */
@media (max-width: 600px) {
    .bgo-post__takeaways { padding: 1.1rem 1.15rem; }
}