/* ============================================================================
   GEPA branded video player — no YouTube chrome, no click-through.
   ========================================================================== */

.gv {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #020f0d;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(244, 194, 76, .16);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .85);
}

/* The embed is display-only. Every interaction goes through our own UI, so the
   YouTube logo, title bar, context menu and "Watch on YouTube" are unreachable. */
.gv .gv-frame,
.gv iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}

/* Cover the top strip where YouTube paints the title/share affordances. */
.gv::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 68px;
    z-index: 2;
    background: linear-gradient(180deg, rgba(2, 15, 13, .55), transparent);
    pointer-events: none;
}

/* brand watermark — top-left, above everything, never interactive */
.gv-mark {
    position: absolute;
    top: 14px; left: 16px;
    z-index: 5;
    width: 40px; height: auto;
    opacity: .82;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7));
    transition: opacity .25s;
}
/* recede slightly while playing so it never fights the content */
.gv.is-playing .gv-mark { opacity: .55; }
.gv:hover .gv-mark { opacity: .85; }

@media (max-width: 620px) {
    .gv-mark { width: 30px; top: 10px; left: 11px; }
}

/* poster covers YouTube's unstarted branding until the learner presses play */
.gv-poster {
    position: absolute; inset: 0; z-index: 2;
    background-color: #020f0d;
    background-size: cover; background-position: center;
    transition: opacity .3s;
}
.gv.has-started .gv-poster { opacity: 0; pointer-events: none; }

.gv-ui { position: absolute; inset: 0; z-index: 3; }

/* big centre play */
.gv-big {
    position: absolute; inset: 0; margin: auto;
    width: 74px; height: 74px; border-radius: 999px;
    display: grid; place-items: center;
    background: rgba(244, 194, 76, .95); border: 0; cursor: pointer;
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .8);
    transition: transform .2s, opacity .2s;
}
.gv-big:hover { transform: scale(1.06); }
.gv.is-playing .gv-big { opacity: 0; pointer-events: none; }

.gv-tri {
    width: 0; height: 0; margin-left: 5px;
    border-style: solid; border-width: 13px 0 13px 21px;
    border-color: transparent transparent transparent #3a2a00;
}
.gv-tri.sm { border-width: 7px 0 7px 11px; margin-left: 3px; border-left-color: #f6f2e9; }
.gv.is-playing .gv-play .gv-tri {
    width: 11px; height: 14px; border: 0; margin: 0;
    background: linear-gradient(90deg, #f6f2e9 0 4px, transparent 4px 7px, #f6f2e9 7px 11px);
}

/* control bar */
.gv-bar {
    position: absolute; inset: auto 0 0 0; z-index: 4;
    display: flex; align-items: center; gap: .7rem;
    padding: .8rem 1rem;
    background: linear-gradient(0deg, rgba(2, 15, 13, .92), rgba(2, 15, 13, .5) 60%, transparent);
    opacity: 0; transform: translateY(6px);
    transition: opacity .22s, transform .22s;
}
.gv:hover .gv-bar,
.gv:focus-within .gv-bar,
.gv:not(.is-playing) .gv-bar { opacity: 1; transform: none; }

.gv-btn {
    flex: none; width: 34px; height: 34px; border-radius: 8px;
    display: inline-grid; place-items: center;
    background: transparent; border: 0; color: #f6f2e9;
    font-size: .9rem; font-weight: 700; cursor: pointer;
    transition: background .16s;
}
.gv-btn:hover { background: rgba(255, 255, 255, .14); }
.gv-time { color: rgba(246, 242, 233, .85); font-size: .78rem; font-variant-numeric: tabular-nums; min-width: 4ch; }

.gv-seek {
    position: relative; flex: 1; height: 16px; cursor: pointer;
    display: flex; align-items: center; touch-action: none;
}
.gv-seek::before {
    content: ""; position: absolute; inset: 50% 0 auto 0; transform: translateY(-50%);
    height: 4px; border-radius: 999px; background: rgba(246, 242, 233, .25);
}
.gv-buf, .gv-played {
    position: absolute; top: 50%; left: 0; transform: translateY(-50%);
    height: 4px; border-radius: 999px; width: 0;
}
.gv-buf { background: rgba(246, 242, 233, .2); }
.gv-played { background: linear-gradient(90deg, #f4c24c, #ffdd86); }
.gv-knob {
    position: absolute; top: 50%; left: 0;
    width: 12px; height: 12px; margin-left: -6px; border-radius: 999px;
    background: #ffdd86; transform: translateY(-50%) scale(0);
    transition: transform .16s;
}
.gv-seek:hover .gv-knob, .gv-seek:focus-visible .gv-knob { transform: translateY(-50%) scale(1); }
.gv-seek:focus-visible { outline: 2px solid #ffdd86; outline-offset: 3px; border-radius: 999px; }

.gv :focus-visible { outline: 2px solid #ffdd86; outline-offset: 2px; }


/* ---- control popups (playback speed, video quality) ---------------------- */
.gv-pop { position: relative; flex: none; }

.gv-quality {
    width: auto; min-width: 44px; padding: 0 .5rem;
    font-size: .74rem; letter-spacing: .02em;
}
/* YouTube overrode the requested level — the label shows what is really playing */
.gv-quality.is-capped::after {
    content: ""; position: absolute; top: 5px; right: 4px;
    width: 5px; height: 5px; border-radius: 999px; background: #f4c24c;
}

.gv-menu {
    position: absolute; bottom: calc(100% + .5rem); right: 0; z-index: 6;
    min-width: 132px; max-height: 232px; overflow-y: auto;
    padding: .3rem; border-radius: 12px;
    background: rgba(4, 24, 21, .97);
    border: 1px solid rgba(244, 194, 76, .28);
    box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .9);
}
.gv-menu[hidden] { display: none; }

.gv-menu-item {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: .48rem .6rem .48rem 1.5rem; position: relative;
    background: transparent; border: 0; border-radius: 8px;
    color: #f6f2e9; font: 600 .8rem/1 Inter, system-ui, sans-serif;
    text-align: left; cursor: pointer;
    transition: background .14s;
}
.gv-menu-item:hover { background: rgba(244, 194, 76, .14); }
.gv-menu-item.is-on { color: #f4c24c; }
.gv-menu-item.is-on::before {
    content: "\2713"; position: absolute; left: .5rem; font-size: .7rem; font-weight: 900;
}
.gv-menu-none {
    margin: 0; padding: .5rem .6rem; max-width: 168px;
    color: rgba(246, 242, 233, .62); font-size: .74rem; line-height: 1.45;
}

/* watch-progress readout used for completion gating */
.gv-watch {
    display: flex; align-items: center; gap: .7rem;
    margin-top: .7rem; color: rgba(246, 242, 233, .62); font-size: .8rem;
}
.gv-watch-bar { flex: 1; height: 5px; border-radius: 999px; background: rgba(246, 242, 233, .14); overflow: hidden; }
.gv-watch-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #12897a, #3dc0a7); transition: width .3s; }
.gv-watch.is-met { color: #3dc0a7; }
.gv-watch.is-met .gv-watch-bar span { background: linear-gradient(90deg, #f4c24c, #ffdd86); }

@media (max-width: 620px) {
    .gv-mute { display: none; }
    .gv-bar { gap: .3rem; padding: .6rem .7rem; }
    .gv-menu { right: auto; left: 50%; transform: translateX(-50%); }
    .gv-quality { min-width: 40px; padding: 0 .35rem; font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
    .gv-bar, .gv-big, .gv-knob, .gv-watch-bar span, .gv-menu-item { transition: none; }
}

/* end of a lesson's stretch of the recording — the big button becomes replay */
.gv.seg-ended .gv-poster { opacity: 0; }
.gv.seg-ended::after {
    content: "End of this lesson";
    position: absolute; left: 50%; top: calc(50% + 46px); transform: translateX(-50%);
    z-index: 4; white-space: nowrap;
    padding: .3rem .8rem; border-radius: 999px;
    background: rgba(2, 15, 13, .82); border: 1px solid rgba(244, 194, 76, .4);
    color: #f6f2e9; font: 700 .74rem/1 Inter, system-ui, sans-serif;
    pointer-events: none;
}
/* a mount can name its own end — a course preview is not a lesson */
.gv[data-end-label].seg-ended::after { content: attr(data-end-label); }

.gv.seg-ended .gv-big { background: rgba(244, 194, 76, .92); }