/**
 * Econecta — Componentes de card de evento v2 (TECH-16)
 * © 2026 Pedro Augusto Ferreira Oliveira Santos
 * Usado em: pages/eventos.php, index.php
 */

/* ── Grid ── */
.ev-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 56px;
}
@media (max-width: 1024px) { .ev-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .ev-grid { grid-template-columns: 1fr; gap: 16px; } }

/* ── Card v2 — estilo Airbnb Experiences ── */
.ev-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
    position: relative;
}
.ev-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 48px rgba(0,0,0,.13), 0 0 0 1px rgba(44,95,62,.1);
}

/* ── Área de mídia (imagem) ── */
.ev-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(145deg, #0D1F14 0%, #1B4332 60%, #2C5F3E 100%);
    flex-shrink: 0;
}
.ev-card-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.ev-card:hover .ev-card-media img { transform: scale(1.06); }

/* Gradient overlay no rodapé da imagem */
.ev-card-media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 35%, rgba(0,0,0,.65) 100%);
    pointer-events: none;
    z-index: 2;
}

/* ── Placeholder rico (quando sem imagem) — pôster tipográfico ── */
.ev-card-placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    justify-content: flex-end; padding: 16px;
    z-index: 4;
}
.ev-ph-nome {
    font-size: .875rem; font-weight: 800; color: #fff;
    line-height: 1.3; display: -webkit-box;
    -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 8px; text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.ev-ph-date {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff; font-size: .72rem; font-weight: 700;
    padding: 3px 10px; border-radius: 50px;
    letter-spacing: .04em; text-transform: uppercase;
    backdrop-filter: blur(4px); width: fit-content;
}
/* Legado — manter compatibilidade */
.ev-placeholder-data {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.2);
    border-radius: 16px; padding: 14px 22px; backdrop-filter: blur(6px);
}
.ev-placeholder-dia { font-size: 2.5rem; font-weight: 800; color: #fff; line-height: 1; }
.ev-placeholder-mes { font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.75); letter-spacing: .12em; text-transform: uppercase; }

/* ── Badges (canto superior esquerdo da imagem) ── */
.ev-card-badges {
    position: absolute; top: 10px; left: 10px; z-index: 3;
    display: flex; gap: 5px; flex-wrap: wrap;
}
.ev-badge {
    padding: 3px 9px; border-radius: 50px;
    font-size: .67rem; font-weight: 700; letter-spacing: .3px;
    backdrop-filter: blur(4px);
}
.ev-badge-gratuito { background: rgba(76,175,114,.92); color: #fff; }
.ev-badge-destaque  { background: rgba(201,168,76,.96); color: #1a1a1a; }
.ev-badge-meia      { background: rgba(123,31,162,.88); color: #fff; }
.ev-badge-encerra   { background: rgba(229,57,53,.92); color: #fff; }

/* ── Pílula de data (canto inferior esquerdo da imagem) ── */
.ev-card-date-pill {
    position: absolute; bottom: 10px; left: 10px; z-index: 3;
    background: rgba(255,255,255,.95);
    color: #1B4332; font-size: .7rem; font-weight: 700;
    padding: 3px 10px; border-radius: 50px;
    letter-spacing: .04em; text-transform: uppercase;
    backdrop-filter: blur(4px);
}

/* ── Countdown (canto inferior direito) ── */
.ev-card-countdown {
    position: absolute; bottom: 10px; right: 10px; z-index: 3;
    background: rgba(0,0,0,.62); color: #fff;
    font-size: .7rem; font-weight: 600;
    padding: 3px 9px; border-radius: 8px;
    backdrop-filter: blur(4px);
}

/* ── Body ── */
.ev-card-body {
    padding: 14px 16px 16px;
    flex: 1; display: flex; flex-direction: column;
}
.ev-card-nome {
    font-size: 1rem; font-weight: 700; color: #111;
    margin: 0 0 6px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.ev-card-local {
    font-size: .8rem; color: #888;
    margin: 0; padding-bottom: 12px; flex: 1;
}
.ev-card-footer {
    display: flex; align-items: center;
    justify-content: space-between;
    padding-top: 12px; border-top: 1px solid #F3F3F3; gap: 8px;
}
.ev-card-preco        { font-size: 1.05rem; font-weight: 800; color: #1B4332; }
.ev-card-preco.gratis { color: #4CAF72; }
.ev-card-kp           { font-size: .67rem; color: #4CAF72; font-weight: 600; display: block; margin-top: 2px; }
.ev-card-cta {
    font-size: .78rem; font-weight: 700;
    color: #fff; background: #2C5F3E;
    padding: 7px 15px; border-radius: 50px;
    white-space: nowrap; flex-shrink: 0;
    transition: background .2s;
}
.ev-card:hover .ev-card-cta { background: #1B4332; }

/* ── Título de seção ── */
.ev-section-title {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 24px; padding-bottom: 16px;
    border-bottom: 2px solid #F0F7F1;
    flex-wrap: wrap; gap: 12px;
}
.ev-section-title h2 { font-size: 1.375rem; font-weight: 800; color: #1B4332; margin: 0; }
.ev-section-title span { font-size: .875rem; color: #aaa; }

/* ── Estado vazio ── */
.ev-vazio { text-align: center; padding: 80px 20px; }
.ev-vazio .ev-vazio-icon { font-size: 4rem; margin-bottom: 16px; }
.ev-vazio h3 { font-size: 1.25rem; font-weight: 700; color: #333; margin: 0 0 8px; }
.ev-vazio p  { color: #888; margin: 0 0 24px; }

/* ── Paginação ── */
.ev-paginacao { display: flex; justify-content: center; gap: 8px; margin: 40px 0; flex-wrap: wrap; }
.ev-paginacao a, .ev-paginacao span {
    padding: 9px 16px; border-radius: 10px; font-size: .875rem;
    font-weight: 600; text-decoration: none;
    border: 1.5px solid #E5E5E5; color: #555; transition: all .2s;
}
.ev-paginacao a:hover { border-color: #4CAF72; color: #2C5F3E; background: #F0F7F1; }
.ev-paginacao span.ativa { background: #2C5F3E; color: #fff; border-color: #2C5F3E; }

/* ── Seção destaques (legacy — mantida para compatibilidade) ── */
.ev-destaques { background: #F0F7F1; padding: 40px 0; margin-bottom: 48px; }

/* ── Carrossel (legacy) ── */
.ev-carousel-wrap { position: relative; }
.ev-carousel-track {
    display: flex; gap: 20px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px;
}
.ev-carousel-track::-webkit-scrollbar { display: none; }
.ev-carousel-track .ev-card { scroll-snap-align: start; flex: 0 0 320px; min-width: 0; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .ev-card-body { padding: 12px 14px 14px; }
    .ev-card-nome { font-size: .9375rem; }
}