/* ==========================================================================
   Shared menu-item image treatment
   Used by BOTH the public menu (menu.php via app.css) and the ordering page
   (order.php via order.css) so dish images render identically on both.

   Technique: the dish photo is shown with object-fit:contain (never cropped),
   and a blurred, zoomed copy of the same photo fills the frame behind it so
   portrait / odd-sized / transparent images never show empty bars or a bare
   checkerboard. Each page provides its own frame *sizing* (height / aspect
   ratio / margin); everything below is common and must stay in sync.

   The frame element must set the CSS var --dish-bg to the image url, e.g.
   style="--dish-bg:url('/images/menu/foo.jpg')".
   ========================================================================== */

/* Blurred fill of the same photo behind the contained image. */
.menu-image-frame::before,
.item-card__media::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--dish-bg);
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.97);
    transform: scale(1.18);
    z-index: 0;
}

/* Hide the blur fill when no image url has been provided. */
.menu-image-frame:not([style*="--dish-bg"])::before,
.item-card__media:not([style*="--dish-bg"])::before {
    display: none;
}

/* The actual dish photo, shown whole (never cropped) and centered. */
.menu-dish-image,
.item-card__img {
    position: absolute;
    inset: 0;
    z-index: 1;
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
    filter: saturate(1.04) contrast(1.03);
    padding: 0.4rem;
}