/* ============================================================
   Project Carousel Component
   ============================================================ */

.carousel {
    position: relative;
    width: 100%;
}

.carousel__container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--spacing-xl);
    padding: var(--spacing-sm) 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carousel__container::-webkit-scrollbar {
    display: none;
}

.carousel__cards {
    display: flex;
    flex-shrink: 0;
    width: 100%;
    gap: var(--spacing-xl);
}

.carousel__card {
    flex: 0 0 calc(100% - var(--spacing-xl));
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .carousel__card {
        flex: 0 0 calc(50% - var(--spacing-xl) / 2);
    }
}

@media (min-width: 1024px) {
    .carousel__card {
        flex: 0 0 calc(33.333% - var(--spacing-xl) * 2 / 3);
    }
}

@media (max-width: 767px) {
    .carousel__container {
        scroll-snap-type: none;
    }
    .carousel__card {
        flex: 0 0 100%;
        margin: 0 auto;
    }
}

.carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
    border: 1px solid var(--color-projects-card-border);
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text);
    transition: background-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.carousel__arrow:hover {
    background-color: var(--color-brand-blue);
    color: var(--color-white);
}

.carousel__arrow:focus-visible {
    outline: 2px solid var(--color-brand-blue);
    outline-offset: 2px;
}

.carousel__arrow--prev {
    left: -20px;
}

.carousel__arrow--next {
    right: -20px;
}

.carousel__arrow--hidden {
    opacity: 0;
    pointer-events: none;
}

.carousel__arrow svg {
    width: 20px;
    height: 20px;
}

@media (prefers-color-scheme: dark) {
    .carousel__arrow:hover {
        background-color: var(--color-brand-green);
    }
    .carousel__arrow:focus-visible {
        outline-color: var(--color-brand-green);
    }
}

html.dark-theme .carousel__arrow:hover {
    background-color: var(--color-brand-green);
}

html.dark-theme .carousel__arrow:focus-visible {
    outline-color: var(--color-brand-green);
}

html.light-theme .carousel__arrow:hover {
    background-color: var(--color-brand-blue);
}

html.light-theme .carousel__arrow:focus-visible {
    outline-color: var(--color-brand-blue);
}

@media (max-width: 767px) {
    .carousel__arrow {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .carousel__container {
        scroll-behavior: auto;
    }
}