/* ============================================================
   AUTOMART V45.1
   FIND YOUR NEXT RIDE — IMAGE PROPORTION AUTHORITY

   Scope is added dynamically only to the homepage category
   section containing "Find Your Next Ride".
   ============================================================ */


/* ============================================================
   CATEGORY IMAGE FRAME
   ============================================================ */

.am-v451-category-section
.am-v451-category-image-frame {

    position:relative !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    width:100% !important;

    /*
     * Shorter than the previous portrait treatment.
     * Keeps cards premium without dominating them.
     */
    height:190px !important;

    min-height:0 !important;

    max-height:190px !important;

    padding:8px !important;

    overflow:hidden !important;

    border-radius:20px !important;

    box-sizing:border-box !important;

    background:
        linear-gradient(
            180deg,
            #f7faf8 0%,
            #f2f7f4 100%
        )
        !important;
}


/* ============================================================
   IMAGE — NEVER DISTORT
   ============================================================ */

.am-v451-category-section
.am-v451-category-image {

    display:block !important;

    width:100% !important;

    height:100% !important;

    max-width:100% !important;

    max-height:100% !important;

    object-fit:contain !important;

    object-position:center center !important;

    aspect-ratio:auto !important;

    transform:none !important;

    scale:1 !important;

    margin:auto !important;
}


/* ============================================================
   REMOVE LEGACY IMAGE STRETCHING
   ============================================================ */

.am-v451-category-section
.am-v451-category-image[width],

.am-v451-category-section
.am-v451-category-image[height] {

    /*
     * HTML width/height attributes may remain for layout hints,
     * but CSS controls the rendered proportions.
     */

    object-fit:contain !important;
}


/* ============================================================
   CARD — PRESERVE EXISTING WIDTH / STYLE
   ============================================================ */

.am-v451-category-section
.am-v451-category-card {

    min-width:0 !important;
}


.am-v451-category-section
.am-v451-category-card:hover
.am-v451-category-image {

    /*
     * Tiny premium lift without scaling enough to crop.
     */

    transform:
        translateY(-2px)
        !important;

    transition:
        transform .2s ease
        !important;
}


/* ============================================================
   WIDE DESKTOP
   Screenshot reference area.
   ============================================================ */

@media screen and (min-width:1280px) {

    .am-v451-category-section
    .am-v451-category-image-frame {

        height:184px !important;

        max-height:184px !important;
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media screen
and (min-width:768px)
and (max-width:1279px) {

    .am-v451-category-section
    .am-v451-category-image-frame {

        height:172px !important;

        max-height:172px !important;

        padding:7px !important;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media screen and (max-width:767px) {

    .am-v451-category-section
    .am-v451-category-image-frame {

        height:148px !important;

        max-height:148px !important;

        padding:6px !important;

        border-radius:16px !important;
    }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media screen and (max-width:390px) {

    .am-v451-category-section
    .am-v451-category-image-frame {

        height:138px !important;

        max-height:138px !important;
    }
}
