/**
 * @file plugins/themes/lumina/styles/components/lumina-carousel.css
 *
 * Reusable Lumina Carousel Primitive Styles.
 * Standardized Embla layout classes for horizontal sliders across Lumina theme.
 */

.lm-carousel {
    position: relative;
    width: 100%;
    outline: none;
}

.lm-carousel:focus-visible {
    outline: 2px solid var(--lm-focus-ring, #2563eb);
    outline-offset: 4px;
    border-radius: var(--lm-radius-sm, 4px);
}

.lm-carousel-viewport,
.lm-carousel .embla__viewport {
    overflow: hidden;
    width: 100%;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.lm-carousel-viewport:active,
.lm-carousel .embla__viewport:active {
    cursor: grabbing;
}

.lm-carousel-container,
.lm-carousel .embla__container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    will-change: transform;
    backface-visibility: hidden;
    gap: 1.5rem;
}

.lm-carousel-slide,
.lm-carousel .embla__slide {
    flex: 0 0 auto;
    min-width: 0;
    position: relative;
}

/* Navigation Controls (Optional) */
.lm-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.lm-carousel-prev,
.lm-carousel-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--lm-surface-card, #ffffff);
    border: 1px solid var(--lm-border, #e5e7eb);
    color: var(--lm-text-primary, #111827);
    cursor: pointer;
    transition: all 150ms ease;
}

.lm-carousel-prev:hover,
.lm-carousel-next:hover {
    border-color: var(--lm-primary, #2563eb);
    color: var(--lm-primary, #2563eb);
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.lm-carousel-prev:focus-visible,
.lm-carousel-next:focus-visible {
    outline: 2px solid var(--lm-focus-ring, #2563eb);
    outline-offset: 2px;
}