/* =========================================================
   BASE DA PÁGINA (ACADÊMICO / PROFISSIONAL)
   ========================================================= */

.evento-page {
    min-height: 100vh;
}

/* =========================================================
   HERO (BRANCO + AZUL CLARO)
   ========================================================= */

.evento-hero {
    width: 100%;
    background-color: #a0c1ff58;
    color: #000;
    padding: 110px 0 80px 0;
    text-align: center;
}

.evento-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3rem);
    margin-bottom: 10px;
}

.evento-sub {
    opacity: 0.85;
    font-size: 1rem;
}

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

.evento-descricao {
    margin-top: 60px;
}

.evento-descricao h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.evento-descricao p {
    color: var(--text-muted);
    max-width: 720px;
}

/* =========================================================
   FAIXA AZUL CLARA (FULL WIDTH)
   ========================================================= */

.evento-info-wrapper {
    width: 100%;
    background: #a0c1ff58;
    padding: 70px 0;
    margin-top: 60px;
}

/* =========================================================
   GRID DE CARDS (BENTO)
   Reutiliza o layout de projetos
   ========================================================= */

.evento-info-wrapper .grid-projetos-bento {
    gap: 28px;
}

/* =========================================================
   AJUSTES FINOS NOS CARDS BENTO
   ========================================================= */

.evento-info-wrapper .projeto-card-bento {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}

.evento-info-wrapper .projeto-card-bento p {
    color: #555;
}

/* Badge (ano/período) */
.evento-info-wrapper .card-badge {
    color: #1e3a8a;
}

/* Tags */
.evento-info-wrapper .tag {
    background: #f1f5f9;
    color: #1e293b;
}

/* Hover elegante */
.evento-info-wrapper .projeto-card-bento:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

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

@media (max-width: 768px) {

    .evento-hero {
        padding: 130px 0 60px 0;
    }

    .evento-descricao {
        margin-top: 40px;
    }

    .evento-info-wrapper {
        padding: 50px 0;
    }
}