/*
 * Plyr skin — Performance design.
 *
 * Rewritten from scratch to avoid the bullshit specificity war that
 * kept leaving the big-play button as a tiny gold square. Strategy:
 *   1. Override Plyr's CSS custom properties at .gp-player scope.
 *   2. Use !important + high-specificity selectors on every overlay
 *      button property so nothing — Plyr's own stylesheet, Bootstrap
 *      on legacy pages, our own defensive resets — can win.
 *   3. Keep the rest of the player chrome on minimal touches: just
 *      hard-edge the corners, gold the scrubber, mono the time.
 *
 * Plyr's own stylesheet loads after this file (it's injected by the
 * plyr.js bundle at runtime). Equal-specificity rules from Plyr would
 * therefore beat ours on cascade order; that's why every load-bearing
 * declaration here uses !important.
 */

/* ── 1. Container + Plyr custom-prop overrides ───────────────────── */
.gp-player {
    --plyr-color-main: var(--gp-gold);
    --plyr-video-control-color: var(--gp-text);
    --plyr-video-control-color-hover: var(--gp-text);
    --plyr-video-control-background-hover: rgba(255, 186, 0, 0.10);
    --plyr-video-controls-background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
    --plyr-range-track-height: 3px;
    --plyr-range-thumb-height: 12px;
    --plyr-range-thumb-background: var(--gp-gold);
    --plyr-range-fill-background: var(--gp-gold);
    --plyr-range-track-background: rgba(255, 255, 255, 0.20);
    --plyr-control-spacing: 12px;
    --plyr-font-family: var(--gp-font-mono);
    --plyr-font-size-small: 11px;
    --plyr-font-size-base: 11px;
    --plyr-tooltip-radius: 0;

    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
}
.gp-player__video {
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
}

/* Force the player container to fill the .gp-detail__player stage. */
.gp-detail__player--live .gp-player,
.gp-detail__player--live .gp-player .plyr,
.gp-detail__player--live .gp-player .plyr__video-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ── 2. Hard-edged corners everywhere EXCEPT the big-play button ─── */
/* Apply to specific Plyr nodes so the wildcard doesn't reach into the
   overlaid control. (The previous version used `.plyr *` and then had
   to fight itself with !important on the play-button border-radius.) */
.gp-player .plyr,
.gp-player .plyr__controls,
.gp-player .plyr__controls *,
.gp-player .plyr__menu,
.gp-player .plyr__menu * {
    border-radius: 0 !important;
}

/* Round scrubber handle (the one exception inside controls). */
.gp-player .plyr__progress input[type="range"]::-webkit-slider-thumb { border-radius: 50% !important; }
.gp-player .plyr__progress input[type="range"]::-moz-range-thumb     { border-radius: 50% !important; }

/* Time label typography. */
.gp-player .plyr__time {
    font-family: var(--gp-font-mono) !important;
    letter-spacing: 0.20em !important;
    font-size: 11px !important;
}

/* ── 3. Big-play overlay button — bulletproof rewrite ────────────── */
/*
 * Plyr's default sizes the overlay button via padding (no explicit
 * width/height): roughly `padding: calc(var(--plyr-control-spacing) * 1.5)`
 * around a small SVG icon, which produces ~54px total. We force a
 * fixed 120px circle and override every related box-model property.
 *
 * Selector specificity is bumped with [data-plyr="play"] (an attr,
 * specificity 0,1,0) on top of the two classes (0,2,0) → final 0,3,1.
 * That beats any plain `.plyr__control--overlaid` rule Plyr ships
 * (which is at most 0,1,0).
 *
 * The transform stays as Plyr's own translate(-50%, -50%) — we never
 * touch it on hover/focus or the click target shifts under the cursor.
 */
.gp-player .plyr .plyr__control--overlaid,
.gp-player button.plyr__control--overlaid,
.gp-player button.plyr__control--overlaid[data-plyr="play"] {
    /* size + shape */
    width: 120px !important;
    height: 120px !important;
    min-width: 120px !important;
    min-height: 120px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    /* visuals */
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 2px solid var(--gp-gold) !important;
    color: var(--gp-gold) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    text-shadow: none !important;
    /* center the SVG glyph */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    /* hover anim only — never transform (would fight Plyr's centering translate) */
    transition: background-color var(--gp-dur-base) var(--gp-ease-out),
                border-color var(--gp-dur-base) var(--gp-ease-out) !important;
}

.gp-player .plyr .plyr__control--overlaid:hover,
.gp-player .plyr .plyr__control--overlaid:focus-visible,
.gp-player button.plyr__control--overlaid:hover,
.gp-player button.plyr__control--overlaid:focus-visible {
    background-color: rgba(255, 186, 0, 0.18) !important;
    border-color: var(--gp-gold) !important;
    outline: none !important;
}

.gp-player .plyr .plyr__control--overlaid svg,
.gp-player button.plyr__control--overlaid svg {
    width: 44px !important;
    height: 44px !important;
    color: var(--gp-gold) !important;
    fill: var(--gp-gold) !important;
    display: block !important;
    /* Plyr's play SVG is optically balanced — no margin nudge. */
    margin: 0 !important;
    padding: 0 !important;
}

/* Mobile — proportional shrink. */
@media (max-width: 600px) {
    .gp-player .plyr .plyr__control--overlaid,
    .gp-player button.plyr__control--overlaid,
    .gp-player button.plyr__control--overlaid[data-plyr="play"] {
        width: 84px !important;
        height: 84px !important;
        min-width: 84px !important;
        min-height: 84px !important;
    }
    .gp-player .plyr .plyr__control--overlaid svg,
    .gp-player button.plyr__control--overlaid svg {
        width: 32px !important;
        height: 32px !important;
    }
}