/* =========================================
   Player Styles (shared by ride video pages)
   ========================================= */

/* Fonts: Baloo 2 for headings, Open Sans for body */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700&family=Open+Sans:wght@400;600&display=swap');

/* Global dark theme (no flex layout here) */
html, body {
  height: 100%;
  margin: 0;
  background: #0b0f14; /* deep charcoal */
  color: #e6eef7;      /* off-white */
  font-family: 'Open Sans', system-ui, sans-serif;
  line-height: 1.5;
}

/* Constrain page elements without needing a wrapper */
.site-logo,
h1,
.meta,
.player-wrap,
.notice {
  width: min(92vw, 720px);   /* <= hard cap to 720px on big screens */
  margin-left: auto;
  margin-right: auto;
}

/* Logo link at the top */
.site-logo {
  display: block;
  margin-top: 16px;
  margin-bottom: 10px;
  text-align: center;
}
.site-logo img {
  max-height: 56px;
  width: auto;
  border-radius: 8px;
  transition: transform 0.2s ease;
}
.site-logo img:hover {
  transform: scale(1.05);
}

/* Video title */
h1 {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: clamp(1.4rem, 3.2vw, 1.8rem);
  margin: 0 0 6px;
  text-align: center;
  color: #e6eef7;
}

/* Meta info (date + location) */
.meta {
  font-size: clamp(0.9rem, 2.3vw, 0.95rem);
  color: #9aa9b8;
  text-align: center;
  margin-bottom: 14px;
}

/* Player container (fixed smaller cap) */
.player-wrap {
  border: 1px solid #1e2732;
  border-radius: 14px;
  background: #000;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-bottom: 14px;
}

/* Video element fills frame */
.player-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Notice text under player */
.notice {
  font-size: clamp(0.82rem, 2vw, 0.88rem);
  color: #9aa9b8;
  text-align: center;
  margin: 8px auto 24px;
  max-width: 640px;
}

/* --- HLS player internals --- */
.hls-player {
  position: relative;
  width: 100%;
  height: 100%;
}

.hls-player__frame {
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.hls-player video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* --- Responsive tweaks --- */
@media (max-width: 480px) {
  .site-logo img { max-height: 48px; }
  .player-wrap { border-radius: 12px; }
}

@media (min-width: 1400px) {
  /* If you want a tad larger on ultrawide screens, bump to 820px max */
  .site-logo,
  h1,
  .meta,
  .player-wrap,
  .notice {
    width: min(90vw, 820px);
  }
}