/* 
 * SISTEMA DE WRAPPER - BUAIZ LEILÕES
 * 
 * Este arquivo contém os estilos para o sistema de wrapper do site.
 * O wrapper garante espaçamentos laterais consistentes em todo o site.
 * 
 * CLASSES PRINCIPAIS:
 * 
 * .site-wrapper - Container principal com largura máxima e espaçamentos laterais
 * .full-width - Para elementos que precisam ocupar toda a largura da tela
 * 
 * COMO USAR:
 * 
 * 1. Para conteúdo normal:
 *    <div class="site-wrapper">
 *        <!-- seu conteúdo aqui -->
 *    </div>
 * 
 * 2. Para elementos full-width com conteúdo wrapper interno:
 *    <section class="full-width" style="background-color: #f8f9fa;">
 *        <div class="site-wrapper">
 *            <!-- seu conteúdo aqui -->
 *        </div>
 *    </section>
 * 
 */

/* Variáveis CSS para facilitar manutenção */
:root {
    --wrapper-max-width: 1400px;
    --wrapper-padding-desktop: 20px;
    --wrapper-padding-tablet: 15px;
    --wrapper-padding-mobile: 10px;
}

/* Container principal do site */
.site-wrapper {
    max-width: var(--wrapper-max-width);
    margin: 0 auto;
    padding-left: var(--wrapper-padding-desktop);
    padding-right: var(--wrapper-padding-desktop);
    width: 100%;
}

/* Para elementos que precisam ocupar toda a largura */
.full-width {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Wrapper para conteúdo dentro de elementos full-width */
.full-width .site-wrapper {
    max-width: var(--wrapper-max-width);
    margin: 0 auto;
    padding-left: var(--wrapper-padding-desktop);
    padding-right: var(--wrapper-padding-desktop);
}

/* Responsividade para tablets */
@media (max-width: 768px) {
    .site-wrapper {
        padding-left: var(--wrapper-padding-tablet);
        padding-right: var(--wrapper-padding-tablet);
    }
    
    .full-width .site-wrapper {
        padding-left: var(--wrapper-padding-tablet);
        padding-right: var(--wrapper-padding-tablet);
    }
}

/* Responsividade para mobile */
@media (max-width: 576px) {
    .site-wrapper {
        padding-left: var(--wrapper-padding-mobile);
        padding-right: var(--wrapper-padding-mobile);
    }
    
    .full-width .site-wrapper {
        padding-left: var(--wrapper-padding-mobile);
        padding-right: var(--wrapper-padding-mobile);
    }
}

/* Utilitários */
.wrapper-no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.wrapper-large {
    max-width: 1600px;
}

.wrapper-small {
    max-width: 1200px;
}

/* Para compatibilidade com Bootstrap containers */
.site-wrapper.container-fluid {
    max-width: var(--wrapper-max-width);
    padding-left: var(--wrapper-padding-desktop);
    padding-right: var(--wrapper-padding-desktop);
}

/* Debug - remover em produção */
.wrapper-debug .site-wrapper {
    border: 2px dashed #007bff;
    background-color: rgba(0, 123, 255, 0.1);
}

.wrapper-debug .full-width {
    border: 2px dashed #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}