/* ADO #7983 (Scope A+B of #7975) — visual styling for the section figcaption
   and pull-quote blockquote.

   Loaded globally by both LiveEventBingo.Web/Components/App.razor and
   MyEventBingo.Admin/Components/App.razor so the public surface and the
   admin section-preview pane share the same rules. Same precedent as
   blog-section-variants.css (#7870).

   Why no per-variant color tokens: `color: inherit` carries the section's own
   --meb-blog-text-on-section-* color through, so the lemon text on Ink and the
   navy text on Sky/Mint/Coral/Highlight automatically flow into both elements
   without a six-arm restate. `currentColor` on the blockquote border does the
   same. This is the same color-flow pattern PR-568 (#7980) used for
   .section-copy. */

.section-figure__caption {
    margin-top: var(--meb-space-stack-xs);
    /* font.* tokens — blog-caption is the right scale for "smaller than body,
       slightly muted, italic." Falls back to 12px if the theme is mid-load. */
    font-size: var(--meb-blog-font-size-caption, 12px);
    font-style: italic;
    text-align: center;
    /* Color flows from the section's variant text color via inherit; no token
       fork needed for Ink (lemon-on-purple) vs the navy variants. */
    color: inherit;
    /* No opacity.* token exists yet — the muted treatment here and on cite
       below are scoped component decoration. Lift to a token if we ever
       grow a quiet/muted text role across more surfaces. */
    opacity: 0.88;
}

.article-section__pullquote {
    margin: var(--meb-space-stack-md) 0;
    padding: var(--meb-space-stack-sm) var(--meb-space-inline-md);
    /* border.width.lg is the closest existing token to a visually distinct
       quote rule. If the design ever lands a dedicated quote-emphasis width,
       swap here. */
    border-left: var(--meb-border-width-lg) solid currentColor;
    font-style: italic;
}

.article-section__pullquote p {
    margin: 0;
    /* Body-size quote prose — uses the blog body token so any future
       responsive bump (clamp etc.) flows through automatically. */
    font-size: var(--meb-blog-font-size-body, 18px);
}

/* <cite> usage note: HTML5 spec restricts <cite> to titles of works, while
   editorial pull-quote attribution often cites a person. We deliberately use
   <cite> for the attribution slot because (a) screen readers announce it
   distinctly from the quote prose, (b) it matches the common visual
   convention, and (c) the alternative <span> conveys less semantic intent.
   If accessibility guidance shifts, swap the tag and re-run axe. */
.article-section__pullquote cite {
    display: block;
    margin-top: var(--meb-space-stack-xs);
    font-size: var(--meb-blog-font-size-small, 13px);
    font-style: normal;
    opacity: 0.78;
}