/* Decorative Brand Assets
   Sits above background colour/image/video but below text, pictures, cards.
   Two stacking strategies depending on section structure:
   - Hero sections have z-indexed children (bg=0, overlay=1, content=2).
     Brand asset sits at z=1 alongside the overlay so it's above the bg image
     but below the content.
   - All other sections have in-flow content with no explicit z-index.
     The section gets isolation:isolate so we can use z-index:-1 on the asset
     to push it behind in-flow content while staying contained in the section. */

section[data-brand-section] {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}

section[data-brand-section]:has(.brand-asset--bridge) {
  overflow: visible !important;
  isolation: auto;
}

.brand-asset {
  position: absolute;
  pointer-events: none;
  user-select: none;
  /* Default for non-hero sections: behind in-flow content, above section bg */
  z-index: -1;
  width: 14%;
  height: auto;
  opacity: var(--ba-opacity, 0.20);
  transition: opacity 0.3s ease;
  image-rendering: -webkit-optimize-contrast;
  transform: translate(var(--ba-tx, 0%), var(--ba-ty, 0%)) scale(var(--ba-scale, 1));
}

/* Hero exception: hero__bg has z-index:0, hero__overlay has z-index:1,
   hero__content has z-index:2. Place asset between bg and overlay. */
section[class*='hero'][data-brand-section] .brand-asset,
section.home-footer-cta[data-brand-section] .brand-asset {
  z-index: 1;
}

/* When bridging, the asset must paint OVER neighbouring section
   backgrounds in either direction — promote z-index above -1. */
.brand-asset--bridge {
  z-index: 1;
}
/* Bridge + layer-front (watermark mode) stays at 100 */
.brand-asset--bridge.brand-asset--layer-front {
  z-index: 100;
}

.brand-asset--top-left      { top:    0; left:  0; transform-origin: top left;     }
.brand-asset--top-right     { top:    0; right: 0; transform-origin: top right;    }
.brand-asset--bottom-left   { bottom: 0; left:  0; transform-origin: bottom left;  }
.brand-asset--bottom-right  { bottom: 0; right: 0; transform-origin: bottom right; }

/* Bigger on small screens.

   width is a percentage of the section, and a section is ~1200px on desktop but
   ~350px on a phone — so 14% is roughly a third of the size in absolute terms
   and the mark stops registering against phone-sized type. Stays a percentage
   so the per-placement Scale control still means the same thing.

   768 and 540 are breakpoints the site already uses elsewhere. */
@media (max-width: 768px) {
  .brand-asset { width: 22%; }
}
@media (max-width: 540px) {
  .brand-asset { width: 28%; }
}
@media print {
  .brand-asset { display: none !important; }
}

/* Layer override: 'front' lifts the asset above all section content (watermark mode). */
.brand-asset--layer-front {
  z-index: 100 !important;
}

/* Layer override: 'behind' must win even when bridging.

   .brand-asset--bridge raises z-index to 1 so the asset paints over the
   neighbouring section — that is what bridging means. But at z-index 1 it also
   covers this section's own text, ignoring the Layer select.

   Dropping it to -1 is not the answer: a negative z-index only stays inside
   this section if the section forms a stacking context, and that same stacking
   context is what stops it spilling over the neighbour. Containment and
   bridging are one switch, pulled opposite ways.

   So raise this section's content above the asset instead. The asset keeps a
   positive z-index and still bridges; the text simply sits on top of it. */
.brand-asset--bridge.brand-asset--layer-behind {
  z-index: 1;
  /* NOTE: this combination cannot fully work — see the comment above. The
     asset sits above the neighbouring section it bridges into, so over that
     neighbour it reads as a watermark rather than a backdrop. Kept because
     placements already saved this way still need sane behaviour; the CMS
     now greys Bridge out while Behind is selected so no NEW ones appear. */
}
section[data-brand-section]:has(.brand-asset--bridge.brand-asset--layer-behind) > *:not(.brand-asset) {
  position: relative;
  z-index: 2;
}

/* Not bridging: the asset is contained by the section's own stacking context,
   so a negative z-index does the job on its own. Stated explicitly rather than
   left to the .brand-asset default, which nobody can see is load-bearing. */
.brand-asset--layer-behind:not(.brand-asset--bridge) {
  z-index: -1;
}

/* A widget above the section pushes the mark down.

   The announcement banner renders as the section's first child. On desktop it
   is a thin strip and a top-anchored mark still reads around it; on a phone it
   is a tall card that covers the mark completely.

   The <img> already sits in the DOM immediately after the widget slot, so
   `top: auto` resolves to its static position — directly below the banner —
   without anything needing to know how tall the banner is. Horizontal anchoring
   is untouched, and sections with no widget are unaffected because :has()
   only matches when the slot actually rendered (an empty slot renders nothing). */
@media (max-width: 768px) {
  section[data-brand-section]:has(> .widget-slot--section_above) > .brand-asset--top-left,
  section[data-brand-section]:has(> .widget-slot--section_above) > .brand-asset--top-right {
    top: auto;
  }
}