/* GSB Video Showcase — chrome kill + token-styled control bar. All theming via UUI variables. */
.gsb-video { position: relative; display: block; }

.gsb-video .video-js { width: 100%; height: auto; background: transparent; cursor: pointer; }
.gsb-video .video-js video { border-radius: var(--radius-lg, 10px); }

/* uniform chrome-less: kill every Video.js UI component regardless of skin/version */
.gsb-video .vjs-control-bar,
.gsb-video .vjs-big-play-button,
.gsb-video .vjs-loading-spinner,
.gsb-video .vjs-text-track-display,
.gsb-video .vjs-modal-dialog { display: none !important; }

/* ---------------------------------------------------------------------------
   The control bar (v0.5.0) — one row across the bottom of the player.

   `1fr auto 1fr` is what horizontally CENTRES the action button: the centre
   column is only as wide as the button, and the two 1fr columns either side are
   equal whatever the side controls weigh, so the button sits on the player's
   midline rather than merely between its neighbours.

   pointer-events: none on the row, auto on the controls, so the empty space in
   the bar is still the video — a click there reaches the wrap handler.
   --------------------------------------------------------------------------- */
.gsb-video__bar {
  position: absolute;
  right: var(--spacing-lg, 12px);
  bottom: var(--spacing-lg, 12px);
  left: var(--spacing-lg, 12px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--spacing-md, 8px);
  pointer-events: none;
}
.gsb-video__bar > * { pointer-events: auto; }
.gsb-video__bar > :first-child { justify-self: start; }
.gsb-video__bar > :last-child { justify-self: end; }

/* the action button — the one point of the bar that is meant to be pressed, so it is
   the only one carrying the solid brand fill */
.gsb-video__btn {
  justify-self: center;
  min-height: 44px;                    /* touch target */
  padding: var(--spacing-sm, 6px) var(--spacing-xl, 16px);
  border: 0;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-bg-brand-solid, #5f92dc);
  color: var(--color-text-white, #fff);
  font-family: var(--font-family-body, inherit);
  font-size: var(--font-size-text-sm, 0.875rem);
  font-weight: var(--font-weight-semibold, 600);
  cursor: pointer;
}
.gsb-video__btn:hover { background: var(--color-bg-brand-solid-hover, #4a7dcb); }
.gsb-video__btn:focus-visible { outline: 2px solid var(--color-focus-ring, #5f92dc); outline-offset: 2px; }

/* the two icon-only controls — muted until touched, then brand, which is the whole
   signal that they are live controls rather than decoration */
.gsb-video__ctl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;                     /* touch target */
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md, 8px);
  background: none;
  color: var(--color-fg-quaternary, #a4a7ae);
  cursor: pointer;
  transition: color 0.15s ease;
}
.gsb-video__ctl:hover,
.gsb-video__ctl:focus-visible { color: var(--color-fg-brand-primary, #4a7dcb); }
.gsb-video__ctl:focus-visible { outline: 2px solid var(--color-focus-ring, #5f92dc); outline-offset: 2px; }

.gsb-video__ctl-spacer { display: block; min-width: 44px; min-height: 44px; }

.gsb-video__icon { display: block; width: 24px; height: 24px; }

/* play/pause: both icons ship in the button, CSS shows the one matching the state.
   The class is set from player events, so the swap is the player's, not the click's. */
.gsb-video__ctl--toggle .gsb-video__icon--play { display: none; }
.gsb-video__ctl--toggle.is-paused .gsb-video__icon--pause { display: none; }
.gsb-video__ctl--toggle.is-paused .gsb-video__icon--play { display: block; }

@media (prefers-reduced-motion: reduce) {
  .gsb-video__ctl { transition: none; }
}

.gsb-video__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}