/* ============================================================
   STUDIO EXELLIA — Portfolio Stylesheet
   ============================================================ */

/* Portfolio hero */
.portfolio-hero {
  height: 52vh; min-height: 380px;
  position: relative; display: flex; align-items: center;
  overflow: hidden; background: var(--ink);
  padding-top: 80px;
}
.portfolio-hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,.7) 100%),
              url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1800&q=80') center/cover no-repeat;
  transform: scale(1.04); transition: transform 6s ease;
}
.portfolio-hero-bg.loaded { transform: scale(1); }
.portfolio-hero-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none; opacity: .4;
}
.portfolio-hero-content {
  position: relative; z-index: 2;
  padding: 0 clamp(24px,5vw,80px);
}
.portfolio-hero-content .section-label {
  opacity: 0; animation: fadeUp .8s .3s ease forwards;
}
.portfolio-hero-content h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300; font-size: clamp(44px,7vw,92px);
  line-height: .95; color: var(--white); letter-spacing: -.01em;
  opacity: 0; animation: fadeUp 1s .5s ease forwards;
}
.portfolio-hero-content h1 em { font-style: italic; color: var(--gold-lt); }

/* Filter bar */
.filter-bar {
  background: var(--white);
  border-bottom: 1px solid rgba(184,150,90,.12);
  padding: 0 clamp(24px,5vw,80px);
  position: sticky; top: 73px; z-index: 100;
  display: flex; align-items: center; gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.filter-bar::-webkit-scrollbar { display: none; }

.filter-btn {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mist); background: none; border: none;
  padding: 20px 24px; cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color .25s, border-color .25s;
  position: relative;
}
.filter-btn:hover { color: var(--gold); }
.filter-btn.active { color: var(--ink); border-bottom-color: var(--gold); }

.filter-count {
  font-size: 9px; color: var(--gold);
  margin-left: 6px; opacity: .8;
}

/* Gallery grid */
.gallery-section {
  padding: clamp(48px,6vw,80px) clamp(24px,5vw,80px);
  background: var(--white);
  min-height: 60vh;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.gallery-grid.layout-masonry {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 240px;
}

.gallery-item {
  position: relative; overflow: hidden;
  background: #1a1a1a;
  cursor: pointer;
  grid-row: span 1;
}

/* Varied sizing for visual rhythm */
.gallery-item.tall    { grid-row: span 2; }
.gallery-item.wide    { grid-column: span 2; }
.gallery-item.feature { grid-column: span 2; grid-row: span 2; }

.gallery-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .7s var(--ease), filter .4s;
  filter: brightness(.88) saturate(.9);
}
.gallery-item:hover .gallery-img {
  transform: scale(1.06);
  filter: brightness(1) saturate(1.08);
}

.gallery-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.1) 50%, transparent 100%);
  opacity: 0; transition: opacity .4s;
  display: flex; flex-direction: column;
  justify-content: flex-end; padding: 24px;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }

.overlay-category {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 9px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--gold-lt); margin-bottom: 6px;
}
.overlay-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 300; color: var(--white);
  line-height: 1.2;
}
.overlay-expand {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--white); font-size: 16px;
  transform: scale(0.8); opacity: 0;
  transition: transform .3s, opacity .3s;
}
.gallery-item:hover .overlay-expand { transform: scale(1); opacity: 1; }

/* Category headers */
.category-divider {
  display: flex; align-items: center; gap: 20px;
  margin: 48px 0 24px;
}
.category-divider h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(24px,3vw,36px); color: var(--ink); white-space: nowrap;
}
.category-divider h2 em { font-style: italic; color: var(--gold); }
.category-divider::after { content: ''; flex: 1; height: 1px; background: rgba(184,150,90,.2); }

/* Empty state */
.gallery-empty {
  grid-column: 1 / -1; text-align: center; padding: 80px 0;
  display: none;
}
.gallery-empty.visible { display: block; }
.gallery-empty p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22px; color: var(--mist); }

/* ── LIGHTBOX ── */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(8,8,8,.97);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .35s;
}
.lightbox.open { opacity: 1; pointer-events: all; }

.lightbox-inner {
  position: relative;
  max-width: min(90vw, 1100px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lightbox-img-wrap {
  position: relative;
  max-height: 78vh;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

.lightbox-img {
  max-width: 100%; max-height: 78vh;
  object-fit: contain; display: block;
  border: 1px solid rgba(184,150,90,.12);
  transform: scale(.96);
  transition: transform .4s var(--ease);
}
.lightbox.open .lightbox-img { transform: scale(1); }

.lightbox-info {
  padding: 16px 4px 0;
  display: flex; align-items: center; justify-content: space-between;
}
.lightbox-meta .lb-category {
  font-family: 'Tenor Sans', sans-serif; font-size: 10px;
  letter-spacing: .25em; text-transform: uppercase; color: var(--gold);
}
.lightbox-meta .lb-title {
  font-family: 'Cormorant Garamond', serif; font-size: 22px;
  font-weight: 300; color: var(--white); margin-top: 4px;
}
.lightbox-counter {
  font-family: 'Tenor Sans', sans-serif; font-size: 11px;
  letter-spacing: .1em; color: rgba(255,255,255,.3);
}

.lightbox-close {
  position: fixed; top: 28px; right: 32px;
  width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.2);
  background: none; color: var(--white); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s;
}
.lightbox-close:hover { border-color: var(--gold); background: rgba(184,150,90,.1); }

.lightbox-prev, .lightbox-next {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.15);
  background: none; color: var(--white); font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s;
}
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-prev:hover, .lightbox-next:hover { border-color: var(--gold); background: rgba(184,150,90,.12); }

/* Placeholder images via Unsplash (will be replaced with real photos) */
.gallery-item[data-cat="weddings"] .gallery-img     { background: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=800&q=80') center/cover; }
.gallery-item[data-cat="weddings"][data-id="2"] .gallery-img { background: url('https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=800&q=80') center/cover; }
.gallery-item[data-cat="weddings"][data-id="3"] .gallery-img { background: url('https://images.unsplash.com/photo-1537633552985-df8429e8048b?w=800&q=80') center/cover; }
.gallery-item[data-cat="weddings"][data-id="4"] .gallery-img { background: url('https://images.unsplash.com/photo-1606216794074-735e91aa2c92?w=800&q=80') center/cover; }
.gallery-item[data-cat="weddings"][data-id="5"] .gallery-img { background: url('https://images.unsplash.com/photo-1591604466107-ec97de577aff?w=800&q=80') center/cover; }
.gallery-item[data-cat="weddings"][data-id="6"] .gallery-img { background: url('https://images.unsplash.com/photo-1525772764200-be829a350797?w=800&q=80') center/cover; }

.gallery-item[data-cat="portraits"] .gallery-img    { background: url('https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=800&q=80') center/cover; }
.gallery-item[data-cat="portraits"][data-id="2"] .gallery-img { background: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&q=80') center/cover; }
.gallery-item[data-cat="portraits"][data-id="3"] .gallery-img { background: url('https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=800&q=80') center/cover; }
.gallery-item[data-cat="portraits"][data-id="4"] .gallery-img { background: url('https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=800&q=80') center/cover; }
.gallery-item[data-cat="portraits"][data-id="5"] .gallery-img { background: url('https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=800&q=80') center/cover; }

.gallery-item[data-cat="events"] .gallery-img       { background: url('https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=800&q=80') center/cover; }
.gallery-item[data-cat="events"][data-id="2"] .gallery-img { background: url('https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=800&q=80') center/cover; }
.gallery-item[data-cat="events"][data-id="3"] .gallery-img { background: url('https://images.unsplash.com/photo-1511578314322-379afb476865?w=800&q=80') center/cover; }
.gallery-item[data-cat="events"][data-id="4"] .gallery-img { background: url('https://images.unsplash.com/photo-1528495612343-9ca9f4a4de28?w=800&q=80') center/cover; }

.gallery-item[data-cat="aerial"] .gallery-img       { background: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80') center/cover; }
.gallery-item[data-cat="aerial"][data-id="2"] .gallery-img { background: url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&q=80') center/cover; }
.gallery-item[data-cat="aerial"][data-id="3"] .gallery-img { background: url('https://images.unsplash.com/photo-1519046904884-53103b34b206?w=800&q=80') center/cover; }

.gallery-item[data-cat="products"] .gallery-img     { background: url('https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=800&q=80') center/cover; }
.gallery-item[data-cat="products"][data-id="2"] .gallery-img { background: url('https://images.unsplash.com/photo-1491553895911-0055eca6402d?w=800&q=80') center/cover; }
.gallery-item[data-cat="products"][data-id="3"] .gallery-img { background: url('https://images.unsplash.com/photo-1585386959984-a4155224a1ad?w=800&q=80') center/cover; }
.gallery-item[data-cat="products"][data-id="4"] .gallery-img { background: url('https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=800&q=80') center/cover; }

/* Upload prompt card */
.upload-prompt {
  border: 2px dashed rgba(184,150,90,.25);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 40px 24px;
  background: rgba(184,150,90,.02);
  transition: border-color .3s, background .3s;
  min-height: 240px;
}
.upload-prompt:hover { border-color: var(--gold); background: rgba(184,150,90,.05); }
.upload-prompt-icon { font-size: 32px; margin-bottom: 12px; opacity: .5; }
.upload-prompt p { font-family: 'Tenor Sans', sans-serif; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }

/* Responsive */
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2,1fr); }
  .gallery-grid.layout-masonry { grid-auto-rows: 200px; }
  .gallery-item.feature { grid-column: span 2; }
  .gallery-item.wide    { grid-column: span 2; }
}
@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item.tall, .gallery-item.wide, .gallery-item.feature { grid-column: span 1; grid-row: span 1; }
  .gallery-grid.layout-masonry { grid-auto-rows: 260px; }
  .filter-bar { padding: 0 16px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}