/* ═══════════════════════════════════════════════════════════════════════
   Flipster Events Carousel — Public Styles
   ───────────────────────────────────────────────────────────────────────
   • 3 cards visible at a time (prev-1 | active | next-1)
   • Flat horizontal layout — no 3D rotation
   • Center card full size; side cards scaled + dark overlay
   • Transparent wrapper — page/section background shows through
   • All configurable values injected as CSS custom properties
═══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   1. OUTER WRAPPER
══════════════════════════════════════════════════════════════════════ */
.fe-carousel-wrap {
    padding-top:    var(--fe-pt,  60px);
    padding-bottom: var(--fe-pb,  60px);
    margin-top:     var(--fe-mt,   0px);
    margin-bottom:  var(--fe-mb,   0px);
    position:  relative;
    /* No background — transparent by design */
}

/* ══════════════════════════════════════════════════════════════════════
   2. INNER CONTAINER (clips the hidden cards beyond ±1)
══════════════════════════════════════════════════════════════════════ */
.fe-carousel-inner {
    overflow: hidden;
    position: relative;
    /* Allow enough height for the active card + vertical padding */
    padding:  30px 0 20px;
}

/* ══════════════════════════════════════════════════════════════════════
   3. STAGE
══════════════════════════════════════════════════════════════════════ */
.fe-stage {
    position:   relative;
    height:     var(--fe-card-h, 540px);
}

/* ══════════════════════════════════════════════════════════════════════
   4. SLIDE LIST
══════════════════════════════════════════════════════════════════════ */
.fe-slide-list {
    list-style: none;
    margin:     0;
    padding:    0;
    position:   relative;
    width:      100%;
    height:     100%;
}

/* ══════════════════════════════════════════════════════════════════════
   5. INDIVIDUAL SLIDE
══════════════════════════════════════════════════════════════════════ */
.fe-slide {
    position:    absolute;
    top:         50%;
    margin-top:  calc(var(--fe-card-h, 540px) / -2);
    left:        50%;
    width:       var(--fe-card-w, 420px);
    height:      var(--fe-card-h, 540px);
    margin-left: calc(var(--fe-card-w, 420px) / -2);
    border-radius: var(--fe-radius, 16px);
    overflow:    hidden;
    cursor:      pointer;
    will-change: transform, opacity;
    transform-origin: center center;
    transition:
        transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity   0.4s ease;
    box-shadow:  0 4px 24px rgba(0, 0, 0, 0.35);
}

/* ══════════════════════════════════════════════════════════════════════
   6. POSITION CLASSES
   ─────────────────────────────────────────────────────────────────────
   Only 3 cards visible: prev-1 | active | next-1
   Side cards scale from top-center and translate horizontally.
   transform-origin: top center keeps card tops aligned.
══════════════════════════════════════════════════════════════════════ */

/* Active (center) */
.fe-slide.fe-active {
    transform: translateX(0) scale(1) translateY(-20px);
    opacity:   1;
    z-index:   10;
    cursor:    default;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

/* 1 card to the left */
.fe-slide.fe-prev-1 {
    transform: translateX(-72%) scale(0.87);
    opacity:   1;
    z-index:   9;
}

/* 1 card to the right */
.fe-slide.fe-next-1 {
    transform: translateX(72%) scale(0.87);
    opacity:   1;
    z-index:   9;
}

/* Hidden (2+ away — off-screen both sides) */
.fe-slide.fe-hidden-left {
    transform:      translateX(-145%) scale(0.74);
    opacity:        0;
    z-index:        8;
    pointer-events: none;
}
.fe-slide.fe-hidden-right {
    transform:      translateX(145%) scale(0.74);
    opacity:        0;
    z-index:        8;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════
   7. CARD INNER STRUCTURE
══════════════════════════════════════════════════════════════════════ */
.fe-card {
    display:        flex;
    flex-direction: column;
    width:          100%;
    height:         100%;
}

/* ── Image area ─────────────────────────────────────────────────────── */
.fe-card-image {
    position:            absolute;
    inset:               0;
    height:              100% !important;
    background-size:     cover;
    background-position: center center;
    background-repeat:   no-repeat;
    background-color:    #2a2a2a;   /* fallback */
    z-index:             1;
}

/* Dark overlay that appears on side cards */
.fe-dim-overlay {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.45s ease;
    pointer-events: none;
    z-index:    2;
}

.fe-prev-1 .fe-dim-overlay,
.fe-next-1 .fe-slide .fe-dim-overlay {
    background: rgba(0, 0, 0, 0.48);
}

/* Simpler: target the slide class directly */
.fe-slide:not(.fe-active) .fe-dim-overlay {
    background: rgba(0, 0, 0, 0.48);
}

/* ── Body area ──────────────────────────────────────────────────────── */
.fe-card-body {
    position:   absolute;
    bottom:     0;
    left:       0;
    width:      100%;
    height:     auto !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.75) 40%, rgba(0, 0, 0, 0) 100%) !important;
    padding:    80px 24px 24px;
    display:    flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap:        10px;
    z-index:    3;
}

/* Side card body dim overlay */
.fe-slide:not(.fe-active) .fe-card-body::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, 0.42);
    transition: background 0.45s;
    z-index:    1;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════
   8. CARD CONTENT
══════════════════════════════════════════════════════════════════════ */

/* Event title */
.fe-event-title {
    margin:      0;
    color:       #ffffff;
    font-size:   20px;
    font-weight: 700;
    line-height: 1.3;
    flex-shrink: 0;
}

/* Badges container */
.fe-badges {
    display:        inline-flex;
    flex-wrap:      wrap;
    justify-content: center;
    align-items:    center;
    background:     var(--fe-badge-bg, #cc0000);
    border-radius:  24px;
    padding:        4px 12px;
    gap:            0px;
    flex-shrink:    0;
    max-width:      100%;
}

/* Individual badge (date / location) */
.fe-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            7px;
    background:     transparent;
    color:          var(--fe-badge-color, #ffffff);
    font-size:      13px;
    font-weight:    600;
    padding:        4px 8px;
    white-space:    nowrap;
    width:          fit-content;
}

.fe-icon {
    flex-shrink:    0;
    vertical-align: middle;
    display:        inline-block;
}

/* Description */
.fe-event-desc {
    margin:            0 auto;
    color:             rgba(255, 255, 255, 0.82);
    font-size:         13.5px;
    line-height:       1.6;
    flex:              1;
    overflow:          hidden;
    display:           -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
	text-align: center;
}

/* CTA Button — outlined style */
.fe-event-btn {
    display:         inline-block;
    border:          1.5px solid var(--fe-btn-border, #ffffff);
    color:           var(--fe-btn-color, #ffffff);
    background:      transparent;
    font-size:       12.5px;
    font-weight:     700;
    letter-spacing:  1.5px;
    text-decoration: none;
    padding:         10px 22px;
    border-radius:   6px;
    align-self:      flex-start;
    flex-shrink:     0;
    transition:      background 0.2s ease, color 0.2s ease;
	margin:            0 auto;
	text-align: center;
}

.fe-event-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* ══════════════════════════════════════════════════════════════════════
   9. NAVIGATION ARROWS
   ─────────────────────────────────────────────────────────────────────
   Positioned outside .fe-carousel-inner (which has overflow:hidden),
   relative to .fe-carousel-wrap.
══════════════════════════════════════════════════════════════════════ */
.fe-nav-btn {
    position:        absolute !important;
    top:             50% !important;
    transform:       translateY(-50%) !important;
    z-index:         20 !important;
    background:      transparent !important;
    border:          none !important;
    padding:         8px !important;
    border-radius:   50% !important;
    cursor:          pointer !important;
    outline:         none !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    transition:      opacity 0.2s ease, transform 0.2s ease !important;
    min-width:       0 !important;
    min-height:      0 !important;
}

.fe-nav-btn:hover   { opacity: 0.7; transform: translateY(-50%) scale(1.15); }
.fe-nav-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.5); border-radius: 50%; }

.fe-nav-prev { left:  8px; }
.fe-nav-next { right: 8px; }

/* ══════════════════════════════════════════════════════════════════════
   10. ADMIN-ONLY: no-events notice
══════════════════════════════════════════════════════════════════════ */
.fe-no-events-notice {
    padding:    12px 16px;
    background: #fff3cd;
    border:     1px solid #ffc107;
    border-radius: 4px;
    color:      #856404;
    font-size:  14px;
}
.fe-no-events-notice a { color: #856404; }

/* ══════════════════════════════════════════════════════════════════════
   11. RESPONSIVE
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .fe-slide {
        width:       calc(var(--fe-card-w, 420px) * 0.78);
        height:      calc(var(--fe-card-h, 540px) * 0.78);
        margin-top:  calc(var(--fe-card-h, 540px) * -0.39);
        margin-left: calc(var(--fe-card-w, 420px) * -0.39);
    }
    .fe-stage {
        height: calc(var(--fe-card-h, 540px) * 0.78);
    }
    .fe-slide.fe-prev-1 { transform: translateX(-68%) scale(0.85); }
    .fe-slide.fe-next-1 { transform: translateX(68%) scale(0.85); }
    .fe-event-title { font-size: 17px; }
    .fe-badge       { font-size: 11.5px; }
}

@media (max-width: 600px) {
    /* Make the stage tall enough to fit all content without squishing */
    .fe-stage {
        height: 560px !important;
    }

    /* Active card becomes full width (minus small padding) */
    .fe-slide {
        width:       calc(100% - 32px) !important;
        height:      560px !important;
        margin-top:  -280px !important;
        margin-left: calc((100% - 32px) / -2) !important;
    }

    /* Hide prev and next cards entirely on mobile - use !important to guarantee no slivers */
    .fe-slide.fe-prev-1,
    .fe-slide.fe-hidden-left { 
        transform: translateX(-120%) scale(1) !important; 
        opacity: 0 !important; 
        pointer-events: none !important;
        visibility: hidden !important;
    }
    
    .fe-slide.fe-next-1,
    .fe-slide.fe-hidden-right { 
        transform: translateX(120%) scale(1) !important; 
        opacity: 0 !important; 
        pointer-events: none !important; 
        visibility: hidden !important;
    }

    /* Adjust navigation arrows to sit over the card edges nicely */
    .fe-nav-btn { 
        background: rgba(0,0,0,0.5) !important; 
        border-radius: 50% !important; 
        width: 38px !important; 
        height: 38px !important; 
        padding: 0 !important;
    }
    .fe-nav-prev { left:  4px !important; }
    .fe-nav-next { right: 4px !important; }

    /* Adjust typography for mobile */
    .fe-event-title { font-size: 18px !important; margin-bottom: 4px !important; }
    .fe-event-desc  { -webkit-line-clamp: 4 !important; font-size: 13.5px !important; }
    .fe-badge       { font-size: 11px !important; padding: 6px 10px !important; }
}