/**
 * CLS (Cumulative Layout Shift) Optimization Styles
 * Purpose: Prevent layout shifts and improve Core Web Vitals
 * Date: December 2025
 */

/* ========================================
   1. IMAGE ASPECT RATIO PRESERVATION
   ======================================== */

/* Business card images - maintain 4:3 aspect ratio */
.business-card .thumbnail img,
.card-img-top {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Business detail page main images */
.swiper-slide img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Service images */
.service-image img,
.service-card img {
    aspect-ratio: 8 / 3;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Category images */
.category-image img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* ========================================
   2. RESERVE SPACE FOR DYNAMIC CONTENT
   ======================================== */

/* Ad placeholder - prevent shift when ads load */
.ad-unit,
.floating-ad,
.floating-ad-right {
    min-height: 250px; /* Standard ad height */
    contain: layout; /* Contain layout changes */
}

@media (max-width: 768px) {
    .ad-unit {
        min-height: 100px;
    }
}

/* ========================================
   3. OPTIMIZE ANIMATIONS - NO LAYOUT SHIFT
   ======================================== */

/* Ensure animations only affect transform/opacity, not layout properties */
@keyframes pulse {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(40, 167, 69, 0.3));
    }
    50% { 
        transform: scale(1.05);
        filter: drop-shadow(0 0 10px rgba(40, 167, 69, 0.5));
    }
}

@keyframes badge-glow {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(40, 167, 69, 0.3);
    }
    50% { 
        box-shadow: 0 0 15px rgba(40, 167, 69, 0.6);
    }
}

@keyframes bubblePulse {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.2);
    }
}

@keyframes success-shine {
    0% { 
        transform: translateX(-100%);
    }
    100% { 
        transform: translateX(100%);
    }
}

/* Apply will-change for optimized animations */
.alert-success[role="alert"],
.notification-bubble,
.alert-success[role="alert"] .badge {
    will-change: transform;
    contain: layout style paint;
}

/* ========================================
   4. PREVENT LAYOUT SHIFT ON HOVER
   ======================================== */

/* Prevent hover transforms from shifting layout */
.open-button,
.btn-compare-modern,
.alert-success[role="alert"],
.alert-info[role="alert"] {
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Hover effects should only use transform, not margin/padding */
.open-button:hover,
.btn-compare-modern:hover {
    transform: translateY(-3px) translateZ(0);
    /* Remove any margin/padding changes on hover */
}

/* ========================================
   5. FONT LOADING OPTIMIZATION
   ======================================== */

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

/* Icon font fallback sizing */
.icon-,
[class^="icon-"],
[class*=" icon-"],
.ri-,
[class^="ri-"],
[class*=" ri-"],
.ti {
    /* Ensure icons take up consistent space */
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
}

/* ========================================
   6. SWIPER/CAROUSEL OPTIMIZATION
   ======================================== */

/* Reserve space for Swiper before initialization */
.swiper {
    min-height: 400px;
    contain: layout;
}

.swiper-wrapper {
    /* Prevent shifts during slide transitions */
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* ========================================
   7. MODAL AND POPUP OPTIMIZATION
   ======================================== */

/* Prevent body scroll jump when modal opens */
body.modal-open {
    overflow: hidden;
    padding-right: 0 !important; /* Prevent scrollbar compensation shift */
}

/* ========================================
   8. LAZY LOADING OPTIMIZATION
   ======================================== */

/* Provide placeholder while images lazy load */
img[loading="lazy"] {
    background: #f0f0f0;
    /* Image dimensions set via width/height attributes */
}

/* ========================================
   9. GRID/FLEX CONTAINER OPTIMIZATION
   ======================================== */

/* Prevent flex/grid items from shifting */
.row,
.container,
.container-fluid {
    contain: layout;
}

/* ========================================
   10. CRITICAL CSS FOR ABOVE-THE-FOLD
   ======================================== */

/* Breadcrumb area - prevent shift */
.edu-breadcrumb-area {
    min-height: 250px;
    contain: layout style paint;
}

/* Business card container */
.business-card {
    contain: layout style paint;
    min-height: 400px;
}

/* ========================================
   11. RESPONSIVE OPTIMIZATION
   ======================================== */

@media (max-width: 768px) {
    /* Mobile-specific optimizations */
    .swiper {
        min-height: 300px;
    }
    
    .edu-breadcrumb-area {
        min-height: 200px;
    }
    
    .business-card {
        min-height: 350px;
    }
}

/* ========================================
   12. THIRD-PARTY CONTENT OPTIMIZATION
   ======================================== */

/* Reserve space for embedded content (maps, videos, etc.) */
iframe {
    contain: layout;
}

/* Google Maps container */
#map {
    min-height: 400px;
    contain: layout;
}

/* YouTube/Video embeds */
.video-container,
.embed-responsive {
    aspect-ratio: 16 / 9;
    contain: layout;
}

/* ========================================
   13. SKELETON LOADERS
   ======================================== */

/* Skeleton animation for loading states */
@keyframes skeleton-loading {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* Skeleton for business cards while loading */
.business-card.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}