/* ===========================================================================
   gallery.css — the photo wall and its lightbox. Loaded only by
   templates/cms/gallery.html; nothing else on the site needs it.

   Why this file exists: the gallery used to be
   `repeat(auto-fit, minmax(200px, 1fr))` inside a 335px-wide phone
   container, which resolves to exactly one column. 51 photographs, one per
   row, measured 27,714px — 41.6 phone screens of vertical scrolling, by far
   the longest page on the site. Two columns on a phone and a real masonry
   flow bring the same 51 photographs down to roughly six screens.
   =========================================================================== */

/* ══ The wall ══════════════════════════════════════════════════════════════
   CSS columns, not grid. A photo wall's whole point is that pictures keep
   their own proportions — a grid would need every tile forced to one
   aspect-ratio (cropping portraits, letterboxing panoramas) or leave ragged
   gaps. Columns pack by height and cost nothing at runtime; the trade-off
   is that reading order runs down each column rather than across, which for
   an unordered set of photographs is not information the order was carrying.
   ------------------------------------------------------------------------- */
.wall {
  columns: 2;
  column-gap: var(--sp-3);
}
@media (min-width: 40rem) { .wall { columns: 3; column-gap: var(--sp-4); } }
@media (min-width: 64rem) { .wall { columns: 4; column-gap: var(--sp-4); } }

.wall__item {
  break-inside: avoid;
  margin-block-end: var(--sp-3);
  /* Safari needs the item to be a block formatting context or tall images
     occasionally split across the column break despite break-inside. */
  display: block;
  inline-size: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--r-md);
  overflow: clip;
  position: relative;
  isolation: isolate;
  line-height: 0;
}
@media (min-width: 40rem) { .wall__item { margin-block-end: var(--sp-4); } }

.wall__img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  background: var(--surface-sunken);
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.wall__item:hover .wall__img { transform: scale(1.04); }
.wall__item:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }

/* A hairline that stops the lightest photographs from bleeding into the
   page background — drawn inside, so it can't disturb the column packing. */
.wall__item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(var(--rgb-ink) / 0.08);
  pointer-events: none;
}

/* Reveal, staggered by position rather than by nth-child on a group — the
   wall has 51 children and layout.css's [data-reveal-group] only writes
   delays for the first six. */
.js .wall__item { opacity: 0; transform: translateY(12px) scale(0.98); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js .wall__item.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .wall__item { opacity: 1; transform: none; transition: none; }
  .wall__item:hover .wall__img { transform: none; }
}


/* ══ Lightbox ══════════════════════════════════════════════════════════════ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  visibility: hidden;
  pointer-events: none;
}
.lightbox[data-open="true"] { visibility: visible; pointer-events: auto; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(20 19 17 / 0.92);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.lightbox[data-open="true"] .lightbox__backdrop { opacity: 1; }

.lightbox__figure {
  position: relative;
  margin: 0;
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  justify-items: center;
  max-inline-size: min(100vw, 78rem);
  opacity: 0;
  transform: scale(0.97);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.lightbox[data-open="true"] .lightbox__figure { opacity: 1; transform: none; }

.lightbox__img {
  max-inline-size: 100%;
  /* Room for the caption and the controls above/below on a short screen. */
  max-block-size: calc(100svh - 9rem);
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: var(--sh-xl);
}
.lightbox__caption {
  color: rgb(255 255 255 / 0.82);
  font-size: var(--fs-sm);
  text-align: center;
  max-inline-size: 46rem;
}
.lightbox__count { color: rgb(255 255 255 / 0.55); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* Controls: 48px hit areas, kept clear of the notch and the gesture bar. */
.lightbox__btn {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border: 0;
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lightbox__btn:hover { background: rgb(255 255 255 / 0.24); }
.lightbox__btn:active { transform: scale(0.94); }
.lightbox__btn:focus-visible { outline: 3px solid var(--accent-400); outline-offset: 2px; }

.lightbox__close {
  inset-block-start: max(var(--sp-4), env(safe-area-inset-top));
  inset-inline-end: var(--sp-4);
}
/* Logical, not physical. CSS multi-column flows right-to-left under
   dir="rtl" — measured: on the Persian page the first photograph sits in the
   rightmost column — so the wall's own visual order flips with the text
   direction, and "next" has to flip with it. The chevrons are mirrored to
   match, below. */
.lightbox__prev { inset-block-start: 50%; inset-inline-start: var(--sp-3); transform: translateY(-50%); }
.lightbox__next { inset-block-start: 50%; inset-inline-end: var(--sp-3); transform: translateY(-50%); }
[dir="rtl"] .lightbox__prev svg,
[dir="rtl"] .lightbox__next svg { transform: scaleX(-1); }
.lightbox__prev:active, .lightbox__next:active { transform: translateY(-50%) scale(0.94); }

@media (max-width: 40rem) {
  /* On a phone there is no room beside the picture; the arrows move under
     it, where a thumb is anyway. */
  .lightbox__prev, .lightbox__next {
    inset-block-start: auto;
    inset-block-end: max(var(--sp-4), env(safe-area-inset-bottom));
    transform: none;
  }
  .lightbox__prev { inset-inline-start: calc(50% - 4.25rem); }
  .lightbox__next { inset-inline-end: calc(50% - 4.25rem); }
  .lightbox__prev:active, .lightbox__next:active { transform: scale(0.94); }
  .lightbox__figure { padding-block-end: 5.5rem; }
  .lightbox__img { max-block-size: calc(100svh - 14rem); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox__backdrop, .lightbox__figure { transition: none; }
}