/* Blog module — public (dark, main.hbs) + clientarea (light, clientarea.hbs) */

/* ---------------------------------------------------------------------------
   Public scope.
   The theme's compiled bootstrap.css loads AFTER main.hbs's inline
   `body { color:#fff }` and wins, so everything inherits #1a1a1a (invisible on
   the dark background). Colours here are therefore set explicitly, never
   inherited.
--------------------------------------------------------------------------- */
.blog-public {
    color: #fff;
    overflow-x: hidden;
}
.blog-public h1,
.blog-public h2,
.blog-public h3,
.blog-public h4,
.blog-public h5,
.blog-public h6 { color: #fff; }
.blog-public p,
.blog-public li,
.blog-public blockquote,
.blog-public td,
.blog-public th { color: rgba(255, 255, 255, 0.82); }
.blog-public strong { color: #fff; }
.blog-public .text-muted { color: rgba(255, 255, 255, 0.55) !important; }
.blog-public a:not(.btn):not(.blog-card):not(.blog-tag-pill) { color: #f242ab; }
.blog-public hr { border-color: rgba(255, 255, 255, 0.15); }

/* ---------- shared prose / markdown output ---------- */
.blog-prose {
    line-height: 1.75;
    font-size: 1.05rem;
    /* nothing inside the article may ever widen the page */
    max-width: 100%;
    overflow-wrap: anywhere;
}
.blog-prose > * { max-width: 100%; }
.blog-prose .blog-heading { font-weight: 700; }
.blog-prose .blog-list { padding-left: 1.25rem; }
.blog-prose .blog-blockquote { font-style: italic; }
.blog-prose .blog-inline-code { padding: 0.1rem 0.35rem; border-radius: 4px; background: rgba(127, 127, 127, 0.18); }
.blog-prose .blog-code-block { padding: 1rem; border-radius: 10px; background: rgba(127, 127, 127, 0.12); overflow-x: auto; max-width: 100%; }
.blog-prose .blog-table { width: 100%; display: block; overflow-x: auto; }
.blog-prose figure,
.blog-prose .blog-figure { margin: 0 0 1.5rem; max-width: 100%; }

/* Defensive: constrain EVERY image, with or without the expected class. */
.blog-prose img,
.blog-prose .blog-inline-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
}
.blog-prose .blog-figcaption { text-align: center; }

/* Quill alignment + indent classes in rendered HTML bodies */
.blog-prose .ql-align-center { text-align: center; }
.blog-prose .ql-align-right { text-align: right; }
.blog-prose .ql-align-justify { text-align: justify; }
.blog-prose .ql-indent-1 { padding-left: 3em; }
.blog-prose .ql-indent-2 { padding-left: 6em; }
.blog-prose .ql-indent-3 { padding-left: 9em; }
.blog-prose .ql-indent-4 { padding-left: 12em; }

.blog-locked-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border-radius: 12px;
    background: repeating-linear-gradient(135deg, rgba(127,127,127,0.12) 0 10px, rgba(127,127,127,0.06) 10px 20px);
}
.blog-locked-media-inner { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0.75; }
.blog-locked-media-icon { font-size: 1.6rem; }
.blog-locked-media-label { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- public cards ---------- */
.blog-card {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.2s ease, border-color 0.2s ease;
    height: 100%;
    text-decoration: none;
    color: #fff;
}
.blog-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.25); color: #fff; }
.blog-card-cover { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; display: block; background: #1a1a1a; }
.blog-card-body { padding: 1rem 1.1rem 1.25rem; }
.blog-card-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 0.4rem; color: #fff; }
.blog-card-excerpt { font-size: 0.88rem; color: rgba(255, 255, 255, 0.65); }
.blog-card-meta { font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); text-transform: uppercase; letter-spacing: 0.04em; }
.blog-card-cover-wrap { position: relative; }
.blog-card-lock-badge {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    color: #ffce54;
    border-radius: 999px;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
}

/* ---------- post hero ---------- */
.blog-hero-cover-vertical { display: none; }
.blog-hero-cover-square { width: 100%; max-width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; }
@media (min-width: 768px) {
    .blog-hero-cover-square { display: none; }
    .blog-hero-cover-vertical {
        display: block;
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        aspect-ratio: 2 / 3;
        object-fit: cover;
        border-radius: 16px;
    }
}

.blog-category-badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(242, 66, 171, 0.15);
    color: #f242ab;
    border: 1px solid rgba(242, 66, 171, 0.3);
}

.blog-tag-pill {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    margin: 0 0.35rem 0.35rem 0;
}
.blog-tag-pill:hover, .blog-tag-pill.active { background: #f242ab; color: #fff; }

.blog-paywall {
    border-radius: 20px;
    padding: 2rem 1.5rem;
    text-align: center;
    background: linear-gradient(180deg, rgba(242, 66, 171, 0.12) 0%, rgba(12, 199, 164, 0.08) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---------------------------------------------------------------------------
   Clientarea scope (light cards) — overrides the dark defaults above.
--------------------------------------------------------------------------- */
.clientarea-shell .blog-prose { color: #1a1a1a; }
.clientarea-shell .blog-prose p,
.clientarea-shell .blog-prose li,
.clientarea-shell .blog-prose blockquote { color: #333; }
.clientarea-shell .blog-prose h1,
.clientarea-shell .blog-prose h2,
.clientarea-shell .blog-prose h3,
.clientarea-shell .blog-prose h4,
.clientarea-shell .blog-prose h5,
.clientarea-shell .blog-prose h6 { color: #111; }
.clientarea-shell .blog-locked-media { min-height: 180px; }
.clientarea-shell .blog-card { background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); color: #1a1a1a; }
.clientarea-shell .blog-card-title { color: #1a1a1a; }
.clientarea-shell .blog-card-excerpt { color: rgba(0, 0, 0, 0.6); }
.clientarea-shell .blog-card-meta { color: rgba(0, 0, 0, 0.4); }
.clientarea-shell .blog-paywall { background: linear-gradient(180deg, rgba(242, 66, 171, 0.08) 0%, rgba(12, 199, 164, 0.05) 100%); border: 1px solid rgba(0, 0, 0, 0.08); }