/* Real Events Section - Mobile First */
.real-events {
    position: relative;
    padding: 4rem 1rem 0; /* 64px top padding, 16px sides, 0 bottom */
    overflow: hidden;
}

.real-events-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Title - Mobile */
.real-events-title {
    color: var(--10, #FFF);
    text-align: center;
    font-family: "FRIZON", 'Noto Sans JP', sans-serif;
    font-size: 2.25rem; /* 36px */
    font-style: normal;
    font-weight: 400;
    line-height: 2.281rem; /* 36.502px - 101.395% */
    margin-bottom: 2rem; /* 32px gap bottom */
}

/* Events Slider Container */
.events-slider {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 2rem; /* 32px gap */
}

/* Slider Container */
.slider-container {
    width: 100vw; /* Full viewport width on mobile */
    height: 13.438rem; /* 215px height on mobile */
    overflow: hidden;
    margin-left: -1rem; /* Offset container padding to reach viewport edge */
    position: relative;
}

/* Default gradient overlay to darken side images, spotlight center */
.slider-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        rgba(17, 17, 17, 0.9) 0%, 
        rgba(17, 17, 17, 0.6) 25%, 
        rgba(17, 17, 17, 0.1) 40%, 
        rgba(17, 17, 17, 0.0) 50%, 
        rgba(17, 17, 17, 0.1) 60%, 
        rgba(17, 17, 17, 0.6) 75%, 
        rgba(17, 17, 17, 0.9) 100%
    );
    pointer-events: none;
    z-index: 5;
}

/* Dynamic gradient based on actual image boundaries */
.slider-container.dynamic-gradient::after {
    background: var(--dynamic-gradient);
}

.slider-track {
    display: flex;
    height: 13.438rem; /* 215px height on mobile */
    transform: translateX(0);
    transition: transform 0.3s ease;
    gap: 2.797rem; /* 44.75px gap between images */
    width: auto; /* Let JavaScript calculate width dynamically */
}

/* Slides */
.slide {
    flex-shrink: 0;
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-image {
    width: auto;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem; /* 16px */
}

/* Navigation Arrows - Mobile */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    width: 3rem; /* 48px */
    height: 3.063rem; /* 49px - match SVG height */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.slider-arrow:hover {
    transform: translateY(-50%) scale(1.05);
}

.slider-prev {
    left: 1rem; /* 16px from left on mobile */
}

.slider-next {
    right: 1rem; /* 16px from right on mobile */
}

/* Dots Container - Hidden on mobile */
.dots-container {
    display: none; /* Hidden on mobile */
    gap: 1rem; /* 16px gap between dots */
    margin-bottom: 0; /* 0 bottom margin on mobile */
}

.dot {
    width: 0.75rem; /* 12px */
    height: 0.75rem; /* 12px */
    border-radius: 1.25rem; /* 20px */
    background: var(--Grad-full, radial-gradient(124.2% 56.39% at 100% 100%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(100.18% 100.18% at -33.11% -21.62%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(221deg, #9AF9FF 5.62%, #FF8 104.83%));
    border: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.dot.active {
    opacity: 1;
}

.dot:hover {
    opacity: 0.8;
}