/* =========================================================
   DIAMOND PHOTOGRAPHY — gallery.css
   Styles for: the gallery overview page (category cards),
   individual category subpages (masonry grid), the popup
   image viewer, and a simple (non-animated) loading screen.
   Relies entirely on the design tokens declared in style.css
   — load style.css before this file.
   ========================================================= */

/* ---------------------------------------------------------
   Simple loading screen — no intro reveal choreography,
   just a brief brand moment while the page settles, then a
   plain fade out. Reuses the .loader markup/skin from
   style.css; only the motion here is different (CSS only,
   no GSAP timeline).
   --------------------------------------------------------- */
.loader__bar-fill{ animation: gLoaderFill .85s var(--ease-out) forwards; }
@keyframes gLoaderFill{ from{ width:0%; } to{ width:100%; } }
.loader{
  transition: opacity .5s ease, visibility .5s ease;
}
.loader.is-done{ opacity:0; visibility:hidden; }

/* ---------------------------------------------------------
   Shared page header — used at the top of the gallery
   overview page and every category subpage.
   --------------------------------------------------------- */
.gallery-hero{
  position: relative;
  padding: clamp(120px,20vh,168px) var(--gutter) clamp(40px,7vh,64px);
  background: var(--maroon-dark);
  overflow: hidden;
}
.gallery-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}
.gallery-hero__inner{ position:relative; z-index:1; max-width: 900px; }
.gallery-hero .chapter-tag--light{ margin-bottom: 1rem; }
.gallery-hero__title{
  font-family: var(--font-display); font-weight:500;
  font-size: var(--fs-h2); line-height:.98; letter-spacing:-.015em;
  color: var(--ink);
}
.gallery-hero__sub{
  margin-top: .9rem;
  font-family: var(--font-script); font-weight:400;
  font-size: clamp(1.3rem,3.2vw,1.9rem);
  color: var(--gold);
}

/* ---------------------------------------------------------
   GALLERY OVERVIEW — category cards.
   Mobile: 1 column / 4 rows. Desktop: 2 columns / 2 rows.
   No gap between tiles — edges touch, like a contact sheet.
   --------------------------------------------------------- */
.cat-grid-overview{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--bg-cream);
}
.cat-card{
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--line);
}
.cat-card img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.04);
  transition: transform .6s var(--ease-out);
  filter: sepia(.1) saturate(1.08) contrast(1.05) brightness(.92);
}
.cat-card__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,10,8,.05) 0%, rgba(20,10,8,.28) 55%, rgba(20,10,8,.78) 100%);
}
.cat-card__meta{
  position:absolute; left: clamp(18px,3vw,32px); bottom: clamp(18px,3vw,32px); right: clamp(18px,3vw,32px);
  z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
}
.cat-card__label{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.5rem,3.6vw,2.4rem);
  color: var(--ink);
  line-height:1;
}
.cat-card__count{
  font-size: var(--fs-label); letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color: rgba(250,243,232,.75);
  white-space:nowrap;
}
.cat-card__arrow{
  position:absolute; top: clamp(16px,3vw,26px); right: clamp(16px,3vw,26px); z-index:2;
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink);
  opacity:0; transform: translate(-6px,6px);
  transition: opacity .35s ease, transform .35s var(--ease-out), background-color .3s ease, border-color .3s ease;
}
.cat-card__arrow svg{ width:15px; height:15px; }
@media (hover:hover){
  .cat-card:hover img{ transform: scale(1.12); }
  .cat-card:hover .cat-card__arrow{ opacity:1; transform: translate(0,0); background: var(--gold); border-color: var(--gold); color: var(--maroon-dark); }
}

@media (min-width: 768px){
  .cat-grid-overview{ grid-template-columns: repeat(2,1fr); }
  .cat-card{ aspect-ratio: 4 / 3.1; }
}

/* ---------------------------------------------------------
   CATEGORY SUBPAGE — masonry grid via CSS columns.
   Mobile: 2 columns. Desktop: 3 columns.
   Zero gap in every direction — tiles butt against each other.
   --------------------------------------------------------- */
.cat-grid{
  column-count: 2;
  column-gap: 0;
  background: var(--bg-cream);
}
.cat-item{
  display:block;
  width:100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--line);
}
.cat-item img{
  width:100%; height:auto; display:block;
  filter: sepia(.1) saturate(1.08) contrast(1.05) brightness(.98);
  transition: transform .6s var(--ease-out), filter .4s ease;
}
.cat-item::after{
  content:''; position:absolute; inset:0;
  background: rgba(20,10,8,0);
  transition: background-color .35s ease;
}
@media (hover:hover){
  .cat-item:hover img{ transform: scale(1.06); }
  .cat-item:hover::after{ background: rgba(20,10,8,.16); }
}

@media (min-width: 1024px){
  .cat-grid{ column-count: 3; }
}

/* Empty-state, shown only if a category has no images */
.cat-grid__empty{
  padding: clamp(60px,12vh,120px) var(--gutter);
  text-align:center;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------
   POPUP IMAGE VIEWER — full image + counter (e.g. 2 / 30)
   + prev/next + close. Distinct id/class namespace from the
   homepage's .lightbox so both can exist in the same project
   without collision.
   --------------------------------------------------------- */
.cat-lightbox{
  position: fixed; inset:0; z-index: 8000;
  background: rgba(15,8,6,.97);
  display:flex; align-items:center; justify-content:center;
  padding: clamp(16px,5vw,48px);
}
.cat-lightbox[hidden]{ display:none; }
.cat-lightbox__figure{
  max-width: 1100px; width:100%; max-height: 88vh;
  display:flex; flex-direction:column; align-items:center; gap: .9rem;
}
.cat-lightbox__figure img{
  max-width:100%; max-height: 80vh; width:auto; object-fit:contain;
  border-radius: var(--radius);
  filter: sepia(.1) saturate(1.08) contrast(1.05) brightness(.98);
  opacity: 0;
  transition: opacity .25s ease;
}
.cat-lightbox__figure img.is-visible{ opacity:1; }
.cat-lightbox__counter{
  font-family: var(--font-body); font-weight:600;
  font-size: var(--fs-label); letter-spacing: var(--tracking-mid);
  color: var(--ink-soft);
}
.cat-lightbox__close{
  position:absolute; top: clamp(14px,3vw,28px); right: clamp(14px,3vw,28px);
  width:44px; height:44px; border-radius:50%; background: rgba(255,255,255,.1); color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition: background-color .3s ease;
}
.cat-lightbox__close svg{ width:18px; height:18px; }
.cat-lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%; background: rgba(255,255,255,.1); color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition: background-color .3s ease;
}
.cat-lightbox__nav svg{ width:20px; height:20px; }
.cat-lightbox__prev{ left: clamp(10px,3vw,28px); }
.cat-lightbox__next{ right: clamp(10px,3vw,28px); }
@media (min-width: 768px){
  .cat-lightbox__close:hover, .cat-lightbox__nav:hover{ background: var(--maroon); }
}

/* ---------------------------------------------------------
   Back-link row, shown under the category header, pointing
   back to the full gallery overview.
   --------------------------------------------------------- */
.cat-back{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top: 1.2rem;
  font-size: var(--fs-label); letter-spacing: var(--tracking-mid); text-transform:uppercase; font-weight:600;
  color: rgba(250,243,232,.75);
}
.cat-back svg{ width:14px; height:14px; }
.cat-back:hover{ color: var(--gold); }