/**
* aFFirmFirst protected media — frontend layout
*
* Loaded in the on every page, because two of its jobs are races it has
* to win before the browser paints:
* 1. Hide the low-resolution proxy of a protected image, so the plain preview
* never appears even for a frame.
* 2. Give the SDK canvas the box that the theme or builder defined, rather
* than letting the image dictate its own size.
*
* Why the !important rules
* ------------------------
* The SDK writes its sizing directly onto the wrapper it injects
* ([data-af-protected]) as INLINE styles. An author declaration marked
* !important is the only thing that outranks a normal inline declaration, so
* this is the sanctioned way for the page layer to say "the box is mine, not
* the image's".
*/
.affirmfirst-media {
position: relative;
display: block;
width: 100%;
max-width: 100%;
overflow: hidden;
}
/* ── Page-driven box ──────────────────────────────────────────────────────
The slot decides the size (a grid cell, an aspect-ratio wrapper, a hero
section). The canvas fills it and is cropped or letterboxed with object-fit,
never stretched. */
.affirmfirst-media--fit > [data-af-protected] {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
min-height: 0 !important;
aspect-ratio: auto !important;
}
.affirmfirst-media--fit > [data-af-protected] canvas {
width: 100% !important;
height: 100% !important;
max-height: none !important;
object-fit: var(--affirmfirst-fit, cover);
object-position: var(--affirmfirst-position, center);
}
/* ── Image-driven box ─────────────────────────────────────────────────────
The image's own aspect ratio drives the height, exactly like an ordinary
responsive ![]()
. */
.affirmfirst-media--adapt > [data-af-protected] {
width: 100% !important;
max-width: none !important;
min-height: 0 !important;
}
.affirmfirst-media--adapt > [data-af-protected] > canvas {
width: 100% !important;
height: auto !important;
max-height: none !important;
object-fit: contain;
}
/* ── Replaced images ──────────────────────────────────────────────────────
The scanner keeps the original ![]()
in the DOM (sliders and lightboxes read
it back) but it must never paint or take pointer events. */
img[data-af-replaced] {
display: none !important;
}
/* ── Proxy previews ───────────────────────────────────────────────────────
An image the author picked with WordPress's own media manager, rendered from
the low-resolution proxy. The scanner replaces it with the protected canvas,
but that can only run after the document parses — without this rule the plain
preview paints first. `visibility` (not `display`) so the surrounding layout
is unchanged while the canvas is on its way. */
img[src*="affirmfirst_"],
img[srcset*="affirmfirst_"],
img[data-src*="affirmfirst_"],
img[data-srcset*="affirmfirst_"],
img[data-lazy-src*="affirmfirst_"] {
visibility: hidden;
}
/* Same image used as an inline CSS background — how most page builders render
section and hero backgrounds. */
[style*="affirmfirst_"] {
background-image: none !important;
}