/* =============================================================================
   KORIPASS – EVENT DETAIL CSS
   single-kp_event.php styles
   ============================================================================= */

/* ── WRAPPER PRINCIPAL ──────────────────────────────────────────────────────── */
.kp-event {
    background: var(--kp-bg);
    padding-bottom: 100px; /* espacio para sticky CTA mobile */
}

/* ── HERO ───────────────────────────────────────────────────────────────────── */
.kp-event__hero {
    position: relative;
    width: 100%;
    height: clamp(200px, 32vw, 420px);
    overflow: hidden;
}

.kp-event__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.kp-event__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(13, 27, 46, 0.10) 0%,
        rgba(13, 27, 46, 0.55) 60%,
        rgba(13, 27, 46, 1)    100%
    );
}

/* ── BODY ───────────────────────────────────────────────────────────────────── */
.kp-event__body {
    max-width: var(--kp-container);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
}

/* ── TOP ROW: Título / CTA / Redes ─────────────────────────────────────────── */
.kp-event__top-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: clamp(20px, 3vw, 48px);
    padding: clamp(20px, 3vw, 36px) 0 clamp(24px, 3vw, 40px);
    border-bottom: 1px solid var(--kp-border);
}

.kp-event__title-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kp-event__cat-badge {
    display: inline-block;
    align-self: flex-start;
    background: rgba(0, 194, 203, 0.12);
    border: 1px solid rgba(0, 194, 203, 0.3);
    color: var(--kp-accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 6px;
}

.kp-event__title {
    font-family: var(--kp-font-display);
    font-size: clamp(22px, 4vw, 42px);
    font-weight: 700;
    color: var(--kp-white);
    line-height: 1.15;
    margin: 0;
}

.kp-event__meta {
    font-size: clamp(12px, 1.3vw, 14px);
    color: var(--kp-text-muted);
    line-height: 1.5;
}

/* CTA wrap (derecha) */
.kp-event__cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    flex-shrink: 0;
}

/* ── BOTÓN QUIERO MI PASE ───────────────────────────────────────────────────── */
.kp-btn-pase {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--kp-accent);
    color: var(--kp-bg);
    font-family: var(--kp-font-display);
    font-size: 15px;
    font-weight: 700;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--kp-transition), transform var(--kp-transition), box-shadow var(--kp-transition);
    box-shadow: 0 4px 20px rgba(0, 194, 203, 0.35);
}

.kp-btn-pase:hover {
    background: #00d9e3;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 194, 203, 0.5);
    color: var(--kp-bg);
}

.kp-btn-pase:active { transform: translateY(0); }

.kp-btn-pase--disabled {
    /* Mantener estilo activo — el botón siempre lleva a login/registro */
    background: var(--kp-accent);
    color: #0d1b2e;
    box-shadow: 0 4px 20px rgba(0, 194, 203, 0.35);
    cursor: pointer;
    opacity: 1;
}

.kp-login-hint {
    font-size: 12px;
    color: var(--kp-text-muted);
    text-align: right;
}

.kp-login-hint a {
    color: var(--kp-accent);
    font-weight: 500;
}

/* Redes del evento */
.kp-event__social {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.kp-event__social-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--kp-text-muted);
}

.kp-event__social-icons { display: flex; gap: 10px; }

.kp-event__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--kp-border);
    border-radius: 9px;
    color: var(--kp-text-muted);
    transition: all var(--kp-transition);
}

.kp-event__social-link:hover {
    background: rgba(0,194,203,0.12);
    border-color: var(--kp-accent);
    color: var(--kp-accent);
    transform: translateY(-2px);
}

/* ── TÍTULOS DE SECCIÓN ─────────────────────────────────────────────────────── */
.kp-event__section-title {
    font-family: var(--kp-font-display);
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 700;
    color: var(--kp-white);
    margin: 0 0 clamp(14px, 2vw, 22px);
}

/* ── GRID: ACERCA DE + MAPA ─────────────────────────────────────────────────── */
.kp-event__info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    padding: clamp(28px, 4vw, 48px) 0;
    border-bottom: 1px solid var(--kp-border);
}

/* Acerca de */
.kp-event__about-text {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius-card);
    padding: clamp(16px, 2.5vw, 28px);
    font-size: clamp(13px, 1.4vw, 15px);
    color: var(--kp-text);
    line-height: 1.75;
}

.kp-event__about-text p { margin: 0 0 1em; }
.kp-event__about-text p:last-child { margin-bottom: 0; }

/* Mapa */
.kp-event__address {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    color: var(--kp-text-muted);
    margin-bottom: 12px;
}

.kp-event__address svg { flex-shrink: 0; margin-top: 2px; color: var(--kp-accent); }

.kp-event__map {
    width: 100%;
    border-radius: var(--kp-radius-card);
    overflow: hidden;
    border: 1px solid var(--kp-border);
    background: rgba(255,255,255,0.03);
}

.kp-event__map iframe {
    display: block;
    width: 100%;
    height: 260px;
    border: none;
    filter: grayscale(0.3) invert(0.85) hue-rotate(175deg); /* dark map */
}

.kp-event__map--placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 180px;
    color: var(--kp-text-muted);
    font-size: 13px;
}

.kp-event__map-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--kp-accent);
    transition: opacity var(--kp-transition);
}

.kp-event__map-link:hover { opacity: 0.75; }

/* ── GALERÍA CARRUSEL ───────────────────────────────────────────────────────── */
.kp-event__gallery-section {
    padding: clamp(28px, 4vw, 48px) 0;
    border-bottom: 1px solid var(--kp-border);
}

.kp-gallery-carousel {
    position: relative;
}

.kp-gallery__track-wrap {
    overflow: hidden;
    border-radius: var(--kp-radius-card);
}

.kp-gallery__track {
    display: flex;
    gap: var(--kp-gap);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.kp-gallery__item {
    flex: 0 0 auto;
    width: clamp(180px, 24vw, 280px);
    border-radius: var(--kp-radius-card);
    overflow: hidden;
    border: 1px solid var(--kp-border);
}

.kp-gallery__link {
    display: block;
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.kp-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.kp-gallery__item:hover .kp-gallery__img { transform: scale(1.06); }

.kp-gallery__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 194, 203, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--kp-transition);
    color: var(--kp-white);
}

.kp-gallery__item:hover .kp-gallery__overlay { opacity: 1; }

/* Botones galería */
.kp-gallery__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px; height: 40px;
    background: rgba(13, 27, 46, 0.85);
    border: 1px solid var(--kp-border);
    border-radius: 50%;
    color: var(--kp-white);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background var(--kp-transition), border-color var(--kp-transition);
    padding: 0;
}

.kp-gallery__btn:hover { background: var(--kp-accent); border-color: var(--kp-accent); color: var(--kp-bg); }
.kp-gallery__btn--prev { left: -20px; }
.kp-gallery__btn--next { right: -20px; }

/* ── FAQ ACCORDION ──────────────────────────────────────────────────────────── */
.kp-event__faq-section {
    padding: clamp(28px, 4vw, 48px) 0;
    border-bottom: 1px solid var(--kp-border);
}

.kp-faq {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kp-faq__item {
    border-radius: var(--kp-radius-sm);
    overflow: hidden;
    border: 1px solid var(--kp-border);
    background: rgba(255,255,255,0.02);
    transition: border-color var(--kp-transition);
}

.kp-faq__item:has(.kp-faq__question[aria-expanded="true"]) {
    border-color: rgba(0, 194, 203, 0.35);
    background: rgba(0, 194, 203, 0.04);
}

.kp-faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--kp-text);
    font-family: var(--kp-font-body);
    font-size: clamp(13px, 1.4vw, 15px);
    font-weight: 500;
    transition: color var(--kp-transition);
}

.kp-faq__question:hover { color: var(--kp-accent); }
.kp-faq__question[aria-expanded="true"] { color: var(--kp-accent); }

.kp-faq__q-text { flex: 1; }

.kp-faq__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: transform 0.25s ease;
    color: var(--kp-text-muted);
}

.kp-faq__question[aria-expanded="true"] .kp-faq__icon {
    transform: rotate(180deg);
    color: var(--kp-accent);
}

.kp-faq__answer {
    padding: 0 18px 16px;
    font-size: clamp(13px, 1.3vw, 14px);
    color: var(--kp-text-muted);
    line-height: 1.7;
    border-top: 1px solid var(--kp-border);
}

.kp-faq__answer[hidden] { display: none; }

/* Animación apertura */
.kp-faq__answer.is-opening {
    display: block;
    animation: kp-faq-open 0.25s ease forwards;
}

@keyframes kp-faq-open {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── INFORMACIÓN ADICIONAL ──────────────────────────────────────────────────── */
.kp-event__extra-section {
    padding: clamp(28px, 4vw, 48px) 0;
}

.kp-event__extra-content {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius-card);
    padding: clamp(16px, 2.5vw, 28px);
    font-size: clamp(13px, 1.4vw, 15px);
    color: var(--kp-text);
    line-height: 1.75;
}

.kp-event__extra-content p { margin: 0 0 1em; }
.kp-event__extra-content p:last-child { margin-bottom: 0; }

/* ── STICKY CTA MOBILE ──────────────────────────────────────────────────────── */
.kp-event__sticky-cta {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 900;
    padding: 12px 20px;
    background: rgba(13, 27, 46, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--kp-border);
}

.kp-btn-pase--sticky {
    width: 100%;
    justify-content: center;
    font-size: 16px;
    padding: 14px 24px;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 1024px) {
    .kp-event__map iframe { height: 220px; }
}

/* Mobile: 1 columna */
@media (max-width: 768px) {

    /* Top row: título encima, CTA debajo pero alineado a izquierda */
    .kp-event__top-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .kp-event__cta-wrap {
        align-items: flex-start;
    }

    .kp-login-hint { text-align: left; }

    .kp-event__social { align-items: flex-start; }

    /* Info grid: 1 columna
       Orden: Acerca de → texto → Ubicación → mapa */
    .kp-event__info-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Galería: scroll táctil */
    .kp-gallery__track-wrap {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .kp-gallery__track-wrap::-webkit-scrollbar { display: none; }

    .kp-gallery__item {
        scroll-snap-align: start;
        width: clamp(200px, 72vw, 300px);
    }

    .kp-gallery__btn { display: none; }

    /* FAQ texto más compacto */
    .kp-faq__question { padding: 12px 14px; }
    .kp-faq__answer   { padding: 0 14px 14px; }

    /* Mostrar sticky CTA */
    .kp-event__sticky-cta {
        display: block;
        /* Mostrar solo cuando el botón principal sale del viewport — JS lo maneja */
    }

    /* Ocultar el botón inline para no duplicar en mobile */
    .kp-event__cta-wrap .kp-btn-pase:not(.kp-btn-pase--sticky) {
        display: none;
    }
}

@media (max-width: 480px) {
    .kp-event__hero { height: clamp(160px, 50vw, 220px); }
    .kp-event__map iframe { height: 200px; }
}

.kp-venue-btn__city,
.kp-venue-btn__date {
    color: #ffffff;
}