/* ==========================================================================
   Flimp Video — poster thumbnail + play button + caption, and the shared
   top-layer <dialog> lightbox. Brand-tunable via CSS variables so the module
   works on any Flimp site (override --flimp-video-accent / --flimp-video-ink
   in the site's Custom CSS if the brand colors differ).
   ========================================================================== */
:root {
  --flimp-video-accent: #ce0e2d;   /* play triangle, eyebrow, focus ring */
  --flimp-video-ink:    #2b2d2e;   /* caption title */
}

.flimp-video { margin: 0; }

.flimp-video__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  background: #0d2438;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .45);
  transition: transform .25s ease, box-shadow .25s ease;
}
.flimp-video__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flimp-video__thumb::after {          /* subtle scrim so it reads as a video */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .10), rgba(0, 0, 0, .30));
}
.flimp-video__thumb:hover,
.flimp-video__thumb:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px -12px rgba(0, 0, 0, .55);
  outline: none;
}
.flimp-video__thumb:focus-visible {
  outline: 3px solid var(--flimp-video-accent);
  outline-offset: 4px;
}

/* play button — white disc + accent triangle, centered */
.flimp-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  display: grid;
  place-items: center;
  pointer-events: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  transition: transform .25s ease, background .25s ease;
}
.flimp-video__play svg {
  width: 26px;
  height: 26px;
  margin-left: 4px;                   /* optically center the triangle */
  color: var(--flimp-video-accent);
}
.flimp-video__thumb:hover .flimp-video__play,
.flimp-video__thumb:focus-visible .flimp-video__play {
  transform: translate(-50%, -50%) scale(1.09);
  background: #fff;
}

/* caption */
.flimp-video__cap {
  margin: 10px 0 0;
  font-family: inherit;
  line-height: 1.35;
}
.flimp-video__eyebrow {
  color: var(--flimp-video-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-right: 7px;
}
.flimp-video__title {
  font-weight: 600;
  color: var(--flimp-video-ink);
}

/* alignment within the column (only visible when max-width < column width) */
.flimp-video--align-left   { margin-right: auto; }
.flimp-video--align-center { margin-left: auto; margin-right: auto; }
.flimp-video--align-right  { margin-left: auto; }

/* ==========================================================================
   Lightbox — a native <dialog> rendered in the browser's top layer, so it
   sits above sticky headers and third-party chat widgets regardless of their
   z-index (a plain z-index can't reliably beat those).
   ========================================================================== */
dialog.flimp-video-lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
  width: min(94vw, 980px);
  max-width: none;
  max-height: none;
}
dialog.flimp-video-lightbox::backdrop {
  background: rgba(8, 12, 16, .9);
}
.flimp-video-lightbox__inner {
  position: relative;
  width: 100%;
}
.flimp-video-lightbox__slot {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* default / fallback; JS overrides per module (data-ratio) */
  background: #000;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
/* The lightbox shape is chosen per module via the "Lightbox Aspect Ratio" field and
   applied as an inline aspect-ratio by the JS (see openLightbox). 16:9 is a standard
   video; 17:10 suits a Flimp hosted-viewer embed (its 16:9 video PLUS the "powered by
   Flimp" footer bar, which makes the embedded page taller than 16:9) so the video fills
   the width instead of being boxed by the player's own side padding. */
.flimp-video-lightbox__slot video,
.flimp-video-lightbox__slot iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.flimp-video-lightbox__close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.flimp-video-lightbox__close:hover {
  background: rgba(255, 255, 255, .3);
}
@media (max-width: 600px) {
  dialog.flimp-video-lightbox { width: 94vw; }
  .flimp-video-lightbox__close { top: -50px; }
}