/* =====================================================
   Portfolio Gallery — gallery.css  v2.1
   ===================================================== */

/* ---------- Reset & base ---------- */
.pg-gallery *,
.pg-gallery *::before,
.pg-gallery *::after {
    box-sizing: border-box;
}

.pg-gallery {
    --pg-cols:         3;
    --pg-gap:          12px;
    --pg-radius:       12px;
    --pg-overlay-bg:   rgba(0,0,0,.45);
    --pg-overlay-bg-light: rgb(82 70 70 / 8%);
    --pg-caption-color:#fff;
    --pg-caption-font: system-ui, sans-serif;
    --pg-transition:   .25s ease;
    --pg-shimmer-dark: #1a1a1a;
    --pg-shimmer-mid:  #2a2a2a;
    --pg-shimmer-light:  #f6f6f6;
    width: 100%;
}

/* =====================================================
   GRID layout — equal aspect-ratio cells, CSS Grid
   ===================================================== */
.pg-layout-grid .pg-item-wrap {
    display: grid;
    grid-template-columns: repeat(var(--pg-cols), 1fr);
    gap: var(--pg-gap);
}

.pg-layout-grid .pg-item {
    aspect-ratio: 3 / 2;        /* enforce uniform cell height */
}

.pg-layout-grid .pg-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =====================================================
   MASONRY layout — CSS columns (no JS, no layout shift)

   Why CSS columns and not JS Masonry?
   ─────────────────────────────────────────────────────
   JS masonry (Masonry.js, Isotope, etc.) calculates item
   positions after images load. Combined with lazy loading
   (images start as 1×1 placeholders) this produces wrong
   column counts, overlaps and random sizing — exactly what
   you saw. The library has no way to know the final height
   of an image it hasn't loaded yet.

   CSS `columns` is handled entirely by the browser layout
   engine, which re-flows naturally every time an image
   paints at its real size. Zero JS, zero flicker, correct
   ordering, correct sizing — always.

   The one real tradeoff: items flow top-to-bottom within
   each column (like a newspaper) rather than left-to-right
   across the row. For a photo portfolio this is invisible
   to most visitors and is universally the right call.
   ===================================================== */
.pg-layout-masonry .pg-item-wrap {
    columns:    var(--pg-cols);
    column-gap: var(--pg-gap);
}

.pg-layout-masonry .pg-item {
    /* Prevent a card from being split across two columns */
    break-inside: avoid;
    /*
     * margin-bottom instead of gap — column layout doesn't
     * support gap between items, only between columns.
     */
    margin-bottom: var(--pg-gap);
    /* display:block is required; inline-block also works */
    display: block;
}

.pg-layout-masonry .pg-thumb {
    width:   100%;
    height:  auto;          /* natural image height — the whole point */
    display: block;
}

/* =====================================================
   SINGLE COLUMN layout
   ===================================================== */
.pg-layout-single .pg-item-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--pg-gap);
}

.pg-layout-single .pg-thumb {
    width:   100%;
    height:  auto;
    display: block;
}

/* =====================================================
   Items — shared
   ===================================================== */
.pg-item {
    overflow:      hidden;
    border-radius: var(--pg-radius);
    background:    var(--pg-shimmer-light);
    position:      relative;
}

/* =====================================================
   Aspect-ratio placeholder shimmer
   ─────────────────────────────────────────────────────
   The PHP shortcode outputs width="" height="" attributes
   on every <img> from the media library. The browser uses
   those to reserve the correct aspect-ratio space before
   the image downloads — so the shimmer skeleton has the
   right shape and there is zero cumulative layout shift.
   ===================================================== */
.pg-thumb {
    /*
     * This is the key: with width+height attributes set,
     * aspect-ratio:auto tells the browser to use them to
     * pre-size the element — even before src loads.
     */
    aspect-ratio:  auto;
    width:         100%;
    /* height:auto is set per-layout above */
    opacity:       0;
    transition:    opacity .4s ease;
    will-change:   opacity;
    position:      relative;
    z-index:       1;
}

.pg-thumb.pg-loaded {
    opacity: 1;
}

/* Shimmer behind the image while it loads */
.pg-item::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        90deg,
        var(--pg-shimmer-dark) 25%,
        var(--pg-shimmer-mid)  50%,
        var(--pg-shimmer-dark) 75%
    );
    background-size: 200% 100%;
    animation:  pg-shimmer 1.4s infinite;
    border-radius: inherit;
    z-index:    0;
    pointer-events: none;
}

.pg-item.pg-item-loaded::before {
    display: none;
}

@keyframes pg-shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* =====================================================
   Link wrapper & hover overlay
   ===================================================== */
.pg-link {
    display:  block;
    position: relative;
    overflow: hidden;
    width:    100%;
    /* height follows content in masonry/single; 100% in grid */
}

.pg-layout-grid .pg-link {
    height: 100%;
}

.pg-link::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: var(--pg-overlay-bg-light);
    opacity:    0;
    transition: opacity var(--pg-transition);
}

.pg-link:hover::after,
.pg-link:focus-visible::after {
    opacity: 1;
}

/* Subtle zoom on hover — only applies once image is loaded to avoid
   zooming the shimmer placeholder */
.pg-link .pg-thumb {
    transition: opacity .4s ease, transform .35s ease;
}

.pg-link:hover .pg-thumb.pg-loaded,
.pg-link:focus-visible .pg-thumb.pg-loaded {
    transform: scale(1.04);
}

/* =====================================================
   Caption
   ===================================================== */
.pg-caption {
    display:    block;
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    padding:    10px 14px;
    background: linear-gradient(transparent, rgba(0,0,0,.7));
    color:      var(--pg-caption-color);
    font:       400 .8rem/1.4 var(--pg-caption-font);
    letter-spacing: .02em;
    opacity:    0;
    transform:  translateY(6px);
    transition: opacity var(--pg-transition), transform var(--pg-transition);
    z-index:    2;
}

.pg-link:hover .pg-caption,
.pg-link:focus-visible .pg-caption {
    opacity:   1;
    transform: translateY(0);
}

/* =====================================================
   GLightbox overrides
   ===================================================== */
.glightbox-mobile .gslide-description {
    padding:    12px 16px 20px;
    background: rgba(0,0,0,.85);
}

.glightbox-mobile .gdesc-inner {
    max-height: 100px;
    overflow-y: auto;
}

/* GLightbox is a position:fixed overlay — no need to hide body overflow.
   Removing overflow:hidden and height:100% prevents browsers from
   resetting scroll position to 0 when the lightbox opens. */
.glightbox-open {
    overflow: auto;
}

.gslide-image img {
    opacity:    0;
    transition: opacity .4s ease;
}

.gslide-image img.loaded {
    opacity: 1;
}

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 900px) {
    .pg-layout-grid .pg-item-wrap {
        grid-template-columns: repeat(min(var(--pg-cols), 2), 1fr);
    }
    .pg-layout-masonry .pg-item-wrap {
        columns: min(var(--pg-cols), 2);
    }
}

@media (max-width: 540px) {
    .pg-layout-grid .pg-item-wrap {
        grid-template-columns: 1fr;
    }
    .pg-layout-masonry .pg-item-wrap {
        columns: 1;
    }
}