/* overlay — the shared image overlay treatments.
   ---------------------------------------------------------------------------
   TWO blocks register the SAME six values for an image overlay:

     call_to_action     row_background_overlay_style  -> .call-to-action-overlay-{v}
     testimonial        overlay_style                 -> .testimonial-image-overlay-{v}

   Both offer none / blue-red / teal-blue / grey / 50grey / blur, which is
   strong evidence one overlay system was designed and only half-built: neither
   block had a single rule for any of the six until August 2026.

   The two class PREFIXES differ and are NOT renamed here. The prefix is a
   template literal and the stored ACF value is only the suffix, so renaming
   would be safe for the database, but it would break any per-page Custom CSS
   already written against either family. Both are carried instead, and the
   treatment is declared once with a selector list rather than duplicated.

   Colour is token-only. Alpha rides on opacity on the pseudo element rather
   than rgba(), so no -rgb token is needed and no literal appears.

   The host must establish a containing block or the ::before escapes it.
   .call-to-action already sets position: relative; .testimonial-image did not,
   so it is set below. */

.testimonial-image { position: relative; }

.call-to-action-overlay-blue-red::before,
.call-to-action-overlay-teal-blue::before,
.call-to-action-overlay-grey::before,
.call-to-action-overlay-50grey::before,
.call-to-action-overlay-blur::before,
.testimonial-image-overlay-blue-red::before,
.testimonial-image-overlay-teal-blue::before,
.testimonial-image-overlay-grey::before,
.testimonial-image-overlay-50grey::before,
.testimonial-image-overlay-blur::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.call-to-action-overlay-blue-red::before,
.testimonial-image-overlay-blue-red::before {
  background: linear-gradient(135deg, var(--blue) 0%, var(--surface-brand) 100%);
  opacity: .82;
}

/* --teal is only defined by dc and nlc. The other four brands fall back to
   --navy, which keeps a real dark-to-light gradient rather than dropping the
   whole declaration as invalid. Give a brand its own --teal to change this. */
.call-to-action-overlay-teal-blue::before,
.testimonial-image-overlay-teal-blue::before {
  background: linear-gradient(135deg, var(--teal, var(--navy)) 0%, var(--blue) 100%);
  opacity: .82;
}

/* backdrop-filter acts on what is painted behind the pseudo element, i.e. the
   host's own background image or <img>. A filter on the element itself would
   take the panel text with it. */
.call-to-action-overlay-grey::before,
.testimonial-image-overlay-grey::before     { backdrop-filter: grayscale(1); }

.call-to-action-overlay-50grey::before,
.testimonial-image-overlay-50grey::before   { backdrop-filter: grayscale(.5); }

.call-to-action-overlay-blur::before,
.testimonial-image-overlay-blur::before     { backdrop-filter: blur(6px); }

/* `none` is a real choice meaning no treatment. Declared so the class is not an
   unstyled unknown, and so a later blanket ::before cannot leak into it. */
.call-to-action-overlay-none::before,
.testimonial-image-overlay-none::before { content: none; }

/* Content must sit above whichever treatment is active. */
.call-to-action-panel { z-index: 1; }