/*
 * Shared styles for ALL BlogForge blog templates (01..08).
 * The blog detail HTML returned by BlogForge is a fragment (a single .article-wrap div,
 * no <style>), injected into <div class="bf-blog"> on this site. Everything below is scoped
 * under .bf-blog so the template's global element rules (body/h1/p/...) can never leak into
 * the rest of the site.
 *
 * Fonts (Playfair Display / Inter) are loaded via a <link> in index.html.
 */

.bf-blog {
    --navy: #0F1523;
    --cream: #F0EDE6;
    --amber: #E8A838;
    --slate: #8895A7;
    --card: #F7F5F0;
    --white: #FFFFFF;
    --body-max: 780px;
    --radius: 6px;
    --gap: 12px;
    background: var(--cream);
    color: var(--navy);
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.75;
}

.bf-blog *, .bf-blog *::before, .bf-blog *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Layout shell ─────────────────────────────────────────────────────────── */
.bf-blog .article-wrap { max-width: 1100px; margin: 0 auto; padding: 48px 24px 80px; }
.bf-blog .article-header { max-width: var(--body-max); margin: 0 auto 36px; }
.bf-blog .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.bf-blog .tag { background: var(--amber); color: var(--navy); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; }
.bf-blog .meta { color: var(--slate); font-size: 0.82rem; }
.bf-blog .meta b { color: var(--navy); font-weight: 600; }
.bf-blog h1 { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 18px; }
.bf-blog .subtitle { font-size: 1.05rem; color: var(--slate); font-weight: 300; line-height: 1.6; }
.bf-blog .media-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--navy); color: var(--cream); font-size: 0.72rem; font-weight: 500; padding: 4px 12px; border-radius: 20px; margin-bottom: 20px; }
.bf-blog .media-badge span { color: var(--amber); font-weight: 700; }
.bf-blog .rule { height: 1px; background: linear-gradient(to right, var(--amber) 40px, rgba(0,0,0,0.08) 40px); margin: 28px auto; max-width: var(--body-max); }

/* ── Hero image (01, 03) ──────────────────────────────────────────────────── */
.bf-blog .zone-hero { width: fit-content; max-width: 100%; margin: 0 auto 36px; border-radius: var(--radius); overflow: hidden; background: var(--navy); position: relative; }
.bf-blog .zone-hero img { display: block; width: auto; max-width: 100%; height: auto; max-height: 520px; }
.bf-blog .zone-hero figcaption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(15,21,35,0.85), transparent); color: rgba(255,255,255,0.75); font-size: 0.78rem; padding: 24px 16px 12px; }

/* ── Inline floated image (01) ────────────────────────────────────────────── */
.bf-blog .zone-inline { float: right; width: fit-content; max-width: 42%; margin: 4px 0 20px 28px; border-radius: var(--radius); overflow: hidden; }
.bf-blog .zone-inline img { display: block; width: auto; max-width: 100%; height: auto; max-height: 320px; }
.bf-blog .zone-inline figcaption { background: var(--card); padding: 7px 10px; font-size: 0.73rem; color: var(--slate); border-top: 2px solid var(--amber); }

/* ── Video (02, 03, 07, 08) ───────────────────────────────────────────────── */
.bf-blog .zone-video { max-width: var(--body-max); margin: 0 auto 36px; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: 0 8px 40px rgba(15,21,35,0.18); }
.bf-blog .zone-video video { display: block; width: 100%; height: auto; max-height: 520px; }
.bf-blog .zone-video figcaption { background: var(--navy); color: var(--slate); font-size: 0.8rem; padding: 12px 16px; display: flex; align-items: center; gap: 10px; }

/* ── Two images side by side (04) ─────────────────────────────────────────── */
.bf-blog .zone-duo { display: flex; gap: var(--gap); margin: 0 0 36px; align-items: flex-start; }
.bf-blog .zone-duo figure { flex: 1; border-radius: var(--radius); overflow: hidden; background: var(--navy); min-width: 0; display: flex; align-items: center; justify-content: center; }
.bf-blog .zone-duo figure img { display: block; width: auto; max-width: 100%; height: auto; max-height: 420px; }
.bf-blog .zone-duo figcaption { padding: 9px 12px; font-size: 0.75rem; color: var(--slate); background: var(--card); border-top: 2px solid var(--amber); }

/* ── Video + 2 images (05) ────────────────────────────────────────────────── */
.bf-blog .zone-media-trio { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--gap); margin: 0 0 36px; max-height: 380px; }
.bf-blog .zone-media-trio .video-cell { grid-row: 1 / 3; border-radius: var(--radius); overflow: hidden; background: #000; display: flex; flex-direction: column; }
.bf-blog .zone-media-trio .video-cell video { display: block; width: 100%; height: 100%; object-fit: cover; }
.bf-blog .zone-media-trio .video-cell figcaption { background: var(--navy); color: var(--slate); font-size: 0.75rem; padding: 10px 14px; display: flex; align-items: center; gap: 8px; }
.bf-blog .zone-media-trio .img-cell { border-radius: var(--radius); overflow: hidden; background: var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.bf-blog .zone-media-trio .img-cell img { display: block; width: auto; max-width: 100%; max-height: 100%; height: auto; object-fit: contain; margin: auto; }
.bf-blog .zone-media-trio .img-cell figcaption { background: var(--card); padding: 7px 10px; font-size: 0.73rem; color: var(--slate); border-top: 2px solid var(--amber); }

/* ── Three-image trio (06, 07) ────────────────────────────────────────────── */
.bf-blog .zone-trio { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto; gap: var(--gap); margin: 0 0 36px; }
.bf-blog .trio-main { grid-row: 1 / 3; border-radius: var(--radius); overflow: hidden; background: var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; }
.bf-blog .trio-main img { display: block; width: auto; max-width: 100%; max-height: 100%; height: auto; object-fit: contain; margin: auto; }
.bf-blog .trio-main figcaption { background: var(--card); padding: 9px 12px; font-size: 0.75rem; color: var(--slate); border-top: 2px solid var(--amber); }
.bf-blog .trio-side { border-radius: var(--radius); overflow: hidden; background: var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 145px; }
.bf-blog .trio-side img { display: block; width: auto; max-width: 100%; max-height: 100%; height: auto; object-fit: contain; margin: auto; }
.bf-blog .trio-side figcaption { background: var(--card); padding: 7px 10px; font-size: 0.73rem; color: var(--slate); border-top: 2px solid var(--amber); }

/* ── Cover hero + image pair (08, editorial flow) ─────────────────────────── */
.bf-blog .zone-cover { max-width: var(--body-max); margin: 0 auto 36px; border-radius: var(--radius); overflow: hidden; background: var(--navy); box-shadow: 0 6px 28px rgba(15,21,35,0.16); }
.bf-blog .zone-cover img { display: block; width: 100%; height: auto; object-fit: cover; max-height: 460px; }
.bf-blog .zone-pair { max-width: var(--body-max); margin: 8px auto 32px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.bf-blog .zone-pair figure { border-radius: var(--radius); overflow: hidden; background: var(--navy); box-shadow: 0 4px 18px rgba(15,21,35,0.12); aspect-ratio: 3 / 2; }
.bf-blog .zone-pair img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ── Article body ─────────────────────────────────────────────────────────── */
.bf-blog .article-body { max-width: var(--body-max); margin: 0 auto; border-left: 3px solid var(--amber); padding-left: 24px; }
.bf-blog .article-body p { margin-bottom: 1.4em; color: #2a2f3d; font-weight: 300; }
.bf-blog .article-body p:first-child::first-letter { font-family: 'Playfair Display', serif; font-size: 3.8em; line-height: 0.75; float: left; margin: 0.1em 0.08em 0 0; color: var(--amber); }
.bf-blog .article-body blockquote { margin: 1.8em 0; padding: 16px 20px; background: var(--card); border-radius: 0 var(--radius) var(--radius) 0; font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.15rem; color: var(--navy); line-height: 1.5; }
.bf-blog .article-body ul, .bf-blog .article-body ol { margin: 0 0 1.4em 1.4em; color: #2a2f3d; font-weight: 300; }
.bf-blog .article-body li { margin-bottom: 0.5em; }
.bf-blog .article-body h2, .bf-blog .article-body h3 { font-family: 'Playfair Display', serif; margin: 1em 0 0.5em; line-height: 1.25; }
.bf-blog .article-body img { max-width: 100%; height: auto; }
.bf-blog .article-body a { color: #b5791f; }

/* ── Author strip ─────────────────────────────────────────────────────────── */
.bf-blog .author-strip { max-width: var(--body-max); margin: 40px auto 0; background: var(--card); border-radius: var(--radius); padding: 18px 20px; display: flex; align-items: center; gap: 16px; border-top: 3px solid var(--amber); }
.bf-blog .author-avatar { position: relative; overflow: hidden; width: 48px; height: 48px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--amber); flex-shrink: 0; }
.bf-blog .author-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bf-blog .author-name { font-weight: 600; font-size: 0.9rem; }
.bf-blog .author-brand { font-size: 0.9rem; font-weight: 600; }

/* Placeholders never show on the public site (only real, filled media is rendered). */
.bf-blog .ph { display: none !important; }

@media (max-width: 680px) {
    .bf-blog .article-wrap { padding: 28px 16px 60px; }
    .bf-blog .zone-inline { float: none; width: fit-content; max-width: 100%; margin: 0 0 20px; }
    .bf-blog .zone-duo { flex-direction: column; }
    .bf-blog .zone-media-trio { grid-template-columns: 1fr; grid-template-rows: auto; max-height: none; }
    .bf-blog .zone-media-trio .video-cell { grid-row: auto; min-height: 220px; }
    .bf-blog .zone-trio { grid-template-columns: 1fr; }
    .bf-blog .trio-main { grid-row: auto; }
    .bf-blog .zone-pair { grid-template-columns: 1fr; }
}