/* ============================================================
   .uk-callout-text — proposed canonical text-emphasis callout (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the centered-text emphasis card in `public/css/education.css`:

     .skills-cta-text                -> .uk-callout-text .uk-callout-text--quote
     .skills-cta-text p              -> .uk-callout-text > p   (font-size + tinted)
     .skills-cta-text p strong       -> .uk-callout-text > p strong   (primary-light)

   Distinct from `.uk-alert-banner` and `.feature-highlight` (horizontal
   icon-led info banners). Callout-uk-text is the *centered text
   emphasis* card — a quoted line, a punchline, a value-prop summary —
   typically with a single emphasised `<strong>` word that lifts to the
   primary brand tone.

   Note: legacy `.feature-highlight` (style.css — horizontal icon + title +
   body, used inside Home tabs) carries a different shape and should
   migrate to `.uk-alert-banner --compact` at Phase 3 rather than here.

   Composes with: nothing — leaf primitive.
   ============================================================ */

/* ============================================
   Root — centered, padded, primary-tinted card
   ============================================ */
.uk-callout-text {
    padding: var(--space-xl);
    background: rgba(var(--color-primary-rgb), 0.05);
    border: 1px solid rgba(var(--color-primary-rgb), 0.2);
    border-radius: var(--radius-xl);
    text-align: center;
}

/* ============================================
   Inner paragraph — emphasised body text
   ============================================
   The callout owns the typography rather than expecting a stat/typography
   helper inside, because the text itself is the surface (quoted line,
   punchline). `<strong>` inside lifts to primary-light to land the key
   word visually.
   ============================================ */
.uk-callout-text > p {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-lg);
    line-height: var(--line-relaxed);
}

.uk-callout-text > p + p {
    margin-top: var(--space-sm);
}

.uk-callout-text > p strong {
    color: var(--color-primary-light);
    font-weight: 600;
}

/* ============================================
   --quote — italicise the body
   ============================================
   The "skills-cta-text" flavour: italic body with `<strong>` snapped
   back to roman so the emphasised word doesn't read as italic-on-italic.
   ============================================ */
.uk-callout-text--quote > p {
    font-style: italic;
}

.uk-callout-text--quote > p strong {
    font-style: normal;
}

/* ============================================
   Tones — primary (default) / accent / success
   ============================================
   Tone flips both the card surface (background + border) and the
   emphasis colour applied to inner `<strong>`.
   ============================================ */
.uk-callout-text--primary {
    background: rgba(var(--color-primary-rgb), 0.05);
    border-color: rgba(var(--color-primary-rgb), 0.2);
}
.uk-callout-text--primary > p strong { color: var(--color-primary-light); }

.uk-callout-text--accent {
    background: rgba(var(--color-accent-rgb), 0.05);
    border-color: rgba(var(--color-accent-rgb), 0.2);
}
.uk-callout-text--accent > p strong { color: var(--color-accent); }

.uk-callout-text--success {
    background: rgba(var(--color-success-rgb), 0.05);
    border-color: rgba(var(--color-success-rgb), 0.2);
}
.uk-callout-text--success > p strong { color: var(--color-success); }

/* ============================================
   --gradient — softer marketing fill
   ============================================
   Diagonal blend from primary into accent. Use when the callout sits at
   the end of a section as a quiet "and that's the point" payoff and
   needs slightly more visual interest than the flat tint.
   ============================================ */
.uk-callout-text--gradient {
    background: linear-gradient(
        135deg,
        rgba(var(--color-primary-rgb), 0.08) 0%,
        rgba(var(--color-accent-rgb), 0.05) 100%
    );
    border-color: rgba(var(--color-primary-rgb), 0.2);
}

/* ============================================
   --left — left-aligned variant
   ============================================
   Default is centered. Switch to left when the callout sits in a column
   layout next to a left-aligned heading and the centred text would feel
   off-axis.
   ============================================ */
.uk-callout-text--left {
    text-align: left;
}

/* ============================================
   --compact — tighter padding
   ============================================ */
.uk-callout-text--compact {
    padding: var(--space-md) var(--space-lg);
}

.uk-callout-text--compact > p {
    font-size: var(--font-md);
}