/**
 * Page Designer — Liquid Image Block | Namespace: pd-blk-dim-*
 * v1.0.0 (introduced in PAGE_DESIGNER_VERSION 2.9.891)
 *
 * Block styling for [data-pd-block="dispimage"]. Loaded into both the
 * editor canvas (via the block-CSS loop in editor.php) and the
 * published page (same loop renders <link>s for every entry in
 * _registry.json). All selectors live under .pd-blk-dim-* — no
 * shared classes with any other block / panel / tool.
 *
 * RENDER MODEL
 * ------------
 *   .pd-blk-dim                    — root (carries data-pd-* attrs)
 *     .pd-blk-dim-stage            — positioned container, aspect ratio
 *       img.pd-blk-dim-img         — source image (visible in idle / fallback)
 *       canvas.pd-blk-dim-canvas   — WebGL surface (curtains.js binds here)
 *       .pd-blk-dim-fallback       — never-shown overlay; available for
 *                                    future themes / canvas-only chrome.
 *
 *   While `.pd-blk-dim-ready` is present, curtains.js is animating
 *   inside the canvas and visually covers the static <img>. While
 *   `.pd-blk-dim-static` is present (reduced-motion, no-hover, WebGL
 *   blocked, or downgraded by the 3-context cap), the <img> remains
 *   visible and the canvas is hidden.
 */

/* ── Root: vertical-rhythm anchor ───────────────────────────────── */
.pd-blk-dim {
    position: relative;
    width: 100%;
    margin: 0 auto;
    font-family: inherit;
}

/* ── Stage: square-ish aspect by default; CSS aspect-ratio handles
   responsive while the inner canvas + img stretch via absolute fill. ── */
.pd-blk-dim-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: inherit;
    background: var(--pd-blk-dim-bg, #0a0a0a);
    -webkit-mask-image: radial-gradient(#000, #000); /* iOS overflow-hidden + transform fix */
    isolation: isolate;
}

/* ── Image: static fallback + curtains' DOM-bound source.
   When the canvas is up the curtains plane renders ON TOP, so the
   underlying <img> can stay laid out (curtains reads its bbox).
   Hidden visually via opacity once the canvas is rendering. ── */
.pd-blk-dim-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1;
    transition: opacity 0.4s ease;
}
.pd-blk-dim.pd-blk-dim-ready .pd-blk-dim-img {
    opacity: 0;
}
.pd-blk-dim.pd-blk-dim-static .pd-blk-dim-img {
    opacity: 1;
}

/* ── Canvas: covers the stage, fades in when curtains is ready. ── */
.pd-blk-dim-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.pd-blk-dim.pd-blk-dim-ready .pd-blk-dim-canvas {
    opacity: 1;
}
.pd-blk-dim.pd-blk-dim-static .pd-blk-dim-canvas {
    opacity: 0 !important;
    /* Static fallback: WebGL unavailable, reduced-motion, no-hover, or
       downgraded by the 3-context cap. Force the canvas hidden so the
       <img> reads cleanly. Specificity bump justified — defends
       against panel-applied Design styles. */
}

/* Curtains injects a child <canvas> inside our placeholder element if
   `container` was given a selector instead of an element. Make sure
   any injected canvas also fills the stage. */
.pd-blk-dim-canvas > canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
    /* !important here is the documented "defensive override" exception —
       curtains writes inline width/height in pixels every resize, and
       without this rule the canvas can briefly desync with its
       container on first ResizeObserver tick. */
}

/* ── Decorative fallback overlay (reserved hook, hidden by default) ── */
.pd-blk-dim-fallback {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: none;
}

/* ── Reduced motion + touch — pin static state ──────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pd-blk-dim-canvas { opacity: 0 !important; }
    .pd-blk-dim-img    { opacity: 1 !important; }
}
@media (hover: none) {
    .pd-blk-dim-canvas { opacity: 0 !important; }
    .pd-blk-dim-img    { opacity: 1 !important; }
}

/* ── Editor-canvas-only chrome ──────────────────────────────────── */
/* GrapesJS strips [data-gjs-type] at save; rules below only fire
   inside the editor and never reach the published page. */
[data-gjs-type="pd-dispimage"] {
    /* Selection ring buffer so the user can click the root vs a
       nested column without grabbing the parent. */
    min-height: 120px;
}
[data-gjs-type="pd-dispimage"] .pd-blk-dim-stage::after {
    content: 'Liquid Image — hover on the published page';
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    padding: 4px 9px;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #cdd6f4;
    background: rgba(17, 17, 27, 0.78);
    border: 1px solid rgba(137, 180, 250, 0.35);
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
[data-gjs-type="pd-dispimage"]:hover .pd-blk-dim-stage::after {
    opacity: 1;
}

/* Responsive — collapse aspect for very narrow widths. */
@media (max-width: 480px) {
    .pd-blk-dim-stage { aspect-ratio: 4 / 3; }
}