/* CLS Prevention Additional Styles */

/* Image loading optimization - prevents layout shifts */
img {
    content-visibility: auto;
    contain-intrinsic-size: 300px 200px; /* Default dimensions */
}

/* Specific image containers with known aspect ratios */
.hero {
    aspect-ratio: 16 / 9;
    min-height: 500px;
}

.gallery-item {
    aspect-ratio: 4 / 3;
    height: 450px; /* Fixed height prevents CLS */
}

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

.blog-card-image {
    aspect-ratio: 16 / 9;
    height: 220px; /* Fixed height */
}

/* Button stabilization */
.btn, .btn-show-more, .btn-read-more {
    min-height: 54px;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Section stabilization */
.about, .services, .gallery, .testimonials, .contact {
    min-height: 400px;
}

/* Font loading states */
.font-loading {
    font-family: 'Arial', 'Helvetica', sans-serif;
}

.font-loaded {
    font-family: 'Inter', 'Arial', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Animation performance optimization */
.hero-content, .service-card, .gallery-item {
    will-change: transform;
}

/* Contain layout calculations */
.container, .hero-content, .about-content {
    contain: layout style;
}

/* Prevent reflow during animation */
@media (prefers-reduced-motion: no-preference) {
    .hero-content {
        transform: translate3d(0, 0, 0);
    }
}