/* =============================================================================
   apb-rx contrast primitive — text-over-image legibility guarantee
   -----------------------------------------------------------------------------
   A reusable scrim / fade bed + safe-zone aim for the newer apb-rx-* recipes,
   mirroring the older apb-pg-* system in layouts.css. Drop a scrim LAYER between
   a full-bleed media layer and the copy layer; a `apb-rx-safe-*` modifier on the
   container aims the scrim so its solid end sits under the copy.

   Pairs 1:1 with the background-seed taste facets (taste-library):
     seed.text_safe  -> .apb-rx-safe-{left,right,top,bottom,center}
     seed.luminance  -> dark  : light text, scrim optional (.apb-rx-scrim--soft)
                        light : dark text  (.apb-rx-scrim--light)
                        mixed : a scrim is required (.apb-rx-scrim / --light)
     seed.focal      -> --apb-rx-focal (object-position of the media img)

   Tokens (all optional, sane fallbacks):
     --apb-rx-scrim-color  dark end of the scrim              (rgba(8,10,18,.82))
     --apb-rx-scrim-angle  linear direction, 0deg = bottom-up (aimed by safe-*)
     --apb-rx-scrim-stop   where the scrim fades to clear      (74%)
     --apb-rx-bed          fade target for .apb-rx-fade        (--apb-rx-surface)
     --apb-rx-focal        media object-position               (50% 50%)
   No literals for brand-tinted values, no !important.
   ============================================================================= */

/* ---- scaffold: a positioned media stage (opt-in; recipes may bring their own) ---- */
.apb-rx-mediastage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--apb-rx-radius, 16px);
  background: var(--apb-rx-bed, var(--apb-rx-ink, #0b0d12));
}
.apb-rx-mediastage > .apb-rx-media,
.apb-rx-media--bleed {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.apb-rx-media--bleed > img,
.apb-rx-media--bleed > video,
.apb-rx-mediastage > .apb-rx-media > img,
.apb-rx-mediastage > .apb-rx-media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--apb-rx-focal, 50% 50%);
  display: block;
}

/* ---- the contrast guarantee: a gradient bed under the text ---- */
.apb-rx-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* fallback (no color-mix): a two-stop gradient still guarantees a bed */
  background: linear-gradient(
    var(--apb-rx-scrim-angle, 0deg),
    var(--apb-rx-scrim-color, rgba(8, 10, 18, 0.82)) 0%,
    transparent var(--apb-rx-scrim-stop, 74%)
  );
  background: linear-gradient(
    var(--apb-rx-scrim-angle, 0deg),
    var(--apb-rx-scrim-color, rgba(8, 10, 18, 0.82)) 0%,
    color-mix(in srgb, var(--apb-rx-scrim-color, rgba(8, 10, 18, 0.82)) 40%, transparent) 42%,
    transparent var(--apb-rx-scrim-stop, 74%)
  );
}
/* centred vignette — for centre-anchored copy (pair with .apb-rx-safe-center) */
.apb-rx-scrim--radial {
  background: radial-gradient(
    closest-side at 50% 50%,
    color-mix(in srgb, var(--apb-rx-scrim-color, rgba(8, 10, 18, 0.82)) 60%, transparent),
    var(--apb-rx-scrim-color, rgba(8, 10, 18, 0.82))
  );
  /* fallback for no color-mix */
  background: radial-gradient(closest-side at 50% 50%, rgba(8, 10, 18, 0.5), var(--apb-rx-scrim-color, rgba(8, 10, 18, 0.82)));
}
/* strength presets */
.apb-rx-scrim--soft   { --apb-rx-scrim-color: rgba(8, 10, 18, 0.52); }
.apb-rx-scrim--strong { --apb-rx-scrim-color: rgba(8, 10, 18, 0.92); }
/* light scrim — a bright bed for DARK text over a light-but-busy background (seed.luminance:light).
   Plain rgba fallback FIRST: if color-mix is unsupported and the token held a color-mix value, the var
   would fall back to the DARK default and the light scrim would silently invert (dark bed under dark
   text = invisible). The @supports layer upgrades to a surface-derived tint where available. */
.apb-rx-scrim--light  { --apb-rx-scrim-color: rgba(248, 250, 252, 0.88); }
@supports (color: color-mix(in srgb, white, transparent)) {
  .apb-rx-scrim--light { --apb-rx-scrim-color: color-mix(in srgb, var(--apb-rx-surface, #fff) 88%, transparent); }
}

/* fade the media INTO the tile's solid bed (no hard rectangle, guaranteed text bed) */
.apb-rx-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    var(--apb-rx-fade-angle, 180deg),
    transparent 38%,
    var(--apb-rx-bed, var(--apb-rx-surface, #fff)) 84%
  );
  background: linear-gradient(
    var(--apb-rx-fade-angle, 180deg),
    transparent 38%,
    color-mix(in srgb, var(--apb-rx-bed, var(--apb-rx-surface, #fff)) 55%, transparent) 60%,
    var(--apb-rx-bed, var(--apb-rx-surface, #fff)) 84%
  );
}

/* ---- copy layer (opt-in) ---- */
.apb-rx-mediastage > .apb-rx-copy,
.apb-rx-copy--over {
  position: relative;
  z-index: 2;
  color: var(--apb-rx-on-image, #fff);
}

/* ---- safe-zone: ONE class on the container aims the scrim AND (opt-in) places the copy ----
   The angle points the scrim's solid end at the safe zone; no fragile sibling combinators. */
.apb-rx-safe-left   { --apb-rx-scrim-angle: 90deg; }
.apb-rx-safe-right  { --apb-rx-scrim-angle: 270deg; }
.apb-rx-safe-top    { --apb-rx-scrim-angle: 180deg; }
.apb-rx-safe-bottom { --apb-rx-scrim-angle: 0deg; }
.apb-rx-safe-center { /* pair with .apb-rx-scrim--radial; copy centred by the recipe */ }

/* opt-in copy placement for a .apb-rx-mediastage that uses the safe classes */
.apb-rx-mediastage.apb-rx-safe-left   > .apb-rx-copy { position: absolute; left: 0; top: 50%; transform: translateY(-50%); max-width: var(--apb-rx-copy-max, 46%); padding: clamp(1.25rem, 3vw, 2.75rem); }
.apb-rx-mediastage.apb-rx-safe-right  > .apb-rx-copy { position: absolute; right: 0; top: 50%; transform: translateY(-50%); max-width: var(--apb-rx-copy-max, 46%); padding: clamp(1.25rem, 3vw, 2.75rem); text-align: right; }
.apb-rx-mediastage.apb-rx-safe-top    > .apb-rx-copy { position: absolute; top: 0; left: 0; right: 0; padding: clamp(1.25rem, 3vw, 2.75rem); }
.apb-rx-mediastage.apb-rx-safe-bottom > .apb-rx-copy { position: absolute; bottom: 0; left: 0; right: 0; padding: clamp(1.25rem, 3vw, 2.75rem); }
.apb-rx-mediastage.apb-rx-safe-center > .apb-rx-copy { max-width: var(--apb-rx-copy-max, 760px); margin-inline: auto; text-align: center; }

/* light-scrim companion: dark text when a light bed is used */
.apb-rx-scrim--light ~ .apb-rx-copy,
.apb-rx-copy--on-light { --apb-rx-on-image: var(--apb-rx-ink, #0b0d12); color: var(--apb-rx-ink, #0b0d12); }

@media (prefers-reduced-motion: reduce) {
  /* scrims are static — nothing to disable; declared for parity with the pg system */
  .apb-rx-scrim, .apb-rx-fade { transition: none; }
}