/**
 * CLS (Cumulative Layout Shift) Fix
 * Risolve i problemi di stabilità visiva su dispositivi mobili
 */

/* =====================================================
   1. ASPECT RATIO PER IMMAGINI
   ===================================================== */

/* Logo header - riserva spazio */
.logo img {
    aspect-ratio: 200 / 50;
    width: 200px;
    height: auto;
    object-fit: contain;
}

/* Logo homepage grande */
.img-fluid.w-lg-50,
.img-fluid.w-sm-75 {
    aspect-ratio: 400 / 100;
    max-width: 100%;
    height: auto;
}

/* Immagini catalogo/categorie */
.services-box .img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #f0f0f0;
}

.services-box .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Immagini prodotti */
.product__img {
    aspect-ratio: 1 / 1;
    min-height: 250px;
    background-color: #f5f5f5;
}

.product__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Icone sezione clienti */
.why-choose-area img.white-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

/* Icone servizi */
.services-box07 .icon img {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

/* =====================================================
   2. CONTENITORI CON ALTEZZA MINIMA
   ===================================================== */

/* Header sticky - previene shift quando diventa fixed */
.header-area {
    min-height: 80px;
}

@media (max-width: 991px) {
    .header-area {
        min-height: 70px;
    }
}

/* Menu area */
.menu-area {
    min-height: 60px;
}

/* Sezione catalogo */
.service .sbox .col-lg-3,
.service .sbox .col-6 {
    min-height: 200px;
}

/* Card prodotti */
.product {
    min-height: 400px;
}

/* Sezione servizi box */
.services-box07 {
    min-height: 350px;
}

@media (max-width: 767px) {
    .services-box07 {
        min-height: auto;
    }
}

/* =====================================================
   3. FONT LOADING OPTIMIZATION
   ===================================================== */

/* Fallback font che corrisponde alle metriche di Open Sans */
body {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

/* Size adjust per ridurre FOUT */
@font-face {
    font-family: 'Open Sans Fallback';
    src: local('Arial');
    size-adjust: 105%;
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
}

/* =====================================================
   4. PRELOADER OTTIMIZZATO
   ===================================================== */

/* Evita che il preloader causi reflow */
#preloader {
    position: fixed;
    contain: strict;
}

/* =====================================================
   5. LAYOUT STABILIZATION MOBILE
   ===================================================== */

@media (max-width: 767px) {
    /* Hero section - altezza fissa su mobile */
    .row[style*="margin-top:300px"] {
        margin-top: 150px !important;
        min-height: 300px;
    }
    
    /* Sezione why-choose */
    .why-choose-area .col-lg-4 {
        min-height: auto;
        margin-bottom: 20px;
    }
    
    /* Grid prodotti */
    .shop-area .col-lg-4 {
        min-height: 380px;
    }
    
    /* Sezione clienti */
    .why-choose-area .col-6 {
        min-height: 180px;
    }
    
    /* Fix per header scroll */
    .header-three .menu-area {
        contain: layout style;
    }
}

/* =====================================================
   6. CONTAIN PROPERTY PER PERFORMANCE
   ===================================================== */

/* Isola il rendering di sezioni */
section {
    contain: layout style;
}

.services-box,
.product,
.services-box07 {
    contain: layout style paint;
}

/* =====================================================
   7. SKELETON/PLACEHOLDER DURANTE IL CARICAMENTO
   ===================================================== */

/* Background placeholder per immagini */
img:not([src]),
img[src=""] {
    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; }
}

/* =====================================================
   8. STICKY HEADER FIX
   ===================================================== */

/* Riserva spazio per header quando diventa sticky */
body.has-sticky-header {
    padding-top: 80px;
}

@media (max-width: 991px) {
    body.has-sticky-header {
        padding-top: 70px;
    }
}

/* Sticky menu transition smooth */
.menu-area.sticky-menu {
    transform: translateY(0);
    will-change: transform;
}

/* =====================================================
   9. FIX SPECIFICI PER ELEMENTI PROBLEMATICI
   ===================================================== */

/* Banner/slider area */
main > .container:first-child {
    min-height: 400px;
}

@media (max-width: 767px) {
    main > .container:first-child {
        min-height: 300px;
    }
}

/* Scrollbox marquee text */
.scrollbox {
    contain: strict;
    height: auto;
    overflow: hidden;
}

/* News section */
#spazioNewsHome {
    min-height: 300px;
}

/* =====================================================
   10. IMAGE LAZY LOADING SUPPORT
   ===================================================== */

img[loading="lazy"] {
    background-color: #f5f5f5;
}

/* Dimensioni specifiche per immagini note */
img[src*="box-cani"],
img[src*="box-gatti"],
img[src*="voliere"],
img[src*="pannelli"],
img[src*="accessori"],
img[src*="strutture"],
img[src*="invictus"],
img[src*="contattaci"] {
    aspect-ratio: 4 / 3;
}

img[src*="Metalmax-Logo"] {
    aspect-ratio: 4 / 1;
}

img[src*="EN1090"],
img[src*="ab-icon"],
img[src*="invictus_stemma"] {
    aspect-ratio: 1 / 1;
}