/* ============================================================
 * THE FILM PLAYER — a poster, a play button, and a <video>
 * Added 23 Oct 2026, for the OnSite product page.
 *
 * ⚠ THIS IS A TWIN. The same component is declared inside
 * styles/apple-landing.css (section 6, "SEE IT WORKING"), which is
 * what apple.html uses. The two are deliberately duplicated rather
 * than shared, for the same reason onsite-v2.css is kept off
 * product-page.css: apple.html was signed off on 23 Oct and editing
 * its stylesheet to serve a second page risks a page nobody asked
 * to change. The cost is that a change here needs making twice —
 * grep `ap-video` to find both copies.
 *
 * ⚠ It pairs with scripts/apple-video.js, which is shared as-is.
 * The name says "apple" because the Apple page is where it was
 * built, but nothing in it is Apple-specific: it keys off
 * [data-video] and returns quietly when the page has none. It is
 * loaded by onsite.html unchanged, so there is one copy of the
 * behaviour even though there are two copies of the styling.
 *
 * ⚠ NOTHING AUTOPLAYS. The film has sound. See the script's own
 * header — there is no autoplay flag and there must never be one.
 * ============================================================ */

/* ⚠ FULL CONTENT WIDTH, capped. On apple.html .container is uncapped and
   1500px is the width its content actually stops at, so the film matches the
   cards above it. On a product page .container is the site's standard 1280px,
   so the cap never binds and the film is simply as wide as every other
   section — which is the same intent, reached by a different route. The cap
   stays so the two copies of this component remain line-for-line comparable.
   16:9 is kept at every width (see the phone rule at the bottom). */
.ap-video {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  border-radius: var(--radius-xl, 24px);
  /* ⚠ BLUE, not navy — #1B367E, the palette's Dark Blue. A navy rectangle
     reads as one more navy band; this has to read as a player. White on it
     clears AA at 11.4:1. Sky is ruled out: white on #2FB7F1 fails. */
  background: var(--ge-blue, #1B367E);
  overflow: hidden;
}

.ap-video__wm {
  position: absolute;
  right: -6%;
  bottom: -30%;
  width: 34%;
  opacity: 0.07;
  pointer-events: none;
}
/* ⚠ id strength, deliberately. home-v2.js auto-applies .rv to elements and
   `.rv.in { opacity: 1 }` (0,2,0) beats a bare class, so without this the
   watermark snaps to fully opaque the moment the section scrolls into view.
   It only misbehaves AFTER a scroll, which is what makes it easy to miss.
   The section therefore has to keep id="see-it-working". */
#see-it-working .ap-video__wm { opacity: 0.07; }

/* ---- the film itself ----
 * The <video> fills the frame and the poster is all you see until play, so
 * the resting state is a still picture in a rounded blue frame. */
.ap-video__el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;   /* the frame's corners, or the video squares them off */
  background: var(--ge-blue, #1B367E);
}

/* ⚠ A scrim, because the play button and the caption sit over a PHOTOGRAPH,
   not over flat blue. White on the poster's bright classroom wall is about
   2.4:1 without it. At 0.46 overall the text clears AA against every frame of
   the poster and the picture still reads underneath. */
.ap-video__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(15, 20, 56, 0.34) 0%, rgba(15, 20, 56, 0.54) 100%);
  transition: opacity 360ms var(--hv2-ease);
}

.ap-video__inner {
  position: relative;
  z-index: 2;
  transition: opacity 360ms var(--hv2-ease);
}

.ap-video__play {
  width: 74px;
  height: 74px;
  margin: 0 auto 20px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--ge-navy, #0F1438);
  cursor: pointer;
  transition: transform 200ms var(--hv2-ease), background 200ms var(--hv2-ease);
}
.ap-video__play:hover { transform: scale(1.06); background: var(--ge-blue-3, #D9F4FF); }
.ap-video__play:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 183, 241, 0.45), 0 0 0 6px rgba(15, 20, 56, 0.35);
}
.ap-video__play svg { width: 26px; height: 26px; margin-left: 4px; }

.ap-video__title { margin: 0 0 8px; font-size: clamp(20px, 2vw, 26px); font-weight: 600; color: #fff; }
.ap-video__inner p { margin: 0; font-size: 15.5px; color: rgba(255, 255, 255, 0.86); }

/* ---- playing: the cover gets out of the way ----
 * Hidden with opacity AND pointer-events rather than display:none, so the
 * fade can run; visibility is what stops the button staying in the tab order
 * once it is gone. */
.ap-video.is-playing .ap-video__scrim,
.ap-video.is-playing .ap-video__inner {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .ap-video__scrim,
  .ap-video__inner,
  .ap-video__play { transition: none; }
}

/* The no-JS fallback inside <video>. Only ever seen if the element itself
   cannot play, since the script is what reveals the controls — and the script
   removes this link when it runs, so a screen reader never finds a stray
   "download it instead" that leads nowhere useful. */
.ap-video__fallback { color: #fff; font-size: 15px; padding: 24px; }
.ap-video__fallback a { color: #fff; text-decoration: underline; }

@media (max-width: 700px) {
  /* ⚠ 16:9 IS KEPT ON PHONES — do not put `aspect-ratio: auto` here. On the
     Apple page that was tried and reverted: `auto` lets the box collapse to
     the height of the caption, 247px at every width below 700, cropping the
     picture to a 1.39:1 letterbox. The padding goes, though: it insets the
     video inside its own frame and shows a blue border down both sides. */
  .ap-video { padding: 0; }
}