/* ==========================================================================
   07 · TEASER 50/50
   Two cards, half the grid each at desktop, full width below. Everything the
   two share — shape, height, padding, the top/bottom split — lives on
   `.rb-teaser50__card`; the modifiers only change the ground.

   The card is its own stacking context (`isolation`), so the photo card's
   art and scrim can sit at z-base while the copy rides at z-raised without
   either escaping into the page's stacking order.
   ========================================================================== */

.rb-teaser50__card {
  /* 6/12 desktop. Tablet (8) and mobile (4) keep the full-width defaults. */
  --rb-span-d: 6;

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--rb-ref-space-7);

  /* 352px — the reference's fixed card height, held at every breakpoint so
     the two cards' footers align. A min, so wrapped copy can still grow it. */
  min-height: 352px;

  padding: var(--rb-ref-space-8);
  border-radius: var(--rb-ref-radius-xl);
  overflow: hidden;
  color: var(--rb-sys-fg-on-dark);
}

.rb-teaser50__card--ink {
  background: var(--rb-sys-bg-dark);
}

/* --- Photo card art -------------------------------------------------------
   Art and scrim are absolute siblings of the copy rather than a wrapped
   `.rb-media` — the card itself is the media box here, and the scrim has to
   sit between the plate and the text.
   -------------------------------------------------------------------------- */
.rb-teaser50__photo {
  position: absolute;
  inset: 0;
  z-index: var(--rb-sys-z-base);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Weighted to the foot of the card, where the CTA needs the contrast. */
.rb-teaser50__scrim {
  position: absolute;
  inset: 0;
  z-index: var(--rb-sys-z-base);
  background-image: linear-gradient(
    color-mix(in srgb, var(--rb-sys-bg-dark) 15%, transparent) 0%,
    color-mix(in srgb, var(--rb-sys-bg-dark) 65%, transparent) 100%
  );
}

/* --- Copy layer ----------------------------------------------------------- */
.rb-teaser50__heading {
  position: relative;
  z-index: var(--rb-sys-z-raised);
  /* 416px — the reference's heading measure inside the 40px-padded card. */
  max-width: 416px;
}

.rb-teaser50__form {
  position: relative;
  z-index: var(--rb-sys-z-raised);
  /* 384px — the reference's capture-field width; shrinks with the card. */
  max-width: 384px;

  /* Lifts the white pill off the ink ground. The shadow rides on the form,
     not on `.rb-field__row` — same pattern (and same reason) as teaser100:
     on the row it displaced the component's `:focus-within` ring by cascade.
     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
     4px grid. Black rather than ink, because ink-on-ink would render as
     nothing. */
  border-radius: var(--rb-ref-radius-full);
  box-shadow: 0 16px 24px color-mix(in srgb, var(--rb-ref-black) 40%, transparent);
}

/* The CTA is a flex item in a stretching column — pin it to its own width. */
.rb-teaser50__cta {
  position: relative;
  z-index: var(--rb-sys-z-raised);
  align-self: flex-start;
}