/**
 * Page Designer — SFX "Bevel Relief" content-safe surface layer  (pd-bvx)
 *
 * Renders a premium bevel on a dedicated ::before layer that paints BETWEEN
 * the element's own background and its content:
 *   - the element gets `isolation: isolate` → its own stacking context
 *   - the ::before sits at `z-index:-1` → above the element background,
 *     below every child (text / images / nested blocks)
 * Result: the bevel decorates the box surface and the contents are NEVER
 * touched — no `filter` on the element, no restyle of any child. This is the
 * same content-above guarantee PD's FX engine uses (see assets/blocks/fx/fx.css),
 * achieved here without even lifting the children.
 *
 * The variable parts (box-shadow geometry, sheen gradient) arrive as inline
 * CSS custom properties (--pd-bvx-shadow / --pd-bvx-sheen) computed per
 * component by bevel_relief_runtime.js from the persisted data-pd-bvx-* attrs.
 * This file is the static skeleton only.
 *
 * Strict isolation: every selector keyed on [data-pd-bvx-on] + the dedicated
 * --pd-bvx-* custom properties. Shares no class / property with any other tool.
 * (`position: relative` is applied by the runtime, and only when the element is
 *  otherwise static, so an author-set absolute/fixed/sticky box is never moved.)
 */

[data-pd-bvx-on="1"] {
    isolation: isolate;
}

[data-pd-bvx-on="1"]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;       /* follow the box's own rounded corners */
    z-index: -1;                  /* above element bg, below all content   */
    pointer-events: none;         /* clicks / text selection pass through  */
    box-shadow: var(--pd-bvx-shadow, none);   /* Bevel (raised) + Sheen     */
    background-image: var(--pd-bvx-sheen, none);
}

/* Emboss layer — the SAME feSpecularLighting specular as the Text SFX emboss,
   applied to THIS layer (not the element). The runtime fills it with an opaque
   alpha source (--pd-bvx-emb-src) purely to drive the filter; the filter
   outputs ONLY the specular relief (no source graphic), so the box's real
   background shows through and the relief paints behind all content. */
[data-pd-bvx-on="1"]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;                  /* above element bg, below all content   */
    pointer-events: none;
    background: var(--pd-bvx-emb-src, transparent);
    filter: var(--pd-bvx-emb-filter, none);
}