/**
 * Performance Optimizations CSS
 * Correções para PageSpeed Insights - Mobile
 * Focado em: CLS, animações compostas, e otimizações de rendering
 * Criado: 28/10/2025
 */

/* ========== CLS PREVENTION - GRID FIXES ========== */

/* Grid principal - reservar altura mínima para prevenir CLS */
.grid.grid-cols-1.lg\:grid-cols-2 {
    min-height: 600px;
    contain: layout style;
}

/* Cards de imóveis - altura mínima definida */
article.card-hover-lift,
article.bg-white.rounded-xl {
    min-height: 650px;
    contain: layout style paint;
}

/* Grid de características - altura fixa para prevenir shift */
.grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-5 {
    min-height: 140px;
    contain: layout;
}

.grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-5 > div {
    min-height: 120px;
}

/* Container de imagem - aspect ratio fixo */
.card-image-zoom {
    aspect-ratio: 16 / 9;
    contain: layout size;
    background: #f3f4f6;
}

/* ========== ANIMATIONS - COMPOSITOR-FRIENDLY ONLY ========== */

/* Substituir transições de color por opacity em pseudo-elementos */
.transition-colors-optimized {
    position: relative;
    transition: none;
}

.transition-colors-optimized::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    border-radius: inherit;
}

.transition-colors-optimized:hover::before {
    opacity: 0.1;
}

/* Links e botões - usar transform ao invés de color */
a.hover-lift,
button.hover-lift {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

a.hover-lift:hover,
button.hover-lift:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}

/* Botões primários - otimizado */
.btn-primary-optimized {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.btn-primary-optimized:hover {
    transform: translateY(-2px);
    opacity: 0.95;
}

.btn-primary-optimized:active {
    transform: translateY(0);
}

/* ========== FONT AWESOME ICONS - CLS PREVENTION ========== */

/* Reservar espaço para ícones antes de carregar */
i.fas,
i.fab,
i.far {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    font-style: normal;
    vertical-align: middle;
}

i.fas.fa-bed,
i.fas.fa-shower,
i.fas.fa-car,
i.fas.fa-tv,
i.fas.fa-snowflake {
    width: 1.5em;
    height: 1.5em;
}

/* ========== HEADER OPTIMIZATIONS ========== */

/* Header - prevenir CLS ao carregar */
.header-novo {
    min-height: 80px;
    contain: layout;
}

/* Menu button - área de toque adequada */
#mobile-menu-toggle {
    min-width: 48px;
    min-height: 48px;
}

/* ========== IMAGE LOADING OPTIMIZATIONS ========== */

/* Skeleton placeholder para imagens */
img[loading="lazy"],
img[loading="eager"] {
    background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 20%, #f0f0f0 40%, #f0f0f0 100%);
    background-size: 200% 100%;
}

/* Prevenir shift durante carregamento */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ========== PAGINATION - COMPOSITOR-FRIENDLY ========== */

/* Botões de paginação - apenas transform */
a[aria-label*="página"],
a[aria-label*="Próxima"],
a[aria-label*="Anterior"] {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

a[aria-label*="página"]:hover,
a[aria-label*="Próxima"]:hover,
a[aria-label*="Anterior"]:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* ========== TAGS E BADGES - OPTIMIZED ========== */

/* Tags de categoria - usar transform */
.inline-flex.items-center.gap-2 {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.inline-flex.items-center.gap-2:hover {
    transform: translateY(-1px);
    opacity: 0.95;
}

/* ========== MOBILE OPTIMIZATIONS ========== */

@media (max-width: 768px) {
    /* Reduzir min-heights em mobile */
    .grid.grid-cols-1.lg\:grid-cols-2 {
        min-height: auto;
    }

    article.card-hover-lift,
    article.bg-white.rounded-xl {
        min-height: 550px;
    }

    /* Desabilitar animações complexas em mobile */
    .card-hover-lift:hover {
        transform: none;
    }
}

/* ========== REDUCED MOTION ========== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========== WILL-CHANGE MANAGEMENT ========== */

/* Adicionar will-change apenas em hover para economizar recursos */
.card-hover-lift:hover,
.btn-primary:hover,
.card-image-zoom:hover img {
    will-change: transform;
}

/* Remover will-change após animação */
.card-hover-lift,
.btn-primary,
.card-image-zoom img {
    will-change: auto;
}

/* ========== CONTAIN PROPERTY ========== */

/* Isolar repaint/reflow */
article,
.card-hover,
.card-hover-lift {
    contain: layout style paint;
}

.grid {
    contain: layout;
}

/* ========== CONTRASTE MELHORADO (Acessibilidade) ========== */

/* Header - melhorar contraste do texto */
.header-novo .btn-header span,
.header-logo-link span {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Menu mobile - garantir contraste */
#mobile-menu-toggle span {
    color: #ffffff;
    font-weight: 600;
}

/* ========== PRELOAD HINTS ========== */

/* Sugerir ao browser que imagens são importantes */
img[fetchpriority="high"] {
    content-visibility: auto;
}

/* ========== LAYER PROMOTION (GPU) ========== */

/* Promover elementos animados para camada própria */
.card-hover-lift,
.btn-ripple,
.card-image-zoom img {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}