/* ============================================================
   .uk-cta — unified canonical CTA block (loaded only on /docs/ui-kit)
   ============================================================
   Replaces three legacy declarations:
     .cta-section + .cta-card (style.css, home / locations)
     .tools-cta-section + .tools-cta-card (tools.css, /tools/*)
     .pricing-cta-section (pricing.css, /pricing — already reuses
                           .cta-card markup, only adds the trust row)

   Slots (BEM-ish, all optional except root + card):
     .uk-cta                       root <section>, outer padding
       .uk-cta-card                the gradient card surface
         .uk-cta-content           text + buttons column
           .uk-cta-eyebrow         small uppercase label above title
           .uk-cta-title           the headline
           .uk-cta-text            supporting paragraph
           .uk-cta-trust           flex row of trust pills
             .uk-cta-trust-item    icon + label pill
           .uk-cta-buttons         button cluster
         .uk-cta-visual            visual column (status ring etc.)

   Modifiers (orthogonal):
     --compact   narrower max-width (~720px), smaller padding,
                 lighter gradient, tighter type. Inline / tools.
     --centered  text-align: center, drops the visual column.
                 Combine with --compact for the tools centred card.
     --quiet     no gradient, neutral border, leaner card surface.
                 For inline content CTAs that shouldn't compete
                 with surrounding text.

   On viewports ≤ 1024px the two-column card always collapses to a
   single column with centred content — natural responsive behaviour
   that matches the legacy card.
   ============================================================ */

.uk-cta {
    padding: var(--space-4xl) 0;
}

.uk-cta--compact {
    padding: var(--space-2xl) 0 var(--section-padding-y-tight, var(--space-2xl));
}

.uk-cta-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3xl);
    align-items: center;
    padding: var(--space-3xl);
    background: linear-gradient(135deg,
        rgba(var(--color-primary-rgb), 0.15) 0%,
        rgba(var(--color-primary-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--color-primary-rgb), 0.3);
    border-radius: var(--radius-2xl);
}

.uk-cta--compact .uk-cta-card {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-2xl);
    background: linear-gradient(135deg,
        rgba(var(--color-primary-rgb), 0.08) 0%,
        rgba(var(--color-primary-rgb), 0.02) 100%);
    border-color: rgba(var(--color-primary-rgb), 0.2);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card-hover-sm);
}

.uk-cta--centered .uk-cta-card {
    grid-template-columns: 1fr;
    text-align: center;
}

.uk-cta--centered .uk-cta-buttons,
.uk-cta--centered .uk-cta-trust {
    justify-content: center;
}

.uk-cta-content {
    min-width: 0;
}

.uk-cta-eyebrow {
    display: inline-block;
    font-family: var(--font-family-mono, monospace);
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary-light);
    margin-bottom: var(--space-sm);
}

.uk-cta-title {
    font-size: var(--font-4xl);
    font-weight: 700;
    line-height: var(--line-tight);
    margin: 0 0 var(--space-md);
    color: var(--color-text);
}

.uk-cta--compact .uk-cta-title {
    font-size: var(--font-2xl);
    line-height: var(--line-snug);
    margin-bottom: var(--space-sm);
}

.uk-cta-text {
    font-size: var(--font-lg);
    color: var(--color-text-secondary);
    line-height: var(--line-relaxed);
    margin: 0 0 var(--space-xl);
}

.uk-cta--compact .uk-cta-text {
    font-size: var(--font-base);
    margin-bottom: var(--space-lg);
}

.uk-cta-trust {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
}

.uk-cta-trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-md);
    color: var(--color-text-secondary);
}

.uk-cta-trust-item svg {
    width: 16px;
    height: 16px;
    color: var(--color-success);
    flex-shrink: 0;
}

.uk-cta-buttons {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.uk-cta-visual {
    display: flex;
    justify-content: center;
}

@media (max-width: 1024px) {
    .uk-cta-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .uk-cta-buttons,
    .uk-cta-trust {
        justify-content: center;
    }
}

/* ============================================================
   Visual-slot variants for the wide two-column flavor.
   Each is a self-contained sub-system that lives inside
   .uk-cta-visual; orthogonal to the --compact / --centered /
   --quiet card modifiers.
   ============================================================ */

/* Metrics tiles — 2×2 grid of small KPI cards */
.uk-cta-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: var(--space-md);
    min-width: 320px;
}

.uk-cta-metric {
    padding: var(--space-md) var(--space-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: left;
}

.uk-cta-metric-value {
    display: block;
    font-size: var(--font-2xl);
    font-weight: 700;
    line-height: var(--line-tight);
    color: var(--color-primary-light);
    font-variant-numeric: tabular-nums;
}

.uk-cta-metric-label {
    display: block;
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

/* Atmospheric — drop the card surface, let an underlying
   <canvas class="uk-backdrop-radial"> back the whole section. */
.uk-cta--atmosphere {
    position: relative;
    overflow: hidden;
}

.uk-cta--atmosphere .uk-cta-card {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    position: relative;
    z-index: 1;
}