/* ==========================================================================
   SHOWCASE — project design gallery (screens + lightbox)
   ========================================================================== */

.showcase-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.showcase-meta span {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .85rem; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  color: #e8f0ff; font-size: .85rem; font-weight: 600;
}

.showcase-facts { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .showcase-facts { grid-template-columns: repeat(4, 1fr); } }
.showcase-fact {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 1rem);
  padding: 1.1rem 1rem; text-align: center; box-shadow: var(--shadow-xs);
}
.showcase-fact b { display: block; font-size: 1.6rem; color: var(--primary); line-height: 1.1; }
.showcase-fact span { font-size: .85rem; color: var(--text-muted); }

/* ---- filter bar ---- */
.showcase-filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

/* ---- grid ---- */
.shot-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 576px) { .shot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .shot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.shot {
  grid-column: span 1;
  display: flex; flex-direction: column; gap: .6rem;
  background: none; border: 0; padding: 0; margin: 0;
  text-align: inherit; color: inherit; cursor: zoom-in; font: inherit;
}
.shot[hidden] { display: none; }
.shot--wide { grid-column: span 2; }

.shot-frame {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: 1rem;
  background: var(--surface-2); box-shadow: var(--shadow-xs);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.shot-frame img { display: block; width: 100%; height: auto; }
.shot:hover .shot-frame,
.shot:focus-visible .shot-frame { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.shot:focus-visible { outline: none; }
.shot:focus-visible .shot-frame { outline: 3px solid var(--accent); outline-offset: 3px; }

.shot-zoom {
  position: absolute; inset-inline-end: .5rem; inset-block-start: .5rem;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border-radius: 50%; background: rgba(14,30,66,.72); color: #fff; font-size: .85rem;
  opacity: 0; transform: scale(.8); transition: .25s ease;
}
.shot:hover .shot-zoom, .shot:focus-visible .shot-zoom { opacity: 1; transform: none; }

.shot-cap { display: flex; align-items: baseline; gap: .45rem; min-width: 0; }
.shot-code {
  flex: 0 0 auto; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  color: var(--primary); background: var(--surface-3);
  padding: .15rem .45rem; border-radius: .4rem;
}
.shot-title { font-size: .88rem; font-weight: 600; color: var(--text); margin: 0; line-height: 1.35; }

/* ---- lightbox ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 1080; display: none;
  background: rgba(8, 16, 34, .94); backdrop-filter: blur(6px);
}
/* minmax(0,…) — otherwise a tall screen's intrinsic height blows the row open. */
.lightbox.is-open { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
body.lightbox-open { overflow: hidden; }

.lightbox-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem; color: #fff;
}
.lightbox-info { min-width: 0; }
.lightbox-title { margin: 0; font-size: 1rem; font-weight: 700; }
.lightbox-sub { margin: 0; font-size: .8rem; color: #a9bbdb; }
.lightbox-close, .lightbox-nav {
  flex: 0 0 auto; width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1); color: #fff; font-size: 1.15rem; cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,.22); transform: scale(1.06); }

.lightbox-stage { position: relative; display: grid; place-items: center; padding: 0 .75rem; min-height: 0; overflow: auto; }
.lightbox-stage img {
  /* Viewport-based, not 100% — a percentage max-height goes indefinite inside the scrolling stage. */
  max-width: min(100%, 1100px); max-height: calc(100vh - 11rem); max-height: calc(100dvh - 11rem);
  width: auto; height: auto;
  object-fit: contain; border-radius: .9rem; box-shadow: 0 24px 60px rgba(0,0,0,.5);
  cursor: zoom-in;
}
/* Zoomed: show the board at full width and let the stage scroll — dense screens stay readable. */
.lightbox.is-zoomed .lightbox-stage { place-items: start center; }
.lightbox.is-zoomed .lightbox-stage img { max-height: none; max-width: min(100%, 720px); cursor: zoom-out; }
.lightbox-foot { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .85rem 1rem 1.25rem; }
.lightbox-count { color: #a9bbdb; font-size: .85rem; font-variant-numeric: tabular-nums; min-width: 5rem; text-align: center; direction: ltr; }

@media (prefers-reduced-motion: reduce) {
  .shot-frame, .shot-zoom, .lightbox-close, .lightbox-nav { transition: none; }
}