/**
 * Public Website — Gallery page (Phase 7)
 * Scoped `.pub-gal-*`. Data source: the existing `media_coverage`
 * table (already public — pages/media-gallery.php has no login gate
 * and this table has no privacy/visibility column at all, confirmed
 * before building this page).
 */

.pub-gal-header { background: var(--nkst-color-surface-alt, #f0f2f5); padding: 1.75rem 1rem; text-align: center; }
.pub-gal-header h1 { font-size: var(--nkst-font-xl, 22px); font-weight: 800; margin: 0 0 .5rem; color: var(--nkst-color-text, #1f2937); }
.pub-gal-header p { font-size: var(--nkst-font-sm, 14px); color: var(--nkst-color-text-muted, #6b7280); margin: 0; }

.pub-gal-section { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1rem; }
.pub-gal-section + .pub-gal-section { padding-top: 0; }

/* Filters */
.pub-gal-tabs { display: flex; gap: .5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: .25rem; }
.pub-gal-tabs::-webkit-scrollbar { display: none; }
.pub-gal-tab {
    flex-shrink: 0; padding: .55rem 1.05rem; border-radius: 20px; background: #fff; border: 1px solid var(--nkst-color-border, #e5e7eb);
    color: var(--nkst-color-text, #1f2937); font-weight: 700; font-size: var(--nkst-font-xs, 13px); text-decoration: none; white-space: nowrap;
}
.pub-gal-tab.is-active { background: var(--nkst-color-primary, #1e3a8a); color: #fff; border-color: var(--nkst-color-primary, #1e3a8a); }

/* Albums */
.pub-gal-albums { display: flex; gap: .75rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: .25rem; }
.pub-gal-albums::-webkit-scrollbar { display: none; }
.pub-gal-album {
    flex-shrink: 0; width: 140px; text-decoration: none; color: inherit;
}
.pub-gal-album-cover {
    width: 140px; height: 100px; border-radius: var(--nkst-radius-md, 12px); overflow: hidden; position: relative;
    background: linear-gradient(135deg,#0b3d2e,#166534); display: flex; align-items: center; justify-content: center;
}
.pub-gal-album-cover img, .pub-gal-album-cover video { width: 100%; height: 100%; object-fit: cover; }
.pub-gal-album-cover i { color: rgba(255,255,255,.85); font-size: 1.5rem; }
.pub-gal-album.is-active .pub-gal-album-cover { outline: 3px solid var(--nkst-color-primary, #1e3a8a); outline-offset: 2px; }
.pub-gal-album-name { font-size: var(--nkst-font-xs, 13px); font-weight: 700; color: var(--nkst-color-text, #1f2937); margin: .4rem 0 0; line-height: 1.3; }
.pub-gal-album-count { font-size: var(--nkst-font-2xs, 12px); color: var(--nkst-color-text-muted, #6b7280); }

/* Grid */
.pub-gal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (min-width: 640px) { .pub-gal-grid { grid-template-columns: repeat(3, 1fr); gap: .65rem; } }
@media (min-width: 1024px) { .pub-gal-grid { grid-template-columns: repeat(4, 1fr); } }

.pub-gal-item { position: relative; border-radius: var(--nkst-radius-sm, 8px); overflow: hidden; aspect-ratio: 1/1; background: #111; border: none; padding: 0; cursor: pointer; display: block; }
.pub-gal-item.is-featured { grid-column: span 2; aspect-ratio: 16/9; }
.pub-gal-item img, .pub-gal-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-gal-item-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: .9rem; pointer-events: none;
}
.pub-gal-item-badge {
    position: absolute; top: .4rem; right: .4rem; background: rgba(0,0,0,.6); color: #fff;
    font-size: 10px; font-weight: 700; padding: .1rem .4rem; border-radius: 4px; pointer-events: none;
}
.pub-gal-item-caption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: .4rem .5rem .3rem;
    background: linear-gradient(transparent, rgba(0,0,0,.65));
    color: #fff; font-size: 11px; font-weight: 600; text-align: left; pointer-events: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pub-gal-empty { background: #fff; border: 1px dashed var(--nkst-color-border, #e5e7eb); border-radius: var(--nkst-radius-md, 12px); padding: 2rem 1.25rem; text-align: center; color: var(--nkst-color-text-muted, #6b7280); grid-column: 1/-1; }
.pub-gal-empty i { font-size: 1.5rem; margin-bottom: .5rem; display: block; color: var(--nkst-color-border, #d1d5db); }
.pub-gal-empty p { font-size: var(--nkst-font-sm, 14px); margin: 0; }

/* ══════════════════════════════════
   LIGHTBOX
══════════════════════════════════ */
.pub-gal-lightbox {
    position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 9990;
    display: none; align-items: center; justify-content: center; flex-direction: column;
}
.pub-gal-lightbox.is-open { display: flex; }

.pub-gal-lb-stage { position: relative; width: 100%; max-width: 900px; flex: 1; display: flex; align-items: center; justify-content: center; padding: 3.25rem .75rem 0; min-height: 0; }
.pub-gal-lb-stage img, .pub-gal-lb-stage video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }

.pub-gal-lb-close, .pub-gal-lb-prev, .pub-gal-lb-next {
    position: absolute; background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
}
.pub-gal-lb-close { top: .75rem; right: .75rem; width: 40px; height: 40px; font-size: 1.1rem; }
.pub-gal-lb-prev, .pub-gal-lb-next { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 1.1rem; }
.pub-gal-lb-prev { left: .5rem; }
.pub-gal-lb-next { right: .5rem; }
.pub-gal-lb-close:hover, .pub-gal-lb-prev:hover, .pub-gal-lb-next:hover { background: rgba(255,255,255,.24); }

.pub-gal-lb-info { width: 100%; max-width: 900px; padding: .85rem 1rem 1.25rem; color: #fff; text-align: left; flex-shrink: 0; }
.pub-gal-lb-caption { font-size: var(--nkst-font-sm, 14px); font-weight: 700; margin: 0 0 .2rem; }
.pub-gal-lb-meta { font-size: var(--nkst-font-xs, 13px); color: rgba(255,255,255,.7); margin: 0; }

@media (max-width: 480px) {
    .pub-gal-lb-prev, .pub-gal-lb-next { width: 40px; height: 40px; }
    .pub-gal-lb-stage { padding-top: 2.75rem; }
}