/* ==========================================================================
   Thota Vaikuntam — /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 is a lit red wall, so the shared 45% / .45 scrim is not
   enough behind white type. 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.5x cover scale only a slice shows; bias the crop
   to the lit wall-and-frames centre rather than the 70% desktop focus. */
@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: start;
  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(--red); }   /* owner 2026-09-11: exhibition dates in the logo red */
.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 */
.breadcrumb, .exh-breadcrumb { font-size: var(--fs-meta); letter-spacing: var(--track); text-transform: uppercase; color: var(--grey-1); margin-bottom: 30px; }
.exh-breadcrumb a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }   /* the link stands apart from the current-page title beside it */
.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__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); }
}