/* ====================================================
   SISTEMA DE LAYOUTS — css/layouts.css
   Modifica APENAS estrutura, posicionamento e organização.
   Cores, temas e identidade visual permanecem intocados.
   ==================================================== */

/* ── Transição suave ao trocar layout ─────────────── */
body { transition: none; }

/* ── Layout 2: Nav centralizado ──────────────────────
   Header: logo esquerda, nav absolutamente centrado   */
body.site-layout-2 .l2-nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* ── Layout 3: Sidebar fixa ──────────────────────────
   Shift de conteúdo para a direita                    */
body.site-layout-3 .l3-main-wrap {
    margin-left: 0;
}
@media (min-width: 768px) {
    body.site-layout-3 .l3-main-wrap {
        margin-left: 16rem; /* 256px = w-64 */
    }
}

/* ── Auth pages (login / registrar) ──────────────────
   Layout 3: formulário à direita da tela              */
@media (min-width: 1024px) {
    body.site-layout-3.auth-page {
        justify-content: flex-end;
        padding-right: 10vw;
    }
}
/* Layout 4: card menor, mais compacto                 */
body.site-layout-4.auth-page .auth-card {
    max-width: 26rem;
}
/* Layout 5: card mais largo                           */
body.site-layout-5.auth-page .auth-card {
    max-width: 38rem;
}

/* ── Noticias públicas ───────────────────────────────
   Layout 4: grid com 4 colunas no desktop             */
@media (min-width: 1280px) {
    body.site-layout-4 .news-public-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* Layout 5: 2 colunas + feed lateral                  */
@media (min-width: 1024px) {
    body.site-layout-5 .news-public-wrap {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
        align-items: start;
    }
    body.site-layout-5 .news-public-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.site-layout-5 .news-public-sidebar {
        display: block;
    }
}
body.site-layout-5 .news-public-sidebar {
    display: none;
}

/* ── Tutoriais ───────────────────────────────────────
   Layout 3: remove sidebar de categorias              */
@media (min-width: 1024px) {
    body.site-layout-3 .tutorials-cat-sidebar {
        display: none !important;
    }
    body.site-layout-3 .tutorials-content-area {
        flex: 1 1 100%; /* ocupa toda a largura disponível */
        max-width: 100%;
    }
}
/* Layout 4 e 5: container mais largo                  */
body.site-layout-4 .tutorials-outer,
body.site-layout-5 .tutorials-outer {
    max-width: 1400px;
}

/* ── Dashboard topo ──────────────────────────────────
   Layout 4: sidebar mais estreita                     */
@media (min-width: 768px) {
    body.site-layout-4 #sidebar {
        width: 14rem;
    }
    body.site-layout-4 .md\:ml-64 {
        margin-left: 14rem;
    }
}
/* Layout 5: sidebar ligeiramente mais larga           */
@media (min-width: 768px) {
    body.site-layout-5 #sidebar {
        width: 18rem;
    }
    body.site-layout-5 .md\:ml-64 {
        margin-left: 18rem;
    }
}