/* ============================================================
   GALLERY.CSS — styling for the art gallery page.
   Loaded only on gallery.html, on top of the shared style.css.
   ============================================================ */

.gallery-intro{margin-bottom:14px}

/* ---- drip frame, used by both the featured piece and grid pieces ---- */
.art-frame{position:relative}
.art-frame__clip{position:relative;z-index:1;overflow:hidden;border:3px solid var(--hot);background:#170d19;cursor:pointer}
.art-frame__clip img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.art-frame:hover .art-frame__clip img{transform:scale(1.06)}

.art-caption{margin-top:16px;font-size:11px;color:var(--gray)}
.art-caption strong{display:block;color:var(--pale);font-size:12px;margin-bottom:2px}

/* ---- featured piece ---- */
.featured-piece{display:grid;grid-template-columns:minmax(260px,52%) 1fr;gap:24px;align-items:center}
.featured-piece .art-frame{aspect-ratio:16/10}
.featured-piece .art-frame__clip{width:100%;height:100%}
.featured-badge{display:inline-block;padding:3px 8px;background:var(--hot);color:#1c0715;font-size:9px;font-weight:700;letter-spacing:.5px;margin-bottom:8px}
.featured-info h3{margin:0 0 6px;font-family:"Press Start 2P",monospace;font-size:13px;line-height:1.6;color:#fff}
.featured-info .art-meta{font-size:10px;color:var(--soft);margin-bottom:10px}
.featured-info p{margin:0 0 10px;color:var(--pale)}
@media(max-width:670px){.featured-piece{grid-template-columns:1fr}}

/* ---- filter chips ---- */
.tag-filters{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 4px}
.tag-filter{padding:5px 10px;font-size:9px;font-weight:700;color:#1a0914;background:var(--soft);border:2px outset #ffc7e2;cursor:pointer}
.tag-filter:hover{background:var(--hot);color:#fff;border-style:inset}
.tag-filter.active{background:var(--hot);color:#fff;border-style:inset;box-shadow:none}

/* ---- grid of other pieces ---- */
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 20px;margin-top:24px}
.art-grid .art-frame{aspect-ratio:1/1}
.art-grid .art-frame__clip{width:100%;height:100%}
.art-piece{display:flex;flex-direction:column}
.art-piece.is-hidden{display:none}
.art-tag-chip{display:inline-block;margin-top:6px;padding:2px 6px;font-size:8px;letter-spacing:.4px;background:#230b1b;border:1px solid var(--pink);color:var(--soft)}
@media(max-width:920px){.art-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.art-grid{grid-template-columns:1fr}}

.gallery-hint{text-align:center;margin-top:8px;font-size:10px;color:var(--gray)}

/* ---- lightbox ---- */
.lightbox-overlay{position:fixed;inset:0;background:rgba(5,3,6,.88);display:none;align-items:center;justify-content:center;z-index:50;padding:24px}
.lightbox-overlay.is-open{display:flex}
.lightbox-box{width:min(640px,100%);background:linear-gradient(180deg,rgba(23,13,25,.98),rgba(11,7,13,.98));border:3px solid var(--pink);box-shadow:6px 6px 0 var(--shadow);padding:18px;position:relative}
.lightbox-close{position:absolute;top:8px;right:8px;width:28px;height:28px;background:var(--hot);color:#1c0715;border:2px outset #ff9dcc;font-weight:700;cursor:pointer;z-index:3}
.lightbox-close:active{border-style:inset}
.lightbox-frame{margin:6px auto 0}
.lightbox-frame .art-frame__clip{width:100%;aspect-ratio:4/3}
.lightbox-info{margin-top:22px;text-align:center}
.lightbox-info h3{margin:0 0 6px;font-family:"Press Start 2P",monospace;font-size:12px;color:#fff}
.lightbox-info .art-meta{font-size:10px;color:var(--soft);margin-bottom:8px}
.lightbox-info p{margin:0;font-size:12px;color:var(--pale)}
.lightbox-nav{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.lightbox-nav-btn{padding:7px 14px;font-size:9px;font-weight:700;color:#1a0914;background:var(--soft);border:2px outset #ffc7e2;cursor:pointer}
.lightbox-nav-btn:active:not(:disabled){border-style:inset}
.lightbox-nav-btn:disabled{opacity:.3;cursor:not-allowed}
.lightbox-count{font-size:9px;color:var(--gray)}