/* =============================================================================
   Mold Free USA — /is-it-mold-kids/ only.

   Loaded AFTER lander.css and ONLY by this page, so every rule here is scoped
   to the kids variant by file, not by selector gymnastics. It carries exactly
   one component: the video band that stands where /is-it-mold/ puts its
   respirator photo (.lshot). Nothing else on the page differs structurally.

   Why its own band class instead of reusing .lshot: .lshot carries a crop
   window on phones (`aspect-ratio: 2400/1580` + a negatively-offset <img>)
   that exists to frame ONE photograph. A 16:9 video must not be cropped —
   the frame is the whole picture — so the band is rebuilt from the three
   properties .lshot actually contributes (ink ground, page padding, z-index)
   and nothing else.
   ========================================================================== */

.lvidband {
  position: relative;
  z-index: 3;
  padding-inline: var(--pad);
  background: var(--c-ink);
}

.lvid {
  max-width: calc(var(--lcol) - var(--pad) * 2);
  margin: 0 auto;
}

/* The player plate. Black ground rather than charcoal: the first painted frame
   arrives a beat after the poster is replaced, and against #222 that beat reads
   as a flash. Against #000 it reads as nothing. */
.lvid__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  line-height: 0;
}

.lvid__el {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
}

/* =============================================================================
   THE PRE-ROLL OVERLAY

   Injected by video.js and removed for good on the first play. That is the
   whole trick: our graphics exist ONLY in the state where a native player
   shows nothing but a poster, and the moment playback starts the element is
   `hidden` — no layer of ours sits over the native control strip, so seeking,
   volume, fullscreen and PiP behave exactly as the browser built them, in
   every browser, at every control-strip height. (ls13 keeps its overlay alive
   with `bottom: 42px` carved out for the controls; that number is a guess
   about one browser's chrome and it is the part not worth inheriting.)

   With JS off there is no overlay at all and the <video controls poster> shows
   the browser's own play button. Nothing is lost.
   ========================================================================== */
.lvid__ov {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* The control strip's own height, carved out. Everything above it is our
     click layer — that is what makes a click on the picture pause and resume,
     which is how every video on the web behaves and the reason this layer
     stays alive instead of being dismissed after the first play. Below the
     line the browser's controls are untouched.

     72px, not the 42px ls13 uses. ls13's clips are 9:16 in ~280px-wide cards,
     where the strip really is that short; on a 1092px-wide plate Chrome draws
     a taller one — measured by outlining the overlay and reading the render,
     the button row's centre sits 50px off the bottom and its top edge ~62px.
     A 42px carve-out left mute, fullscreen and the overflow menu underneath
     our layer, where a click toggled playback instead of reaching them. */
  bottom: 72px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: none;
  -webkit-appearance: none;
  appearance: none;
}

/* The dimming, on its own full-frame layer. It has to cover the control strip
   too: painted on the click layer — which stops 72px short — it drew a hard
   brightness step across the picture, and the clip's burnt-in subtitles sit
   exactly there and came out torn along it. */
.lvid__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 20, 20, .18), rgba(20, 20, 20, .42));
  transition: opacity 220ms var(--ease);
}
/* Playing: the dimming lifts and the button gets out of the way. The click
   layer itself stays — it is what pauses on a click. */
.lvid__frame.is-playing .lvid__scrim { opacity: 0; }
.lvid__frame.is-playing .lvid__play { opacity: 0; transform: scale(.7); }

/* The conventional control: a circle with a triangle. Amber disc, ink glyph —
   #e9a922 carries white at 2:1, which is why every CTA on this site is dark
   text on amber, and the same arithmetic applies to a glyph. */
.lvid__play {
  display: block;
  flex-shrink: 0;
  line-height: 0;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .4));
  transition: transform 220ms var(--ease), opacity 220ms var(--ease);
}
.lvid__play svg {
  display: block;
  width: 72px;
  height: 72px;
}
.lvid__play circle { fill: var(--c-amber); }
.lvid__play .tri { fill: var(--c-ink); }
.lvid__ov:hover .lvid__play { transform: scale(1.06); }
.lvid__ov:active .lvid__play { transform: scale(.97); }
.lvid__ov:hover .lvid__play circle { fill: var(--c-amber-hi); }

/* No-JS / codec fallback text, styled so it is legible if it ever renders. */
.lvid__fallback {
  margin: 0;
  padding: 24px;
  font: 400 16px/24px var(--ff-body);
  color: var(--c-off);
  text-align: center;
}
.lvid__fallback a { color: var(--c-amber); text-decoration: underline; }

/* =============================================================================
   RESPONSIVE — one markup, CSS only
   ========================================================================== */
@media (max-width: 900px) {
  .lvid__play svg { width: 64px; height: 64px; }
}

@media (max-width: 560px) {
  /* Full-bleed on phones. At 390 the 24px of page padding costs 48px of a
     frame that is already only ~197px tall, and the band beneath the hero is
     the one place on this page where the picture should own the whole width. */
  .lvidband { padding-inline: 0; }
  .lvid__play svg { width: 56px; height: 56px; }
  /* Narrow viewports get a TALLER strip, not a shorter one: the browser breaks
     it into two rows — buttons above, scrubber below — and the button row's
     centre measures 41px off the bottom, so a 42px carve-out swallows clicks on
     mute and fullscreen (verified: the click toggled play instead of muting).
     58px clears the whole two-row strip. The click-to-pause area is still
     ~160px of a 219px frame. */
  .lvid__ov { bottom: 58px; }
}