/* ============================================================
   IT'S ALL LOVE — public gallery
   Loaded by gallery.php. Uses tokens from ial-tokens.css.
   Deploy: /home/doboeo1p00ii/public_html/itsalllove.marvilousdjs.com/assets/css/gallery.css
   ============================================================ */

.gal-hero{padding-top:var(--sep);padding-bottom:var(--s-6)}
.gal-hero .eyebrow{margin-bottom:10px}
.gal-hero h1{font-family:var(--font-display);font-weight:800;font-size:var(--t-h2);letter-spacing:-.02em;line-height:1;margin:0 0 10px}
.gal-hero p{color:var(--muted);max-width:60ch;font-size:var(--t-lead)}
.gal-back{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-util);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--love);margin-bottom:14px}

/* Albums grid */
.gal-albums{display:grid;gap:20px;grid-template-columns:1fr;padding-bottom:var(--sep)}
@media(min-width:600px){.gal-albums{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.gal-albums{grid-template-columns:repeat(3,1fr)}}
.gal-album{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--paper);transition:var(--dur)}
.gal-album:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.gal-album .cov{aspect-ratio:4/3;background:var(--paper-2);overflow:hidden}
.gal-album .cov img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.gal-album:hover .cov img{transform:scale(1.04)}
.gal-album .meta{padding:16px 18px}
.gal-album .meta h3{font-family:var(--font-display);font-weight:800;font-size:1.15rem;margin:0 0 4px}
.gal-album .meta .sub{font-family:var(--font-util);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* Item grid */
.gal-items{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);padding-bottom:var(--sep)}
@media(min-width:700px){.gal-items{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.gal-items{grid-template-columns:repeat(4,1fr)}}
.gal-item{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--paper-2);cursor:pointer;border:none;padding:0;display:block;width:100%}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.gal-item:hover img{transform:scale(1.05)}
.gal-item .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,10,10,.30);color:#fff}
.gal-item .play svg{width:52px;height:52px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
.gal-item .cap{position:absolute;left:0;right:0;bottom:0;padding:18px 12px 10px;color:#fff;font-size:.8rem;background:linear-gradient(transparent,rgba(0,0,0,.6));opacity:0;transition:var(--dur)}
.gal-item:hover .cap{opacity:1}
.gal-vidfacade{background:#0A0A0A}

.gal-empty{padding:40px 0 var(--sep);color:var(--muted)}

/* Videos section (Watch merged into Gallery) */
.gal-vids{border-top:1px solid var(--line);padding-top:var(--s-8);padding-bottom:var(--sep)}
.gal-vids .eyebrow{margin-bottom:10px}
.gal-vids h2{font-family:var(--font-display);font-weight:800;font-size:var(--t-h2);letter-spacing:-.02em;line-height:1;margin:0 0 10px}
.gal-vids .lead{color:var(--muted);max-width:60ch;font-size:var(--t-lead);margin-bottom:var(--s-5)}

/* Lightbox */
.gal-lb{position:fixed;inset:0;z-index:200;background:rgba(10,10,10,.94);display:none;align-items:center;justify-content:center;padding:24px}
.gal-lb.open{display:flex}
.gal-lb img,.gal-lb .frame{max-width:min(1100px,94vw);max-height:88vh;border-radius:10px}
.gal-lb .frame{width:min(1100px,94vw);aspect-ratio:16/9;border:0;background:#000}
.gal-lb .cap{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#d9d7d2;font-size:.9rem;padding:0 24px}
.gal-lb button{position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:999px;width:48px;height:48px;font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.gal-lb .x{top:20px;right:20px}
.gal-lb .prev{left:16px;top:50%;transform:translateY(-50%)}
.gal-lb .next{right:16px;top:50%;transform:translateY(-50%)}
.gal-lb button:hover{background:rgba(255,255,255,.18)}
@media(prefers-reduced-motion:reduce){.gal-album,.gal-album .cov img,.gal-item img{transition:none}}
