/* ──────────────────────────────────────────────────────────────────
   Page Designer — Section Slider · Layers Runtime Styles
   (pd-sl-lyr-rt-*)

   Base positioning + sizing for floating layer DOM rendered by
   slider_section_layers.js. The per-pattern keyframes (entry/idle/exit)
   are injected at runtime into a <style data-pd-sl-lyr-css> in the host
   document — they live there, not here.

   Pointer-events:none on the root means layers never trap clicks meant
   for inner blocks (grid-placed Heading/Text/Buttons stay clickable).
   ────────────────────────────────────────────────────────────────── */

/* Per-slide overlay container — sized to the full slide box.
   The slide itself is `display: grid` with `grid-template-rows: repeat(N, 1fr)`,
   so an absolutely-positioned child placed *implicitly* into a grid cell
   would collapse to that cell's 0-height static area. We pin the root to
   span ALL grid rows + columns (`grid-area: 1 / 1 / -1 / -1`) so the
   grid container itself becomes its containing block — giving it the
   full slide width × full slide height. Inset:0 then resolves correctly.
   z-index sits above the slide bg / video / FX surface but below grid-
   placed inner blocks (which stack at z >= 10 via .gjs-cell flex). */
.pd-sl-rt-slide > .pd-sl-lyr-rt-root {
    grid-row:    1 / -1;
    grid-column: 1 / -1;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

/* Per-layer wrapper — owns position, size, opacity, z-order. */
.pd-sl-rt-slide > .pd-sl-lyr-rt-root > .pd-sl-lyr-rt-layer {
    position: absolute;
    /* The runtime sets left/top in %; the anchor offset is a CSS variable
       so the per-frame transform on .pd-sl-lyr-rt-content doesn't fight
       with positioning. */
    transform: translate(var(--pd-sl-lyr-anchor-tx, -50%), var(--pd-sl-lyr-anchor-ty, -50%));
    transform-origin: center center;
    will-change: opacity;
    pointer-events: none;
}

/* Per-layer content node — owns the per-frame animation (transform,
   filter, opacity, clip-path). Wrapper holds position, content holds
   motion. */
.pd-sl-lyr-rt-content {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: center center;
    will-change: transform, filter, opacity, clip-path;
    backface-visibility: hidden;
}

/* Image content — preserve aspect ratio of source. */
.pd-sl-lyr-rt-layer--image > .pd-sl-lyr-rt-content {
    object-fit: contain;
    object-position: center;
}

/* SVG layers — inner <svg> is forced to width:100% by the runtime so
   the wrapper width drives the rendered size. */
.pd-sl-lyr-rt-layer--svg > .pd-sl-lyr-rt-content > svg {
    display: block;
}

/* Text layers — let the runtime stamp font-size / color / weight, just
   provide a sensible default container. */
.pd-sl-lyr-rt-layer--text > .pd-sl-lyr-rt-content {
    font-family: inherit;
    font-size: 24px;
    color: inherit;
    line-height: 1.15;
    white-space: pre-wrap;          /* honour newlines from textarea */
    max-width: 100%;
}

/* Auto-width image/SVG layers (w:auto) — keep them from overflowing. */
.pd-sl-lyr-rt-layer[style*="width: auto"] > .pd-sl-lyr-rt-content {
    max-width: 100%;
    max-height: 100%;
}

/* Reduced-motion safety: hide the per-frame will-change hints to
   reduce GPU layer count when the user has reduced-motion on. */
@media (prefers-reduced-motion: reduce) {
    .pd-sl-lyr-rt-content { will-change: opacity; }
}