/* ============================================================
   layouts.css — Baú de Matrizes
   Layout base, grids, flexbox, espaçamento, responsividade.
   Depende de: design-system.css (variáveis)
   ============================================================ */


/* ============================================================
   SEÇÃO 1 — LAYOUT BASE DA PÁGINA
   Absorvido de global.css (.main)
   ============================================================ */

/* Compensa a navbar fixa (mobile: 120px, desktop: 70px) */
.main {
    padding-top: 120px;
    min-height:  100vh;
}
@media (min-width: 992px) {
    .main { padding-top: 70px; }
}

/* Container padrão com padding lateral confortável */
.page-container {
    width:      100%;
    max-width:  1320px;
    margin:     0 auto;
    padding:    0 var(--spacing-md);
}
@media (min-width: 768px) {
    .page-container { padding: 0 var(--spacing-lg); }
}

/* Seção de página com espaçamento vertical */
.page-section {
    padding: var(--spacing-2xl) 0;
}
.page-section-sm {
    padding: var(--spacing-lg) 0;
}


/* ============================================================
   SEÇÃO 2 — GRID CSS NATIVO
   Para substituir .row / .col-* do Bootstrap progressivamente.
   ============================================================ */

/* Grid genérico — define colunas via modificador */
.grid {
    display: grid;
    gap:     var(--spacing-md);
}

/* Colunas fixas */
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

/* Grid auto-responsivo — largura mínima por item */
.grid-responsive {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:                   var(--spacing-md);
}

/* Grid de matrizes — 6 colunas desktop → 3 tablet → 2 mobile */
.matriz-grid {
    display:               grid;
    grid-template-columns: repeat(6, 1fr);
    gap:                   var(--spacing-md);
}
@media (max-width: 1199px) {
    .matriz-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 991px) {
    .matriz-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .matriz-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .matriz-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   SEÇÃO 3 — FLEXBOX UTILITÁRIOS
   ============================================================ */

.flex         { display: flex !important; }
.inline-flex  { display: inline-flex !important; }
.flex-wrap    { flex-wrap: wrap !important; }
.flex-nowrap  { flex-wrap: nowrap !important; }
.flex-column  { flex-direction: column !important; }

/* Alinhamento */
.flex-center  { align-items: center; justify-content: center; }
.flex-between { justify-content: space-between !important; }
.flex-around  { justify-content: space-around !important; }
.flex-end     { justify-content: flex-end !important; }
.flex-start   { justify-content: flex-start !important; }
.items-center { align-items: center !important; }
.items-start  { align-items: flex-start !important; }
.items-end    { align-items: flex-end !important; }

/* Gaps */
.flex-gap-xs { gap: var(--spacing-xs) !important; }
.flex-gap-sm { gap: var(--spacing-sm) !important; }
.flex-gap-md { gap: var(--spacing-md) !important; }
.flex-gap-lg { gap: var(--spacing-lg) !important; }
.flex-gap-xl { gap: var(--spacing-xl) !important; }

/* Crescimento */
.flex-1    { flex: 1 !important; }
.flex-auto { flex: 0 0 auto !important; }


/* ============================================================
   SEÇÃO 4 — UTILITÁRIOS DE ESPAÇAMENTO
   Padrão: p-{tamanho} e m-{tamanho}
   Direcionais: pv (vertical), ph (horizontal)
   ============================================================ */

/* Padding */
.p-xs  { padding: var(--spacing-xs)  !important; }
.p-sm  { padding: var(--spacing-sm)  !important; }
.p-md  { padding: var(--spacing-md)  !important; }
.p-lg  { padding: var(--spacing-lg)  !important; }
.p-xl  { padding: var(--spacing-xl)  !important; }
.p-2xl { padding: var(--spacing-2xl) !important; }
.p-0   { padding: 0 !important; }

.pv-xs  { padding-top: var(--spacing-xs);  padding-bottom: var(--spacing-xs);  }
.pv-sm  { padding-top: var(--spacing-sm);  padding-bottom: var(--spacing-sm);  }
.pv-md  { padding-top: var(--spacing-md);  padding-bottom: var(--spacing-md);  }
.pv-lg  { padding-top: var(--spacing-lg);  padding-bottom: var(--spacing-lg);  }
.pv-xl  { padding-top: var(--spacing-xl);  padding-bottom: var(--spacing-xl);  }

.ph-xs  { padding-left: var(--spacing-xs);  padding-right: var(--spacing-xs);  }
.ph-sm  { padding-left: var(--spacing-sm);  padding-right: var(--spacing-sm);  }
.ph-md  { padding-left: var(--spacing-md);  padding-right: var(--spacing-md);  }
.ph-lg  { padding-left: var(--spacing-lg);  padding-right: var(--spacing-lg);  }
.ph-xl  { padding-left: var(--spacing-xl);  padding-right: var(--spacing-xl);  }

/* Margin */
.m-xs  { margin: var(--spacing-xs)  !important; }
.m-sm  { margin: var(--spacing-sm)  !important; }
.m-md  { margin: var(--spacing-md)  !important; }
.m-lg  { margin: var(--spacing-lg)  !important; }
.m-xl  { margin: var(--spacing-xl)  !important; }
.m-0   { margin: 0 !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.mv-xs  { margin-top: var(--spacing-xs);  margin-bottom: var(--spacing-xs);  }
.mv-sm  { margin-top: var(--spacing-sm);  margin-bottom: var(--spacing-sm);  }
.mv-md  { margin-top: var(--spacing-md);  margin-bottom: var(--spacing-md);  }
.mv-lg  { margin-top: var(--spacing-lg);  margin-bottom: var(--spacing-lg);  }
.mv-xl  { margin-top: var(--spacing-xl);  margin-bottom: var(--spacing-xl);  }

.mh-xs  { margin-left: var(--spacing-xs);  margin-right: var(--spacing-xs);  }
.mh-sm  { margin-left: var(--spacing-sm);  margin-right: var(--spacing-sm);  }
.mh-md  { margin-left: var(--spacing-md);  margin-right: var(--spacing-md);  }
.mh-lg  { margin-left: var(--spacing-lg);  margin-right: var(--spacing-lg);  }
.mh-xl  { margin-left: var(--spacing-xl);  margin-right: var(--spacing-xl);  }


/* ============================================================
   SEÇÃO 5 — UTILITÁRIOS DE DISPLAY
   ============================================================ */

.block        { display: block        !important; }
.inline       { display: inline       !important; }
.inline-block { display: inline-block !important; }
.hidden       { display: none         !important; }

.overflow-hidden { overflow: hidden !important; }
.overflow-auto   { overflow: auto   !important; }

.w-full  { width:  100% !important; }
.h-full  { height: 100% !important; }

.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }


/* ============================================================
   SEÇÃO 6 — RESPONSIVIDADE / VISIBILIDADE
   ============================================================ */

/* Ocultar em mobile (< 768px) */
@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
}

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

/* Ocultar em desktop (>= 992px) */
@media (min-width: 992px) {
    .hide-desktop { display: none !important; }
}

/* Mostrar apenas em mobile */
.show-mobile { display: none !important; }
@media (max-width: 767px) {
    .show-mobile { display: block !important; }
}


/* ============================================================
   SEÇÃO 7 — COMPONENTES GLOBAIS REUTILIZÁVEIS
   ============================================================ */

/* Logo da navbar */
.navbar-logo { height: 60px; }

/* Seção hero com sobreposição negativa (home.php) */
.section-header-overlap { margin-top: -23rem !important; }

/* ============================================================
   SEÇÃO 8 — ESTADO VAZIO (empty state)
   ============================================================ */

.empty-state {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap:            var(--spacing-md);
    padding:        var(--spacing-3xl) var(--spacing-xl);
    text-align:     center;
    color:          var(--color-text-muted);
}
.empty-state-icon {
    font-size: var(--font-size-4xl);
    opacity:   0.4;
}
.empty-state-title {
    font-size:   var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color:       var(--color-text-secondary);
}
.empty-state-description {
    font-size: var(--font-size-sm);
    max-width: 360px;
}