/* Groundside's film controls. All rules stay inside its existing trailers. */
.groundside-trailer .gs-player {
  --gs-controls-ready: 1;
  width: 100%;
  color: var(--ink, #1e4e7c);
  background: var(--cream, #fff6d8);
  border: 1px solid rgba(255, 246, 216, .35);
  border-radius: 12px;
  text-align: left;
}
.groundside-trailer .gs-player video {
  width: 100%;
  border: 0;
  border-radius: 11px 11px 0 0;
  background: #0e1821;
}
.groundside-trailer .gs-controls {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) auto auto 64px auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 4px 16px;
  font: 20px/1 var(--px, 'VT323', monospace);
  letter-spacing: .015em;
}
.groundside-trailer .gs-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  color: inherit;
  background: transparent;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
.groundside-trailer .gs-play { min-width: 76px; justify-content: flex-start !important; }
.groundside-trailer .gs-play::before { content: '\25b6'; font: 12px/1 system-ui, sans-serif; }
.groundside-trailer .gs-play[aria-label^="Pause"]::before { content: '\2161'; font-weight: 700; }
.groundside-trailer .gs-controls button:hover { background: rgba(30, 78, 124, .08); }
.groundside-trailer .gs-controls button:active { background: rgba(30, 78, 124, .14); }
.groundside-trailer .gs-controls :focus-visible {
  outline: 2px solid var(--ink, #1e4e7c);
  outline-offset: 2px;
  border-radius: 4px;
}
.groundside-trailer .gs-player:focus-visible,
.groundside-trailer .gs-player video:focus-visible { outline: 3px solid var(--yellow, #f5ee7a); outline-offset: 5px; }
.groundside-trailer .gs-time { white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 106px; text-align: center; }
.groundside-trailer .gs-no-volume .gs-controls { grid-template-columns: auto minmax(80px, 1fr) auto auto auto; }
.groundside-trailer .gs-controls input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  border: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  accent-color: var(--ink, #1e4e7c);
  cursor: pointer;
  touch-action: pan-y;
}
.groundside-trailer .gs-controls input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 0;
  background: linear-gradient(to right, var(--ink, #1e4e7c) var(--gs-progress, 0%), rgba(30, 78, 124, .3) var(--gs-progress, 0%));
}
.groundside-trailer .gs-controls input[type="range"]::-moz-range-track {
  height: 3px;
  background: rgba(30, 78, 124, .3);
}
.groundside-trailer .gs-controls input[type="range"]::-moz-range-progress { height: 3px; background: var(--ink, #1e4e7c); }
.groundside-trailer .gs-controls input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -5px;
  border: 2px solid var(--ink, #1e4e7c);
  border-radius: 50%;
  background: var(--yellow, #f5ee7a);
}
.groundside-trailer .gs-controls input[type="range"]::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border: 2px solid var(--ink, #1e4e7c);
  border-radius: 50%;
  background: var(--yellow, #f5ee7a);
}
.groundside-trailer .gs-controls input:disabled { opacity: .45; cursor: default; }
.groundside-trailer .gs-volume::-webkit-slider-thumb { background: var(--ink, #1e4e7c) !important; width: 10px !important; height: 10px !important; margin-top: -3.5px !important; }
.groundside-trailer .gs-volume::-moz-range-thumb { background: var(--ink, #1e4e7c) !important; width: 6px !important; height: 6px !important; }
.groundside-trailer .gs-status,
.groundside-trailer .gs-fallback { display: block; margin: 0; padding: 0 24px 12px; font: 18px/1.3 var(--px, 'VT323', monospace); }
.groundside-trailer .gs-status:empty { display: none; }
.groundside-trailer .gs-fallback a { text-decoration: underline; text-underline-offset: 3px; }
.groundside-trailer .gs-player:fullscreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 max(0px, env(safe-area-inset-right)) 0 max(0px, env(safe-area-inset-left));
  border: 0;
  border-radius: 0;
  background: #0e1821;
}
.groundside-trailer .gs-player:fullscreen video { flex: 1; min-height: 0; max-height: calc(100dvh - 72px); object-fit: contain; border-radius: 0; }
.groundside-trailer .gs-player:fullscreen .gs-controls { flex-shrink: 0; width: 100%; background: var(--cream, #fff6d8); padding-bottom: max(4px, env(safe-area-inset-bottom)); }
.groundside-trailer .gs-player:fullscreen .gs-status { background: var(--cream, #fff6d8); }
@media (max-width: 800px) {
  .groundside-trailer .gs-controls { grid-template-columns: auto minmax(80px, 1fr) auto auto auto; gap: 6px; padding: 4px 8px; }
  .groundside-trailer .gs-volume { display: none !important; }
}
@media (max-width: 600px) {
  .groundside-trailer .gs-controls, .groundside-trailer .gs-no-volume .gs-controls { grid-template-columns: auto 1fr auto auto; gap: 0 2px; padding: 0 6px 4px; font-size: 18px; }
  .groundside-trailer .gs-seek { grid-column: 1 / -1; grid-row: 1; }
  .groundside-trailer .gs-play { grid-column: 1; min-width: 54px; gap: 5px !important; }
  .groundside-trailer .gs-time { grid-column: 2; min-width: 70px; font-size: 16px; }
  .groundside-trailer .gs-sound { grid-column: 3; font-size: 16px !important; }
  .groundside-trailer .gs-fullscreen { grid-column: 4; min-width: 44px; font-size: 0 !important; }
  .groundside-trailer .gs-fullscreen::after { content: '\26f6'; font: 24px/1 system-ui, sans-serif; }
  .groundside-trailer .gs-controls button { padding: 0 5px; }
  .groundside-trailer .gs-player:fullscreen video { max-height: calc(100dvh - 108px); }
  .groundside-trailer .gs-status, .groundside-trailer .gs-fallback { padding: 0 12px 10px; }
}