/* ════════════════════════════════════════════════════════════════════════
   zImage_demo.css — a ONE-OFF dressed-up image (opt in: zBrush [page, leaf, zImage_demo]).
   Proof of how far a zImage reskins purely through your own _zClass on the canonical
   surface — here a gallery polaroid. _zClass lands on the inner <img>; the white mat,
   tilt and handwritten caption are reached via figure:has(> img.zImage-polaroid) so it
   touches NOTHING else on the page. Bifrost-only — the terminal prints plain metadata.
   ════════════════════════════════════════════════════════════════════════ */

/* the frame — the captioned <figure> wrapping our tagged <img> */
figure:has(> img.zImage-polaroid) {
    max-width:     360px;
    margin:        1.5rem auto;
    padding:       14px 14px 0;
    background:    #fbfbf5;
    border-radius: 3px;
    box-shadow:    0 14px 34px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
    transform:     rotate(-1.6deg);
    transition:    transform 0.25s ease, box-shadow 0.25s ease;
}
figure:has(> img.zImage-polaroid):hover {
    transform:  rotate(0deg) scale(1.02);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.35);
}

/* the photo itself */
img.zImage-polaroid {
    display:    block;
    width:      100%;
    height:     auto;
    border-radius: 1px;
}

/* the handwritten caption strip — the polaroid chin */
figure:has(> img.zImage-polaroid) > figcaption {
    margin:         0;
    padding:        0.9rem 0.4rem 1.1rem;
    font-family:    'Bradley Hand', 'Segoe Print', 'Comic Sans MS', cursive;
    font-size:      1.05rem;
    color:          #2b2b2b;
    text-align:     center;
    -webkit-text-fill-color: #2b2b2b;
}