/* ============================================================
   features/carousel/carousel.css — studio image carousel
   (redesign · P2 s3 reskin)
   ------------------------------------------------------------
   Reskin only. JS contract unchanged: .carousel-track,
   .carousel-image(.active), .carousel-btn(.carousel-prev/-next),
   .carousel-dots, .carousel-dot(.active). The dot markers lean into
   the brand dot motif (active grows to a pill, like booking progress).
   ============================================================ */

.studio-carousel {
    margin-bottom: var(--space-10);
}

.carousel-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.carousel-track {
    position: relative;
    width: 100%;
    height: 600px;
}

.carousel-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-soft);
}

.carousel-image.active {
    opacity: 1;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--glass-bg);
    color: var(--text);
    border: 1px solid var(--glass-border);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: var(--z-base);
    transition: transform var(--dur-base) var(--ease-dreamy),
        background var(--dur-base) var(--ease-dreamy),
        color var(--dur-base) var(--ease-dreamy),
        border-color var(--dur-base) var(--ease-dreamy);
    box-shadow: var(--shadow-md);
}

.carousel-btn:hover {
    background: var(--grad-coral);
    color: var(--text-on-coral);
    border-color: transparent;
    transform: translateY(-50%) scale(1.1);
    box-shadow: var(--shadow-glow);
}

.carousel-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.carousel-prev {
    left: var(--space-5);
}

.carousel-next {
    right: var(--space-5);
}

.carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-7);
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--coral-200);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: width var(--dur-base) var(--ease-dreamy),
        background var(--dur-base) var(--ease-dreamy);
}

.carousel-dot.active {
    background: var(--accent-strong);
    width: 28px;
}

.carousel-dot:hover {
    background: var(--accent);
}

.carousel-dot:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    .carousel-image,
    .carousel-btn,
    .carousel-dot {
        transition: none;
    }

    .carousel-btn:hover {
        transform: translateY(-50%);
    }
}