/* =========================================================
   GALLERY — draggable "moodboard" canvas
   ========================================================= */
.board-hint{
  display:flex; align-items:center; gap:10px;
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .05em; text-transform:uppercase;
  color: var(--muted-2);
  margin-top: 10px;
}
.board-hint svg{ width:14px; height:14px; }

.filter-chips{
  display:flex; gap:10px; flex-wrap:wrap;
  margin: 34px 0 10px;
}
.chip{
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 13px; color: var(--muted);
  transition: all .3s;
}
.chip:hover{ color: var(--ivory); }
.chip.is-active{ background: var(--grad-signature); color:#17090F; border-color:transparent; font-weight:600; }

.board-frame{
  position: relative;
  margin-top: 30px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-l);
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/28px 28px,
    var(--bg);
  height: 720px;
  overflow: hidden;
  touch-action: none;
}
.board-frame::before{
  content: "MOODBOARD.FIG";
  position:absolute; top:16px; left:20px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing:.14em;
  color: var(--muted-2); z-index: 2;
}
.board-frame::after{
  content: "drag frames · click to expand";
  position:absolute; top:16px; right:20px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing:.06em;
  color: var(--muted-2); z-index: 2;
}

.board-card{
  position: absolute;
  width: 220px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line-strong);
  background: var(--bg-elevated);
  box-shadow: 0 20px 40px -18px rgba(0,0,0,0.6);
  cursor: grab;
  user-select: none;
  transition: box-shadow .3s, border-color .3s;
  z-index: 3;
}
.board-card:active{ cursor: grabbing; }
.board-card.is-dragging{
  box-shadow: 0 30px 60px -14px rgba(255,46,126,0.35);
  border-color: var(--pink);
  z-index: 50 !important;
  transition: none;
}
.board-card .swatch{ height: 150px; border-radius: var(--radius-s) var(--radius-s) 0 0; }
.board-card .board-card-label{
  padding: 12px 14px 14px;
  display:flex; align-items:center; justify-content:space-between;
}
.board-card .board-card-label strong{ font-size: 12.5px; font-weight:600; }
.board-card .board-card-label span{
  font-family: var(--f-mono); font-size: 9.5px; color: var(--muted-2);
  border: 1px solid var(--line-strong); padding: 3px 7px; border-radius: 999px;
}
.board-card .frame-dot{
  position:absolute; top: -5px; left: -5px;
  width:10px; height:10px; border-radius:50%;
  background: var(--pink); border: 2px solid var(--bg);
  opacity: 0; transition: opacity .3s;
}
.board-card:hover .frame-dot{ opacity: 1; }

.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 60px;
}
.g-item{
  position: relative;
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4/5;
  cursor: none;
}
.g-item:nth-child(3n+2){ aspect-ratio: 4/5.6; }
.g-item .swatch{ width:100%; height:100%; transition: transform .6s var(--ease); }
.g-item:hover .swatch{ transform: scale(1.06); }
.g-item .g-overlay{
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(9,5,8,0.82) 0%, transparent 55%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 18px;
  opacity: 0; transition: opacity .35s;
}
.g-item:hover .g-overlay{ opacity: 1; }
.g-overlay strong{ font-size: 14px; }
.g-overlay span{ font-family: var(--f-mono); font-size: 10.5px; color: var(--muted-2); text-transform:uppercase; letter-spacing:.06em; }

/* lightbox */
.lightbox{
  position: fixed; inset:0; z-index: 900;
  background: rgba(9,5,8,0.92);
  backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition: opacity .4s, visibility .4s;
  padding: 40px;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-inner{ max-width: 560px; width:100%; text-align:center; }
.lightbox-swatch{ width:100%; aspect-ratio: 4/5; border-radius: var(--radius-l); margin-bottom: 20px; object-fit: cover; display:block; }
.lightbox-inner h3{ font-size: 24px; }
.lightbox-inner p{ margin-top: 8px; }
.lightbox-close{
  position:absolute; top: 30px; right: 40px;
  width: 44px; height:44px; border-radius:50%;
  border: 1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  color: var(--ivory);
  transition: transform .3s;
}
.lightbox-close:hover{ transform: rotate(90deg); border-color: var(--pink); }

@media (max-width: 980px){
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .board-frame{ height: 560px; }
  .board-card{ width: 160px; }
}
@media (max-width: 480px){
  .board-frame{ height: 480px; }
  .board-card{ width: 130px; }
  .board-card .swatch{ height: 100px; }
}