/*
BOOK PRESENTATION BY @ALDOLAMMEL
*/

/* Individual spread wrapper */
.spread {
    min-height: 60px; /* Prevents layout shift while loading */
    max-height: 200px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
}

.lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.lazy-image[src] {
    opacity: 1;
}

/* Container for all spreads */
.spreads-container {
    display: grid;
    /* Mobile: 2 spreads per row (50% each) */
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    max-width: 1800px;
    margin: 0 auto 10px auto;
}

@media (min-width: 508px) {
    .spreads-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .spreads-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Desktop: 6 spreads per row */
@media (min-width: 992px) {
    .spreads-container {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Page wrapper (left or right page) */
.page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff2e2;
}

/* Empty page (for first spread) */
.page.empty {
    background: #fff2e2;
}

/* Images */
.page img {
    width: 100%;
    height: auto;
    display: block;
}

/* Mask container: limits height so last row is partially hidden */
.spreads-mask {
    position: relative;
    overflow: hidden;
    max-height: 500px; /* adjust based on 3 rows */
}

/* Fade-out gradient at the bottom */
.spreads-mask::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 180px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #f5f5f5 100%);
    pointer-events: none;
}

/* Expanded mode: all visible */
.spreads-mask.expanded {
    max-height: none;
}

.spreads-mask.expanded::after {
    display: none;
}

/* Button wrapper */
.spreads-show-all-btn {
    text-align: center;
    width: 100%;
    margin-top: 20px;
}