/* ==========================================================================
   Krishen Khanna — /murals/ (with exhibitions.css: the hero scrim, meta list, text and statement)
   Builds on main.css tokens only; no new colours.
   ========================================================================== */

/* page top: the title and an index of the murals (.page-index, main.css) */
.mur-top { padding-bottom: 0; }
.mur-top h1 { margin-bottom: 20px; }

/* one section per mural, a hairline between them */
.mural { scroll-margin-top: 100px; }
.mural + .mural .container { border-top: 1px solid var(--hairline); padding-top: var(--section-y); }
.mural__head { margin-bottom: var(--gap-y); }
.mural__head h2 { margin-bottom: var(--gap-y); }
.mural__meta { max-width: 640px; margin: calc(-1 * var(--gap-y) / 2) 0 var(--gap-y); }
/* the text runs across the page: two columns on a wide screen, one on tablets and phones (no empty
   column beside it) */
.section .mural__text p { max-width: none; margin: 0; padding-bottom: var(--para); break-inside: avoid; }   /* outranks main.css `main > .section p` 62ch */
.section .mural__text p:last-child { padding-bottom: 0; }
/* padding, not margin: Safari carries a paragraph's bottom margin over the column break, so the second column would
   start 23 px lower than the first */
@media (min-width: 1024px) { .mural__text { column-count: 2; column-gap: var(--gap-x); } }
.mural__quote { margin: var(--gap-y) 0 0; }
.mural__pub { margin: var(--gap-y) 0 0; }
.mural__pub { font-size: var(--fs-meta); letter-spacing: var(--track); text-transform: uppercase; }
.mural__pub a { display: inline-block; padding: 6px 0; color: var(--grey-1); text-decoration: none; }
.mural__pub a:hover, .mural__pub a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }

/* Chola Migrations: the whole drawing in a sideways scroller, tiles of one image laid edge to edge */
/* the joined drawing is 632 px tall, so the band stays at or under it: sharp at 1x, ~1.75x on retina */
.mural-frieze { --frieze-h: 360px; margin: 0 0 var(--gap-y); }
@media (max-width: 768px) { .mural-frieze { --frieze-h: 240px; } }
.mural-frieze__scroller { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
                          background: var(--bg-raised); scrollbar-width: thin; scrollbar-color: var(--grey-3) transparent; }
.mural-frieze__scroller:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
/* tablets and phones: the strip runs to the screen's edges, so the cut at the right reads as more drawing to come */
@media (max-width: 768px) {
  .mural-frieze__scroller { margin-inline: calc(-1 * var(--gutter)); }
  .mural-frieze__scroller:focus-visible { outline-offset: -2px; }
}
.mural-frieze__strip { display: flex; width: max-content; height: var(--frieze-h); }
.mural-frieze__tile { display: block; flex: none; height: var(--frieze-h); }
.mural-frieze__tile + .mural-frieze__tile { margin-left: -1px; }   /* no hairline of page between tiles at fractional widths */
.mural-frieze__tile img { display: block; height: var(--frieze-h); width: auto; max-width: none; background: transparent !important; }
.mural-frieze__caption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px; }
.mural-frieze__hint { color: var(--grey-2); }
/* ← → (frieze.js): 44 px targets, drawn as quietly as the hint; the outer margins keep the caption line where it was */
.mural-frieze__nav { display: flex; margin: -12px -12px -12px auto; }
.mural-frieze__nav[hidden] { display: none; }
.mural-frieze__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
                     font-size: 1.65rem; line-height: 1; color: var(--grey-1); transition: color .2s; }
.mural-frieze__btn:hover, .mural-frieze__btn:focus-visible { color: var(--ink); }
.mural-frieze__btn[aria-disabled="true"] { color: var(--grey-3); cursor: default; }

/* a multi-panel mural: panels side by side at their true relative widths (flex-grow = width in inches) */
.mural-panels-figure { margin: 0 0 var(--gap-y); }
.mural-panels { display: flex; align-items: flex-end; gap: var(--gap-x); }   /* bottoms level, as hung on one wall */
.mural-panel { flex-basis: 0; min-width: 0; }
.mural-panel__label { margin: var(--cap-gap) 0 0; }
.mural-panels__note { margin-top: 14px; color: var(--grey-2); }
.mural-panel picture { width: 100%; }
.mural-panel img { width: 100%; height: auto; }
@media (max-width: 640px) {
  .mural-panels { flex-wrap: wrap; gap: var(--gap-x); }
  .mural-panel { flex-basis: 40%; }
}

/* views: side by side at one shared height (flex-grow = the photograph's width/height, --ar from murals.html), so
   bottoms and captions line up; one column on phones */
.mural-images { display: flex; gap: var(--gap-x); align-items: flex-start; }
.mural-image { flex: calc(var(--ar) * 100) 1 0; min-width: 0; }
.mural-image picture { width: 100%; }
.mural-image img { width: 100%; height: auto; }
@media (max-width: 768px) { .mural-images { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-y); } }

/* the opening image of a mural: wide, but no wider than its source is sharp (the whole-vault photograph is 1791 px),
   and no taller than the window under the header with its caption (a 1280 × 800 laptop sees it whole) */
.mural-lead { max-width: 1100px; margin: 0 auto var(--gap-y); }   /* centred */
.mural-lead { max-width: min(1100px, calc((100svh - var(--header-h) - 80px) * var(--ar))); }
.mural-lead picture { width: 100%; }
.mural-lead img { width: 100%; height: auto; }
.mural-images { margin-bottom: var(--gap-y); }

/* details in rows of four (murals.html): each picture whole, all four at one height, the row centred and no wider than
   four pictures --row-h tall; each caption centred under its own picture (no staggered bottoms).
   A pair's basis is its inner gap, so every picture in the row gets the same height; flex-grow is ar × 100 because
   grow factors summing to less than 1 (two narrow pictures) would leave part of the space unshared. */
.mural-detail-row { display: flex; justify-content: center; align-items: flex-start; gap: var(--gap-x);
                    max-width: calc(var(--ar) * var(--row-h) + (var(--n) - 1) * var(--gap-x)); margin: 0 auto var(--gap-y); }
.mural-detail-pair { display: flex; align-items: flex-start; gap: var(--gap-x); flex: calc(var(--ar) * 100) 1 calc((var(--n) - 1) * var(--gap-x)); min-width: 0; }
.mural-detail { flex: calc(var(--ar) * 100) 1 0; min-width: 0; }
.mural-detail picture { width: 100%; }
.mural-detail img { width: 100%; height: auto; }
.mural-detail .figcaption { justify-content: center; text-align: center; }
.mural-detail-row:last-child { margin-bottom: 0; }
/* tablets: each pair on its own line, at one height and no taller than --row-h */
@media (max-width: 1024px) {
  .mural-detail-row { display: block; max-width: none; margin: 0; }
  .mural-detail-pair { max-width: calc(var(--ar) * var(--row-h) + (var(--n) - 1) * var(--gap-x)); margin: 0 auto var(--gap-y); }
  .mural-detail-row:last-child .mural-detail-pair:last-child { margin-bottom: 0; }
}
/* phones: one picture per line, whole, no taller than --row-h, centred */
@media (max-width: 460px) {
  .mural-detail-pair { display: block; max-width: none; margin: 0; }
  .mural-detail { margin-bottom: var(--gap-y); }
  .mural-detail-row:last-child .mural-detail-pair:last-child .mural-detail:last-child { margin-bottom: 0; }
  .mural-detail img { width: min(100%, calc(var(--ar) * var(--row-h))); margin-inline: auto; }
}
.section .mural-credit { max-width: none; margin: var(--cap-gap) 0 0; color: var(--grey-2); justify-content: center; text-align: center; }   /* under the centred rows */
.mural-lead + .mural-images { margin-top: 0; }