/* assets/css/gallery.css */

/* ============================================================
   PUBLIC GALLERY LAYOUT
   ============================================================ */

body.public-body {
    margin: 0;
    background: var(--color-body-bg);
    color: var(--color-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}

.category-subtext {
    max-width: 74vw;
    margin: 0 auto 20px; /* centers it and adds spacing below */
    line-height: 1.3;
}

/* ============================================================
   GALLERY GRID
   ============================================================ */

.public-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.public-gallery-item {
    background: var(--card-public-bg);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

    .public-gallery-item:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-2);
        background: var(--card-public-hover-bg);
    }

    .public-gallery-item img {
        width: 100%;
        object-fit: cover;
        display: block;
    }

/* ============================================================
   HOME MASONRY GRID
   ============================================================ */

.home-grid {
    column-count: 3;
    column-gap: 12px;
}

.home-grid-item {
    break-inside: avoid;
    margin-bottom: 12px;
}

    .home-grid-item img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 0;
    }

/* ============================================================
   HOME SQUARE GRID
   ============================================================ */

.home-grid.layout-square {
    column-count: initial;
    column-gap: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

    .home-grid.layout-square .home-grid-item {
        margin-bottom: 0;
    }

        .home-grid.layout-square .home-grid-item img {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
        }

/* ============================================================
   HOME JUSTIFIED GRID
   ============================================================ */

.home-grid.layout-justified {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%; /* fill .public-main */
    max-width: 100%; /* remove cap */
}

    .home-grid.layout-justified .home-grid-item {
        margin: 0;
        flex: 0 0 auto; /* let JS set width */
    }

        .home-grid.layout-justified .home-grid-item img {
            display: block;
            height: auto;
            width: auto; /* JS overrides with px width */
            object-fit: cover;
        }

/* ============================================================
   MOBILE OVERRIDES
   ============================================================ */

@media (max-width: 900px) {
    .public-main {
        width: 100%; /* span full viewport */
        max-width: none; /* remove the cap */
        margin: 0; /* no sidebar offset on mobile */
        padding: 0; /* optional: remove padding for edge-to-edge */
    }

    .home-grid.layout-justified {
        width: 100%; /* fill the full width */
        max-width: none; /* no restriction */
        gap: 0; /* optional: remove gaps so images touch */
    }

        .home-grid.layout-justified .home-grid-item {
            flex: 1 1 100%; /* each image stretches full width */
        }

            .home-grid.layout-justified .home-grid-item img {
                width: 100%; /* image fills its container */
                height: auto;
                object-fit: cover;
            }
}

/* ============================================================
   SLIDESHOW (REQUIRED BY main.js)
   ============================================================ */

.gallery-slideshow {
    position: relative;
    width: 100%;
    height: 70vh;
    overflow: hidden;
    background: var(--card-public-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-1);
    margin-top: 20px;
    margin-bottom: 20px;
}

/* @media (min-width: 901px) and (max-width: 1200px) {
    .gallery-slideshow {
        width: 70vw;
        height: 45vw;
        max-width: 900px;
        max-height: 600px;
    }
} */

@media (max-width: 900px) {
    .gallery-slideshow {
        width: 90vw;
        height: 60vw;
    }
}

.gallery-slides-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.gallery-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 500ms ease;
}

    .gallery-slide.is-active {
        opacity: 1;
        position: absolute; /* IMPORTANT FIX */
    }

    .gallery-slide img {
        max-height: 100%;
        max-width: 100%;
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }

/* SLIDESHOW CONTROLS */

.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    color: #ffffff;
    cursor: pointer;
    z-index: 10;
    user-select: none;
    padding: 10px;
    background: rgba(0,0,0,0.35);
    border-radius: 6px;
}

    .gallery-arrow.prev {
        left: 10px;
    }

    .gallery-arrow.next {
        right: 10px;
    }

.gallery-counter {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #ffffff;
    background: rgba(0,0,0,0.4);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
}