/* ===================================================================
   SAFE CLS PREVENTION - NO UI BREAKING
   Enhanced version that prevents layout shifts WITHOUT distorting UI
   =================================================================== */

/* ===================================================================
   1. RESPONSIVE IMAGE HANDLING
   =================================================================== */

/* Base responsive behavior */
.img-responsive,
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Only apply aspect-ratio to images that need CLS prevention */
/* Use min-height instead of forcing aspect-ratio */

/* Wide banners - Use min-height to reserve space */
.banner-img,
.lottery-banner,
img[src*="lottery-banner"],
img[src*="lottery-wide-banner"] {
    width: 100%;
    height: auto;
    max-width: 100%;
    min-height: 200px; /* Reserve space without forcing ratio */
    max-height: 400px; /* Prevent excessive height */
    object-fit: contain; /* Maintain aspect ratio without cropping */
    background-color: #f0f0f0; /* Placeholder color while loading */
}

/* Game/State logos - Use max dimensions */
.game-logo,
.state-logo,
.lottery-logo img,
img[src*="game_logo"],
img[src*="state-logo"] {
    max-width: 200px;
    max-height: 200px;
    height: auto;
    width: auto;
    object-fit: contain;
    background-color: transparent;
}

/* Blog images - Flexible with minimum */
.blog-featured-image,
.blog-image img,
img[src*="blog"] {
    width: 100%;
    height: auto;
    min-height: 200px;
    max-width: 100%;
    object-fit: cover;
    background-color: #f5f5f5;
}

/* News thumbnails */
.news-thumbnail {
    width: 100%;
    height: auto;
    min-height: 180px;
    max-width: 100%;
    object-fit: cover;
}

/* ===================================================================
   2. CONTAINER RESERVATIONS (No breaking changes)
   =================================================================== */

/* Results containers - soft minimums */
.lottery-results-container,
.winning-numbers-container {
    min-height: 300px; /* Reduced from 400px */
}

.game-results-box,
.result-container {
    min-height: 250px; /* Reduced from 350px */
}

/* Chart containers */
.statistics-chart-container,
.chart-container {
    min-height: 400px; /* Reduced from 500px */
}

/* ===================================================================
   3. ENHANCED CLS PREVENTION (Browser-Native)
   =================================================================== */

/* Use contain-intrinsic-size for better CLS prevention */
img[loading="lazy"] {
    content-visibility: auto;
    contain-intrinsic-size: 300px 200px;
}

/* Skeleton screens for loading states */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ===================================================================
   4. GPU-ACCELERATED ANIMATIONS (Performance)
   =================================================================== */

.btn,
.card,
.game-card,
.lottery-card {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.btn:hover,
.card:hover,
.game-card:hover {
    transform: translateY(-2px) translateZ(0);
    transition: transform 0.2s ease-out;
}

/* ===================================================================
   5. RESPONSIVE SAFETY (Mobile/Desktop)
   =================================================================== */

/* Mobile - be even more conservative */
@media (max-width: 768px) {
    .banner-img,
    .lottery-banner {
        min-height: 120px; /* Smaller on mobile */
        max-height: 250px;
    }

    .game-logo,
    .state-logo {
        max-width: 100px; /* Smaller logos on mobile */
        max-height: 100px;
    }
}

/* Desktop - can use slightly more aggressive sizing */
@media (min-width: 1200px) {
    .banner-img,
    .lottery-banner {
        min-height: 250px;
        max-height: 500px;
    }
}

/* ===================================================================
   6. SAFE DEFAULTS (Fallbacks)
   =================================================================== */

/* If image fails to load, show placeholder */
img {
    background-color: #f8f8f8;
    border: 1px solid #e0e0e0;
}

img[alt] {
    /* Show alt text if image fails */
    font-family: sans-serif;
    font-size: 12px;
    color: #666;
    text-align: center;
    padding: 10px;
}

/* ===================================================================
   7. PERFORMANCE OPTIMIZATIONS
   =================================================================== */

/* Enable GPU acceleration for smooth scrolling */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Optimize repaints */
.game-card,
.lottery-card,
.news-card {
    transform: translateZ(0);
    will-change: transform;
}

/* Smooth transitions without layout shift */
.btn,
.link {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    /* Don't transition properties that cause layout shift */
    transition-property: transform, box-shadow, opacity;
}