/* Shared photo-hero veil. JS supplies the rendered text edge, never page-specific stops. */
:is(.hero-media, .page-hero-media, .page-hero) {
  --hero-veil-text-end: min(100%, calc(max(24px, (100vw - var(--container, 1220px)) / 2 + 24px) + 760px));
  /* Carry the soft tail into the photo, as in the client's wider reference. */
  --hero-veil-extension: clamp(180px, 26vw, 480px);
  --hero-veil-end: calc(var(--hero-veil-text-end) + var(--hero-veil-extension));
  --hero-veil-late-opacity: 0.35;
  --hero-veil-end-opacity: 0;
  --hero-veil: linear-gradient(90deg,
    rgba(19, 52, 96, 0.9) 0,
    rgba(23, 63, 125, 0.88) calc(var(--hero-veil-end) * 0.25),
    rgba(23, 63, 125, 0.75) calc(var(--hero-veil-end) * 0.55),
    rgba(23, 63, 125, var(--hero-veil-late-opacity)) calc(var(--hero-veil-end) * 0.8),
    rgba(23, 63, 125, var(--hero-veil-end-opacity)) var(--hero-veil-end));
}

/* Extra specificity also wins over the existing critical and deferred page bundles. */
.hero-media.hero-media::after,
.page-hero-media.page-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--hero-veil);
}

/* Narrow heroes put text across the photo; retain contrast over bright areas. */
@media (max-width: 640px) {
  :is(.hero-media, .page-hero-media, .page-hero) {
    --hero-veil-late-opacity: 0.7;
    --hero-veil-end-opacity: 0.65;
  }
}