@import "style.css";

/* ===========================
   Gallery page (premium)
   =========================== */

.gallery-hero{
  position:relative;
  padding:34px 0 28px;
  overflow:hidden;
}
/* Same hero background treatment as Contact (contact.css `.page-hero--contact::before`) */
.page-hero--gallery::before{
  background-image:
    linear-gradient(90deg, rgba(9,4,3,.88) 0%, rgba(9,4,3,.56) 42%, rgba(9,4,3,.12) 100%),
    url("assets/About.webp");
}
@media (max-width: 767px){
  .page-hero--gallery::before{
    background-size:auto, cover;
    background-position:center top, center center;
  }
}
.gallery-hero > .container{
  position:relative;
  z-index:2;
}

.gallery-hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:center;
  min-height:38vh;
}

.gallery-hero-copy{
  max-width:64ch;
}
.gallery-hero-copy .eyebrow{
  font-size:var(--text-eyebrow);
  margin-bottom:var(--space-below-eyebrow);
}
.gallery-hero-title{
  font-family:var(--font-serif);
  font-weight:var(--weight-semibold);
  letter-spacing:-.03em;
  line-height:var(--leading-section);
  font-size:var(--text-section);
  margin:12px 0 14px;
  white-space:nowrap;
}
.gallery-hero-title-accent{
  color:var(--gold-2);
}
.gallery-hero-title strong{
  font-weight:600;
  color:var(--text);
}
.gallery-hero-subtitle{
  color:rgba(246,234,216,.84);
  font-size:var(--fluid-lead);
  line-height:var(--leading-relaxed);
  max-width:58ch;
  margin-bottom:22px;
}
.gallery-hero-subtitle a{
  color:var(--gold-2);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}
.gallery-hero-subtitle a:hover{
  color:var(--gold);
}

.gallery-controls{
  padding:18px 0 0;
}
.filter-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}
/* Match home hero CTAs: rounded-square (14px), glass inactive / gold gradient active */
.filter-tab{
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:14px;
  min-height:50px;
  padding:0 22px;
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(246,234,216,.92);
  border:1px solid rgba(230,194,142,.45);
  background:linear-gradient(155deg, rgba(22,12,8,.78) 0%, rgba(8,4,3,.52) 100%);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 4px 20px rgba(0,0,0,.35),
    0 0 28px rgba(198,154,91,.08);
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease, color .28s ease;
}
.filter-tab:hover{
  transform:translateY(-2px);
  border-color:rgba(230,194,142,.62);
  background:linear-gradient(155deg, rgba(32,18,12,.88) 0%, rgba(12,6,4,.62) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.1) inset,
    0 10px 32px rgba(0,0,0,.42),
    0 0 36px rgba(230,194,142,.14);
}
.filter-tab.is-active,
.filter-tab[aria-pressed="true"]{
  color:#1b120c;
  font-weight:700;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(165deg, #c69a5b 0%, #a67c3d 55%, #8b6630 100%);
  box-shadow:
    0 0 32px rgba(230,194,142,.22),
    0 6px 28px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.35) inset;
}
.filter-tab.is-active:hover,
.filter-tab[aria-pressed="true"]:hover{
  transform:translateY(-2px);
  box-shadow:
    0 0 42px rgba(230,194,142,.32),
    0 10px 36px rgba(0,0,0,.4),
    0 1px 0 rgba(255,255,255,.45) inset;
}
.filter-tab:focus-visible{
  outline:2px solid rgba(230,194,142,.55);
  outline-offset:3px;
}
.filter-tab__icon{
  display:inline-flex;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  color:inherit;
}
.filter-tab__icon svg{
  display:block;
  width:100%;
  height:100%;
}
.filter-tab__label{
  min-width:0;
}

.gallery-section{
  padding:18px 0 86px;
}

.masonry-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
}

.masonry-item{
  grid-column:auto;
  grid-row:auto;
  border-radius:20px;
  overflow:hidden;
  position:relative;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  box-shadow:0 14px 40px rgba(0,0,0,.35);
  transition:border-color .22s ease, box-shadow .22s ease, opacity .22s ease, filter .22s ease;
  aspect-ratio:4 / 3;
}
.masonry-item{cursor:zoom-in}
/* keep existing markup classes but make layout uniform */
.masonry-item.size-wide,
.masonry-item.size-tall,
.masonry-item.size-big{
  grid-column:auto;
  grid-row:auto;
  min-height:auto;
}

.masonry-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1);
  transition:transform .35s ease;
  filter:saturate(1.04) contrast(1.02);
}
.masonry-item:hover{
  border-color:rgba(198,154,91,.30);
  box-shadow:0 18px 55px rgba(0,0,0,.48);
}
.masonry-item:hover img{transform:scale(1.04)}

.masonry-item.is-hidden{
  display:none;
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(8px);
}
.lightbox.is-open{display:flex}
.lightbox-dialog{
  width:auto;
  max-width:min(92vw, 1100px);
  max-height:calc(92vh);
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(14,7,5,.88);
  box-shadow:0 30px 120px rgba(0,0,0,.72);
  position:relative;
  display:inline-block;
}
.lightbox-nav{
  position:absolute;
  top:50%;
  z-index:3;
  width:48px;
  height:48px;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(20,12,8,.88);
  color:rgba(246,234,216,.95);
  font-size:1.75rem;
  line-height:1;
  font-weight:300;
  cursor:pointer;
  transform:translateY(-50%);
  transition:background .2s ease, transform .2s ease, border-color .2s ease, opacity .2s ease;
}
.lightbox-nav--prev{left:10px}
.lightbox-nav--next{right:10px}
.lightbox-nav:hover:not(:disabled){
  background:rgba(50,36,24,.95);
  border-color:rgba(198,154,91,.45);
  transform:translateY(-50%) scale(1.06);
}
.lightbox-nav:focus-visible{
  outline:2px solid var(--gold-2);
  outline-offset:2px;
}
.lightbox-nav:disabled{
  opacity:.32;
  cursor:not-allowed;
  transform:translateY(-50%);
}
.lightbox-img{
  width:auto;
  height:auto;
  max-width:92vw;
  max-height:82vh;
  object-fit:contain;
  display:block;
  background:#070302;
}
.lightbox-caption{display:none}
.lightbox-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:4;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
}
.lightbox-close:hover{
  border-color:rgba(198,154,91,.44);
  background:rgba(255,255,255,.10);
}


@media (max-width: 1080px){
  .gallery-hero-grid{min-height:auto}
  .masonry-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
}

@media (max-width: 900px){
  .masonry-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

@media (max-width: 640px){
  .gallery-hero{padding:28px 0 32px}
  .gallery-hero-title{white-space:normal}
  .filter-tabs{
    flex-wrap:nowrap;
    gap:6px;
    justify-content:stretch;
  }
  .filter-tab{
    flex:1 1 0;
    min-width:0;
    min-height:44px;
    padding:0 6px;
    gap:5px;
    font-size:.62rem;
    letter-spacing:.04em;
    white-space:nowrap;
  }
  .filter-tab__icon{
    width:15px;
    height:15px;
  }
  /* Two columns on phones so photos show as a 2×2-style grid */
  .masonry-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .masonry-item{aspect-ratio:1}
  .lightbox-nav{
    width:40px;
    height:40px;
    font-size:1.45rem;
  }
  .lightbox-nav--prev{left:6px}
  .lightbox-nav--next{right:6px}
}