/*
 * premium_badge.css — gold "+ Premium" pill for paid-news listings.
 *
 * Used inline before article headlines on every news-card surface
 * (homepage feed, category/section/author/genre/tag/search lists,
 * latest, related news). Rendered by inc/premium_badge.inc.php.
 *
 * Visual: gradient gold #F59E0B → #B45309 + soft amber shadow + bold
 * geometric plus glyph. Variant 5 from the badge design exploration
 * (see premium_badge_preview_gold_plus.html in the repo). The gold
 * separates paid content from free content at scan-speed without
 * shouting; the plus glyph keys into the Apple-News+ / Disney+ /
 * Paramount+ family of premium-tier marks so users intuitively read
 * it as "premium subscription content" rather than "warning".
 *
 * Scoped strictly under .premium-badge so nothing leaks into headlines
 * the badge happens to sit inside.
 */

.premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 6px;
    /* Sit slightly above the heading text baseline for optical centring.
       The badge is bold + uppercase, the heading is normal-case — without
       this nudge the badge appears to sag below the cap-height of the
       headline characters next to it. */
    vertical-align: middle;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
    line-height: 1;
    border-radius: 999px;
    background: linear-gradient(135deg, #F59E0B 0%, #B45309 100%);
    color: #ffffff;
    /* Soft amber shadow lifts the pill off the page background — turns it
       into an "object" rather than a flat sticker. Shadow color matches
       the deeper end of the gradient so the lift looks natural. */
    box-shadow: 0 2px 6px rgba(180, 83, 9, 0.35);
    /* Heading anchors usually inherit the underlined-on-hover behaviour,
       which would underline the badge text too — kill it explicitly. */
    text-decoration: none;
}

.premium-badge svg {
    display: block;
    flex-shrink: 0;
}

/* The plus glyph is two <line> elements drawn with currentColor (= the
   badge's white text colour). stroke-width 3.4 gives a chunky, confident
   look at small sizes — at 9-10px the glyph would otherwise read as a
   thin cross / typo. */
.premium-badge svg line {
    stroke: currentColor;
    stroke-width: 3.4;
    stroke-linecap: round;
}

/* Sizes — proportional padding and SVG dimensions per scale step.
   `xs` is the default for inline-in-headline use; larger sizes are
   available via the helper's $size param for future cards / hero blocks. */
.premium-badge--xs { font-size: 9px;  padding: 3px 7px;  gap: 3px; }
.premium-badge--sm { font-size: 10px; padding: 4px 9px; }
.premium-badge--md { font-size: 12px; padding: 6px 12px; }
.premium-badge--lg { font-size: 14px; padding: 8px 14px; }
.premium-badge--xs svg { width: 9px;  height: 9px; }
.premium-badge--sm svg { width: 11px; height: 11px; }
.premium-badge--md svg { width: 13px; height: 13px; }
.premium-badge--lg svg { width: 15px; height: 15px; }