/*
 * Block: CS Image Grid
 */

section.cs-image-grid {
    padding-inline: 0;
    gap: var(--grid-gap);
}

/* ---- Row layouts (scrollable) ---- */

.cs-image-grid__row {
    display: flex;
    justify-content: center;
    gap: var(--grid-gap);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: var(--gutter);
    align-items: flex-end;
}

/* When overflowing, left-align and enable drag cursor */
.cs-image-grid__row.is-overflowing {
    justify-content: flex-start;
    cursor: grab;
}

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

.cs-image-grid__row.is-dragging .cs-image-grid__media {
    pointer-events: none;
}

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

.cs-image-grid__row.is-overflowing ~ .cs-image-grid__scrollbar {
    opacity: 1;
}

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

.cs-image-grid__row::-webkit-scrollbar {
    display: none;
}

.cs-image-grid__row > .cs-image-grid__item {
    flex: 0 0 auto;
}

/* Square 1:1 */
.cs-image-grid--square > .cs-image-grid__item {
    aspect-ratio: 1 / 1;
    height: min(70vh, 36rem);
}

/* Portrait 3:4 */
.cs-image-grid--portrait > .cs-image-grid__item {
    aspect-ratio: 3 / 4;
    height: min(75vh, 42rem);
}

/* Mobile 9:16 */
.cs-image-grid--mobile > .cs-image-grid__item {
    aspect-ratio: 9 / 16;
    height: min(85vh, 58rem);
}

/* ---- 2+1 Mixed layout ---- */

.cs-image-grid--2-1-mixed {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
    max-width: 100rem;
    margin: 0 auto;
    padding-inline: var(--gutter);
}

.cs-image-grid__stack {
    display: grid;
    gap: var(--grid-gap);
    grid-template-rows: 1fr 1fr;
}

.cs-image-grid--2-1-mixed > .cs-image-grid__item {
    min-height: 0;
}

/* ---- Shared item styles ---- */

.cs-image-grid__item {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 14px;
}

.cs-image-grid__item--video {
    cursor: pointer;
}

/* Hide Vimeo iframe top/bottom white bars */
.cs-image-grid__item--video iframe {
    transform: scale(1.08);
}

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

/* ---- Bigger reveal stagger for grid items ---- */

.cs-image-grid .reveal-up:nth-child(1) { --reveal-delay: 0s; }
.cs-image-grid .reveal-up:nth-child(2) { --reveal-delay: 0.2s; }
.cs-image-grid .reveal-up:nth-child(3) { --reveal-delay: 0.4s; }
.cs-image-grid .reveal-up:nth-child(4) { --reveal-delay: 0.6s; }
.cs-image-grid .reveal-up:nth-child(5) { --reveal-delay: 0.8s; }
.cs-image-grid .reveal-up:nth-child(6) { --reveal-delay: 1.0s; }

/* ---- Loading pulse overlay ---- */

.cs-image-grid__item .media-loading {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    animation: media-grid-pulse 2s ease-in-out infinite;
}

.cs-image-grid__item .media-loading.is-hidden {
    display: none;
}

@keyframes media-grid-pulse {
    0%, 100% { background: rgba(0, 0, 0, 0.05); }
    50% { background: rgba(0, 0, 0, 0.25); }
}

/* ---- Responsive ---- */

@media (max-width: 768px) {
    .cs-image-grid--2-1-mixed {
        grid-template-columns: 1fr;
    }

    .cs-image-grid__stack {
        grid-template-rows: auto;
        grid-template-columns: 1fr 1fr;
    }

    .cs-image-grid--square > .cs-image-grid__item {
        height: min(60vh, 28rem);
    }

    .cs-image-grid--portrait > .cs-image-grid__item {
        height: min(65vh, 32rem);
    }

    .cs-image-grid--mobile > .cs-image-grid__item {
        height: min(75vh, 46rem);
    }
}

@media (max-width: 480px) {
    .cs-image-grid__stack {
        grid-template-columns: 1fr;
    }
}