/* ================================================================
   Layouts Presets — Página Pública de Eventos
   Layout-01 (Topo Clássico) é o padrão; não requer overrides.
   ================================================================ */

/* ================================================================
   nav-desktop--left  (layout-02: Lateral Compacta)
   Converte a nav interna em sidebar fixa na esquerda em ≥768px.
   ================================================================ */

@media (min-width: 768px) {
    /* main vira grid 2 colunas: sidebar (200px) | conteúdo (1fr) */
    body.nav-desktop--left main.main-content {
        display: grid;
        grid-template-columns: 200px 1fr;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        align-items: start;
    }

    /* Sidebar ocupa coluna 1 em todas as linhas */
    body.nav-desktop--left .evento-nav-internal {
        grid-column: 1;
        grid-row: 1 / 999;
        position: sticky;
        top: 56px;
        height: calc(100vh - 56px);
        overflow-y: auto;
        border-right: 1px solid rgba(0, 0, 0, 0.08);
        border-bottom: none;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 1019;
    }

    /* Todo o resto do main vai para coluna 2 */
    body.nav-desktop--left main.main-content > *:not(.evento-nav-internal) {
        grid-column: 2;
    }

    /* Links da nav: empilhados verticalmente */
    body.nav-desktop--left .evento-nav-links {
        flex-direction: column;
        justify-content: flex-start;
        padding: 16px 8px;
        gap: 2px;
    }

    body.nav-desktop--left .evento-nav-links a {
        border-radius: 8px;
        padding: 10px 16px;
    }

    /* Troca o underline inferior por acento lateral esquerdo */
    body.nav-desktop--left .evento-nav-links a::after {
        top: 20%;
        bottom: 20%;
        left: 0;
        right: auto;
        width: 3px;
        height: auto;
        border-radius: 0 3px 3px 0;
        transition: opacity 0.25s ease;
        opacity: 0;
    }

    body.nav-desktop--left .evento-nav-links a.active::after {
        opacity: 1;
        width: 3px;
        left: 0;
    }
}

/* Em mobile (<768px), nav-desktop--left não altera o comportamento */
@media (max-width: 767.98px) {
    body.nav-desktop--left main.main-content {
        display: block;
    }
}

/* ================================================================
   atividades--list  (layout-02: Lateral Compacta)
   Coluna única estilo lista horizontal em vez do grid de 3 colunas.
   ================================================================ */

body.atividades--list #atividades .grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    row-gap: 16px;
    column-gap: 0;
}

/* Cards horizontais: imagem à esquerda, corpo à direita */
@media (min-width: 576px) {
    body.atividades--list #atividades .card {
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }

    body.atividades--list #atividades .card > img {
        width: 140px;
        min-width: 140px;
        height: auto;
        max-height: unset;
        object-fit: cover;
        flex-shrink: 0;
        border-radius: 12px 0 0 12px;
    }

    body.atividades--list #atividades .card .body {
        flex: 1;
        min-width: 0;
    }
}

/* Mobile: cards empilhados normalmente */
@media (max-width: 575.98px) {
    body.atividades--list #atividades .card {
        flex-direction: column;
    }

    body.atividades--list #atividades .card > img {
        width: 100%;
        min-width: 0;
        height: 160px;
        border-radius: 12px 12px 0 0;
    }
}