/* ============================================================
   .uk-alert-banner — proposed canonical inline-info banner (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the marketing-grade horizontal banners that the legacy CSS
   re-implements in isolation:

     .trial-banner + .trial-banner-icon + .trial-banner-text   in pricing.css

   Adjacent to but distinct from `.uk-alert--banner` (alerts.css):
     – `.uk-alert--banner` ships with a flat tinted background, opinionated
       title-and-body slot, and a hand-crafted icon-box that lives inside
       alerts.css.
     – `.uk-alert-banner` is a leaner marketing-promo banner that
       composes with the canonical `.uk-icon-box` on the left, accepts
       a single body line (with optional `<strong>` emphasis), an optional
       trailing CTA slot, and supports a gradient variant for the
       friendlier "trial included / new feature shipped" tone that
       `.trial-banner` was carrying in pricing.

   Composes with: `.uk-icon-box` (Icon box section). Drop any size/tone of
   uk-icon-box at the start of the banner; tone the banner body separately
   so the icon and the banner can carry different colour stories
   (e.g. success-tone icon + neutral banner background).
   ============================================================ */

/* ============================================
   Root — primary tone, full padding, single-row
   ============================================ */
.uk-alert-banner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-xl);
    background: rgba(var(--color-primary-rgb), 0.08);
    border: 1px solid rgba(var(--color-primary-rgb), 0.2);
    border-radius: var(--radius-xl);
}

/* ============================================
   Body — single-line message, optional strong-emphasis
   ============================================
   Keeps line-height tight (snug) — banner is intentionally one rolling
   message, not a paragraph. For long-form notice content reach for
   .uk-alert (alerts.css) instead.
   ============================================ */
.uk-alert-banner-body {
    flex: 1;
    min-width: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-md);
    line-height: var(--line-snug);
}

.uk-alert-banner-body strong {
    color: var(--color-primary-light);
    font-weight: 600;
}

/* ============================================
   Action slot — trailing CTA / link
   ============================================
   Stays out of the body so the message wraps independently of the CTA.
   Drop a `.btn` or anchor here.
   ============================================ */
.uk-alert-banner-action {
    flex-shrink: 0;
}

/* ============================================
   Tones — flat single-colour fills
   ============================================
   Default tone is primary (root above). Adding a tone modifier flips
   both the banner background and the colour of `<strong>` inside the
   body so the emphasis matches the banner mood.
   ============================================ */
.uk-alert-banner--primary {
    background: rgba(var(--color-primary-rgb), 0.08);
    border-color: rgba(var(--color-primary-rgb), 0.2);
}
.uk-alert-banner--primary .uk-alert-banner-body strong { color: var(--color-primary-light); }

.uk-alert-banner--accent {
    background: rgba(var(--color-accent-rgb), 0.08);
    border-color: rgba(var(--color-accent-rgb), 0.2);
}
.uk-alert-banner--accent .uk-alert-banner-body strong { color: var(--color-accent); }

.uk-alert-banner--success {
    background: rgba(var(--color-success-rgb), 0.08);
    border-color: rgba(var(--color-success-rgb), 0.2);
}
.uk-alert-banner--success .uk-alert-banner-body strong { color: var(--color-success); }

.uk-alert-banner--info {
    background: rgba(var(--color-info-rgb), 0.08);
    border-color: rgba(var(--color-info-rgb), 0.2);
}
.uk-alert-banner--info .uk-alert-banner-body strong { color: var(--color-info); }

.uk-alert-banner--warning {
    background: rgba(var(--color-warning-rgb), 0.08);
    border-color: rgba(var(--color-warning-rgb), 0.25);
}
.uk-alert-banner--warning .uk-alert-banner-body strong { color: var(--color-warning); }

/* ============================================
   --gradient — softer marketing fill
   ============================================
   Diagonal blend from the success tone into the primary tone — the
   "trial included" / "new feature shipped" treatment that pricing's
   .trial-banner was carrying. Pair with the `.uk-alert-banner-body strong`
   tone of your choice (typically success).
   ============================================ */
.uk-alert-banner--gradient {
    background: linear-gradient(
        135deg,
        rgba(var(--color-success-rgb), 0.08) 0%,
        rgba(var(--color-primary-rgb), 0.06) 100%
    );
    border-color: rgba(var(--color-success-rgb), 0.2);
}

.uk-alert-banner--gradient .uk-alert-banner-body strong {
    color: var(--color-success);
}

/* ============================================
   --compact — tighter padding, smaller radius
   ============================================ */
.uk-alert-banner--compact {
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-sm);
    border-radius: var(--radius-lg);
}

/* ============================================
   Mobile — wrap to column
   ============================================
   Below the breakpoint the icon stays leading, body wraps under it,
   action drops to its own row. Keeps the banner readable on narrow
   viewports without forcing the consumer to author responsive CSS.
   ============================================ */
@media (max-width: 640px) {
    .uk-alert-banner {
        padding: var(--space-md);
        flex-direction: column;
        align-items: flex-start;
    }

    .uk-alert-banner-action {
        align-self: stretch;
    }

    .uk-alert-banner-action .btn {
        width: 100%;
    }
}