/* ================================================= */
/* CSS DA SEÇÃO EVENTOS (VERSÃO FINAL COM 4 COLUNAS) */
/* ================================================= */

.events-section {
    padding: 30px 20px;
    background-color: #003366;
}
.events-section .section-title { color: #ffffff; }
.events-section .section-title strong { color: #ffcc00; }
.events-section > .container > p { color: #ffffff; }

/* ... (código do layout complexo da home, sem alterações) ... */
.events-complex-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 15px; }
.events-small-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 15px; }
.event-card-large, .event-card-small { position: relative; display: block; border-radius: 12px; overflow: hidden; text-decoration: none; }
.event-card-large { grid-row: 1 / 2; }
.event-card-small { aspect-ratio: 1 / 1; }
.event-card-large img, .event-card-small img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.event-card-large:hover img, .event-card-small:hover img { transform: scale(1.05); }
.event-card-large .card-overlay-content, .event-card-small .card-overlay-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; background: rgba(0, 51, 102, 0.8); opacity: 0; transition: opacity 0.4s ease; box-sizing: border-box; text-decoration: none; }
.event-card-large:hover .card-overlay-content, .event-card-small:hover .card-overlay-content { opacity: 1; }
.card-title-clamp { color: #fff; font-weight: 600; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.event-card-large .card-title-clamp { font-size: 1.5rem; }
.event-card-small .card-title-clamp { font-size: 0.9rem; }
.card-overlay-content::after { content: '›'; position: absolute; right: 20px; bottom: 20px; width: 40px; height: 40px; background-color: #ffcc00; color: #003366; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; line-height: 1; font-weight: bold; }
.event-card-small .card-overlay-content::after { width: 30px; height: 30px; font-size: 1.5rem; right: 15px; bottom: 15px; }
@media (max-width: 992px) { .events-complex-grid { grid-template-columns: 1fr; } .events-small-grid { grid-template-columns: repeat(2, 1fr); } .event-card-large { height: 300px; } }

/* ================================================= */
/* 2. ESTILOS PARA A PÁGINA DE EVENTOS (eventos.php) */
/* ================================================= */

.events-page-section {
    background-color: #fff;
    padding: 60px 20px;
}

.events-grid {
    display: grid;
    /* REGRA ATUALIZADA PARA FORÇAR 4 COLUNAS */
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}
.event-card {
    background-color: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.event-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}
.event-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.event-card .event-caption {
    padding: 20px;
    text-align: left;
}
.event-card .event-caption p {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
    color: #003366;
}

/* --- Botão "Ver Mais" (Comum a ambos) --- */
.ver-mais-wrapper { margin-top: 40px; text-align: center; }
.btn-ver-mais { background-color: #003366; color: #fff; padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; border: 2px solid #ffcc00; }
.btn-ver-mais:hover { background-color: #ffcc00; color: #003366; }

/* ================================================= */
/* AJUSTE RESPONSIVO PARA A PÁGINA DE EVENTOS      */
/* ================================================= */

@media (max-width: 768px) {
    .events-grid {
        /* Altera para 1 coluna em telas menores */
        grid-template-columns: 1fr;
        /* Reduz o espaçamento entre os cards no mobile */
        gap: 20px;
    }
}