/* #7870: Single source of truth for blog section variant treatment.
   Loaded globally by both the public surface (LiveEventBingo.Web App.razor) and
   the admin surface (MyEventBingo.Admin App.razor), so the BlogSectionVisual
   helper's CSS class output renders identically wherever it lands.

   Previously triple-duplicated across:
     - LiveEventBingo.Shared/Shared/DesktopBlogDetails.razor.css (scoped)
     - LiveEventBingo.Shared/Shared/MobileBlogDetails.razor.css (scoped)
     - MyEventBingo.Admin/Components/Pages/BlogManager.razor.css (scoped)
   Each kept drifting away from the others -- box-shadow and per-variant link
   colours were the most recent omission in the admin preview, caught by the
   2026-05-27 triad review on #7870. Centralising here.

   Design tokens (--meb-blog-*) remain the single source of truth for the
   actual colour values; this file only maps the CSS class output to those
   tokens. */

/* CT-02 T6618 / Frozen Design Contract UI/UX v6 §2B -- shared chrome for all
   non-default variants: hard black border + 4px-offset shadow + 32px radius. */
.article-section--highlight,
.article-section--sky,
.article-section--mint,
.article-section--coral,
.article-section--ink {
    border: var(--meb-border-width-sm) solid var(--meb-blog-border-section);
    border-radius: var(--meb-blog-radius-section);
    box-shadow: var(--meb-blog-shadow-section);
    padding: var(--meb-space-stack-md) var(--meb-space-inline-20);
}

/* Mobile padding override -- tighter than desktop. Matches the prior
   MobileBlogDetails.razor.css scoped block (padding: --meb-space-stack-12
   --meb-space-inline-md). The variant set is identical so we lean on the
   shared selectors here rather than splitting by component. */
@media (max-width: 767px) {
    .article-section--highlight,
    .article-section--sky,
    .article-section--mint,
    .article-section--coral,
    .article-section--ink {
        padding: var(--meb-space-stack-12) var(--meb-space-inline-md);
    }
}

.article-section--highlight {
    background: var(--meb-blog-surface-section-highlight);
    color: var(--meb-blog-text-on-section-highlight);
}
.article-section--sky {
    background: var(--meb-blog-surface-section-sky);
    color: var(--meb-blog-text-on-section-sky);
}
.article-section--mint {
    background: var(--meb-blog-surface-section-mint);
    color: var(--meb-blog-text-on-section-mint);
}
.article-section--coral {
    background: var(--meb-blog-surface-section-coral);
    color: var(--meb-blog-text-on-section-coral);
}
.article-section--ink {
    background: var(--meb-blog-surface-section-ink);
    color: var(--meb-blog-text-on-section-ink);
}

/* CT-02 / Frozen Blog Detail UI/UX v1.2 §5 line 339-345 -- inline link colours
   per variant. Ensures links remain readable on every section background.
   Without this, the Ink (dark navy) variant renders inherited blue links on a
   dark surface, failing WCAG contrast -- exactly the case flagged in the
   triad review when the admin preview accidentally omitted these rules. */
.article-section--highlight a { color: var(--meb-blog-text-section-link-highlight); }
.article-section--sky       a { color: var(--meb-blog-text-section-link-sky); }
.article-section--mint      a { color: var(--meb-blog-text-section-link-mint); }
.article-section--coral     a { color: var(--meb-blog-text-section-link-coral); }
.article-section--ink       a { color: var(--meb-blog-text-section-link-ink); }