/* ============================================================
   eventos-preview.css — Sección de Eventos en Inicio
   ============================================================ */

.eventos-preview {
    background: #0d0d0d;
    padding: 6rem 0;
}

.eventos-header {
    text-align: center;
    margin-bottom: 3rem;
}

.eventos-header .section-subtitle {
    color: #888;
    font-size: .95rem;
    line-height: 1.7;
    margin-top: .75rem;
}

/* ── Grid ── */
.eventos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 260px;
    gap: 12px;
}

/* card grande ocupa 1x2 filas */
.evento-card--video {
    grid-row: span 2;
}

.evento-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    display: block;
    cursor: pointer;
    background: #1a1a1a;
    text-decoration: none;
}

.evento-card-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.23,1,.32,1);
}

/* Video como thumbnail (preload=none → primer frame via JS) */
.evento-card-media--vid {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Gradiente visible mientras carga el video en móvil */
    background: linear-gradient(145deg, #1a1409 0%, #2a1f00 40%, #1a1409 100%);
}

/* Ícono play encima del video */
.evento-vid-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

.evento-vid-play .material-symbols-outlined {
    font-size: 3.5rem;
    color: rgba(255,255,255,.7);
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
    transition: color .3s, transform .3s;
}

.evento-card:hover .evento-vid-play .material-symbols-outlined {
    color: #c9a84c;
    transform: scale(1.12);
}

.evento-card:hover .evento-card-media {
    transform: scale(1.06);
}

/* overlay */
.evento-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 55%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.2rem 1.4rem;
    transition: background .3s;
}

.evento-card:hover .evento-card-overlay {
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 100%);
}

.evento-card-tag {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #c9a84c;
    margin-bottom: .3rem;
    display: block;
}

.evento-card-label {
    font-size: .9rem;
    font-weight: 600;
    color: #f5f0e8;
    line-height: 1.3;
    margin: 0;
}

/* ── CTA card ── */
.evento-card--cta {
    background: linear-gradient(135deg, #1a1a1a 0%, #111 100%);
    border: 1px solid rgba(201,168,76,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .3s, background .3s;
}

.evento-card--cta:hover {
    border-color: rgba(201,168,76,.5);
    background: linear-gradient(135deg, #1f1e18 0%, #151510 100%);
}

.evento-cta-inner {
    text-align: center;
    color: #c9a84c;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

.evento-cta-inner .material-symbols-outlined {
    font-size: 2.5rem;
    opacity: .8;
}

.evento-cta-inner p {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #f5f0e8;
    margin: 0;
}

.evento-cta-arrow {
    font-size: 1.3rem;
    color: #c9a84c;
    transition: transform .3s;
}

.evento-card--cta:hover .evento-cta-arrow {
    transform: translateX(6px);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .eventos-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }
    .evento-card--video {
        grid-row: span 1;
    }
}

@media (max-width: 580px) {
    .eventos-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .evento-card {
        height: 170px;
    }
    .evento-card--video {
        grid-column: span 2;
        height: 220px;
    }
}