﻿/* =========================================================
   ChapResto Menu Card Image - Final Clean Fill
   Use this for public food cards.
   Goal:
   - no white side gaps
   - image fills the card top
   - clean commercial display
   - small premium hover zoom
   ========================================================= */

/* Main image containers */
.rs-menu-gallery-image,
.rs-post-img,
.cr-menu-img {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background-color: #efe3d3 !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

    /* Real visible image layer: fills card */
    .rs-menu-gallery-image::before,
    .rs-post-img::before,
    .cr-menu-img::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background-image: inherit;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        transform: scale(1);
        transition: transform .22s ease, filter .22s ease;
        pointer-events: none;
    }

/* Small hover zoom */
.rs-menu-gallery-card:hover .rs-menu-gallery-image::before,
.rs-recommended-menu-card:hover .rs-menu-gallery-image::before,
.rs-post-card:hover .rs-post-img::before,
.cr-menu-card:hover .cr-menu-img::before {
    transform: scale(1.045);
    filter: saturate(1.05) contrast(1.02);
}

/* Soft overlay */
.rs-menu-gallery-image::after,
.rs-post-img::after,
.cr-menu-img::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0, 0, 0, .01), rgba(0, 0, 0, .07));
    pointer-events: none;
}

/* Fixed image heights */
.rs-menu-gallery-image,
.cr-menu-img {
    height: 170px !important;
    border-radius: 20px 20px 0 0 !important;
}

.rs-recommended-menu-card .rs-menu-gallery-image {
    height: 170px !important;
    border-radius: 20px 20px 0 0 !important;
}

.rs-post-img {
    height: 220px !important;
    border-radius: 20px 20px 0 0 !important;
}

/* Keep badges above image layers */
.rs-menu-discount,
.rs-publication-label,
.rs-publication-discount,
.cr-badge {
    position: absolute;
    z-index: 5 !important;
}

/* No-image fallback */
.rs-menu-gallery-image:not([style*="background-image"]),
.rs-post-img:not([style*="background-image"]),
.cr-menu-img:not([style*="background-image"]) {
    background-image: radial-gradient(circle at 30% 22%, rgba(224, 95, 32, .18), transparent 28%), linear-gradient(135deg, #f8e5d2, #fff8f0) !important;
}

    .rs-menu-gallery-image:not([style*="background-image"])::before,
    .rs-post-img:not([style*="background-image"])::before,
    .cr-menu-img:not([style*="background-image"])::before {
        display: none;
    }

/* Card cleanup */
.rs-menu-gallery-card,
.rs-recommended-menu-card,
.cr-menu-card,
.rs-post-card {
    overflow: hidden !important;
}

/* Keep card body above image area if needed */
.rs-menu-gallery-body,
.cr-menu-card-body,
.rs-post-body {
    position: relative;
    z-index: 3;
}

/* Mobile */
@media (max-width: 640px) {
    .rs-menu-gallery-image,
    .rs-recommended-menu-card .rs-menu-gallery-image,
    .cr-menu-img {
        height: 155px !important;
    }

    .rs-post-img {
        height: 190px !important;
    }
}
