/* ==========================================================
   GALLERY.CSS — Gallery page specific styles
   ========================================================== */

/* ── FILTER BAR ── */
.gallery-filter {
    background:  var(--off-white);
    padding:     48px 64px 0;
}
.gallery-filter__inner {
    max-width:       var(--container-max);
    margin-inline:   auto;
    display:         flex;
    align-items:     center;
    gap:             8px;
    flex-wrap:       wrap;
    padding-bottom:  40px;
    border-bottom:   0.5px solid rgba(201,169,110,0.2);
}
.filter-label {
    font-size:      10px;
    font-weight:    400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          var(--stone);
    margin-right:   8px;
}
.filter-btn {
    font-family:    var(--font-body);
    font-size:      10px;
    font-weight:    400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background:     transparent;
    color:          var(--stone);
    border:         0.5px solid rgba(107,101,88,0.3);
    padding:        9px 22px;
    cursor:         pointer;
    transition:     background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.filter-btn:hover,
.filter-btn.is-active {
    background:    var(--gold);
    color:         var(--ink);
    border-color:  var(--gold);
}

/* ── GALLERY GRID ── */
.gallery-section { background: var(--off-white); padding: 40px 64px 96px; }
.gallery-grid {
    columns:       3;
    column-gap:    4px;
    max-width:     var(--container-max);
    margin-inline: auto;
}
.gallery-item {
    position:      relative;
    break-inside:  avoid;
    overflow:      hidden;
    cursor:        pointer;
    margin-bottom: 4px;
}
.gallery-item__bg {
    position:   absolute;
    inset:      0;
    transition: transform var(--transition-slow);
}
.gallery-item__bg.g1 { background: linear-gradient(145deg, #2d5c47 0%, #1b3a2d 100%); }
.gallery-item__bg.g2 { background: linear-gradient(145deg, #3d5c3a 0%, #1f3020 100%); }
.gallery-item__bg.g3 { background: linear-gradient(145deg, #4a4028 0%, #2a2015 100%); }
.gallery-item__bg.g4 { background: linear-gradient(145deg, #2a3a4a 0%, #151f2a 100%); }
.gallery-item__bg.g5 { background: linear-gradient(145deg, #3a2a3a 0%, #200f20 100%); }
.gallery-item img,
.gallery-item video {
    width:          100%;
    display:        block;
    position:       relative;
    z-index:        1;
    transition:     transform var(--transition-slow), opacity 0.5s;
    opacity:        0.85;
    vertical-align: bottom;
}
/* Placeholder heights for items without images */
.gallery-item .gallery-item__placeholder {
    display:        block;
    width:          100%;
    position:       relative;
    z-index:        1;
}
.gallery-item__video {
    object-fit: cover;
    min-height: 220px;
}
/* Play icon overlay for video thumbnails */
.gallery-item__play-icon {
    position:    absolute;
    inset:       0;
    z-index:     2;
    display:     flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition:  opacity 0.3s ease;
}
.gallery-item--video:hover .gallery-item__play-icon { opacity: 0; }
.gallery-item:hover img,
.gallery-item:hover video,
.gallery-item:hover .gallery-item__placeholder { transform: scale(1.04); opacity: 0.65; }
.gallery-item:hover .gallery-item__bg          { transform: scale(1.04); }

.gallery-item__overlay {
    position:        absolute;
    inset:           0;
    z-index:         2;
    background:      linear-gradient(to top, rgba(12,14,13,0.85) 0%, transparent 50%);
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    padding:         20px 22px;
    opacity:         0;
    transition:      opacity 0.35s ease;
}
.gallery-item:hover .gallery-item__overlay { opacity: 1; }
.gallery-item__tag  { font-size: 9px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.gallery-item__name { font-family: var(--font-heading); font-size: 18px; font-weight: 300; color: #fff; line-height: 1.2; }

/* Lightbox overlay */
.lightbox {
    position:    fixed;
    inset:       0;
    z-index:     900;
    background:  rgba(12,14,13,0.95);
    display:     flex;
    align-items: center;
    justify-content: center;
    padding:     40px;
    opacity:     0;
    pointer-events: none;
    transition:  opacity 0.35s ease;
}
.lightbox.is-open { opacity: 1; pointer-events: all; }
.lightbox__img {
    max-width:  90vw;
    max-height: 85vh;
    object-fit: contain;
    display:    block;
}
.lightbox__video {
    max-width:  90vw;
    max-height: 85vh;
    display:    block;
    outline:    none;
}
.lightbox__close {
    position:   absolute;
    top:        24px;
    right:      28px;
    background: none;
    border:     none;
    cursor:     pointer;
    color:      rgba(255,255,255,0.5);
    transition: color var(--transition-fast);
    padding:    8px;
}
.lightbox__close:hover { color: var(--gold); }
.lightbox__caption {
    position:    absolute;
    bottom:      32px;
    left:        50%;
    transform:   translateX(-50%);
    text-align:  center;
}
.lightbox__caption-tag  { font-size: 9px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.lightbox__caption-name { font-family: var(--font-heading); font-size: 22px; font-weight: 300; color: #fff; margin-top: 4px; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
    .gallery-filter  { padding: 36px 28px 0; }
    .gallery-section { padding: 32px 28px 72px; }
    .gallery-grid    { columns: 2; }
}
@media (max-width: 640px) {
    .gallery-grid          { columns: 1; }
    .lightbox              { padding: 16px; }
    .gallery-filter        { padding: 28px 20px 0; }
    .gallery-filter__inner {
        flex-direction: column;
        align-items:    stretch;
        gap:            8px;
    }
    .filter-label {
        margin-right:  0;
        margin-bottom: 4px;
    }
    .filter-btn {
        width:      100%;
        text-align: center;
        padding:    12px 20px;
    }
}