/* ==========================================================================
   PORTFOLIO — page-specific styles
   ========================================================================== */

.page-header {
  padding: calc(var(--nav-h) + var(--sp-8)) var(--gutter) var(--sp-8);
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.page-eyebrow {
  font-family: var(--sans);
  font-size: var(--text-2xs);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-4);
}
.page-title {
  font-family: var(--serif);
  font-size: var(--display-md);
  font-weight: 300;
  line-height: 0.97;
  color: var(--on-ink-100);
}
.page-title em { font-style: italic; color: var(--gold-light); }
.page-header-note {
  font-family: var(--sans);
  font-size: var(--text-md);
  font-weight: 300;
  color: var(--on-ink-50);
  max-width: 20rem;
  line-height: 1.8;
  text-align: right;
}

/* ---- filters ---- */
.filter-wrap {
  padding: 0 var(--gutter) var(--sp-7);
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.filter-btn {
  padding: 10px 22px;
  font-family: var(--sans);
  font-size: var(--text-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-ink-50);
  background: transparent;
  border: 1px solid var(--on-ink-10);
  cursor: pointer;
  transition: color var(--dur-2), border-color var(--dur-2), background var(--dur-2);
}
.filter-btn:hover { color: var(--on-ink-100); border-color: var(--on-ink-20); }
.filter-btn.is-active { color: var(--ink); background: var(--gold); border-color: var(--gold); }

/* ---- masonry grid ---- */
.portfolio-grid {
  padding: 0 var(--gutter) var(--section-y);
  max-width: var(--container);
  margin: 0 auto;
  columns: 3;
  column-gap: 3px;
}
.portfolio-item {
  break-inside: avoid;
  margin-bottom: 3px;
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  cursor: pointer;
}
.portfolio-item img {
  width: 100%;
  display: block;
  filter: brightness(0.88) saturate(0.94);
  transition: transform 0.6s var(--ease-out), filter 0.6s var(--ease-out);
}
.portfolio-item:hover img { transform: scale(1.035); filter: brightness(1) saturate(1); }
.portfolio-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.88) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--dur-2);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-5);
  text-align: left;
}
.portfolio-item:hover .portfolio-item-overlay { opacity: 1; }
.portfolio-item-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 300;
  color: var(--on-ink-100);
  line-height: 1.2;
}
.portfolio-item-cat {
  font-family: var(--sans);
  font-size: var(--text-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: var(--sp-2);
}

/* ---- lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.97);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-3) var(--ease-out), visibility 0s var(--dur-3);
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-3) var(--ease-out); }
.lightbox-img { max-width: 100%; max-height: 84vh; object-fit: contain; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--on-ink-50);
  transition: color var(--dur-2);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { color: var(--gold); }
.lightbox-close {
  top: var(--sp-6); right: var(--sp-6);
  font-family: var(--sans); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase;
}
.lightbox-prev, .lightbox-next {
  top: 50%; transform: translateY(-50%);
  font-family: var(--serif); font-size: 2rem;
  padding: var(--sp-4);
}
.lightbox-prev { left: var(--sp-3); }
.lightbox-next { right: var(--sp-3); }
.lightbox-caption {
  position: absolute;
  bottom: var(--sp-6); left: 50%; transform: translateX(-50%);
  font-family: var(--sans); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink-35);
  white-space: nowrap;
}

/* ---- CTA strip ---- */
.cta-strip {
  background: var(--gold);
  padding: var(--sp-7) var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.cta-strip-text {
  font-family: var(--serif);
  font-size: var(--display-xs);
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
}
.cta-strip .btn { border-color: var(--ink); color: var(--ink); }
.cta-strip .btn:hover { background: var(--ink); color: var(--paper); }

@media (min-width: 861px) and (max-width: 1180px) {
  .portfolio-grid { columns: 2; }
}

@media (max-width: 860px) {
  .page-header { flex-direction: column; align-items: flex-start; gap: var(--sp-4); padding-top: calc(var(--nav-h) + var(--sp-6)); }
  .page-header-note { text-align: left; max-width: 100%; }
  .portfolio-grid { columns: 2; }
  .cta-strip { flex-direction: column; text-align: center; }
}
@media (max-width: 520px) {
  .portfolio-grid { columns: 1; }
}