/* =========================================================
   MAMMA'S BURGER — IMAGE SYSTEM V1.0
   All important visual areas use the same automatic fitting rule.
   Replace the file, not the CSS/HTML.
   ========================================================= */

.image-frame {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
}

/* Universal rule: complete image, centered, never cropped. */
.image-frame > img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
    transform: none;
    filter: none;
    mix-blend-mode: normal;
    opacity: 1;
}

/* HERO — red cinema card. Image only; logo is also an image. */
.drive-in.image-frame--hero {
    width: min(510px, 90%);
    aspect-ratio: 4 / 5;
    padding: 52px 38px 42px;
    background: var(--mamma-red);
    border: 10px solid var(--mamma-black);
    box-shadow: 22px 22px 0 var(--mamma-gray);
    transform: rotate(2.4deg);
    isolation: isolate;
}

.drive-in.image-frame--hero::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 2px solid rgba(255,255,255,.55);
    pointer-events: none;
    z-index: 3;
}

.hero-product-image {
    position: absolute;
    inset: 52px 38px 38px;
    width: calc(100% - 76px) !important;
    height: calc(100% - 90px) !important;
    z-index: 1;
}

.hero-product-logo {
    position: absolute !important;
    top: 32px;
    left: 38px;
    width: 115px !important;
    height: 55px !important;
    z-index: 4;
    object-fit: contain !important;
}

/* PRODUCT CARDS — clean red image area, no labels over photography. */
.poster-card__image.image-frame--product {
    aspect-ratio: 4 / 4.8;
    background: var(--mamma-red);
    padding: 28px;
    isolation: isolate;
}

.poster-card__image.image-frame--product::before,
.poster-card__image.image-frame--product::after,
.poster-card__image.image-frame--product span {
    display: none !important;
    content: none !important;
}

.poster-card__image.image-frame--product > img {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    z-index: 1 !important;
}

.poster-card:hover .poster-card__image.image-frame--product > img {
    transform: scale(1.035) !important;
}

/* MORE THAN A BURGER — image instead of dark/empty artwork. */
.brand-story__character.image-frame--experience {
    min-height: 560px;
    background: var(--mamma-red);
    box-shadow: 18px 18px 0 var(--mamma-red);
    padding: 32px;
    isolation: isolate;
}

.brand-story__character.image-frame--experience::before {
    content: "";
    position: absolute;
    inset: 28px;
    border: 2px solid rgba(255,255,255,.55);
    pointer-events: none;
    z-index: 3;
}

.brand-story__character.image-frame--experience > img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Editorial strip remains an editorial image, but follows the same complete-image rule. */
.retro-strip__image {
    display: grid;
    place-items: center;
    background: var(--mamma-red);
}

.retro-strip__image::before {
    display: none;
}

.retro-strip__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
    mix-blend-mode: normal;
    filter: none;
}

/* Prevent old V0.x decorative rules from adding visible text to image slots. */
.drive-in__burst,
.drive-in__title,
.drive-in__meta,
.drive-in__logo-plate,
.drive-in__product-slot,
.visual-slot-label,
.visual-placeholder {
    display: none !important;
}

@media (max-width: 900px) {
    .drive-in.image-frame--hero {
        width: min(470px, 88%);
    }

    .brand-story__character.image-frame--experience {
        min-height: 470px;
    }
}

@media (max-width: 560px) {
    .drive-in.image-frame--hero {
        width: 86%;
        padding: 40px 24px 30px;
    }

    .hero-product-image {
        inset: 45px 24px 28px;
        width: calc(100% - 48px) !important;
        height: calc(100% - 73px) !important;
    }

    .hero-product-logo {
        top: 25px;
        left: 24px;
        width: 90px !important;
        height: 42px !important;
    }

    .poster-card__image.image-frame--product {
        padding: 18px;
    }
}