/* photos.css — page-specific styles */

/* Dark page body — overrides base.css linen default */
body { background: var(--ink); color: var(--cream); padding-top: 68px; }

/* PAGE HEADER */
.page-header{padding: 80px 40px 40px;border-bottom:1px solid rgba(176,141,87,0.12);}
.page-header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:10px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--gold);opacity:0.7;}
h1{font-family:var(--serif);font-size:clamp(30px,3.5vw,48px);font-weight:300;color:var(--cream);line-height:1.1;letter-spacing:-0.02em;}
h1 em{font-style:italic;color:var(--gold-lt);}
.photo-count{font-size:13px;font-weight:300;color:var(--w45);margin-top:10px;}

/* FILTER TABS */
.filter-bar{position:sticky;top:68px;z-index:100;background:rgba(22,18,13,0.96);backdrop-filter:blur(16px);border-bottom:1px solid rgba(176,141,87,0.1);padding:0 40px;}
.filter-inner{max-width:1200px;margin:0 auto;display:flex;gap:0;overflow-x:auto;scrollbar-width:none;}
.filter-inner::-webkit-scrollbar{display:none;}
.filter-btn{flex-shrink:0;padding:14px 20px;font-size:11px;font-weight:400;letter-spacing:0.1em;text-transform:uppercase;color:var(--w45);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color 0.2s,border-color 0.2s;white-space:nowrap;}
.filter-btn:hover{color:var(--w70);}
.filter-btn.active{color:var(--gold);border-bottom-color:var(--gold);}

/* GALLERY */
.gallery-wrap{max-width:1200px;margin:0 auto;padding:48px 40px 96px;}

/* Category label */
.cat-label{font-family:var(--serif);font-size:24px;font-weight:300;color:var(--cream);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(176,141,87,0.12);display:flex;align-items:baseline;justify-content:space-between;}
.cat-label em{font-style:italic;color:var(--gold-lt);}
.cat-count{font-size:12px;font-weight:300;color:var(--w20);letter-spacing:0.06em;font-family:var(--sans);}
.cat-section{margin-bottom:56px;}

/* Masonry grid */
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;}

/* Featured hero photos span wider */
.photo-hero{grid-column:span 2;grid-row:span 2;}
.photo-wide{grid-column:span 2;}

.photo-item{position:relative;overflow:hidden;cursor:pointer;background:var(--forest);}
.photo-item::after{content:'';position:absolute;inset:0;background:rgba(22,18,13,0);transition:background 0.3s;}
.photo-item:hover::after{background:rgba(22,18,13,0.25);}
.photo-.photo-item:hover .photo-/* Height control */
.photo-item{height:240px;}
.photo-hero{height:483px;}
.photo-wide{height:240px;}

/* Caption overlay */
.photo-cap{position:absolute;bottom:0;left:0;right:0;padding:16px 18px 14px;background:linear-gradient(to top,rgba(22,18,13,0.75) 0%,transparent 100%);opacity:0;transform:translateY(4px);transition:opacity 0.3s,transform 0.3s;font-size:12px;font-weight:300;color:var(--cream);letter-spacing:0.03em;}
.photo-item:hover .photo-cap{opacity:1;transform:none;}

/* Expand icon */
.photo-expand{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;background:rgba(22,18,13,0.6);border:1px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s;pointer-events:none;}
.photo-expand svg{width:12px;height:12px;fill:none;stroke:var(--cream);stroke-width:1.5;}
.photo-item:hover .photo-expand{opacity:1;}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;z-index:999;background:rgba(13,11,8,0.97);display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity 0.3s;}
.lightbox.open{opacity:1;pointer-events:all;}
.lb-img-wrap{position:relative;max-width:90vw;max-height:80vh;display:flex;align-items:center;justify-content:center;}
.lb-.lb-cap{font-family:var(--serif);font-size:16px;font-weight:300;font-style:italic;color:var(--w45);margin-top:16px;text-align:center;}
.lb-counter{font-size:11px;font-weight:400;letter-spacing:0.12em;color:var(--w20);text-align:center;margin-top:6px;}
.lb-close{position:fixed;top:24px;right:28px;width:40px;height:40px;background:none;border:1px solid rgba(255,255,255,0.15);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color 0.2s;}
.lb-close:hover{border-color:var(--gold-bdr);}
.lb-close svg{width:16px;height:16px;fill:none;stroke:var(--w70);stroke-width:1.5;}
.lb-prev,.lb-next{position:fixed;top:50%;transform:translateY(-50%);width:44px;height:44px;background:none;border:1px solid rgba(255,255,255,0.12);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color 0.2s,background 0.2s;}
.lb-prev{left:20px;}
.lb-next{right:20px;}
.lb-prev:hover,.lb-next:hover{border-color:var(--gold-bdr);background:rgba(176,141,87,0.08);}
.lb-prev svg,.lb-next svg{width:18px;height:18px;fill:none;stroke:var(--w70);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}

/* CTA BAND */
.cta-band{background:var(--canopy);padding:72px 40px;border-top:1px solid rgba(176,141,87,0.1);}
.cta-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.cta-text h2{font-family:var(--serif);font-size:clamp(24px,3vw,38px);font-weight:300;color:var(--cream);margin-bottom:8px;}
.cta-text h2 em{font-style:italic;color:var(--gold-lt);}
.cta-text p{font-size:14px;font-weight:300;color:var(--w70);line-height:1.7;max-width:440px;}
.cta-btns{display:flex;gap:12px;flex-shrink:0;}
.btn-primary{display:inline-flex;align-items:center;padding:13px 28px;background:var(--gold);color:var(--ink);font-size:12px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;border-radius:3px;transition:background 0.2s;}
.btn-primary:hover{background:var(--gold-lt);}
.btn-ghost{display:inline-flex;align-items:center;padding:12px 24px;background:none;color:var(--w70);font-size:12px;font-weight:400;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;border:1px solid rgba(255,255,255,0.15);border-radius:3px;transition:border-color 0.2s,color 0.2s;}
.btn-ghost:hover{border-color:var(--gold-bdr);color:var(--cream);}

/* FOOTER */

.footer-

.footer-links a:hover{color:var(--gold-lt);}

.footer-legal a{font-size:11px;font-weight:300;color:var(--w20);text-decoration:none;transition:color 0.2s;}
.footer-legal a:hover{color:var(--w45);}

/* RESPONSIVE */
@media(max-width:1024px){.photo-grid{grid-template-columns:repeat(3,1fr);}.photo-hero{grid-column:span 2;}.footer-}
@media(max-width:860px){
.page-header,.filter-bar,.gallery-wrap,.cta-band{padding-left:20px;padding-right:20px;}.photo-grid{grid-template-columns:repeat(2,1fr);}.photo-hero{grid-column:span 2;}.cta-inner{flex-direction:column;gap:24px;}.footer-}
@media(max-width:580px){.photo-grid{grid-template-columns:repeat(2,1fr);}.photo-item{height:160px;}.photo-hero{height:323px;}.footer-}

/* Touch */
@media(hover:none){.photo-cap{opacity:1;transform:none;}.photo-expand{opacity:1;}}

/* Gallery CTA */
.gallery-cta {
  background: var(--forest);
  border-top: 1px solid rgba(176,141,87,0.12);
  padding: 32px 40px;
}
.gallery-cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.gallery-cta-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.gallery-cta-headline {
  font-size: 14px;
  font-weight: 300;
  color: var(--w70);
}
.gallery-cta-btn {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 12px 28px;
  background: var(--gold);
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.2s;
}
.gallery-cta-btn:hover { background: var(--gold-lt); }
@media (max-width: 860px) {
  .gallery-cta { padding: 24px 20px; }
  .gallery-cta-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .gallery-cta-btn { width: 100%; justify-content: center; padding: 14px; }
}