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

.event-card{

    position:relative;

    display:flex;

    flex-direction:column;

    background:var(--surface);

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow-md);

    transition:var(--transition);

    animation:fade .35s;

}

.event-card:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-lg);

}

/* ==========================================
   FAVORITO
========================================== */

.event-card-favorite{

    position:absolute;

    top:16px;

    right:16px;

    z-index:10;

}

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

.event-card-content{

    padding:22px;

    display:flex;

    flex-direction:column;

    gap:24px;

}

/* ==========================================
   BADGE LOCAL
========================================== */

.event-card-location{

    display:flex;

}

.badge-location{

    display:inline-flex;

    align-items:center;

    padding:8px 14px;

    border-radius:999px;

    background:rgba(156,49,60,.10);

    color:var(--primary);

    font-size:13px;

    font-weight:600;

}

/* ==========================================
   TÍTULO
========================================== */

.event-card-title{

    margin:0;

    font-size:24px;

    font-weight:700;

    line-height:1.25;

    color:var(--text);

}

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

.event-card-description{

    margin:0;

    color:var(--text-light);

    font-size:15px;

    line-height:1.6;

}

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

.event-card-info{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.event-info{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--text-light);

    font-size:14px;

}

.event-info .material-symbols-rounded{

    font-size:20px;

    color:var(--primary);

}

/* ==========================================
   RODAPÉ
========================================== */

.event-card-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:18px;

    border-top:1px solid var(--border);

}

/* ==========================================
   LINK
========================================== */

.event-card-link{

    display:inline-flex;

    align-items:center;

    gap:6px;

    text-decoration:none;

    color:var(--primary);

    font-size:14px;

    font-weight:600;

    transition:var(--transition);

}

.event-card-link:hover{

    gap:10px;

}

.event-card-link .material-symbols-rounded{

    font-size:18px;

}

/* ==========================================
   STATUS
========================================== */

.event-card.finished{

    opacity:.55;

}

.event-card.live{

    border:2px solid var(--secondary);

}

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

@media (max-width:640px){

    .event-card{

        border-radius:18px;

    }

    .event-card-content{

        padding:18px;

    }

    .event-card-title{

        font-size:21px;

    }

    .event-card-description{

        font-size:14px;

    }

}