/**
 * LWP Modern Buttons — Shared Sizing & Styling System
 * =====================================================
 * Single source of truth for every button in the modern blocks and templates.
 * Replaces the per-block copies that previously lived in:
 *   - blocks/modern-hero/style-index.css        (.btn / .btn-primary / .btn-ghost)
 *   - css/lwp-modern-work.css                   (.lwp-mw-cta .btn*)
 *   - blocks/writing-showcase-modern/style-index.css (.lwp-wsm-btn*)
 *   - blocks/whats-new-modern/style-index.css   (.lwp-wnm-cta)
 *
 * Usage:
 *   <a class="lwp-btn lwp-btn--primary lwp-btn--lg">Buy Now</a>
 *   <a class="lwp-btn lwp-btn--ghost   lwp-btn--md">More Info</a>
 *
 * Sizes — line-height is set explicitly on .lwp-btn so the rendered height is
 * IDENTICAL in every context (hero vs slider card vs work page). Without it,
 * buttons inherit different line-heights depending on where they live and
 * render at different heights even with identical padding/font-size.
 *
 *   --sm  padding 7px 14px    font-size .8rem   ~30px tall — inline/utility CTAs
 *   --md  padding 11px 18px   font-size .85rem  ~39px tall — card-level actions (writing showcase)
 *   --lg  padding 14px 32px   font-size .9rem   ~46px tall — primary CTAs (hero, what's new, work page)
 *   --xl  padding 18px 40px   font-size 1rem    ~56px tall — full-bleed / statement heroes
 *
 * Variants:
 *   --primary  accent gradient + glow (signature CTA look)
 *   --ghost    transparent, bordered, hover fill
 *   --solid    flat accent fill, hover lightens (compact card CTAs)
 *
 * Enqueued in modern mode on the frontend and in the block editor (see
 * lwp_enqueue_modern_button_styles() in functions.php).
 */

/* ===== Base ===== */
.lwp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--lwp-font-sans, 'Inter', -apple-system, sans-serif);
    line-height: 1.25; /* explicit — keeps height deterministic in any context */
    letter-spacing: 0.04em;
    border-radius: var(--lwp-radius-sm, 6px);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent; /* identical box for every variant — ghost overrides only the color */
    text-decoration: none;
    white-space: nowrap;
}

/* ===== Sizes (sm / md / lg / xl) ===== */
.lwp-btn--sm {
    padding: 7px 14px;
    font-size: 0.8rem;
}

.lwp-btn--md {
    padding: 11px 18px;
    font-size: 0.85rem;
}

.lwp-btn--lg {
    padding: 14px 32px;
    font-size: 0.9rem;
}

.lwp-btn--xl {
    padding: 18px 40px;
    font-size: 1rem;
}

/* ===== Variants ===== */
.lwp-btn--primary {
    background: linear-gradient(135deg, var(--lwp-accent, #7c5cbf), var(--lwp-accent-secondary, #6a4bb8));
    color: white;
    box-shadow: 0 4px 20px var(--lwp-accent-glow, rgba(124, 92, 191, 0.3));
}

.lwp-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--lwp-accent-glow, rgba(124, 92, 191, 0.5));
}

.lwp-btn--ghost {
    background: transparent;
    color: var(--lwp-text-primary, #e8eaf0);
    border: 1px solid var(--lwp-border, rgba(124, 92, 191, 0.2));
}

.lwp-btn--ghost:hover {
    background: var(--lwp-surface-hover, rgba(30, 45, 70, 0.8));
    border-color: var(--lwp-accent-light, #a382de);
}

.lwp-btn--solid {
    background: var(--lwp-accent, #7c5cbf);
    color: var(--lwp-text-primary, #fff);
}

.lwp-btn--solid:hover {
    background: var(--lwp-accent-light, #a382de);
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(124, 92, 191, 0.3);
}

/* ===== Visible keyboard focus (WCAG 2.4.7 Focus Visible) ===== */
.lwp-btn:focus-visible {
    outline: 2px solid var(--lwp-accent-light, #a382de);
    outline-offset: 3px;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .lwp-btn {
        transition: none;
    }

    .lwp-btn:hover {
        transform: none;
    }
}

/* ===== Mobile — shrink the large CTAs (matches previous hero behavior) ===== */
@media (max-width: 768px) {
    .lwp-btn--lg {
        padding: 12px 24px;
        font-size: 0.85rem;
    }

    .lwp-btn--xl {
        padding: 14px 28px;
        font-size: 0.9rem;
    }
}