/* ==========================================
   EVENTOS
   ========================================== */

#eventos{

    padding:100px 20px;

    background:#f5f5f5;

}


/* ==========================================
   CABEÇALHO
   ========================================== */

#eventos .section-header{

    text-align:center;

    max-width:850px;

    margin:0 auto 55px;

}


#eventos .capitulo{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    font-weight:600;

    letter-spacing:2px;

    color:#fe6601;

}


#eventos .section-header h2{

    margin:0;

    font-family:'Bebas Neue', sans-serif;

    font-size:48px;

    letter-spacing:1px;

    color:#00027d;

}


#eventos .section-divider{

    width:70px;

    height:4px;

    margin:18px auto;

    background:#fe6601;

}


#eventos .section-header p{

    margin:0;

    color:#666;

    font-size:16px;

    line-height:1.7;

}


/* ==========================================
   GRID
   ========================================== */

.eventos-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit, minmax(520px, 1fr));

    gap:25px;

    max-width:1200px;

    margin:0 auto;

}


/* ==========================================
   CARD
   ========================================== */

.evento-card{

    display:flex;

    min-height:260px;

    background:#fff;

    border-radius:12px;

    overflow:hidden;

    box-shadow:
        0 8px 25px rgba(0,0,0,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.evento-card:hover{

    transform:translateY(-5px);

    box-shadow:
        0 14px 35px rgba(0,0,0,.12);

}


/* ==========================================
   DATA
   ========================================== */

.evento-data{

    width:110px;

    min-width:110px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:#00027d;

    color:#fff;

    padding:20px 10px;

}


.evento-dia{

    font-family:'Bebas Neue', sans-serif;

    font-size:52px;

    line-height:1;

}


.evento-mes{

    margin-top:7px;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    color:#fe6601;

}


/* ==========================================
   CONTEÚDO
   ========================================== */

.evento-conteudo{

    flex:1;

    display:flex;

    flex-direction:column;

    padding:28px 30px;

}


.evento-categoria{

    display:inline-block;

    margin-bottom:8px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    color:#fe6601;

}


.evento-conteudo h3{

    margin:0 0 18px;

    font-family:'Bebas Neue', sans-serif;

    font-size:30px;

    letter-spacing:.5px;

    color:#00027d;

}


/* ==========================================
   INFORMAÇÕES
   ========================================== */

.evento-informacoes{

    display:flex;

    flex-direction:column;

    gap:9px;

    margin-bottom:5px;

}


.evento-info{

    display:flex;

    align-items:flex-start;

    gap:9px;

    color:#555;

    font-size:14px;

    line-height:1.5;

}


.evento-info span:first-child{

    flex-shrink:0;

}


.evento-endereco{

    color:#777;

    font-size:13px;

}


/* ==========================================
   DESCRIÇÃO
   ========================================== */

.evento-descricao{

    margin:18px 0 0;

    padding-top:15px;

    border-top:1px solid #eee;

    color:#666;

    font-size:14px;

    line-height:1.6;

}


/* ==========================================
   YOUTUBE
   ========================================== */

.evento-youtube{

    display:inline-block;

    align-self:flex-start;

    margin-top:auto;

    padding-top:18px;

    color:#fe6601;

    font-size:14px;

    font-weight:700;

    text-decoration:none;

    transition:
        color .2s ease,
        transform .2s ease;

}


.evento-youtube:hover{

    color:#00027d;

    transform:translateX(3px);

}


/* ==========================================
   SEM EVENTOS
   ========================================== */

.eventos-grid:empty{

    display:none;

}

/* ==========================================
   PRÉ-VISUALIZAÇÃO DO YOUTUBE
   ========================================== */

.evento-video{

    display:block;

    margin-top:20px;

    text-decoration:none;

    color:inherit;

}


.evento-video-preview{

    position:relative;

    width:100%;

    aspect-ratio:16 / 9;

    overflow:hidden;

    border-radius:8px;

    background:#eee;

}


.evento-video-preview img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .3s ease;

}


.evento-video-play{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%, -50%);

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fe6601;

    color:#fff;

    font-size:22px;

    padding-left:3px;

    box-shadow:0 5px 18px rgba(0,0,0,.25);

    transition:

        transform .25s ease,

        background .25s ease;

}


.evento-video:hover .evento-video-preview img{

    transform:scale(1.04);

}


.evento-video:hover .evento-video-play{

    transform:translate(-50%, -50%) scale(1.08);

    background:#00027d;

}


.evento-video-link{

    display:block;

    margin-top:10px;

    color:#fe6601;

    font-size:14px;

    font-weight:700;

}


.evento-video:hover .evento-video-link{

    color:#00027d;

}


/* ==========================================
   RESPONSIVO
   ========================================== */

@media (max-width:1100px){

    .eventos-grid{

        grid-template-columns:1fr;

        max-width:800px;

    }

}


@media (max-width:600px){

    #eventos{

        padding:70px 15px;

    }


    #eventos .section-header{

        margin-bottom:40px;

    }


    #eventos .section-header h2{

        font-size:40px;

    }


    .eventos-grid{

        grid-template-columns:1fr;

    }


    .evento-card{

        flex-direction:column;

        min-height:0;

    }


    .evento-data{

        width:100%;

        min-width:0;

        padding:15px;

        flex-direction:row;

        gap:10px;

    }


    .evento-dia{

        font-size:38px;

    }


    .evento-mes{

        margin-top:0;

    }


    .evento-conteudo{

        padding:22px;

    }


    .evento-conteudo h3{

        font-size:26px;

    }

}