/*
 * .gp-btn — buttons for the Performance design.
 *
 * Variants:
 *   .gp-btn--primary  filled gold, black text     (CTAs)
 *   .gp-btn--ghost    outlined, transparent       (secondary)
 *   .gp-btn--block    full-width
 *   .gp-btn--sm       smaller padding/type
 *
 * Per design tokens: Bebas Neue, hard edges (no border-radius).
 */

.gp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gp-space-3);
    padding: 14px 22px;
    font-family: var(--gp-font-display);
    font-size: var(--gp-fs-btn);
    font-weight: 400;
    letter-spacing: var(--gp-ls-nav);
    text-transform: uppercase;
    text-decoration: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    line-height: 1;
    transition:
        background var(--gp-dur-base) var(--gp-ease-standard),
        color      var(--gp-dur-base) var(--gp-ease-standard),
        border-color var(--gp-dur-base) var(--gp-ease-standard),
        transform  var(--gp-dur-fast) var(--gp-ease-standard);
}
.gp-btn:active { transform: translateY(1px); }
.gp-btn:focus-visible { outline-offset: 4px; }

.gp-btn--primary {
    background: var(--gp-gold);
    color: var(--gp-text-on-gold);
}
.gp-btn--primary:hover { background: var(--gp-gold-deep); color: var(--gp-text-on-gold); }

.gp-btn--ghost {
    background: transparent;
    color: var(--gp-text);
    border: var(--gp-border-w-strong) solid rgba(255, 255, 255, 0.30);
}
.gp-btn--ghost:hover { border-color: rgba(255, 255, 255, 0.60); color: var(--gp-text); }

.gp-btn--block { width: 100%; }
.gp-btn--sm    { padding: 10px 18px; font-size: var(--gp-fs-btn-sm); }
.gp-btn--lg    { padding: 18px 28px; font-size: var(--gp-fs-btn); }

/* Inline play-glyph for "▶ WATCH NOW" CTAs.
   Drawn with CSS borders to avoid Windows emoji rendering of ▶ as a
   colored chip (Phase 2 lesson). */
.gp-btn__play {
    display: inline-block;
    width: 0; height: 0;
    border-style: solid;
    border-width: 6px 0 6px 9px;
    border-color: transparent transparent transparent currentColor;
}

/* Inline live-dot for "● WATCH PREVIEW" / live-status CTAs */
.gp-btn__live {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ff3b30;
    box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.20);
}