/* ============================================================
   Blog — listing, post layouts and reader engagement.
   Uses the same palette variables as the rest of the site.
   ============================================================ */

.bw-blog-index {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 20px 64px;
}

/* ── Listing header ── */
.bw-blog-header { margin-bottom: 28px; }

.bw-blog-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    font-weight: 700;
    color: #C94B6D;
    margin-bottom: 6px;
}

.bw-blog-title {
    font-size: 2.1rem;
    line-height: 1.15;
    margin: 0 0 10px;
}

.bw-blog-sub {
    color: #6b6b6b;
    max-width: 60ch;
    margin: 0;
}

.bw-blog-empty {
    color: #6b6b6b;
    padding: 40px 0;
}

/* ── Search ── */
.bw-search-form {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    max-width: 520px;
}

.bw-search-input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #e3ddd6;
    font-size: 0.95rem;
    background: #fff;
}

.bw-search-input:focus {
    outline: none;
    border-color: #C94B6D;
    box-shadow: 0 0 0 3px rgba(201, 75, 109, 0.12);
}

.bw-search-btn {
    padding: 10px 18px;
    border-radius: 10px;
    border: none;
    background: #C94B6D;
    color: #fff;
    cursor: pointer;
}

.bw-search-btn:hover { background: #b23e5e; }

.bw-search-count { color: #6b6b6b; font-size: 0.9rem; margin-bottom: 18px; }

.bw-search-degraded {
    padding: 10px 14px;
    border-radius: 8px;
    background: #fdf6e7;
    border: 1px solid #f0e2c0;
    color: #7a6320;
    font-size: 0.88rem;
    margin-bottom: 18px;
}

/* Screen-reader-only helper (labels for the search field). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Tag bar ── */
.bw-tag-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.bw-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid #e3ddd6;
    background: #fff;
    color: #4a4a4a;
    font-size: 0.8rem;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.bw-tag:hover { background: #faf6f2; border-color: #C94B6D; }
.bw-tag.is-active { background: #C94B6D; border-color: #C94B6D; color: #fff; }

/* ── Cards ── */
.bw-post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.bw-card {
    border: 1px solid #ece6e0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.18s, transform 0.18s;
}

.bw-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
    transform: translateY(-2px);
}

.bw-card-link { text-decoration: none; color: inherit; display: block; }

.bw-card-media { aspect-ratio: 16 / 9; overflow: hidden; background: #f4efe9; }
.bw-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bw-card-body { padding: 16px 18px; }
.bw-card-title { font-size: 1.15rem; margin: 0 0 8px; line-height: 1.3; }
.bw-card-excerpt { color: #5f5f5f; font-size: 0.9rem; margin: 0 0 12px; }

.bw-card-meta {
    display: flex;
    gap: 10px;
    font-size: 0.78rem;
    color: #8a8a8a;
}

.bw-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 18px 16px;
    margin-top: auto;
}

/* ── Pagination ── */
.bw-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
}

.bw-page-link {
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid #e3ddd6;
    text-decoration: none;
    color: #4a4a4a;
}

.bw-page-link:hover { border-color: #C94B6D; color: #C94B6D; }
.bw-page-status { font-size: 0.85rem; color: #8a8a8a; }

/* ── Single post ── */
.bw-post {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 20px 0;
}

/* ── Ad slots ──
   The shell only becomes a grid when the post actually has a rail; without one
   it is an inert wrapper and every child keeps centering itself as before.
   Column one is 760px so the article's measure is unchanged, and the end slot
   and footer stay in it so nothing drifts out of line with the text. */
.bw-post-shell--railed {
    display: grid;
    grid-template-columns: minmax(0, 760px) 300px;
    gap: 0 40px;
    align-items: start;
    max-width: 1120px;
    margin: 0 auto;
}

.bw-post-shell--railed > .bw-post { grid-column: 1; grid-row: 1; max-width: none; margin: 0; }
.bw-post-shell--railed > .bw-ad-slot--rail { grid-column: 2; grid-row: 1; }
.bw-post-shell--railed > .bw-ad-slot--end { grid-column: 1; grid-row: 2; }
.bw-post-shell--railed > .bw-post-footer { grid-column: 1; grid-row: 3; }

/* Card colours: ad-card.css reads these from the host page, and blog.css uses
   literal hex everywhere else, so scope them here rather than adding a palette. */
.bw-ad-slot {
    --border: #e8e2db;
    --text: #2f2f2f;
    --text-lt: #8a8a8a;
    --rust: #C94B6D;
}

.bw-ad-slot--rail { position: sticky; top: 84px; padding: 32px 20px 0 0; }
.bw-ad-slot--end { max-width: 760px; margin: 8px auto 0; padding: 0 20px; }

/* Inline slots come from an [ad] token, so they are spans inside a paragraph —
   a div there would be invalid markup. See App\Blog\Markdown\AdSlotRenderer. */
.bw-post-body .bw-ad-slot[data-ad-slot="inline"] {
    display: block;
    margin: 32px 0;
}

.bw-post-hero {
    margin: 0 0 28px;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 21 / 9;
    background: #f4efe9;
}

.bw-post-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bw-post-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    font-weight: 700;
    color: #C94B6D;
    margin-bottom: 8px;
}

.bw-post-title { font-size: 2.3rem; line-height: 1.12; margin: 0 0 8px; }
.bw-post-theme { font-size: 1.05rem; color: #6b6b6b; margin-bottom: 12px; }

.bw-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #8a8a8a;
    margin-bottom: 24px;
}

.bw-post-meta-sep { color: #ccc; }
.bw-post-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }

.bw-post-lede {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #3f3f3f;
    margin-bottom: 24px;
}

/* Side-image layout: header and image side by side, stacking on narrow screens */
.bw-post-split {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 28px;
    align-items: start;
    margin-bottom: 28px;
}

.bw-post-side-image {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #f4efe9;
}

.bw-post-side-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bw-post-header--split { margin: 0; }

/* ── Fact strip ── */
.bw-post-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 16px 20px;
    background: #faf6f2;
    border-radius: 12px;
    margin-bottom: 28px;
}

.bw-fact { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.bw-fact i { color: #C94B6D; }
.bw-fact-label { color: #8a8a8a; }
.bw-fact-value { font-weight: 600; }

/* ── Body prose ── */
.bw-post-body { font-size: 1.02rem; line-height: 1.75; color: #2f2f2f; }
.bw-post-body h2 { font-size: 1.5rem; margin: 32px 0 12px; }
.bw-post-body h3 { font-size: 1.2rem; margin: 24px 0 10px; }
.bw-post-body p { margin: 0 0 18px; }
.bw-post-body ul, .bw-post-body ol { margin: 0 0 18px; padding-left: 24px; }
.bw-post-body li { margin-bottom: 6px; }
.bw-post-body img { max-width: 100%; height: auto; border-radius: 10px; }
.bw-post-body a { color: #C94B6D; }

.bw-post-body blockquote {
    margin: 0 0 18px;
    padding: 4px 18px;
    border-left: 3px solid #C94B6D;
    color: #5f5f5f;
    font-style: italic;
}

.bw-post-body pre {
    background: #f5f2ee;
    padding: 14px 16px;
    border-radius: 8px;
    overflow-x: auto;
}

.bw-post-body table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.bw-post-body th, .bw-post-body td { border: 1px solid #e8e2db; padding: 8px 10px; text-align: left; }

/* ── Sections ── */
.bw-post-section { margin: 32px 0; }
.bw-post-section h2 { font-size: 1.4rem; margin: 0 0 14px; }

.bw-menu-list, .bw-activity-list { list-style: none; padding: 0; margin: 0; }

.bw-menu-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px dashed #e8e2db;
}

.bw-menu-name { font-weight: 600; }
.bw-menu-measure { color: #C94B6D; font-size: 0.88rem; }
.bw-menu-note { color: #8a8a8a; font-size: 0.85rem; }

.bw-activity-list li {
    padding: 8px 0 8px 26px;
    position: relative;
}

.bw-activity-list li::before {
    content: "\2022";
    color: #C94B6D;
    position: absolute;
    left: 8px;
    font-weight: 700;
}

/* ── Timeline ── */
.bw-timeline { list-style: none; padding: 0; margin: 0; }

.bw-timeline li {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed #e8e2db;
}

.bw-timeline-when { font-weight: 600; color: #C94B6D; font-size: 0.9rem; }

/* ── CTA ── */
.bw-post-cta {
    margin: 40px 0;
    padding: 24px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fdf3f6, #faf6f2);
    border: 1px solid #f0dfe5;
}

.bw-post-cta-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}

.bw-post-cta-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; }
.bw-post-cta-sub { color: #6b6b6b; font-size: 0.92rem; }

.bw-post-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #C94B6D;
    color: #fff;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.bw-post-cta-btn:hover { background: #b23e5e; color: #fff; }

/* ── Footer ── */
.bw-post-footer {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 20px 64px;
}

.bw-post-back { color: #C94B6D; text-decoration: none; font-size: 0.9rem; }
.bw-post-back:hover { text-decoration: underline; }

/* ── Reactions ── */
.bw-reactions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 0 22px;
    border-top: 1px solid #ece6e0;
    border-bottom: 1px solid #ece6e0;
    margin-bottom: 20px;
}

.bw-reactions-label { font-size: 0.9rem; color: #6b6b6b; margin-right: 4px; }
.bw-reaction-form { display: inline; }

.bw-reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid #e3ddd6;
    background: #fff;
    color: #4a4a4a;
    font-size: 0.88rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.bw-reaction-btn:hover { border-color: #C94B6D; color: #C94B6D; }
.bw-reaction-btn.is-active { background: #C94B6D; border-color: #C94B6D; color: #fff; }

/* ── Continuous reading ── */
.bw-reader-sentinel { height: 1px; }

.bw-post--continued { padding-top: 8px; }

.bw-continue-divider {
    max-width: 760px;
    margin: 48px auto 28px;
    text-align: center;
    position: relative;
    color: #8a8a8a;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.bw-continue-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #ece6e0;
}

.bw-continue-divider span {
    position: relative;
    background: #fff;
    padding: 0 14px;
}

/* ── Responsive ── */

/* No horizontal room for a rail. It stops being a column and drops to the end
   of the post instead, which is where DOM order already puts it. */
@media (max-width: 1080px) {
    .bw-post-shell--railed { display: block; max-width: none; }
    .bw-post-shell--railed > .bw-post { max-width: 760px; margin: 0 auto; }
    .bw-post-shell--railed > .bw-ad-slot--rail {
        position: static;
        max-width: 760px;
        margin: 8px auto 0;
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .bw-post-title { font-size: 1.7rem; }
    .bw-blog-title { font-size: 1.7rem; }
    .bw-post-split { grid-template-columns: 1fr; }
    .bw-post-side-image { order: -1; }
    .bw-timeline li { grid-template-columns: 1fr; gap: 4px; }
    .bw-post-cta-inner { flex-direction: column; align-items: stretch; }
    .bw-post-cta-btn { justify-content: center; }
}

/* ── Admin preview bar ── */
/* Sticky and high-contrast on purpose: the whole risk of preview mode is an
   editor mistaking a draft for the live page. */
.bw-preview-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 10px 20px;
    background: #F0A844;
    color: #2A1A05;
    font-size: 0.85rem;
    line-height: 1.4;
}

.bw-preview-bar strong { font-weight: 700; }

.bw-preview-bar a {
    color: #2A1A05;
    font-weight: 600;
    white-space: nowrap;
}