/* ============================
   TCP Concrete — Project Gallery (gallery.html)
   Loaded after index.css; reuses its tokens, navbar, buttons and footer.
   ============================ */

.g-hero {
  background: var(--grad-dark);
  color: #fff;
  padding: 150px 0 var(--space-lg);
  text-align: center;
}
.g-hero .section-label { color: var(--clr-accent); }
.g-hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  color: #fff;
  margin: 0.5rem 0 0.75rem;
}
.g-hero p {
  color: rgba(255,255,255,0.75);
  max-width: 620px;
  margin: 0 auto;
  font-size: 1.0625rem;
}

/* Filters */
.g-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--space-md);
}
.g-filter {
  font: 600 0.9375rem/1 var(--font-body);
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-full);
  padding: 0.625rem 1rem;
  min-height: 44px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.g-filter:hover { background: rgba(255,255,255,0.16); }
.g-filter[aria-pressed="true"] { background: var(--clr-accent); border-color: var(--clr-accent); }
.g-filter .g-count { opacity: 0.75; font-weight: 500; margin-left: 0.25rem; }

/* Masonry grid (CSS columns keep each photo's own shape) */
.g-section { padding: var(--space-xl) 0 var(--space-2xl); background: var(--clr-surface-alt); }
.g-grid { columns: 3 300px; column-gap: var(--space-sm); }
.g-item {
  break-inside: avoid;
  margin: 0 0 var(--space-sm);
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--clr-border-light);
}
.g-item[hidden] { display: none; }
.g-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.g-open img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--transition-slow);
}
.g-open:hover img { transform: scale(1.04); }
.g-item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.25rem 0.875rem 0.75rem;
  background: linear-gradient(180deg, transparent 0%, rgba(15,18,25,0.82) 100%);
  color: #fff;
  font: 600 0.875rem/1.35 var(--font-heading);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.g-item:hover figcaption, .g-open:focus-visible + figcaption { opacity: 1; }
@media (hover: none) { .g-item figcaption { opacity: 1; } }
.g-empty { text-align: center; color: var(--clr-text-muted); }

/* Call to action */
.g-cta { text-align: center; padding: var(--space-xl) 0; }
.g-cta h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); margin-bottom: 0.5rem; }
.g-cta p { color: var(--clr-text-muted); margin-bottom: var(--space-md); }
.g-cta .btn-row { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

/* Lightbox */
.lb {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(10,12,18,0.97);
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  overscroll-behavior: contain;
}
.lb[hidden] { display: none; }
.lb-figure {
  grid-column: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  padding: 56px 0 24px;
  min-width: 0;
}
.lb-img {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  max-height: calc(100dvh - 140px);
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  touch-action: pan-y;
}
.lb-cap {
  color: #e2e8f0;
  font: 600 1rem/1.4 var(--font-heading);
  margin-top: 0.875rem;
  text-align: center;
  padding: 0 0.5rem;
}
.lb-count { color: rgba(255,255,255,0.6); font-size: 0.875rem; margin-top: 0.25rem; }
.lb-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.5rem;
  justify-self: center;
}
.lb-btn:hover { background: rgba(255,255,255,0.18); }
.lb-close { position: absolute; top: 12px; right: 12px; }
.lb-prev { grid-column: 1; grid-row: 1; }
.lb-next { grid-column: 3; grid-row: 1; }

@media (max-width: 768px) {
  .g-hero { padding: 112px 0 var(--space-md); }
  .g-hero p { font-size: 0.9375rem; }
  .g-filters {                     /* one swipeable row instead of five stacked rows */
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    margin: var(--space-md) calc(-1 * var(--space-md)) 0;
    padding: 0 var(--space-md) 4px;
  }
  .g-filters::-webkit-scrollbar { display: none; }
  .g-filter { flex: 0 0 auto; }
  .g-grid { columns: 2 150px; column-gap: 0.625rem; }
  .g-item { margin-bottom: 0.625rem; border-radius: var(--radius-sm); }
  .g-item figcaption { font-size: 0.75rem; padding: 1.5rem 0.5rem 0.5rem; }
  .lb { grid-template-columns: 1fr; }
  .lb-figure { grid-column: 1; padding: 60px 8px 88px; }
  .lb-img { max-height: calc(100dvh - 200px); }
  .lb-prev, .lb-next { position: absolute; bottom: 20px; }
  .lb-prev { left: calc(50% - 64px); }
  .lb-next { right: calc(50% - 64px); }
}

@media (prefers-reduced-motion: reduce) {
  .g-open img { transition: none; }
  .g-open:hover img { transform: none; }
}