/* ============================================================
   .cta-next — 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):
     .cta-next                       root <section>, outer padding
       .cta-next-card                the gradient card surface
         .cta-next-content           text + buttons column
           .cta-next-eyebrow         small uppercase label above title
           .cta-next-title           the headline
           .cta-next-text            supporting paragraph
           .cta-next-trust           flex row of trust pills
             .cta-next-trust-item    icon + label pill
           .cta-next-buttons         button cluster
         .cta-next-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.
   ============================================================ */

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

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

.cta-next-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);
}

.cta-next--compact .cta-next-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);
}

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

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

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

.cta-next-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);
}

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

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

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

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

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

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

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

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

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

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

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

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

.cta-next-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;
}

.cta-next-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;
}

.cta-next-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="backdrop-radial"> back the whole section. */
.cta-next--atmosphere {
    position: relative;
    overflow: hidden;
}

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