/* ==========================================================================
   Krishen Khanna — /exhibitions/ and /exhibitions/<id>/
   Builds on main.css tokens only; no new colours.
   ========================================================================== */

/* ------------------------------------------------------------ index hero */
.exh-hero { height: min(78svh, 900px); }
.no-anim .exh-hero { height: 720px; }
/* E1: the installation view has lit walls behind the white type, so the shared 45% / .45
   scrim is not enough. Taller, denser gradient for this hero only. */
.exh-hero::after {
  height: 62%;
  background: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .42) 40%, rgba(0, 0, 0, 0) 100%);
}
/* E2: mobile art direction — at ~2.6x cover scale only a slice of the ~2:1 view shows;
   hold the bronze Bandwalla and the paintings beside it rather than the empty floor. */
@media (max-width: 768px) {
  .exh-hero img { object-position: 58% 50% !important; }
}
.exh-list__eyebrow { max-width: 62ch; margin-bottom: var(--gap-y); }

/* ------------------------------------------------------------ index list */
.exh-list { border-top: 1px solid var(--hairline); }
.exh-row {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--cap-gap) var(--gap-y);
  align-items: center;   /* each poster centred against its text (top-hung posters read unevenly) */
  padding: var(--gap-y) 0;
  border-bottom: 1px solid var(--hairline);
}
.exh-row__thumb { display: block; }
.exh-row__thumb picture { width: 100%; }
.exh-row__thumb img { width: 100%; height: auto; }
.exh-row__placeholder { display: block; aspect-ratio: 3 / 4; background: var(--bg-soft); }
.exh-row__title { font-size: 1.65rem; line-height: 2.4rem; margin: 0 0 12px; }   /* heading → its sub-line */
.exh-row__title a { text-decoration: none; }
.exh-row__meta {
  display: flex; flex-wrap: wrap; gap: 0 14px;
  font-size: var(--fs-meta); line-height: 2.1rem;
  letter-spacing: var(--track); text-transform: uppercase;
  color: var(--grey-1);
  margin: 0 0 16px;   /* = h2 → text */
}
.exh-row__dates, .exh-dates, .exh-meta time { color: var(--seal-text); }   /* dates in the seal red — its text tone on dark (4.8:1) */
.exh-row__blurb { max-width: 62ch; }
.exh-row__actions { margin: 0; }
@media (max-width: 1024px) {
  .exh-row { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--cap-gap) var(--gap-x); }
}
@media (max-width: 640px) {
  .exh-row { grid-template-columns: minmax(0, 1fr); }
  .exh-row__thumb { max-width: 320px; }
  .exh-row--wide .exh-row__thumb { max-width: 100%; }
}

/* ------------------------------------------------------------ detail */
.exh__media .figure__media { background: transparent; }
.exh__media picture { width: 100%; }
.exh__media img { width: 100%; height: auto; }
.exh__media--wide .figure { max-width: 100%; }
.exh-meta { margin: 0 0 30px; border-top: 1px solid var(--hairline); }
.exh-meta__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 20px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.exh-meta dt { font-size: var(--fs-meta); letter-spacing: var(--track); text-transform: uppercase; color: var(--grey-1); line-height: 2.1rem; padding-top: .35em; }
.exh-meta dd { margin: 0; }
.exh__text p { max-width: 62ch; }
.exh__actions { margin: 0; }   /* the last paragraph's own margin is the gap */
.exh__text:has(> .exh__statement:last-child) + .exh__actions { margin-top: var(--para); }   /* a quote has no bottom margin */
.exh__installation { margin-top: var(--gap-y); padding-top: var(--gap-y); border-top: 1px solid var(--hairline); }
@media (max-width: 460px) {
  .exh-meta__row { grid-template-columns: 90px minmax(0, 1fr); }
}

/* ------------------------------------------------------------ installation views (KK: several per show) */
/* the views are paired by shape; a view is full width only when its source can fill it */
.exh__views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-y) var(--gap-x); }
.exh__view--wide { grid-column: 1 / -1; }
/* the photographs of visitors and the opening: a second group, after the empty galleries */
.exh__photos { align-items: start; }
@media (max-width: 768px) { .exh__views { grid-template-columns: minmax(0, 1fr); } }
/* the page's one photo credit, under the last picture, when every picture shares it */
.section .exh-credit { max-width: none; margin: var(--gap-y) 0 0; }
.exh__statement { width: 100%; margin: var(--para) 0 0; font-size: 1.85rem; line-height: 3rem; }
.exh-row__cite { color: var(--grey-1); }
.exh-row__cite-part { white-space: nowrap; }   /* the credit breaks only at its " · " (a 320 px phone) */