/**
 * seamlessmd-block-base — shared base wrapper class.
 *
 * Used by every seamlessmd/* block via the shared PHP / JS / CSS mixin
 * documented in _base/render-helpers.php. Provides:
 *
 *   - .seamlessmd-block-base
 *       Stable hook class on every seamlessmd block root.
 *       Inert by itself (no layout effect).
 *
 *   - .seamlessmd-block-base--has-bg-image
 *       Opt-in when the block has a backgroundImage attribute set.
 *       Paints the image via a ::before pseudo-element pinned to the
 *       block's bounding box. The pseudo-element approach lets us:
 *         a) flip the bg image independently of the block's text
 *            content (see --bg-flip-h / --bg-flip-v below),
 *         b) layer a backgroundColor underneath as a fallback / tint,
 *         c) keep block-specific decorative ::before / ::after layers
 *            free (this rule only fires when the modifier class is
 *            present).
 *
 *   - .seamlessmd-block-base--bg-flip-h / --bg-flip-v
 *       Horizontal / vertical flip on the bg layer only.
 *
 * CSS variables driven from render.php (see seamlessmd_block_base_styles):
 *
 *   --seamlessmd-block-base-bg-image       url('...')
 *   --seamlessmd-block-base-bg-position    CSS background-position keyword
 *
 * Padding values are emitted directly as inline `padding-{top|right|bottom|left}`
 * declarations on the block root — they don't need CSS-var indirection.
 */

.seamlessmd-block-base {
	/* Intentionally empty — stable hook class. */
}

/* Stacking-context anchor: any block that paints a bg-image OR an overlay
 * opts into its own isolated stacking context. The pseudo-element layers
 * below sit at negative z-index relative to the block content. With
 * `isolation: isolate`, the negative-z pseudos can't escape behind elements
 * outside this block. */
.seamlessmd-block-base--has-bg-image,
.seamlessmd-block-base--has-overlay {
	position: relative;
	isolation: isolate;
}

/* Layer 1 (back) — background image on `::before`. Painted via CSS-var so
 * editors only need to set `backgroundImage` to swap art. `z-index: -2`
 * sits behind the overlay (`-1`) and the block content (default `auto`,
 * which means "0 within the isolated stacking context"). Flip toggles
 * operate on this layer ONLY — block text stays unflipped. */
.seamlessmd-block-base--has-bg-image::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background-image: var(--seamlessmd-block-base-bg-image);
	background-position: var(--seamlessmd-block-base-bg-position, center);
	background-size: var(--seamlessmd-block-base-bg-size, contain);
	background-repeat: no-repeat;
}

/* Layer 2 (middle) — overlay on `::after`. Composed from THREE
 * editor-controlled inputs:
 *   --seamlessmd-block-base-overlay-color   (background-color)
 *   --seamlessmd-block-base-overlay-image   (background-image)
 *   --seamlessmd-block-base-overlay-opacity (CSS opacity, 0.0–1.0)
 *
 * background-color paints first; background-image stacks on top (cover,
 * centered) when both are set. opacity fades the whole pseudo together
 * so an editor can dial in (say) a navy tint at 60% over a busy hero
 * photo for legibility.
 *
 * z-index: -1 sits IN FRONT of the bg-image (z -2) and BEHIND the
 * block's content (default 0 inside the isolated stacking context).
 *
 * Use the `--has-overlay` modifier class to opt in — the pseudo is not
 * painted for blocks without an overlay. Var fallbacks (transparent /
 * none / 1) match "no override" semantics so a block can set just one
 * of the three inputs without breaking the others. */
.seamlessmd-block-base--has-overlay::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: var(--seamlessmd-block-base-overlay-color, transparent);
	background-image: var(--seamlessmd-block-base-overlay-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: var(--seamlessmd-block-base-overlay-opacity, 1);
}

.seamlessmd-block-base--has-bg-image.seamlessmd-block-base--bg-flip-h::before {
	transform: scaleX(-1);
}

.seamlessmd-block-base--has-bg-image.seamlessmd-block-base--bg-flip-v::before {
	transform: scaleY(-1);
}

.seamlessmd-block-base--has-bg-image.seamlessmd-block-base--bg-flip-h.seamlessmd-block-base--bg-flip-v::before {
	transform: scale(-1, -1);
}