/* gallery.css — responsive gallery + lightbox, brand-aligned */

.g-grid{
  --gap:.9rem;
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--gap);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 992px){ .g-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .g-grid{ grid-template-columns: 1fr; } }

.g-card.card{
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.g-card.card:hover{ transform: translateY(-2px); box-shadow:0 16px 32px rgba(0,0,0,.10); }

.g-media{ display:block; position:relative; background:var(--paper-2); line-height:0; }
.g-media img{ width:100%; height: 220px; object-fit:cover; display:block; }
.g-media.is-video::after{
  content:""; position:absolute; inset:0; background: radial-gradient(ellipse at center, rgba(0,0,0,.0) 40%, rgba(0,0,0,.35) 100%);
}
.g-play{
  position:absolute; inset:auto auto 10px 10px;
  width:38px; height:38px; border-radius:999px;
  background:#fff; color:var(--brand-900);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}

/* Lightbox */
.lb{
  position:fixed; inset:0; z-index: 4000;
  display:none; align-items:center; justify-content:center;
  background: rgba(0,0,0,.72);
}
.lb.is-open{ display:flex; }
.lb__inner{
  max-width:min(1100px, calc(100vw - 2rem));
  max-height:min(84vh, calc(100vh - 2rem));
  display:flex; flex-direction:column; gap:.5rem; color:#fff;
}
.lb__media{
  flex:1 1 auto; display:grid; place-items:center;
  background: rgba(255,255,255,.04);
  border-radius:14px; overflow:hidden;
}
.lb__media img, .lb__media video, .lb__media iframe{
  max-width:100%; max-height:100%; display:block;
}
.lb__caption{ display:flex; justify-content:space-between; align-items:center; gap:.75rem; }
.lb__title{ font-weight:700; letter-spacing:.01em; }
.lb__meta{ opacity:.85; }
.lb__controls{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between;
  pointer-events:none;
}
.lb__btn{
  pointer-events:auto;
  width:42px; height:42px; border-radius:999px; border:0; cursor:pointer;
  background: rgba(255,255,255,.9); color:#111;
  display:grid; place-items:center; font-size:1.2rem;
  margin: .5rem;
}
.lb__btn:hover{ transform: translateY(-1px); }
.lb__close{
  position:absolute; top:.5rem; right:.5rem;
}

@media (max-width:640px){
  .g-media img{ height: 200px; }
}