/* Home hero slider. Full-bleed viewport: the overflow-x guard for the 100vw
   pull lives in global.css (html { overflow-x: clip }). The slider is
   the clip window; the flex track inside slides horizontally via translateX.
   Arrows sit on imagery, so they use fixed light values in both themes on
   purpose; everything else comes from global.css tokens. */
.luna .slider {
    --card-w: min(900px, 82vw);
    --slide-height: 23.75rem;
    --nav-size: 3rem;
    --nav-icon: 1rem;
    --nav-inset: var(--space-xl);
    --dot-size: 0.375rem;
    --dot-tap: 1.5rem;
    position: relative;
    overflow: hidden;
    min-height: var(--slide-height);
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: var(--space-3xl);
}

/* Side padding lets the first/last card center; adjacent cards peek into the
   gutters. JS sets translateX to bring the active card to center. The
   transition is gated on .is-ready so the initial centering (and the no-JS
   fallback, where the first card is already padding-centered) does not animate. */
.luna .slider__track {
    position: relative;
    display: flex;
    gap: var(--space);
    padding: 0 calc((100vw - var(--card-w)) / 2);
    will-change: transform;
}

.luna .slider.is-ready .slider__track {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.luna .slider__slide {
    flex: 0 0 var(--card-w);
    position: relative;
    min-height: var(--slide-height);
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.luna .slider.is-ready .slider__slide {
    opacity: 0.55;
    transition: opacity 0.5s ease;
}

.luna .slider.is-ready .slider__slide.is-active {
    opacity: 1;
}

.luna .slider__image-link {
    display: block;
    height: 100%;
}

.luna .slider__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.luna .slider__nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--nav-size);
    height: var(--nav-size);
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-pill);
    background: rgba(17, 17, 17, 0.45);
    color: var(--on-solid);
    cursor: pointer;
    transform: translateY(-50%);
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.luna .slider__nav--prev { left: var(--nav-inset); }
.luna .slider__nav--next { right: var(--nav-inset); }

.luna .slider__nav-icon {
    width: var(--nav-icon);
    height: var(--nav-icon);
    fill: currentColor;
}

.luna .slider__nav--next .slider__nav-icon {
    transform: rotate(180deg);
}

.luna .slider__nav:hover:not(:disabled),
.luna .slider__nav:focus-visible:not(:disabled) {
    transform: translateY(-50%) scale(1.1);
    border-color: rgba(255, 255, 255, 0.65);
    outline: none;
}

.luna .slider__nav:disabled {
    display: none;
}

.luna .slider__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: var(--space-xs);
}

/* Tap target is --dot-tap; the transparent border keeps the visible dot at --dot-size. */
.luna .slider__dot {
    all: unset;
    display: inline-block;
    box-sizing: border-box;
    width: var(--dot-tap);
    height: var(--dot-tap);
    border: calc((var(--dot-tap) - var(--dot-size)) / 2) solid transparent;
    border-radius: var(--radius-pill);
    background: var(--border);
    background-clip: padding-box;
    cursor: pointer;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.luna .slider__dot.is-active {
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
}

@media (max-width: 1024px) {
    .luna .slider {
        --card-w: 90vw;
    }
}

@media (max-width: 768px) {
    .luna .slider {
        --card-w: 92vw;
        --nav-size: 2.25rem;
        --nav-inset: var(--space-xs);
        margin-bottom: var(--space-2xl);
        min-height: 0;
    }

    /* Let the image drive the card height so nothing is cropped. */
    .luna .slider__slide {
        min-height: 0;
    }

    .luna .slider__image-link {
        height: auto;
    }

    .luna .slider__image {
        height: auto;
        object-fit: contain;
    }

}

@media (prefers-reduced-motion: reduce) {
    .luna .slider.is-ready .slider__track,
    .luna .slider.is-ready .slider__slide {
        transition: none;
    }
}