/**
 * Wapu UI Kit · wapu-cta
 *
 * Componente CTA canónico compartido entre editor (Playground chrome) y front
 * (Scenes render). Reemplaza gradualmente:
 *   - .pg-btn (editor legacy)
 *   - .pg-button (editor legacy)
 *   - .pg-ds-btn (editor design system)
 *   - inline styles generados por wapu_component_cta() (Scenes legacy)
 *
 * Diseño: editorial-first, premium-grade, simple.
 * Variantes BEM: --filled, --bordered, --underline, --link-arrow
 * Tamaños:       --sm, --md (default), --lg
 *
 * Tokens del drop activos via CSS custom properties:
 *   --wapu-cta-color    (color principal)
 *   --wapu-cta-surface  (color de fondo en variante filled)
 *
 * @package WapuCore
 * @since   5.3.1
 */

/* ── Base ───────────────────────────────────────────────────────── */
.wapu-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
    cursor: pointer;
    color: var(--wapu-cta-color, currentColor);
}
.wapu-cta:hover,
.wapu-cta:focus-visible {
    opacity: .85;
}

.wapu-cta__text {
    line-height: 1.2;
}
.wapu-cta__arrow {
    display: inline-flex;
    align-items: center;
    transition: transform .25s ease;
    line-height: 1;
}
.wapu-cta:hover .wapu-cta__arrow,
.wapu-cta:focus-visible .wapu-cta__arrow {
    transform: translateX(3px);
}

/* ── Sizes ──────────────────────────────────────────────────────── */
.wapu-cta--sm { font-size: 10px; }
.wapu-cta--md { font-size: 11px; }
.wapu-cta--lg { font-size: 13px; }

.wapu-cta--filled.wapu-cta--sm,
.wapu-cta--bordered.wapu-cta--sm  { padding: 8px 16px; }
.wapu-cta--filled.wapu-cta--md,
.wapu-cta--bordered.wapu-cta--md  { padding: 12px 24px; }
.wapu-cta--filled.wapu-cta--lg,
.wapu-cta--bordered.wapu-cta--lg  { padding: 16px 32px; }

/* ── Variant: filled ────────────────────────────────────────────── */
.wapu-cta--filled {
    background: var(--wapu-cta-color, #1a1a1a);
    color: var(--wapu-cta-surface, #ffffff);
    border: 1px solid var(--wapu-cta-color, #1a1a1a);
    border-radius: 8px;
}
.wapu-cta--filled:hover,
.wapu-cta--filled:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
}

/* ── Variant: bordered ──────────────────────────────────────────── */
.wapu-cta--bordered {
    background: transparent;
    color: var(--wapu-cta-color, #1a1a1a);
    border: 1px solid var(--wapu-cta-color, #1a1a1a);
    border-radius: 8px;
}

/* ── Variant: underline (default editorial) ─────────────────────── */
.wapu-cta--underline {
    background: transparent;
    color: var(--wapu-cta-color, currentColor);
    padding: 0 0 4px 0;
    border: 0;
    border-bottom: 1px solid var(--wapu-cta-color, currentColor);
    border-radius: 0;
}

/* ── Variant: link-arrow ────────────────────────────────────────── */
.wapu-cta--link-arrow {
    background: transparent;
    color: var(--wapu-cta-color, currentColor);
    padding: 0;
    border: 0;
}

/* ── Accessibility ──────────────────────────────────────────────── */
.wapu-cta:focus-visible {
    outline: 2px solid var(--wapu-cta-color, #1a1a1a);
    outline-offset: 3px;
}