/* ===========================================================
   🎫 ARCHIVE DE EVENTOS — Paradise.Events
   ===========================================================
   Controla:
   - Contenedor general y fondo
   - Título EVENTOS
   - Separador decorativo
   - Secciones Próximos / Pasados
   - Tarjetas (cards)
   - Responsive y paginación
=========================================================== */



/* ===========================================================
   1️⃣ CONTENEDOR GENERAL
=========================================================== */

/* Área global del archivo */
#pe-events-archive {
    width: 100%;
    padding-top: 50px;  /* Separación moderada con el header */
    padding-bottom: 80px;
}

/* Contenedor interno */
.pe-events-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 50px;

    background: rgba(13, 13, 16, 0.68);
    border-radius: 22px;

    box-shadow: 0 0 45px rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
}



/* ===========================================================
   2️⃣ TÍTULO PRINCIPAL: “EVENTOS”
=========================================================== */

/* Wrapper del H1 y el separador */
.pe-events-archive-title-wrapper {
    text-align: center;
    margin-bottom: 40px;  /* Espaciado moderado */
}

/* Título principal */
.pe-events-archive-title {
    font-size: 45px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #E8E8EC;
}



/* ===========================================================
   ✨ 2.1 SEPARADOR DECORATIVO (doble línea + ícono)
=========================================================== */

.pe-events-separator {
    display: flex;                    /* Línea izquierda + icono + línea derecha */
    justify-content: center;
    align-items: center;
    margin: 18px auto 0;              /* espacio justo debajo del H1 */
    gap: 16px;                        /* distancia entre líneas e ícono */
}

/* Contenedor de cada “lado” de líneas */
.pe-events-separator .pe-line {
    position: relative;
    flex: 1;                          /* se estiran hasta el ancho disponible */
    max-width: 280px;                 /* límite para no abarcar toda la pantalla */
    height: 10px;                     /* alto del bloque que contiene las dos líneas */
}

/* Las dos líneas paralelas (arriba y abajo) */
.pe-events-separator .pe-line::before,
.pe-events-separator .pe-line::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;                      /* grosor de cada línea */
    background: #E8E8EC;              /* color de las líneas */
    opacity: 0.8;
}

.pe-events-separator .pe-line::before {
    top: 0;                           /* primera línea (superior) */
}
.pe-events-separator .pe-line::after {
    bottom: 0;                        /* segunda línea (inferior) */
}

/* Contenedor del ícono central */
.pe-events-separator .pe-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG del icono (usa currentColor del CSS) */
.pe-events-separator .pe-icon svg {
    width: 30px;
    height: 30px;
    color: #E8E8EC;                   /* esto alimenta fill="currentColor" */
    opacity: 0.95;
}

/* ===========================================================
   3️⃣ TÍTULOS DE SECCIÓN (Próximos / Pasados)
=========================================================== */

.pe-section-title {
    font-size: 32px;
    font-weight: 700;
    color: #E8E8EC;
    text-align: center;
    margin: 50px 0 40px;
    letter-spacing: 1px;
}



/* ===========================================================
   4️⃣ TARJETAS DE EVENTO
=========================================================== */

/* Contenedor principal: crea un stacking context real */
.pe-event-card {
    position: relative;
    z-index: 10;                /* card por encima del fondo global */
    display: flex;
    justify-content: space-between;
    align-items: center;

    max-width: 800px;
    margin: 0 auto 32px;
    padding: 28px 36px;

    background: rgba(0,0,0,0.55);
    border-radius: 16px;
    overflow: hidden;

    backdrop-filter: blur(6px);
}

/* Fondo difuminado de la imagen */
.pe-event-card::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: var(--event-bg-image) !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 1;
    filter: blur(5px);
    transform: scale(1.12);

    z-index: 1;     /* fondo real */
}

/* Capa oscura que suaviza la foto */
.pe-event-card::after {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,0.35); /* opacidad ajustable */
    z-index: 2;                   /* encima de la imagen, pero bajo el texto */
}

/* Contenido siempre al frente */
.pe-event-card > * {
    position: relative;
    z-index: 5 !important;    /* 🔥🔥 NO vuelve a quedar debajo jamás */
}

/* ===========================================================
   5️⃣ BLOQUE FECHA
=========================================================== */

.pe-event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 90px;
    text-align: center;
    margin-right: 32px;
}

.pe-event-date .pe-day {
    font-size: 42px;
    font-weight: 800;
    color: #E8E8EC;
}

.pe-event-date .pe-month {
    font-size: 14px;
    font-weight: 700;
    color: #ffdd6e;
    margin-top: 3px;
}

.pe-event-date .pe-year {
    font-size: 13px;
    color: #E8E8EC;
    opacity: 0.8;
}



/* ===========================================================
   6️⃣ BLOQUE CENTRAL DEL EVENTO
=========================================================== */

.pe-event-content {
    flex: 1;
}

.pe-venue {
    font-size: 16px;
    color: #E8E8EC;
    margin-bottom: 4px;
}

.pe-artists {
    font-size: 18px;
    font-weight: 700;
    color: #E8E8EC;
    margin-bottom: 6px;
}

.pe-organizers {
    font-size: 15px;          /* tamaño de letra (ajustable) */
    font-weight: 600;         /* peso del texto */
    color: #E8E8EC;           /* color del texto */
    margin-bottom: 6px;       /* separación hacia abajo */
    padding: 2px 0;           /* espacio interno vertical */
    letter-spacing: 0.4px;    /* ajuste fino */
    text-transform: none;     /* cambiar a uppercase/capitalize si lo deseas */
    opacity: 0.9;             /* ligera transparencia estética */
}


.pe-title a {
    font-size: 26px;
    font-weight: 800;
    text-decoration: none;
    color: #E8E8EC;
    transition: 0.2s;
}

.pe-title a:hover {
    text-shadow: 0 0 10px rgba(0,200,255,0.7);
}



/* ===========================================================
   7️⃣ BOTÓN DETALLES
=========================================================== */

.pe-event-actions {
    display: flex;
    align-items: center;
}

.pe-btn-details {
    background: #46B2E0;
    color: #E8E8EC !important;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: opacity .2s;
}

.pe-btn-details:hover {
    opacity: .85;
}



/* ===========================================================
   8️⃣ PAGINACIÓN
=========================================================== */

.pe-events-pagination {
    margin-top: 40px;
    text-align: center;
}

.pe-events-pagination .page-numbers {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 4px;
    background: rgba(0,0,0,0.4);
    border-radius: 6px;
    color: #E8E8EC;
    font-size: 14px;
    text-decoration: none;
}

.pe-events-pagination .current {
    background: #9f4ef5;
    font-weight: 700;
}



/* ===========================================================
   9️⃣ RESPONSIVE
=========================================================== */

@media (max-width: 768px) {

    .pe-events-wrapper {
        padding: 30px 20px;
    }

    .pe-event-card {
        flex-direction: column;
        text-align: center;
        padding: 22px 20px;
    }

    .pe-event-date {
        margin-right: 0;
        margin-bottom: 14px;
    }

    .pe-event-actions {
        margin-top: 20px;
        justify-content: center;
    }

    .pe-title a {
        font-size: 22px;
    }
}