/* ============================================================
   Work Gallery - filterable masonry grid + lightbox.
   Palette follows core/base.css (wood-flooring theme).

   Columns by screen width (mobile-first):
     base   (up to 424px, covers ~320 / 375 phones) ... 1 column
     >= 425px  large phones ............................ 2 columns
     >= 768px  tablets ................................. 3 columns
     >= 1024px desktop ................................. 4 columns
     >= 2560px 2K / 4K displays ........................ 5 columns
   ============================================================ */

:root {
    --gal-ink:        #2b2b2b;
    --gal-muted:      #e7d9c9;   /* muted text on the brown page */
    --gal-page-bg:    #6b4423;   /* oak brown */
    --gal-wood-dark:  #5a3b28;
    --gal-wood-mid:   #6f4a30;
    --gal-accent:     #c8a27c;   /* light oak - active filter chip */
    --gal-gap:        1rem;
}

.page-gallery { background: var(--gal-page-bg); }

.gallery {
    max-width: 2400px;
    margin: 0 auto;
    padding: 2rem clamp(1rem, 4vw, 3rem) 3.5rem;
}

/* ---------- Heading ---------- */
.gallery__head {
    text-align: center;
    margin-bottom: 1.75rem;
}
.gallery__head h1 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    color: #fff;
}
.gallery__head p {
    margin: 0;
    color: var(--gal-muted);
}

/* ---------- Filter bar ---------- */
.gallery__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.gallery__filter {
    font: inherit;
    font-size: 0.9rem;
    padding: 0.45rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.gallery__filter:hover {
    background: rgba(255, 255, 255, 0.14);
}
.gallery__filter.is-active {
    background: var(--gal-accent);
    border-color: var(--gal-accent);
    color: #3a2718;
}
.gallery__filter:focus-visible {
    outline: 3px solid var(--gal-accent);
    outline-offset: 2px;
}

/* ---------- Masonry grid ---------- */
.gallery-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    column-count: 1;
    column-gap: var(--gal-gap);
}
/* 1 column by default (small phones); widen the masonry as the viewport
   grows - larger mobiles, tablets, desktop, then 4K+ */
@media (min-width: 425px)  { .gallery-grid { column-count: 2; } }
@media (min-width: 768px)  { .gallery-grid { column-count: 3; } }
@media (min-width: 1024px) { .gallery-grid { column-count: 4; } }
@media (min-width: 2560px) { .gallery-grid { column-count: 5; } }

.gallery-grid__item {
    break-inside: avoid;
    margin: 0 0 var(--gal-gap);
}
.gallery-grid__item[hidden] { display: none; }

/* ---------- Photo card ---------- */
.gallery-card {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #e9e0d6;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.gallery-card img {
    display: block;
    width: 100%;
    height: auto;
}
.gallery-card:hover,
.gallery-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
    outline: none;
}

/* Title strip - hidden until hover / keyboard focus */
.gallery-card__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.5rem 0.85rem 0.7rem;
    font-size: 0.85rem;
    color: #fff;
    text-align: left;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
    opacity: 0;
    transition: opacity 0.18s ease;
}
.gallery-card:hover .gallery-card__label,
.gallery-card:focus-visible .gallery-card__label {
    opacity: 1;
}

.gallery__empty,
.gallery__noresults {
    text-align: center;
    color: var(--gal-muted);
    padding: 2rem 0;
}

/* ---------- Lightbox ---------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: clamp(0.5rem, 3vw, 2.5rem);
    background: rgba(20, 13, 8, 0.92);
}
.lightbox[hidden] { display: none; }

.lightbox__figure {
    margin: 0;
    max-width: min(1600px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}
.lightbox__img {
    max-width: 100%;
    max-height: 82vh;
    width: auto;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox__caption {
    color: #f0e4d6;
    font-size: 0.95rem;
    text-align: center;
}

.lightbox__close,
.lightbox__nav {
    font: inherit;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
    outline: 3px solid var(--gal-accent);
    outline-offset: 2px;
}

.lightbox__close {
    position: absolute;
    top: clamp(0.5rem, 2vw, 1.25rem);
    right: clamp(0.5rem, 2vw, 1.25rem);
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.6rem;
    line-height: 1;
}
.lightbox__nav {
    width: 3rem;
    height: 3.5rem;
    font-size: 1.8rem;
    line-height: 1;
}

/* phones: move the lightbox prev/next arrows onto the image instead of
   either side of it, or they'd run off-screen */
@media (max-width: 620px) {
    .lightbox__nav {
        position: absolute;
        bottom: clamp(0.5rem, 3vw, 1.5rem);
    }
    .lightbox__nav--prev { left: clamp(0.5rem, 4vw, 1.5rem); }
    .lightbox__nav--next { right: clamp(0.5rem, 4vw, 1.5rem); }
}

/* respect the OS "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
    .gallery-card,
    .gallery-card__label { transition: none; }
    .gallery-card:hover,
    .gallery-card:focus-visible { transform: none; }
}