/* ==========================================================================
   video.css: the product-video facade inside #tour.
   Scope rule: every selector starts at .video-frame, so nothing here can
   leak into the layout owned by styles.css (the tour grid, headings, copy).
   ========================================================================== */

/* The frame: a fixed-shape window the poster, the facade and later the player all sit in */
.video-frame {
  /* anchors the absolutely positioned facade, iframe and loading bar to this box */
  position: relative;
  /* reserves the 16:9 box before the poster loads, so nothing below it jumps */
  aspect-ratio: 16 / 9;
  /* stretches to whatever column the tour grid gives it instead of a fixed pixel size */
  width: 100%;
  /* the one large radius on the page belongs to its biggest media object */
  border-radius: var(--radius-lg, 16px);
  /* clips the poster's hover zoom and the iframe's square corners to the radius */
  overflow: hidden;
  /* a hairline edge keeps a pale poster from dissolving into the white page */
  border: 1px solid var(--rule, #E5E7EB);
  /* deep brand navy shows while the poster downloads, so the gap reads as intentional */
  background: var(--brand-deep, #042158);
  /* a navy-tinted shadow instead of generic grey, so the lift feels part of the brand palette */
  box-shadow: 0 24px 48px -28px rgba(4, 33, 88, 0.45);
  /* stacking context keeps the pill, bar and iframe layering local to the frame */
  isolation: isolate;
}

/* The facade: a real link that covers the frame edge to edge, so the whole poster is the click target */
.video-frame .video-facade {
  /* fills the frame so any tap on the poster starts the video, not just the pill */
  position: absolute;
  /* pins all four edges to the frame without needing width/height math */
  inset: 0;
  /* block box so the link can hold the image and the pill as layers */
  display: block;
  /* the link carries no visible text styling; the pill does the talking */
  color: inherit;
  /* removes the underline a bare anchor would otherwise draw under the pill label */
  text-decoration: none;
  /* sits above the iframe while it loads invisibly behind, so the poster stays on screen */
  z-index: 1;
  /* a pointer is the honest cursor for "this plays something" */
  cursor: pointer;
  /* removes the grey flash mobile Safari paints on tap; our own states replace it */
  -webkit-tap-highlight-color: transparent;
}

/* The poster: YouTube's thumbnail, cropped to fill whatever the frame's box is */
.video-frame .video-poster {
  /* block removes the inline-image baseline gap under the picture */
  display: block;
  /* fills the frame horizontally, overriding the width="1280" attribute */
  width: 100%;
  /* fills the frame vertically, overriding the height="720" attribute */
  height: 100%;
  /* crops instead of letterboxing if the thumbnail isn't exactly 16:9 (hqdefault is 4:3) */
  object-fit: cover;
  /* the zoom on hover grows from the centre, so the crop stays balanced */
  transform-origin: 50% 50%;
}

/* The play control: a brand-blue pill anchored bottom-left, where a reader's eye lands after the heading */
.video-frame .video-play {
  /* positioned against the facade, which already fills the frame */
  position: absolute;
  /* bottom-left instead of dead centre, so the poster's own content stays unobstructed */
  left: clamp(12px, 3%, 24px);
  /* same inset from the bottom edge keeps the corner spacing even */
  bottom: clamp(12px, 3%, 24px);
  /* lays the icon disc and the label side by side */
  display: inline-flex;
  /* vertically centres the label against the disc */
  align-items: center;
  /* breathing room between disc and label without extra markup */
  gap: 10px;
  /* tight left padding lets the disc sit close to the pill's rounded end */
  padding: 6px 18px 6px 6px;
  /* fully rounded ends make it read as one control, not a rectangle on a photo */
  border-radius: 999px;
  /* solid brand fill stays legible over any poster, dark or light, without a gradient scrim */
  background: var(--brand, #0A5CF5);
  /* white on #0A5CF5 clears WCAG AA (about 5.3:1) for this 15px semibold label */
  color: var(--paper, #FFFFFF);
  /* inherits Inter from the page so the control matches the rest of the UI */
  font: inherit;
  /* 15px is the page's small-UI size; big enough to read on a busy poster */
  font-size: 0.9375rem;
  /* semibold gives the label weight against photographic noise */
  font-weight: 600;
  /* single-line control; normal leading would make the pill taller than needed */
  line-height: 1;
  /* a soft white halo separates the pill from a blue-ish poster, a navy drop grounds it */
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22), 0 10px 24px -8px rgba(4, 33, 88, 0.55);
  /* the pill grows from its anchored corner, so it never drifts off the edge */
  transform-origin: 0% 100%;
  /* stays above the poster within the facade's own layering */
  z-index: 1;
}

/* The icon disc: a white circle holding a brand-blue triangle, the inverse of the pill */
.video-frame .video-play-icon {
  /* positioning context for the triangle drawn in ::before */
  position: relative;
  /* fixed-size disc; flex-shrink below stops a narrow pill from squashing it into an oval */
  width: 34px;
  /* matches width so the disc is a true circle */
  height: 34px;
  /* never let the flex row compress the disc */
  flex-shrink: 0;
  /* round disc reads as "media control" at a glance */
  border-radius: 50%;
  /* white disc on blue pill gives the triangle maximum contrast */
  background: var(--paper, #FFFFFF);
}

/* The triangle itself, drawn with clip-path so it needs no image or icon font */
.video-frame .video-play-icon::before {
  /* pseudo-elements render nothing without content */
  content: "";
  /* placed inside the disc rather than in the flex flow */
  position: absolute;
  /* nudged right of centre: a play triangle's visual centre sits left of its box centre */
  left: 13px;
  /* vertically centred in the 34px disc (34 - 12) / 2 */
  top: 11px;
  /* the triangle's depth */
  width: 11px;
  /* the triangle's height, slightly taller than deep so it reads as "play", not "arrow" */
  height: 12px;
  /* brand blue ties the icon back to the pill it sits in */
  background: var(--brand, #0A5CF5);
  /* cuts the box into a right-pointing triangle; crisper than the border trick at odd zoom levels */
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* The label: plain sentence-case text, so the control says exactly what it does */
.video-frame .video-play-label {
  /* keeps "Play video" on one line even in a narrow column */
  white-space: nowrap;
}

/* Hover responses only on devices that really hover; touch taps would otherwise leave the zoom stuck on */
@media (hover: hover) {
  /* the poster leans in slightly to acknowledge the pointer */
  .video-frame .video-facade:hover .video-poster {
    /* transform only, so the change is composited and never triggers layout */
    transform: scale(1.03);
  }

  /* the pill grows and darkens so it's clear which part will respond */
  .video-frame .video-facade:hover .video-play {
    /* modest growth; anything bigger starts to cover the poster */
    transform: scale(1.06);
    /* the hover shade from the brand ramp, not an ad-hoc darken() */
    background: var(--brand-hover, #094DCE);
  }
}

/* Keyboard focus gets the same zoom and pill growth as hover, so keyboard users see the same response */
.video-frame .video-facade:focus-visible .video-poster {
  /* matches the hover scale so both input modes feel identical */
  transform: scale(1.03);
}

/* Pill response for keyboard focus, mirroring hover */
.video-frame .video-facade:focus-visible .video-play {
  /* same growth as hover */
  transform: scale(1.06);
  /* same shade as hover */
  background: var(--brand-hover, #094DCE);
}

/* Focus ring, fallback version: drawn inside the facade, because the frame's overflow:hidden would clip an outside ring */
.video-frame .video-facade:focus-visible {
  /* the page's focus colour, a light blue that shows on both the navy and the poster */
  outline: 3px solid #80ACFF;
  /* negative offset keeps the ring inside the clipped area in browsers without :has() */
  outline-offset: -3px;
}

/* Focus ring, preferred version: move it to the frame, whose own outline is not clipped by its overflow */
@supports selector(:has(*)) {
  /* the frame draws the ring whenever its facade has keyboard focus */
  .video-frame:has(.video-facade:focus-visible) {
    /* the specified 3px light-blue ring */
    outline: 3px solid #80ACFF;
    /* sits 3px outside the border, as the spec asks, clear of the rounded corner */
    outline-offset: 3px;
  }

  /* the facade's inner ring would double up once the frame draws one */
  .video-frame .video-facade:focus-visible {
    /* one ring is enough; the frame's is the visible one */
    outline: none;
  }
}

/* Motion only for people who haven't asked the OS to reduce it */
@media (prefers-reduced-motion: no-preference) {
  /* poster zoom eases in rather than snapping */
  .video-frame .video-poster {
    /* slow enough to feel like a lean, not a jolt; uses the page's shared easing */
    transition: transform 600ms var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1));
  }

  /* pill growth and colour change animate together */
  .video-frame .video-play {
    /* quicker than the poster so the control answers first and the image follows */
    transition: transform 220ms var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1)), background-color 220ms var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1));
  }
}

/* The injected player: fills the frame exactly where the poster was */
.video-frame iframe {
  /* layered in the frame, not in normal flow, so the aspect-ratio box stays in charge of size */
  position: absolute;
  /* pins all four edges to the frame */
  inset: 0;
  /* explicit size, because iframes default to 300x150 */
  width: 100%;
  /* explicit size, because iframes default to 300x150 */
  height: 100%;
  /* iframes ship with a 2px inset border in most browsers */
  border: 0;
  /* removes the inline baseline gap an iframe inherits like an image */
  display: block;
}

/* Loading state: set by video.js between the click and the player's load event */
.video-frame.is-loading iframe {
  /* keeps YouTube's white, half-painted player hidden until it's ready; the poster stays in view */
  opacity: 0;
}

/* While loading, the facade stops being clickable so a second click can't start a second player */
.video-frame.is-loading .video-facade {
  /* ignores further clicks and hovers during the load */
  pointer-events: none;
}

/* The label goes away while loading; the pill shrinks to just the disc as the "working" signal */
.video-frame.is-loading .video-play-label {
  /* removed from layout so the pill collapses around the disc */
  display: none;
}

/* The collapsed pill needs even padding once the label is gone */
.video-frame.is-loading .video-play {
  /* equal padding keeps the disc centred in a now-circular pill */
  padding: 6px;
}

/* The progress bar: a thin deadline-orange line along the frame's bottom edge */
.video-frame.is-loading::after {
  /* pseudo-elements render nothing without content */
  content: "";
  /* placed against the frame, not in flow */
  position: absolute;
  /* spans the full bottom edge */
  left: 0;
  /* spans the full bottom edge */
  right: 0;
  /* hugs the bottom, where it reads as a progress track rather than a divider */
  bottom: 0;
  /* thin enough to feel like a status line, thick enough to see on a phone */
  height: 3px;
  /* deadline orange is the page's "something is happening now" colour */
  background: var(--deadline, #FF914D);
  /* above the facade so the poster can't cover it */
  z-index: 2;
}

/* Animated sweep only when motion is welcome; otherwise the full static bar above stands alone */
@media (prefers-reduced-motion: no-preference) {
  /* the bar becomes a short segment that travels along the edge */
  .video-frame.is-loading::after {
    /* a third of the width reads as an indeterminate sweep, not a percentage */
    right: auto;
    /* segment length */
    width: 34%;
    /* the sweep repeats until video.js removes .is-loading */
    animation: video-frame-sweep 1.1s var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1)) infinite;
  }
}

/* Indeterminate sweep: enters off the left edge, exits off the right; transform only so it stays on the compositor */
@keyframes video-frame-sweep {
  /* starts fully off the left edge */
  from {
    /* -100% of the segment's own width */
    transform: translateX(-100%);
  }

  /* ends fully off the right edge: frame width is about 3x the segment, plus one more segment to clear it */
  to {
    /* 100% / 34% is roughly 294%, so 300% clears the right edge */
    transform: translateX(300%);
  }
}

/* Narrow phones: a slightly smaller pill so it doesn't cover a third of a small poster */
@media (max-width: 420px) {
  /* tighter pill on small screens */
  .video-frame .video-play {
    /* trims the gap to match the smaller disc */
    gap: 8px;
    /* slightly smaller label, still above the 14px legibility floor */
    font-size: 0.875rem;
    /* less right padding balances the smaller label */
    padding-right: 14px;
  }

  /* smaller disc to match */
  .video-frame .video-play-icon {
    /* 30px still clears the 24px minimum target guidance, and the whole poster is the target anyway */
    width: 30px;
    /* keeps the disc circular */
    height: 30px;
  }

  /* re-centre the triangle in the smaller disc */
  .video-frame .video-play-icon::before {
    /* keeps the optical right-nudge at the smaller size */
    left: 11px;
    /* (30 - 12) / 2 keeps it vertically centred */
    top: 9px;
  }
}