/**
 * 🖼️ Responsive Images CSS for BikePlatesDirect
 * Ensures images display correctly and prevent Cumulative Layout Shift (CLS)
 */

/* ============================================================================
   Picture Element Styling
   ============================================================================ */

picture {
    display: contents; /* Makes picture element transparent in layout */
}

picture img {
    /* display: block;
    max-width: 100%; */
    height: 100%;
    max-width: unset !important;
}

/* ============================================================================
   Header Images
   ============================================================================ */

.header-logo {
    width: auto;
    max-width: 200px;
    height: auto;
}

.basket-icon-img {
    margin-right: 10px;
    width: 20px;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

.mobile-menu-icon {
    width: 20px;
    height: auto;
}

/* ============================================================================
   Content Section Images
   ============================================================================ */

.product-specs .row picture img,
.product-specs .row img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.bike-types picture img,
.bike-types img {
    width: 100%;
    height: auto;
    display: block;
}

.bike-icons picture img,
.bike-icons img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================================
   Banner Images
   ============================================================================ */

.banner picture img,
.banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================================
   Footer Images
   ============================================================================ */

.footer picture img {
    width: auto;
    max-width: 180px;
    height: auto;
}

/* ============================================================================
   Responsive Visibility Helpers
   ============================================================================ */

@media (max-width: 768px) {
    .hide-mob {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .hide-desk {
        display: none !important;
    }
}

/* ============================================================================
   Aspect Ratio Boxes (Prevent CLS)
   ============================================================================ */

/* Standard motorcycle plate aspect ratio (9:7 for UK bike plates) */
.aspect-ratio-motorcycle {
    position: relative;
    width: 100%;
    padding-bottom: 77.78%; /* 7/9 = 0.7778 */
    overflow: hidden;
}

.aspect-ratio-motorcycle picture,
.aspect-ratio-motorcycle img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Wide banner aspect ratio (16:9) */
.aspect-ratio-banner {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 9/16 = 0.5625 */
    overflow: hidden;
}

.aspect-ratio-banner picture,
.aspect-ratio-banner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Square aspect ratio (1:1) */
.aspect-ratio-square {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
}

.aspect-ratio-square picture,
.aspect-ratio-square img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}