/* ============================================================================
   style.css — Pinterest-style masonry gallery
   Configuration lives in :root — edit these variables to customize.
   ============================================================================ */

:root {
    --gallery-gap: 16px;
    --gallery-radius: 0px;
    --gallery-background: #ffffff;
    --image-zoom: 1.03;
    --transition-speed: 400ms;

    /* Responsive column counts (also read by script.js's matchMedia calls
       kept in sync with the breakpoints below). */
    --columns-xl: 5; /* >= 1600px */
    --columns-lg: 4; /* 1200-1599px */
    --columns-md: 3; /* 768-1199px */
    --columns-sm: 2; /* 480-767px */
    --columns-xs: 1; /* < 480px */
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--gallery-background);
    overflow-x: hidden; /* guarantee no horizontal scroll */
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ----------------------------------------------------------------------
   Masonry layout via CSS columns.
   Each .gallery-item is break-inside: avoid so it never splits across
   columns, and items are ordered top-to-bottom, left-to-right per column
   which is the standard/expected masonry reading order for this technique.
   ---------------------------------------------------------------------- */
.gallery {
    column-count: var(--columns-xs);
    column-gap: var(--gallery-gap);
    padding: var(--gallery-gap);
    width: 100%;
}

@media (min-width: 480px) {
    .gallery { column-count: var(--columns-sm); }
}
@media (min-width: 768px) {
    .gallery { column-count: var(--columns-md); }
}
@media (min-width: 1200px) {
    .gallery { column-count: var(--columns-lg); }
}
@media (min-width: 1600px) {
    .gallery { column-count: var(--columns-xl); }
}

/* Slightly tighter gap on small screens */
@media (max-width: 767px) {
    .gallery {
        --gallery-gap: 10px;
    }
}

.gallery-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: var(--gallery-gap);
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--gallery-radius);
    /* Neutral placeholder while an image loads, and also doubles as the
       visible "letterbox" backdrop for images whose ratio doesn't match
       the container (see object-fit: contain above). */
    background: #f2f2f2;
}

/* Aspect ratio is set inline per item (via JS) using the item's natural
   width/height so the layout reserves correct space before images load
   and — critically — never resizes as a group's active image changes. */
.gallery-item .ratio-box {
    position: relative;
    width: 100%;
    height: 0;
    /* padding-top percentage is set inline by JS: width/height ratio */
}

.gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    /* "contain" (not "cover") so no image is ever cropped. Since group
       images can have different aspect ratios but the container's shape
       is fixed (see createRatioBox in script.js) to avoid layout jumping,
       an image whose ratio doesn't match the container simply shows a
       little neutral space on its shorter axis instead of being cut off. */
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
}

/* ----------------------------------------------------------------------
   Single images
   ---------------------------------------------------------------------- */
.gallery-item.single img {
    transition: transform var(--transition-speed) ease;
}

/* ----------------------------------------------------------------------
   Grouped images — layered, only one visible (opacity 1) at a time.
   ---------------------------------------------------------------------- */
.gallery-item.group .group-image {
    opacity: 0;
    transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
    z-index: 1;
}

.gallery-item.group .group-image.active {
    opacity: 1;
    z-index: 2;
}

/* ----------------------------------------------------------------------
   Hover zoom (desktop / devices that actually support hover)
   ---------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .gallery-item:hover img.active,
    .gallery-item.single:hover img {
        transform: scale(var(--image-zoom));
    }
}

/* ----------------------------------------------------------------------
   Reduced motion — disable non-essential animation
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .gallery-item .group-image,
    .gallery-item.single img {
        transition: none !important;
    }
}

/* ----------------------------------------------------------------------
   Sentinel + empty state
   ---------------------------------------------------------------------- */
#load-more-sentinel {
    width: 100%;
    height: 1px;
}

.empty-message {
    text-align: center;
    color: #888;
    font-size: 0.95rem;
    padding: 3rem 1rem;
}