/* Exhibitions page: Featured Exhibitions (cards with a photo or video) and
   the full list, grouped by year in tables like the Press page (press.css). */

.exh-intro { max-width: 52rem; }

.exh-featured {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4rem 3rem; margin: 2rem 0 4rem;
}
.exh-card { display: flex; flex-direction: column; }
.exh-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #1a1a1a; }
.exh-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exh-card__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Stand-in until a photo is chosen. */
.exh-card__media--todo {
  display: flex; align-items: center; justify-content: center; border: 1px dashed #6b6b6b;
  color: var(--muted); font-family: var(--font-header); text-transform: uppercase; letter-spacing: 0.1em;
}

.exh-card__meta {
  margin: 1.2rem 0 0.3rem !important; color: var(--muted); font-family: var(--font-header);
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; line-height: 1.4rem !important;
}
.page-content .exh-card__venue {
  font-size: 2rem !important; line-height: 2.2rem; margin: 0 0 0.4rem; border: 0; padding: 0;
}
.exh-card__show { font-style: italic; margin: 0 0 0.8rem !important; line-height: 1.6rem !important; }
.exh-card__text { font-size: 1rem; margin: 0 0 0.8rem !important; line-height: 1.8rem !important; }
.exh-card__link { font-size: 1rem; margin: auto 0 0 !important; line-height: 1.6rem !important; }

/* Featured photo: a button that opens the viewer. */
button.exh-card__media--photo { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; }
button.exh-card__media--photo img { transition: transform 0.6s ease; }
button.exh-card__media--photo:hover img, button.exh-card__media--photo:focus-visible img { transform: scale(1.03); }
.exh-card__credit {
  margin: 0.4rem 0 0 !important; font-size: 0.8rem; line-height: 1.2rem !important; color: var(--muted);
}

/* "Photos (n)" button, on cards and in the full list. */
.exh-photos {
  margin-left: 0.6em; padding: 0.1em 0.5em; background: none; color: inherit; cursor: pointer;
  border: 1px solid #6b6b6b; font-family: var(--font-header); text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 0.75em; line-height: 1.6; white-space: nowrap; vertical-align: 0.1em;
}
.exh-photos:hover, .exh-photos:focus-visible { border-color: #fff; }
.exh-card__link .exh-photos { margin-left: 1em; }

/* Photo viewer (exh-gallery.js) */
.exh-viewer {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #050505; color: #fff; overflow: hidden;
}
.exh-viewer::backdrop { background: rgba(0, 0, 0, 0.6); }
html.exh-viewer-open { overflow: hidden; }
.exh-viewer[open] { display: flex; align-items: center; justify-content: center; }
.exh-viewer__figure {
  margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 3.5rem 4.5rem 1.5rem; box-sizing: border-box;
}
.exh-viewer__stage { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.exh-viewer__media { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
/* YouTube player: as large as fits, kept at 16:9. */
.exh-viewer__media--youtube { border: 0; aspect-ratio: 16 / 9; width: min(100%, (100vh - 9rem) * 16 / 9); height: auto; }
.exh-viewer__caption {
  flex: none; margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; justify-content: center;
  font-family: var(--font-header); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; text-align: center;
}
.exh-viewer__count, .exh-viewer__credit { color: var(--muted); }
.exh-viewer__credit { text-transform: none; letter-spacing: 0.02em; font-family: inherit; }
.exh-viewer__close, .exh-viewer__nav {
  position: absolute; background: none; border: 0; color: #fff; cursor: pointer; padding: 0.5rem 1rem;
  font-size: 3rem; line-height: 1; opacity: 0.75; z-index: 1;
}
.exh-viewer__close:hover, .exh-viewer__nav:hover, .exh-viewer__close:focus-visible, .exh-viewer__nav:focus-visible { opacity: 1; }
.exh-viewer__close { top: 0.5rem; right: 0.5rem; font-size: 2.6rem; }
.exh-viewer__nav { top: 50%; transform: translateY(-50%); font-size: 4rem; }
.exh-viewer__nav--prev { left: 0.5rem; }
.exh-viewer__nav--next { right: 0.5rem; }
.exh-viewer__nav[hidden] { display: none; }

/* Full list: venue | exhibition | dates */
.exh-table { width: 100%; }
.exh-table .exh-venue { width: 32%; }
.exh-dates { width: 12rem; text-align: right; color: var(--muted); padding-left: 1rem !important; white-space: nowrap; }

@media (max-width: 1023px) {
  .exh-featured { gap: 3rem 2rem; }
  .page-content .exh-card__venue { font-size: 1.6rem !important; line-height: 1.9rem; }
}
@media (max-width: 767px) {
  .exh-featured { grid-template-columns: 1fr; gap: 3rem; }
  .exh-table { font-size: 1rem; }
  .exh-table .exh-venue { width: 40%; padding-right: 0.8rem !important; }
  .exh-dates { width: 6rem; padding-left: 0.6rem !important; font-size: 0.85rem; white-space: normal; }
  .exh-viewer__figure { padding: 3.5rem 0.5rem 1rem; }
  .exh-viewer__nav { top: auto; bottom: 0.2rem; transform: none; font-size: 3rem; }
  .exh-viewer__caption { margin-bottom: 3rem; font-size: 0.8rem; }
}