/* ============================================================================
   BIF — Eventos (listado)
   ----------------------------------------------------------------------------
   Estilos específicos de eventos.html. Se carga DESPUÉS del design system.
   ============================================================================ */

/* ============================================================================
   PAGE HERO (compacto, no full-screen como la landing)
   ============================================================================ */
.page-hero {
    position: relative;
    padding-block: calc(var(--sp-9) + 80px) var(--sp-9); /* 80px = altura del header fijo */
    overflow: hidden;
    isolation: isolate;
}

.page-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 60% 50% at 20% 0%,  rgba(193,18,31,0.35), transparent 65%),
        radial-gradient(ellipse 50% 40% at 80% 100%, rgba(212,175,55,0.10), transparent 60%),
        linear-gradient(180deg, var(--bif-charcoal) 0%, var(--bif-black) 100%);
}

.page-hero__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.page-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--bif-ash);
}

.page-hero__breadcrumb a {
    color: var(--bif-ash);
    transition: color var(--dur-fast) var(--ease-out);
}

.page-hero__breadcrumb a:hover {
    color: var(--bif-fire);
}

.page-hero__title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 2rem + 6vw, 7rem);
    line-height: 0.85;
    color: var(--bif-white);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    margin-block: var(--sp-3) 0;
}

.page-hero__lead {
    max-width: 60ch;
    color: var(--bif-ash);
    font-size: var(--fs-lg);
    line-height: 1.55;
    margin-top: var(--sp-3);
}

/* ============================================================================
   CONTROLES (tabs + búsqueda)
   ============================================================================ */
.eventos-controles {
    padding-block: var(--sp-6);
    border-block: var(--border-thin);
    background: rgba(20,20,20,0.5);
}

.controles {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

@media (min-width: 768px) {
    .controles {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* Tabs */
.controles__tabs {
    display: flex;
    gap: 0;
    border: var(--border-thin);
    background: var(--bif-charcoal);
}

.controles__tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    font-family: var(--font-display);
    font-size: var(--fs-base);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--bif-ash);
    background: transparent;
    cursor: pointer;
    transition:
        color var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
    position: relative;
    border-right: 1px solid var(--bif-graphite);
    white-space: nowrap;
}

.controles__tab:last-child { border-right: none; }

.controles__tab:hover { color: var(--bif-bone); }

.controles__tab.is-active {
    color: var(--bif-white);
    background: var(--bif-iron);
}

.controles__tab.is-active::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: var(--bif-fire);
    box-shadow: var(--bif-glow-red-sm);
}

.controles__tab-count {
    font-family: var(--font-mono);
    font-size: 0.65em;
    padding: 2px 8px;
    border: 1px solid var(--bif-graphite);
    color: var(--bif-ash);
    border-radius: 999px;
    line-height: 1;
}

.controles__tab.is-active .controles__tab-count {
    color: var(--bif-fire);
    border-color: var(--bif-fire);
}

/* Búsqueda */
.controles__buscar {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 100%;
}

@media (min-width: 768px) {
    .controles__buscar { min-width: 320px; }
}

.controles__buscar-icon {
    position: absolute;
    left: var(--sp-4);
    width: 18px;
    height: 18px;
    color: var(--bif-ash);
    pointer-events: none;
}

.controles__buscar-input {
    padding-left: calc(var(--sp-4) + 28px);
    padding-right: calc(var(--sp-4) + 28px);
    height: 48px;
}

.controles__buscar-clear {
    position: absolute;
    right: var(--sp-3);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bif-ash);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
}

.controles__buscar-clear:hover { color: var(--bif-fire); }

.controles__buscar-clear svg {
    width: 16px;
    height: 16px;
}

/* ============================================================================
   RESULTADOS
   ============================================================================ */
.eventos-resultados {
    padding-block: var(--sp-9);
    min-height: 50vh;
}

/* ─── Grid: PRÓXIMOS (cards grandes) ─────────────────────────────────────── */
.eventos-grid--proximos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
}

.evento-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    background: var(--bif-charcoal);
    border: var(--border-thin);
    overflow: hidden;
    transition:
        border-color var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.evento-card:hover {
    border-color: var(--bif-blood);
    transform: translateY(-4px);
}

@media (min-width: 1024px) {
    .evento-card {
        grid-template-columns: 1fr 1.3fr;
    }
}

.evento-card__media {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--bif-iron);
}

@media (min-width: 1024px) {
    .evento-card__media {
        aspect-ratio: auto;
        min-height: 360px;
    }
}

.evento-card__media .bif-poster {
    position: absolute;
    inset: 0;
}

.evento-card__body {
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

@media (min-width: 768px) {
    .evento-card__body { padding: var(--sp-7); }
}

.evento-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.evento-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    line-height: 0.95;
    color: var(--bif-white);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

.evento-card__title-sub {
    color: var(--bif-fire);
}

.evento-card__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-3);
    padding: var(--sp-4) 0;
    border-block: 1px solid var(--bif-graphite);
}

.evento-card__meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.evento-card__meta-label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--bif-ash);
}

.evento-card__meta-value {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    color: var(--bif-white);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    line-height: 1.1;
}

.evento-card__pricing {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}

.evento-card__price-from {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--bif-ash);
}

.evento-card__price {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    color: var(--bif-white);
    line-height: 1;
    letter-spacing: var(--ls-wide);
}

.evento-card__price-currency {
    font-family: var(--font-mono);
    font-size: 0.55em;
    color: var(--bif-ash);
    letter-spacing: var(--ls-wider);
    margin-left: 6px;
    vertical-align: 4px;
}

.evento-card__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: auto;
}

/* Countdown compacto dentro del card */
.evento-card__countdown {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.evento-card__countdown .bif-countdown__unit {
    min-width: 60px;
    padding: var(--sp-2) var(--sp-3);
    background: rgba(15,15,15,0.7);
}

.evento-card__countdown .bif-countdown__value {
    font-size: var(--fs-xl);
}

/* ─── Grid: PASADOS (thumbs como en landing pero con margin extra) ──────── */
.eventos-grid--pasados {
    /* Reutiliza .bif-event-grid del components.css */
    margin-top: 0;
}

/* ============================================================================
   SKELETON LOADING
   ============================================================================ */
.eventos-skeleton {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
}

.skeleton-card {
    height: 320px;
    background: linear-gradient(
        100deg,
        var(--bif-charcoal) 30%,
        var(--bif-iron) 50%,
        var(--bif-charcoal) 70%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s infinite linear;
    border: var(--border-thin);
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================================
   EMPTY STATE
   ============================================================================ */
.eventos-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-block: var(--sp-10);
    gap: var(--sp-3);
}

.eventos-empty__mark {
    font-family: var(--font-display);
    font-size: clamp(6rem, 10vw, 10rem);
    line-height: 1;
    color: var(--bif-fire);
    opacity: 0.25;
    margin-bottom: var(--sp-2);
    text-shadow: var(--bif-glow-red-lg);
}

.eventos-empty__title {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    color: var(--bif-white);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

.eventos-empty__lead {
    max-width: 50ch;
    color: var(--bif-ash);
}