/**
 * Similar properties carousel.
 *
 * Structure lives here (not Tailwind) so the feature is self-contained and
 * does not depend on a build step picking up new utility classes. Card visuals
 * come from the shared `property-card` component.
 *
 * Mechanics are native overflow scrolling + scroll-snap, so keyboard, touch
 * and screen-reader scrolling all work with no JS. The vanilla JS only layers
 * on arrow-button paging and click-drag.
 */

.similar-carousel {
    position: relative;
}

/* The scrollable region (keeps list semantics on the inner <ul>). */
.similar-carousel__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Hide the native scrollbar without disabling scroll. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.similar-carousel__viewport::-webkit-scrollbar {
    display: none;
}

/* Keyboard focus ring on the scrollable region. */
.similar-carousel__viewport:focus-visible {
    outline: 2px solid #0a0a0a;
    outline-offset: 4px;
}

.similar-carousel__track {
    display: flex;
    gap: 1.25rem;
    margin: 0;
    padding: 0 0 0.5rem;
    list-style: none;
}

/* Mobile: 1 card. */
.similar-carousel__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

/* Tablet: 2 cards. */
@media (min-width: 640px) {
    .similar-carousel__slide {
        flex-basis: calc((100% - 1.25rem) / 2);
    }
}

/* Desktop: 3 cards. */
@media (min-width: 1024px) {
    .similar-carousel__track {
        gap: 2.25rem;
    }

    .similar-carousel__slide {
        flex-basis: calc((100% - 4.5rem) / 3);
    }
}

/* While dragging, suppress snap/smooth so the pointer tracks 1:1, and stop the
   drag from firing a click-through navigation on the card links. */
.similar-carousel.is-dragging .similar-carousel__viewport {
    scroll-snap-type: none;
    scroll-behavior: auto;
    cursor: grabbing;
    user-select: none;
}

.similar-carousel.is-dragging a {
    pointer-events: none;
}

.similar-carousel__btn[aria-disabled="true"] {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

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