/*
 * Block: Image Strip
 */

.image-strip {
    overflow: hidden;
    padding: 0;
    gap: 0;
    padding-bottom: var(--section-padding-block);
}

.image-strip__track {
    display: flex;
    gap: var(--space-s);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-inline: var(--gutter);
    padding-top: var(--section-padding-block);
    padding-bottom: var(--grid-gap);
    align-items: flex-end;
}

/* Only show grab cursor when content overflows */
.image-strip__track.is-overflowing {
    cursor: grab;
}

.image-strip__track.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.image-strip__track.is-dragging .image-strip__image {
    pointer-events: none;
}

/* Custom scrollbar */
.image-strip__scrollbar {
    position: relative;
    height: 2px;
    background: var(--base-ultra-light);
    margin-top: 0;
    margin-inline: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-strip__track.is-overflowing ~ .image-strip__scrollbar {
    opacity: 1;
}

.image-strip__scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-width: 40px;
    background: var(--primary);
    border-radius: 0px;
    opacity: 1;
}

.image-strip__track::-webkit-scrollbar {
    display: none;
}

.image-strip__item {
    flex-shrink: 0;
    width: 40rem;
    aspect-ratio: var(--strip-ratio, auto);
    margin: 0;
}

/* Mixed: square + alternating 4/5 portrait, bottom-aligned */
.image-strip__track[style*="mixed"] .image-strip__item {
    aspect-ratio: 1 / 1;
}

.image-strip__track[style*="mixed"] .image-strip__item:nth-child(even) {
    aspect-ratio: 4 / 5;
}

.image-strip__image {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .image-strip__item {
        width: 28rem;
    }
}