/*
 * Robbie Rose Gallery - Hero Carousel Styles
 * Version: 1.0.0
 */

/* --- Base Carousel Styles --- */
.hero-carousel {
    width: 100%;
    height: 85vh;
    max-height: 800px;
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-2xl);
    cursor: grab;
    user-select: none;
}

.hero-carousel.is-dragging {
    cursor: grabbing;
}

.hero-carousel__track {
    display: flex;
    height: 100%;
    will-change: transform;
}

.hero-carousel__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-carousel__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* --- Dots Navigation --- */
.hero-carousel__dots {
    position: absolute;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-xs);
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: 12px;
    z-index: 10;
}

.hero-carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: all 0.25s cubic-bezier(.2,.9,.2,1);
    cursor: pointer;
}

.hero-carousel__dot.active {
    background: rgba(255, 255, 255, 0.9);
}

/* --- Responsive Adjustments --- */

/* Desktop (769px and up) */
@media (min-width: 769px) {
    .hero-carousel {
        padding: 0; /* Remove container padding on desktop */
    }
    .hero-carousel__slide {
        padding: 0 var(--space-2xl); /* Apply generous padding to the slide itself */
    }
    .hero-carousel {
        height: 90vh;
        max-height: 900px;
    }
}

/* Mobile (768px and down) */
@media (max-width: 768px) {
    .hero-carousel {
        height: 50vh;
    }
}