/* KWRiding CSS overrides loaded AFTER the theme CSS. */

/* Theater mode: center the hero and make it 80% of viewport width. */
main > section.trip-hero {
  width: 80vw;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* Make the embed actually fill the theater container and stay responsive. */
.trip-embed {
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.75rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

/* Robust 16:9 sizing (works even if aspect-ratio is ignored). */
.trip-embed--video::before,
.trip-embed--map::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.trip-embed > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}