/* release-styles.css -- rendered content treatments for RTE-authored copy
   ========================================================================
   COPY. Do not edit here. Source of truth lives in the BUZZHub repo at
   Buzzhub/css/release-styles.css (lines 1-485, the render half). The
   editor-chrome half of that file -- toolbar stacking, snippets row,
   hover previews -- is deliberately NOT copied; it has no meaning on a
   public site.

   Why this file exists: blog copy is authored in the Buzzscribed rich
   text editor, which emits named classes (div.bh-rs-button,
   blockquote.bh-rs-pullquote, div.bh-rs-keyfacts and so on). Without
   these rules every one of those treatments renders as bare markup.

   Brand: every colour reads from a CSS custom property with a hex
   fallback. MediaCast brand purple (#3d1a6f) already matches the
   fallback, so no token block is required. To align the hover tone and
   the pill radius with .biv2-btn-purple, see the override block at the
   foot of BlogItem.css.

   If the source file changes in BUZZHub, re-copy this file. */

/* ----------------------------------------------------------------
   Pull quote -- blockquote.bh-rs-pullquote (+ optional <cite> child)
   Gold left-border, purple text, italic, large opening-quote glyph.
   ---------------------------------------------------------------- */
blockquote.bh-rs-pullquote {
    position: relative;
    margin: 1.75rem 0;
    padding: 0.75rem 1.25rem 0.75rem 2.5rem;
    border-left: 4px solid var(--brand-accent, #fdb913);
    color: var(--brand-primary, #3d1a6f);
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.5;
}

blockquote.bh-rs-pullquote::before {
    content: "\201C"; /* left double quotation mark */
    position: absolute;
    left: 0.4rem;
    top: -0.1rem;
    font-size: 2.75rem;
    line-height: 1;
    font-style: normal;
    color: var(--brand-accent, #fdb913);
}

blockquote.bh-rs-pullquote cite {
    display: block;
    margin-top: 0.5rem;
    font-style: normal;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-tertiary, #888);
}

blockquote.bh-rs-pullquote cite::before {
    content: "-- ";
}

/* ----------------------------------------------------------------
   Standfirst / intro paragraph -- p.bh-rs-standfirst
   Larger, medium weight, slightly muted lead-in.
   ---------------------------------------------------------------- */
p.bh-rs-standfirst {
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.55;
    margin: 0 0 1.25rem;
    color: var(--text-body, #555);
}

/* ----------------------------------------------------------------
   Key facts panel -- div.bh-rs-keyfacts (contains a <ul>)
   Deliberately UNLIKE the quote/callout left-border motif: a full
   bordered "fact card" with a labelled header strip (no other release
   block is labelled) and CSS-drawn branded square markers (no glyph,
   so editor / email / PDF render identically). Rounded all corners.
   ---------------------------------------------------------------- */
div.bh-rs-keyfacts {
    margin: 1.5rem 0;
    padding: 0;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-default, #e4e0ee);
    border-radius: 8px;
    overflow: hidden;
    color: var(--text-body, #555);
}

/* Header strip -- the strongest differentiator from the other blocks.
   The label is an editable .bh-rs-keyfacts-head element (see below). This CSS
   ::before is the LEGACY fallback only: boxes saved before the header became
   editable have no head element, so the fixed label still renders for them.
   Excludes the plain variant (which never shows a header). */
div.bh-rs-keyfacts:not(.bh-rs-keyfacts--plain):not(:has(> .bh-rs-keyfacts-head))::before {
    content: "Key facts";
    display: block;
    padding: 0.55rem 1.25rem;
    background: var(--bg-purple-tint, #f0ebf7);
    border-bottom: 1px solid var(--border-default, #e4e0ee);
    color: var(--brand-primary, #3d1a6f);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Editable header strip -- a real DOM node so authors can rename it inline; the
   text flows to email + PDF. Styled to match the legacy ::before label exactly. */
div.bh-rs-keyfacts > .bh-rs-keyfacts-head {
    display: block;
    padding: 0.55rem 1.25rem;
    background: var(--bg-purple-tint, #f0ebf7);
    border-bottom: 1px solid var(--border-default, #e4e0ee);
    color: var(--brand-primary, #3d1a6f);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

div.bh-rs-keyfacts > ul {
    margin: 0;
    padding: 0.9rem 1.25rem;
    list-style: none;
}

div.bh-rs-keyfacts > ul > li {
    position: relative;
    margin: 0 0 0.55rem;
    padding-left: 1.4rem;
    line-height: 1.45;
}

/* Branded square marker -- drawn in CSS, no font dependency. */
div.bh-rs-keyfacts > ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.45rem;
    height: 0.45rem;
    background: var(--brand-primary, #3d1a6f);
    border-radius: 2px;
}

div.bh-rs-keyfacts > ul > li:last-child {
    margin-bottom: 0;
}

/* Plain variant (author toggles via the Remove-style bubble): just a grey rounded
   box -- no header strip, no card border, standard disc bullets. */
div.bh-rs-keyfacts--plain {
    background: var(--bg-subtle, #f4f5f7);
    border: 1px solid var(--border-default, #e4e0ee);
    border-radius: 8px;
}
div.bh-rs-keyfacts--plain::before { content: none; }
div.bh-rs-keyfacts--plain > .bh-rs-keyfacts-head { display: none; }
div.bh-rs-keyfacts--plain > ul {
    padding: 1rem 1.25rem 1rem 2.4rem;
    list-style: disc;
}
div.bh-rs-keyfacts--plain > ul > li {
    position: static;
    padding-left: 0;
}
div.bh-rs-keyfacts--plain > ul > li::before { content: none; }

/* ----------------------------------------------------------------
   Callout -- div.bh-rs-callout
   Brand-tinted (purple) background, accent left-border, padding.
   "Make it stand out".
   ---------------------------------------------------------------- */
div.bh-rs-callout {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: var(--bg-purple-tint, #f0ebf7);
    border-left: 4px solid var(--brand-primary, #3d1a6f);
    border-radius: 0 6px 6px 0;
    color: var(--brand-primary, #3d1a6f);
}

div.bh-rs-callout > :first-child {
    margin-top: 0;
}

div.bh-rs-callout > :last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------
   Figure -- figure.bh-rs-figure (+ figcaption)
   Centered, generous margin, responsive image, small tertiary caption.
   ---------------------------------------------------------------- */
figure.bh-rs-figure {
    margin: 1.75rem auto;
    text-align: center;
}

figure.bh-rs-figure img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

figure.bh-rs-figure figcaption {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-tertiary, #888);
    text-align: center;
    line-height: 1.4;
}

/* ----------------------------------------------------------------
   Divider -- hr.bh-rs-divider
   Thin branded rule, generous vertical margin.
   ---------------------------------------------------------------- */
hr.bh-rs-divider {
    border: 0;
    border-top: 2px solid var(--brand-accent, #fdb913);
    width: 60px;
    margin: 2rem auto;
    opacity: 1;
}

/* ----------------------------------------------------------------
   Sub-heading + highlight -- h3.bh-rs-subheading
   Branded section heading with a gold "highlight" underline.
   ---------------------------------------------------------------- */
h3.bh-rs-subheading {
    margin: 1.75rem 0 0.75rem;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--brand-accent, #fdb913);
    color: var(--brand-primary, #3d1a6f);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

/* ----------------------------------------------------------------
   Call-to-action block -- div.bh-rs-cta
   Centred, brand-filled banner. White text; any inner link goes gold.
   ---------------------------------------------------------------- */
div.bh-rs-cta {
    margin: 1.75rem auto;
    padding: 1.25rem 1.5rem;
    background: var(--brand-primary, #3d1a6f);
    border-radius: 8px;
    text-align: center;
    color: #ffffff;
}

div.bh-rs-cta > :first-child { margin-top: 0; }
div.bh-rs-cta > :last-child { margin-bottom: 0; }

div.bh-rs-cta a {
    color: var(--brand-accent, #fdb913);
    font-weight: 700;
    text-decoration: underline;
}

/* ----------------------------------------------------------------
   Button link -- div.bh-rs-button > a
   Centred, brand-filled pill. White label; the whole anchor is the button.
   Brand-primary fill works in both themes (matches the CTA banner), so no
   dark-mode override is needed.
   ---------------------------------------------------------------- */
div.bh-rs-button {
    margin: 1.75rem 0;
    text-align: center;
}

div.bh-rs-button a {
    display: inline-block;
    padding: 0.7rem 1.6rem;
    background: var(--brand-primary, #3d1a6f);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    line-height: 1.2;
}

div.bh-rs-button a:hover {
    background: var(--brand-primary-dark, #2c1252);
    color: #ffffff;
}

/* ----------------------------------------------------------------
   Image gallery -- div.bh-rs-gallery
   Responsive grid wrapping 2+ images / figures.
   ---------------------------------------------------------------- */
div.bh-rs-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.6rem;
    margin: 1.75rem 0;
    align-items: start;
}

div.bh-rs-gallery img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

div.bh-rs-gallery figure {
    margin: 0;
}

/* ----------------------------------------------------------------
   Video / social embed -- div.bh-rs-embed
   Media-link card (sanitiser-safe; no iframe). Play glyph + accent border.
   A live in-page player needs an HtmlSanitiser iframe allowlist (separate).
   ---------------------------------------------------------------- */
div.bh-rs-embed {
    position: relative;
    margin: 1.75rem 0;
    padding: 1rem 1.25rem 1rem 3rem;
    background: var(--bg-subtle, #f4f5f7);
    border: 1px solid var(--brand-primary, #3d1a6f);
    border-radius: 6px;
    color: var(--text-body, #555);
}

div.bh-rs-embed::before {
    content: "\25B6"; /* play triangle */
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--brand-accent, #fdb913);
}

div.bh-rs-embed > :first-child { margin-top: 0; }
div.bh-rs-embed > :last-child { margin-bottom: 0; }

/* Provider-aware card variants (YouTube thumbnail / Vimeo / X / Instagram /
   TikTok / LinkedIn / Facebook / generic). The card itself is a single <a>
   so the whole block is clickable; sanitiser-safe (no iframe, no script). */
div.bh-rs-embed:has(.bh-rs-embed-card) {
    padding: 0;
    background: var(--bg-subtle, #f4f5f7);
}

div.bh-rs-embed:has(.bh-rs-embed-card)::before {
    display: none;
}

.bh-rs-embed-card {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
    overflow: hidden;
}

.bh-rs-embed-card:hover {
    background: var(--bg-purple-tint, #8549da14);
}

.bh-rs-embed-card--linkonly {
    padding: 0.85rem 1.1rem;
    align-items: center;
    gap: 0.75rem;
}

.bh-rs-embed-thumb {
    position: relative;
    width: 240px;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
    background: #000;
    overflow: hidden;
}

.bh-rs-embed-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

.bh-rs-embed-thumb::after {
    content: "\25B6";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 2.75rem;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(0, 0, 0, 0.22);
    transition: background 120ms ease;
}

.bh-rs-embed-card:hover .bh-rs-embed-thumb::after {
    background: rgba(0, 0, 0, 0.35);
}

.bh-rs-embed-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.85rem 1rem 0.85rem 0;
    justify-content: center;
    min-width: 0;
    flex: 1 1 auto;
}

.bh-rs-embed-provider {
    display: inline-block;
    width: max-content;
    padding: 0.18rem 0.55rem;
    background: var(--bg-purple-tint, #8549da14);
    color: var(--brand-primary, #3d1a6f);
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bh-rs-embed-url {
    font-size: 0.9rem;
    word-break: break-all;
    color: var(--text-body, #555);
    line-height: 1.35;
}

@media (max-width: 600px) {
    .bh-rs-embed-card { flex-direction: column; }
    .bh-rs-embed-thumb { width: 100%; }
    .bh-rs-embed-meta { padding: 0.85rem 1rem; }
}

/* ----------------------------------------------------------------
   Dark mode overrides
   Most colours flow from tokens that already flip (brand-primary,
   brand-accent, bg-subtle, bg-purple-tint, text-body, text-tertiary).
   The pull quote glyph + standfirst already inherit flipped tokens.
   These overrides only touch cases where a flipped token alone would
   read poorly: the purple callout text needs a brighter tone on a
   dark tinted background, and the figure image edge softens.
   ---------------------------------------------------------------- */
[data-theme="dark"] div.bh-rs-callout {
    color: var(--text-body, #d4d4d4);
}

[data-theme="dark"] blockquote.bh-rs-pullquote {
    color: var(--text-body, #d4d4d4);
}

[data-theme="dark"] div.bh-rs-keyfacts {
    color: var(--text-body, #d4d4d4);
}

[data-theme="dark"] div.bh-rs-keyfacts::before,
[data-theme="dark"] div.bh-rs-keyfacts > .bh-rs-keyfacts-head {
    color: var(--text-strong, #e8e3f2);
}

[data-theme="dark"] div.bh-rs-keyfacts > ul > li::before {
    background: var(--text-strong, #e8e3f2);
}

[data-theme="dark"] figure.bh-rs-figure img {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] h3.bh-rs-subheading {
    color: var(--text-strong, #e8e3f2);
}

[data-theme="dark"] div.bh-rs-embed {
    color: var(--text-body, #d4d4d4);
}

[data-theme="dark"] .bh-rs-embed-url {
    color: var(--text-body, #d4d4d4);
}

[data-theme="dark"] .bh-rs-embed-card:hover {
    background: var(--bg-purple-tint, rgba(133, 73, 218, 0.18));
}