// ==========================================================================
// Gallery Slider Component
// BEM Methodology: .gallery-slider (Block) → __element
// Reusable horizontal image gallery: templates/components/_gallery-slider.html.twig. Touch
// and trackpad swipe are native browser scroll (overflow-x + scroll-snap); desktop mouse
// press-and-drag is handled by assets/components/gallery-slider.ts. The "infinite" look
// comes from the Twig template rendering the image list twice, not from a JS-driven loop.
// Portrait/landscape tiles alternate at different fixed heights and are vertically centered
// (align-items: center) so the shorter landscape tiles nest within the taller portrait row.
//
// Full-bleed by default: breaks out to the viewport edges regardless of the parent
// container's max-width/padding (classic `width: 100vw` + negative-offset margin trick).
// Relies on `body { overflow-x: hidden; }` (assets/styles/app.scss) to swallow the
// scrollbar-width rounding error this trick introduces - and on every ancestor between
// this component and <body> being horizontally centered/symmetric, which holds for
// .container/.project-detail__blocks today.
// ==========================================================================

@use '../base/variables' as *;

.gallery-slider {
    --gallery-slider-portrait-h: 420px;
    --gallery-slider-landscape-h: 280px;
    --gallery-slider-gap: #{$spacing-xl};
    width: 100vw;
    margin-left: calc(50% - 50vw);

    @media (max-width: $breakpoint-md) {
        --gallery-slider-portrait-h: 320px;
        --gallery-slider-landscape-h: 210px;
        --gallery-slider-gap: #{$spacing-md};
    }
}

// --------------------------------------------------------------------------
// Element: .gallery-slider__viewport
// Scroll container: native horizontal swipe on touch/trackpad, scrollbar hidden across
// browsers. Desktop mouse press-and-drag is handled by assets/components/gallery-slider.ts
// ([data-drag-scroll="true"], toggles `.is-dragging` below) since a hidden scrollbar leaves
// mouse-only users no other way to move it.
// --------------------------------------------------------------------------
.gallery-slider__viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;

    &::-webkit-scrollbar {
        display: none;
    }

    &.is-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
        scroll-behavior: auto;
        user-select: none;
    }
}

.gallery-slider__track {
    display: inline-flex;
    align-items: center;
    gap: var(--gallery-slider-gap);
    padding: 0 var(--gallery-slider-gap);
}

// --------------------------------------------------------------------------
// Element: .gallery-slider__item
// Base tile - height (hence apparent format) set by the --portrait/--landscape modifiers.
// --------------------------------------------------------------------------
.gallery-slider__item {
    flex: 0 0 auto;
    scroll-snap-align: center;
    border-radius: $radius-md;
    overflow: hidden;
    background-color: color-mix(in srgb, $color-primary 5%, transparent);
}

.gallery-slider__item--portrait {
    height: var(--gallery-slider-portrait-h);
    aspect-ratio: 2 / 3;
}

.gallery-slider__item--landscape {
    height: var(--gallery-slider-landscape-h);
    aspect-ratio: 3 / 2;
}

.gallery-slider__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

// --------------------------------------------------------------------------
// Modifier: .gallery-slider--single
// Single-image fallback (no slider chrome/duplication needed).
// --------------------------------------------------------------------------
.gallery-slider--single {
    border-radius: $radius-md;
    overflow: hidden;

    .gallery-slider__img {
        width: 100%;
        height: auto;
    }
}