/* ==========================================================================
   Photography Exhibition gallery — dark stage slideshow
   --------------------------------------------------------------------------
   A projection-room look: photographs sit on a deep navy stage, full frame,
   never cropped (object-fit: contain), with the photographer credited on the
   picture itself and a film-strip of thumbnails underneath.
   ========================================================================== */

/* ---------- Stage ---------- */
.exhibit-stage {
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(255, 199, 44, 0.07), transparent 60%),
    linear-gradient(165deg, #0a1428 0%, var(--navy-dark) 55%, #081125 100%);
  padding: 54px 0 40px;
}

.exhibit-head {
  width: min(1040px, 92%);
  margin: 0 auto 26px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.exhibit-head .eyebrow { color: var(--gold); }

.exhibit-head h2 {
  color: #fff;
  font-size: clamp(22px, 3vw, 30px);
  margin-top: 6px;
}

.exhibit-head p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14.5px;
  max-width: 460px;
}

.exhibit-count {
  font-family: var(--font-head);
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  letter-spacing: 0.18em;
  white-space: nowrap;
}

.exhibit-count b { color: var(--gold); font-size: 22px; letter-spacing: 0; }

/* ---------- Frame ---------- */
.exhibit-wrap {
  position: relative;
  width: min(1040px, 92%);
  margin-inline: auto;
}

.exhibit-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #05090f;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 34px 70px rgba(0, 0, 0, 0.6);
}

.exhibit-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease;
}

.exhibit-slide.active { opacity: 1; visibility: visible; }

.exhibit-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* the whole frame is shown — never cropped */
  background: #05090f;
}

/* Credit laid over the picture, bottom right, as in the sketch */
.exhibit-credit {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 78%;
  padding: 44px 22px 16px;
  text-align: right;
  background: linear-gradient(to top left, rgba(0, 0, 0, 0.78), transparent 70%);
  pointer-events: none;
}

.exhibit-credit .who {
  display: block;
  font-family: var(--font-head);
  color: #fff;
  font-weight: 700;
  font-size: clamp(15px, 2vw, 21px);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.3;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.exhibit-credit .what {
  display: block;
  color: var(--gold);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ---------- Arrows ---------- */
.exhibit-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--navy);
  font-size: 26px;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
  z-index: 3;
}

.exhibit-arrow:hover {
  background: var(--gold);
  transform: translateY(-50%) scale(1.07);
}

.exhibit-arrow:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.exhibit-prev { left: -70px; }
.exhibit-next { right: -70px; }

/* ---------- Under-frame tools ---------- */
.exhibit-tools {
  width: min(1040px, 92%);
  margin: 16px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.exhibit-tools button,
.exhibit-tools a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}

.exhibit-tools button:hover,
.exhibit-tools a:hover { color: var(--gold); }

.exhibit-dots { display: flex; gap: 7px; flex-wrap: wrap; }

.exhibit-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}

.exhibit-dots button.active { background: var(--gold); transform: scale(1.25); }

/* ---------- Film strip ---------- */
.exhibit-strip {
  width: min(1040px, 92%);
  margin: 22px auto 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.exhibit-strip-nav {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.85);
  font-size: 20px;
  transition: all 0.25s ease;
}

.exhibit-strip-nav:hover { border-color: var(--gold); color: var(--gold); }

.exhibit-thumbs {
  flex: 1 1 auto;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 2px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.exhibit-thumbs::-webkit-scrollbar { height: 6px; }
.exhibit-thumbs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 6px;
}

.exhibit-thumb {
  flex: 0 0 auto;
  width: 104px;
  height: 70px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 3px;
  overflow: hidden;
  opacity: 0.5;
  filter: grayscale(0.4);
  transition: all 0.25s ease;
  background: #05090f;
}

.exhibit-thumb img { width: 100%; height: 100%; object-fit: cover; }

.exhibit-thumb:hover { opacity: 0.9; filter: none; }

.exhibit-thumb.active {
  opacity: 1;
  filter: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 199, 44, 0.25);
}

/* ---------- Thumbnail grid (all photographs) ---------- */
.exhibit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.exhibit-cell {
  position: relative;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bg-soft-2);
  cursor: pointer;
}

.exhibit-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.exhibit-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 17, 37, 0.9), transparent 55%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.exhibit-cell:hover img { transform: scale(1.07); }
.exhibit-cell:hover::after { opacity: 1; }

.exhibit-cell .tag {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  color: #fff;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.3s ease;
}

.exhibit-cell:hover .tag,
.exhibit-cell:focus-visible .tag { opacity: 1; transform: none; }

/* The picture currently on stage is ringed in gold */
.exhibit-cell.active { box-shadow: 0 0 0 3px var(--gold); }

/* ---------- Other years ---------- */
.exhibit-years {
  padding: 0 0 70px;
}

.exhibit-years .section-intro { margin-bottom: 26px; }

.exhibit-year-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.exhibit-year-current {
  display: inline-block;
  padding: 9px 22px;
  border: 1.5px solid var(--navy);
  border-radius: 6px;
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
}

/* ---------- Empty state ---------- */
.exhibit-empty {
  width: min(1040px, 92%);
  margin: 0 auto;
  padding: 60px 24px;
  text-align: center;
  border: 1.5px dashed rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.65);
}

.exhibit-empty h3 { color: #fff; margin-bottom: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .exhibit-prev { left: 12px; }
  .exhibit-next { right: 12px; }
}

@media (max-width: 900px) {
  .exhibit-grid { grid-template-columns: repeat(3, 1fr); }
  /* WHY: one dot per photograph — 403 of them at 9px each.  On a touch
     screen they are impossible to hit, wrap into dozens of rows and push
     the stage down.  The film strip and the arrows below already jump to
     any photograph, so the dots go away instead of being made "bigger". */
  .exhibit-dots { display: none; }
}

@media (max-width: 640px) {
  .exhibit-stage { padding: 36px 0 30px; }
  .exhibit-frame { aspect-ratio: 4 / 3; }
  /* 42px was already close — 46px puts a full fingertip on the control. */
  .exhibit-arrow { width: 46px; height: 46px; font-size: 22px; }
  .exhibit-thumb { width: 82px; height: 56px; }
  .exhibit-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .exhibit-credit { max-width: 92%; padding: 34px 14px 12px; }
  .exhibit-tools { flex-direction: column; align-items: stretch; gap: 10px; }
  .exhibit-tools > * { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .exhibit-slide, .exhibit-cell img, .exhibit-cell .tag { transition: none; }
}