/* ==========================================================================
   LAMSET NOOR STUDIO — pages/portfolio.css
   ========================================================================== */

/* ---------- Filter bar ---------- */
.gal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  margin-block-end: clamp(2rem, 4vw, 3.2rem);
}

/* ---------- Masonry gallery ---------- */
.gallery {
  columns: 3;
  column-gap: clamp(.7rem, 1.6vw, 1.2rem);
}

.gal-item {
  break-inside: avoid;
  margin-block-end: clamp(.7rem, 1.6vw, 1.2rem);
  position: relative;
  display: block;
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--surface-2);
  cursor: pointer;
  isolation: isolate;
  transition: border-color var(--t-mid), transform var(--t-mid) var(--ease-lux), box-shadow var(--t-mid);
}

.gal-item:hover,
.gal-item:focus-visible {
  border-color: var(--gold-400);
  transform: translateY(-6px);
  box-shadow: var(--shadow-m);
}

.gal-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1.2s var(--ease-lux), filter var(--t-mid);
}
.gal-item:hover img { transform: scale(1.06); }

.gal-item__veil {
  position: absolute;
  inset: 0;
  background: var(--img-veil);
  opacity: 0;
  transition: opacity var(--t-mid);
  pointer-events: none;
}
.gal-item:hover .gal-item__veil { opacity: .9; }

.gal-item__meta {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline: 1.1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  opacity: 0;
  transform: translateY(12px);
  transition: all var(--t-mid) var(--ease-lux);
  pointer-events: none;
}
.gal-item:hover .gal-item__meta { opacity: 1; transform: translateY(0); }

.gal-item__cat {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--gold-200);
}
html[lang='ar'] .gal-item__cat { letter-spacing: .02em; text-transform: none; font-size: .84rem; }

.gal-item__zoom {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(212, 175, 55, .9);
  color: #0A0810;
  flex-shrink: 0;
}
.gal-item__zoom svg { width: 15px; height: 15px; }

@media (max-width: 1000px) { .gallery { columns: 2; } }
@media (max-width: 560px) { .gallery { columns: 1; } .gal-item__meta { opacity: 1; transform: none; } }

.gal-empty { text-align: center; padding-block: 4rem; color: var(--text-3); }

/* ---------- Lightbox ---------- */
.lightbox .modal__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.lightbox__img {
  max-width: min(94vw, 1060px);
  max-height: 76vh;
  width: auto;
  border-radius: var(--radius-m);
  border: 1px solid rgba(212, 175, 55, .3);
  box-shadow: var(--shadow-l);
  object-fit: contain;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  color: rgba(245, 242, 235, .75);
  font-size: var(--fs-small);
  letter-spacing: .08em;
}
.lightbox__count { color: var(--gold-300); font-family: var(--font-display); font-size: 1rem; }