/* ==========================================================================
   09 · TEASER 100 — closing CTA
   --------------------------------------------------------------------------
   A frame, three layers deep:

     art      the looping video, bleeding to all four section edges
     veil     a translucent white panel, inset by one frame unit
     copy     the statement + capture, one gutter inside the veil

   Because 40 (frame) + 24 (gutter) = 64, the section's own padding carries
   both insets and the veil can be a pseudo-element pinned to the frame.

   The section is its own stacking context (`isolation`), so art / veil / copy
   stack against each other and never leak into the page's stacking order.

   No `.rb-section--*` rhythm tier here, deliberately: this band's height is a
   fixed min-height with the copy centred inside it, so a padding tier would
   never be the thing deciding where anything sits. The padding IS the frame.
   ========================================================================== */

.rb-teaser100 {
  /* NORMALISED: reference veil inset was 42px — snapped to the 4px grid. */
  --rb-teaser100-frame:  var(--rb-ref-space-8);   /* 40px · section edge → veil */
  --rb-teaser100-gutter: var(--rb-ref-space-6);   /* 24px · veil edge → copy   */

  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  /* NORMALISED: reference padding was 48 top/bottom against 64 left/right.
     Squared to the frame — asymmetry with no design reason, and inert
     vertically anyway, since min-height plus centring decide where the copy
     actually lands. */
  padding: calc(var(--rb-teaser100-frame) + var(--rb-teaser100-gutter));

  /* 416px — the reference's fixed banner height below 1200. A min, not a
     height, so long copy grows the frame rather than being clipped by the
     `overflow: hidden` that trims the art. */
  min-height: 416px;

  /* The poster is the ground as well as the video's first frame: it covers
     the moment before playback and is the whole picture under reduced
     motion. Ink sits behind it so the load never flashes white. */
  background-color: var(--rb-sys-bg-dark);
  background-image: url("../../assets/img/teaser100-poster.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  color: var(--rb-sys-fg-primary);
}

@media (min-width: 1200px) {
  /* NORMALISED: reference was 542px. */
  .rb-teaser100 { min-height: 544px; }
}

/* --- Veil ----------------------------------------------------------------
   A pseudo-element rather than a div: it is pure decoration, so it has no
   business in the DOM or the accessibility tree.
   -------------------------------------------------------------------------- */
.rb-teaser100::before {
  content: "";
  position: absolute;
  inset: var(--rb-teaser100-frame);
  /* Stacking ladder inside the section: art 0 · veil 1 · copy 10. */
  z-index: 1;
  border-radius: var(--rb-ref-radius-2xl);
  background: color-mix(in srgb, var(--rb-ref-white) 70%, transparent);
}

/* --- Art ------------------------------------------------------------------ */
.rb-teaser100__video {
  position: absolute;
  inset: 0;
  z-index: var(--rb-sys-z-base);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  /* There is no JS this pass, so the only way to stop the loop is to drop the
     element. Nothing is lost: the poster is already the section's background,
     so the art still reads — it just holds still. */
  .rb-teaser100__video { display: none; }
}

/* --- Copy ----------------------------------------------------------------- */
.rb-teaser100__content {
  position: relative;
  z-index: var(--rb-sys-z-raised);
  width: 100%;
  /* 672px — the reference's measure for the closing statement. */
  max-width: 672px;
  text-align: center;
}

.rb-teaser100__form {
  /* 448px — the reference's capture-field width. The explicit `width` is
     load-bearing: `margin-inline: auto` opts the form out of the stack's
     cross-axis stretch, so without it the pill collapses to fit-content. */
  width: 100%;
  max-width: 448px;
  margin-inline: auto;

  /* Lifts the white pill off the art. The shadow rides on the form, not on
     `.rb-field__row`, so it cannot displace the component's `:focus-within`
     ring — which on an `--on-dark` field is the only focus indicator there
     is. The form box IS the pill box, so matching the radius makes the two
     shapes identical.
     NORMALISED: reference blur was 0 16.725px 25.087px — snapped to the grid.
     Black rather than ink, because the art underneath is already ink-dark. */
  border-radius: var(--rb-ref-radius-full);
  box-shadow: 0 var(--rb-ref-space-4) var(--rb-ref-space-6)
              color-mix(in srgb, var(--rb-ref-black) 40%, transparent);
}