/**
 * RAYZA IMÓVEIS - CSS Responsivo
 * Media Queries para todos os breakpoints
 * ============================================
 */

/* ==========================================
   EXTRA LARGE (1400px+)
   ========================================== */

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* ==========================================
   LARGE (992px - 1199px)
   ========================================== */

@media (max-width: 1199.98px) {
    :root {
        --texto-5xl: 2.5rem;
        --texto-6xl: 3rem;
    }
    
    .nav {
        gap: var(--espacamento-5);
    }
    
    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================
   MEDIUM - TABLET (768px - 991px)
   ========================================== */

@media (max-width: 991.98px) {
    :root {
        --texto-4xl: 2rem;
        --texto-5xl: 2.25rem;
    }
    
    /* Header */
    .nav {
        display: none;
    }
    
    .header__cta {
        display: none;
    }
    
    .menu-toggle {
        display: flex;
    }
    
    /* Grids */
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Grid de Imóveis */
    .imoveis-grid--3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .imoveis-grid--2-center {
        flex-wrap: wrap;
        gap: 24px;
    }
    
    .imoveis-grid--2-center .imovel-card {
        flex: 0 1 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
    
    /* Seções */
    .secao {
        padding: var(--espacamento-16) 0;
    }
    
    .secao-header {
        margin-bottom: var(--espacamento-10);
    }
}

/* ==========================================
   SMALL - MOBILE GRANDE (576px - 767px)
   ========================================== */

@media (max-width: 767.98px) {
    :root {
        --texto-3xl: 1.75rem;
        --texto-4xl: 2rem;
        --texto-5xl: 2rem;
        --espacamento-20: 4rem;
        --espacamento-16: 3rem;
    }
    
    /* Container */
    .container {
        padding: 0 var(--espacamento-4);
    }
    
    /* Page Hero */
    .page-hero {
        height: 40vh;
        min-height: 300px;
    }
    
    .page-hero__content h1 {
        font-size: var(--texto-3xl);
    }
    
    /* Grids */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
    
    /* Grid de Imóveis - Mobile */
    .imoveis-grid--3,
    .imoveis-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .imoveis-grid--2-center {
        flex-direction: column;
        gap: 24px;
    }
    
    .imoveis-grid--2-center .imovel-card {
        flex: 0 1 100%;
        max-width: 100%;
    }
    
    /* Footer */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--espacamento-8);
    }
    
    .footer__bottom {
        flex-direction: column;
        gap: var(--espacamento-4);
        text-align: center;
    }
    
    /* Cards */
    .imovel-card__features {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .imovel-card__feature {
        flex: 0 0 auto;
    }
    
    /* Botões */
    .btn--lg {
        padding: var(--espacamento-4) var(--espacamento-6);
    }
}

/* ==========================================
   EXTRA SMALL - MOBILE (< 576px)
   ========================================== */

@media (max-width: 575.98px) {
    :root {
        --texto-2xl: 1.25rem;
        --texto-3xl: 1.5rem;
        --texto-4xl: 1.75rem;
        --espacamento-12: 2rem;
    }
    
    /* Header */
    .header__inner {
        padding: 0 var(--espacamento-4);
    }
    
    .logo img {
        height: 40px;
    }
    
    /* Menu Mobile */
    .menu-mobile {
        padding: var(--espacamento-6);
    }
    
    /* Tipografia */
    h1 {
        font-size: var(--texto-3xl);
    }
    
    h2 {
        font-size: var(--texto-2xl);
    }
    
    /* Seção Header */
    .secao-header h2 {
        font-size: var(--texto-2xl);
    }
    
    .secao-header p {
        font-size: var(--texto-base);
    }
    
    /* Card de Imóvel */
    .imovel-card__footer {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--espacamento-3);
    }
    
    /* WhatsApp Float */
    .whatsapp-float {
        width: 50px;
        height: 50px;
        font-size: 24px;
        bottom: var(--espacamento-4);
        right: var(--espacamento-4);
    }
    
    /* Subtítulo */
    .subtitulo {
        font-size: var(--texto-xs);
        letter-spacing: 2px;
    }
}

/* ==========================================
   UTILITÁRIOS RESPONSIVOS
   ========================================== */

/* Esconder em Mobile */
@media (max-width: 767.98px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Esconder em Desktop */
@media (min-width: 768px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Esconder em Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Mostrar apenas em Mobile */
@media (min-width: 768px) {
    .show-mobile-only {
        display: none !important;
    }
}

/* Texto centralizado em Mobile */
@media (max-width: 767.98px) {
    .texto-center-mobile {
        text-align: center;
    }
}