@tailwind base;
@tailwind components;
@tailwind utilities;

/* --- BASES E VARIÁVEIS --- */
:root {
    --navbar-height: 5rem; 
    --filtros-sidebar-width: 280px; 
    --filtros-sidebar-width-closed: 4rem;
    --layout-gap: 16px; 
    --desktop-gap: 11px; 
}

html, body {
    min-height: 100vh;
    margin: 0;
    padding-top: var(--navbar-height);
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
}

#main-container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--layout-gap);
    width: 100%;
}

/* --- FILTROS SIDEBAR (GERAL) --- */
#filtros-sidebar-menu {
    background-color: white;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- LAYOUT DESKTOP (>= 1024px) --- */
@media (min-width: 1024px) {
    #main-container {
        display: flex; 
        gap: var(--desktop-gap); 
        padding-top: 0;
        margin-top: 0;
    }
    
    #filtros-sidebar-menu {
        position: sticky;
        top: calc(var(--navbar-height) + 20px);
        width: var(--filtros-sidebar-width);
        height: calc(100vh - var(--navbar-height) - 60px);
        flex-shrink: 0; 
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        overflow-y: auto;
    }
    
    /* Estado Recolhido Desktop */
    #filtros-sidebar-menu.filtros-sidebar-closed-desktop {
        width: var(--filtros-sidebar-width-closed);
    }
    
    .filtros-sidebar-closed-desktop .filtros-sidebar-text,
    .filtros-sidebar-closed-desktop .filtros-sidebar-title,
    .filtros-sidebar-closed-desktop .ri-arrow-down-s-line,
    .filtros-sidebar-closed-desktop h4 { 
        display: none !important;
    }
}

/* --- LAYOUT MOBILE (< 1024px) --- */
/* --- LAYOUT MOBILE (< 1024px) --- */
@media (max-width: 1023px) {
    #main-container {
        display: block; 
    }

    #filtros-sidebar-menu {
        display: block; /* Mantemos block, mas controlado pelo left */
        position: fixed; 
        
        /* Transformamos em uma barra lateral deslizante */
        top: 0;
        left: -100%; /* Começa escondido fora da tela */
        width: 85%;
        max-width: 300px;
        height: 100vh;
        z-index: 9999; /* Garante que fique acima de tudo */
        
        border-radius: 0 12px 12px 0; /* Arredonda apenas o canto direito */
        box-shadow: 10px 0 25px -5px rgba(0, 0, 0, 0.2);
        transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Quando aberto, desliza para dentro da tela */
    #filtros-sidebar-menu.filtros-sidebar-open {
        left: 0 !important;
    }
    /* Ajuste para o botão de fechar (X) que já existe no seu HTML */
    #filtros-sidebar-menu .flex.justify-between.items-center.mb-6 {
        padding-top: 1rem;
    }


    #gallery-content {
        margin-top: 1rem;
    }
}
/* --- ESTILOS DA GALERIA --- */
#galeria-grid {
    display: grid;
    gap: 1.5rem;
}

/* Responsividade Dinâmica da Grid */
@media (min-width: 640px) { #galeria-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { #galeria-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { #galeria-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1536px) { #galeria-grid { grid-template-columns: repeat(5, 1fr); } }

/* Animações */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scrollbar Sidebar */
#filtros-sidebar-menu::-webkit-scrollbar { width: 5px; }
#filtros-sidebar-menu::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }