/* MOBILE PERFORMANCE: Prevent Layout Shift */
.panty-graphic-img {
    aspect-ratio: 600/188;
    width: 100%;
    height: auto;
}

.front-talent img {
    aspect-ratio: 3/4;
    width: 100%;
    height: auto;
}

.video-thumbnail img {
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
}

.blog-image img {
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
}

/* Reserve space for hero images */
#hero {
    min-height: 400px;
}

/* Prevent font loading layout shift */
body {
    font-display: swap;
}

/* Reserve space for loading images */
img {
    width: auto;
    height: auto;
    max-width: 100%;
}

/* Fix specific layout shift culprits */
.panty-inner {
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {
    .panty-inner {
        min-height: 250px;
    }
    
    #hero {
        min-height: 300px;
    }
}


/* === OVERRIDE PERFORMANCE FIXES FOR VIDEO LAYOUT === */
@media (max-width: 768px) {
    /* Override the auto width from performance fixes */
    .video-grid img,
    .video-item img,
    .video-box img,
    .video-card img,
    .video-thumbnail img,
    .video-thumb img,
    .videos-grid img {
        width: 100% \!important;
        max-width: 100% \!important;
        height: auto \!important;
        aspect-ratio: 16/9 \!important;
    }
    
    /* Force grid to single column - with higher specificity */
    body .video-grid,
    body .videos-grid,
    body .video-list {
        display: grid \!important;
        grid-template-columns: 1fr \!important;
        grid-auto-columns: 1fr \!important;
        gap: 1rem \!important;
        width: 100% \!important;
        max-width: 100% \!important;
        padding: 0 \!important;
        margin: 0 \!important;
    }
    
    /* Override any flex layouts */
    body .video-grid[style],
    body .videos-grid[style] {
        display: grid \!important;
        grid-template-columns: 1fr \!important;
    }
    
    /* Each item full width - higher specificity */
    body .video-grid > *,
    body .videos-grid > *,
    body .video-item,
    body .video-box,
    body .video-card {
        width: 100% \!important;
        max-width: 100% \!important;
        grid-column: 1 / -1 \!important;
        margin: 0 \!important;
        padding: 0 \!important;
    }
    
    /* Links containing videos */
    body .video-grid a,
    body .videos-grid a {
        width: 100% \!important;
        display: block \!important;
    }
}