/* ========================================
   CLS FIX STYLESHEET - CleanCollective
   Purpose: Comprehensive Cumulative Layout Shift prevention
   Target: Reduce CLS from 1.384 to under 0.25
   ======================================== */

/* ========================================
   1. IMAGE CONTAINER RESERVED SPACE
   ======================================== */

/* Hero Image Containers - Reserve exact space */
.hero-image-container,
.hero .image-container,
.hero-glass-card {
    min-height: 400px;
    contain: layout style paint;
    content-visibility: auto;
}

@media (min-width: 768px) {
    .hero-image-container,
    .hero .image-container {
        min-height: 550px;
    }
}

/* Service Card Containers */
.service-card,
.service-accordion-item,
.service-section .image-container {
    min-height: 350px;
    contain: layout style;
}

.service-card img,
.service-image,
.accordion-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

/* Feature Images */
.feature-image,
.feature-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* Location/Service Area Cards */
.service-area-card,
.location-card {
    min-height: 400px;
    contain: layout style paint;
}

.service-area-img,
.location-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
}

/* ========================================
   2. REVIEW CAROUSEL - FIXED HEIGHT
   ======================================== */

.review-carousel-container {
    min-height: 450px;
    max-height: 450px;
    overflow: hidden;
    contain: layout style;
}

.review-carousel-track {
    min-height: 420px;
}

.review-card,
.testimonial-card {
    min-height: 400px;
    max-height: 400px;
    contain: layout style;
}

@media (max-width: 767px) {
    .review-carousel-container {
        min-height: 350px;
        max-height: 350px;
    }

    .review-carousel-track {
        min-height: 320px;
    }

    .review-card,
    .testimonial-card {
        min-height: 300px;
        max-height: 300px;
    }
}

/* ========================================
   3. ACCORDION CONTENT - PREVENT SHIFT
   ======================================== */

.accordion-content {
    overflow: hidden;
    will-change: max-height;
    contain: layout style;
}

.accordion-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    contain: layout;
}

@media (max-width: 767px) {
    .accordion-content-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Reserve space for accordion images */
.accordion-content img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

/* ========================================
   4. GRID LAYOUTS - STABLE COLUMNS
   ======================================== */

/* Service Grid */
.services-grid,
.grid-auto-300,
.grid-3col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    contain: layout;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .services-grid,
    .grid-3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .services-grid,
    .grid-auto-300,
    .grid-3col {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Two Column Sections */
.two-column-section,
.grid-2col-gap-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    contain: layout;
}

@media (max-width: 968px) {
    .two-column-section,
    .grid-2col-gap-4 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ========================================
   5. FORM CONTAINERS - FIXED HEIGHT
   ======================================== */

/* GHL Form Wrapper */
.ghl-form-container,
.contact-form-wrapper {
    min-height: 1450px;
    contain: layout style;
}

.ghl-form-container iframe,
.contact-form-wrapper iframe {
    width: 100%;
    height: 1408px;
    border: none;
    display: block;
}

@media (max-width: 767px) {
    .ghl-form-container,
    .contact-form-wrapper {
        min-height: 1920px;
    }

    .ghl-form-container iframe,
    .contact-form-wrapper iframe {
        height: 1900px;
    }
}

/* Booking Popup Modal */
#bookingPopup .ghl-form-container {
    min-height: 1450px;
}

#bookingPopup iframe {
    height: 1408px;
}

/* ========================================
   6. NAVIGATION - PREVENT SHIFT
   ======================================== */

#global-nav,
.nav,
nav {
    min-height: 80px;
    contain: layout style;
}

.nav-container {
    min-height: 60px;
}

/* ========================================
   7. FOOTER - RESERVE SPACE
   ======================================== */

#global-footer,
footer {
    min-height: 400px;
    contain: layout style;
}

@media (max-width: 767px) {
    #global-footer,
    footer {
        min-height: 600px;
    }
}

/* ========================================
   8. TAB CONTAINERS - STABLE HEIGHT
   ======================================== */

.tabs-container,
.service-tabs {
    contain: layout;
}

.tab-content,
.service-tab-content {
    min-height: 300px;
    contain: layout style;
}

.tab-content[style*="display: none"],
.service-tab-content[style*="display: none"] {
    visibility: hidden;
    position: absolute;
    pointer-events: none;
}

/* ========================================
   9. SECTION PADDING - CONSISTENT
   ======================================== */

section {
    contain: layout style paint;
}

section[data-section-name] {
    padding: 4rem 0;
}

@media (max-width: 767px) {
    section[data-section-name] {
        padding: 3rem 0;
    }
}

/* ========================================
   10. PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* GPU Acceleration for transforms */
.service-card,
.review-card,
.accordion-header,
.service-area-card {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Contain layout for major sections */
.container-1200,
.container-1400,
.section-container {
    contain: layout style;
}

/* ========================================
   11. SKELETON LOADING STATES
   ======================================== */

/* Image Placeholder Background */
img[loading="lazy"]:not([src]) {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

/* ========================================
   12. UTILITY CLASSES
   ======================================== */

.no-cls {
    contain: layout style paint;
    content-visibility: auto;
}

.stable-height {
    min-height: inherit;
    height: auto;
}

.image-wrapper {
    position: relative;
    overflow: hidden;
    contain: layout style paint;
}

/* ========================================
   13. RESPONSIVE IMAGE CONTAINERS
   ======================================== */

.image-container-rounded,
.image-container {
    position: relative;
    overflow: hidden;
    contain: layout style paint;
}

.image-container-rounded img,
.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Aspect ratio containers */
.aspect-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-1-1 {
    aspect-ratio: 1 / 1;
}

.aspect-3-4 {
    aspect-ratio: 3 / 4;
}