/* ==========================================================================
   GALLERY — /galerie and /galerie/{slug}
   Page-override layer (VISUAL-SYSTEM §11, layer 6): loads after tokens.css and
   site.css and adds nothing to them. Scoped to .page-galerie and
   .page-galerie-item.

   THE GRID IS COLUMNS, NOT TRACKS. CSS multi-column, so every image keeps its
   own proportion and the columns end at different heights — the `stagger`
   pattern of DESIGN.md §5.1, and the reason nothing here is the row of three
   equal cards §5.2 rule 2 forbids. It also means no artwork is cropped to fit
   a track, which §5.4 requires of work built around a focal subject.

   THE LIGHTBOX IS STYLED HERE BUT IS NOT REQUIRED BY ANYTHING. Without
   galerie.js the <dialog> is never inserted and every thumbnail is an ordinary
   link to /galerie/{slug}. Nothing below hides content that JavaScript then
   reveals (CLAUDE.md non-negotiable 8).

   No gold text: --accent-line appears only as the focus ring and a hairline
   (DESIGN.md §2.1). No texture, no brush edge, no torn paper — the UI frames
   the art and does not imitate it (§1, "explicitly prohibited").
   ========================================================================== */

/* ---------- the masonry ---------- */
.page-galerie .gal-heading { margin-bottom: var(--s6); }

.page-galerie .gal-grid { list-style: none; margin: 0; padding: 0;
  columns: 3; column-gap: var(--s6); }
.page-galerie .gal-cell { break-inside: avoid; margin-bottom: var(--s6); }

.page-galerie .gal-link { display: block; position: relative;
  background: var(--canvas-sink); }
.page-galerie .gal-img { display: block; width: 100%; height: auto;
  transition: transform 500ms var(--ease); }
.page-galerie .gal-link > picture { display: block; overflow: hidden; }
/* The single permitted hover: the image scales inside its frame. */
.page-galerie .gal-link:hover .gal-img { transform: scale(1.02); }
/* Focus is visible and is never only the hover (DESIGN.md §8): the ring comes
   from tokens.css, this gives it room and lifts the caption with it. */
.page-galerie .gal-link:focus-visible { outline-offset: 4px; }

/* The caption sits over the foot of the image on a scrim, so it is legible
   against any photograph rather than against a theoretical flat swatch
   (DESIGN.md §2.2). It is present for every visitor, not only on hover — a
   caption that appears on hover does not exist on a touch screen. */
.page-galerie .gal-caption { position: absolute; inset: auto 0 0 0;
  padding: var(--s6) var(--s4) var(--s3); background: var(--scrim-soft);
  color: var(--on-dark); font-size: var(--t-xs); letter-spacing: .02em; }

@media (prefers-reduced-motion: reduce) {
  .page-galerie .gal-img { transition: none; }
  .page-galerie .gal-link:hover .gal-img { transform: none; }
}

/* ---------- the empty state ---------- */
.page-galerie .gal-empty { max-width: 52ch; padding-block: var(--s7); }
.page-galerie .gal-empty p { margin: var(--s4) 0 var(--s5); color: var(--muted);
  line-height: 1.6; }

/* ---------- the enlargement page ---------- */
.page-galerie-item .gal-crumbs { padding-top: var(--s7); }
.page-galerie-item .gal-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s3);
  list-style: none; margin: 0; padding: 0; font-size: var(--t-xs); color: var(--muted); }
.page-galerie-item .gal-crumbs li + li::before { content: "/"; margin-right: var(--s3);
  color: var(--line-strong); }
.page-galerie-item .gal-crumbs a { color: var(--muted); border-bottom: 1px solid transparent; }
.page-galerie-item .gal-crumbs a:hover { color: var(--text); border-bottom-color: var(--line-strong); }
.page-galerie-item .gal-crumbs [aria-current="page"] { color: var(--text); }

.page-galerie-item .gal-full__head { max-width: 40ch; margin-bottom: var(--s6); }
.page-galerie-item .gal-full__head .sk-eyebrow { display: block; margin-bottom: var(--s3); }

.page-galerie-item .gal-full__figure { margin: 0; }
/* Contained, not full-bleed: a study view that runs under the browser chrome
   cannot be studied. The height cap keeps a very tall image on one screen. */
.page-galerie-item .gal-full__img { display: block; width: 100%; height: auto;
  max-height: 78vh; object-fit: contain; background: var(--canvas-sink); }
.page-galerie-item .gal-full__cap { display: block; max-width: 68ch;
  margin-top: var(--s4); font-size: var(--t-sm); color: var(--muted); line-height: 1.6; }

.page-galerie-item .gal-full__actions { display: flex; flex-wrap: wrap; gap: var(--s4);
  margin-top: var(--s6); }

.page-galerie-item .gal-full__paging { display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s5); margin-top: var(--s8); padding-top: var(--s5);
  border-top: 1px solid var(--line); }
.page-galerie-item .gal-step { display: block; min-height: 44px; }
.page-galerie-item .gal-step:last-child { text-align: right; }
.page-galerie-item .gal-step .sk-meta { display: block; margin-bottom: var(--s1); }
.page-galerie-item .gal-step__label { font-size: var(--t-sm); color: var(--text);
  border-bottom: 1px solid var(--line-strong); }
.page-galerie-item .gal-step:hover .gal-step__label { border-bottom-color: var(--ink); }

/* ---------- the lightbox (enhancement) ---------- */
.gal-box { width: min(96vw, 1600px); max-width: none; padding: 0; border: 0;
  background: var(--ink); color: var(--on-dark); }
.gal-box::backdrop { background: rgb(16 24 32 / .88); }
.gal-box__img { display: block; width: 100%; height: auto; max-height: 84vh;
  object-fit: contain; background: var(--ink-soft); }
.gal-box__bar { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); padding: var(--s4) var(--s5); }
.gal-box__cap { font-size: var(--t-sm); color: var(--on-dark-muted); }
.gal-box__close { min-height: 44px; min-width: 44px; padding: 0 var(--s4);
  background: transparent; border: 1px solid rgb(237 233 226 / .5);
  color: var(--on-dark); font: inherit; font-size: var(--t-sm); cursor: pointer; }
.gal-box__close:hover { border-color: var(--on-dark); }
/* The dialog is a dark ground, so the focus ring switches to ivory — bronze
   does not clear 3:1 against --ink (DESIGN.md §8). */
.gal-box :focus-visible { outline: 2px solid var(--on-dark); outline-offset: 3px; }

/* ---------- the mobile contract (DESIGN.md §5.3) ---------- */
@media (max-width: 1100px) {
  .page-galerie .gal-grid { columns: 2; }
}

@media (max-width: 640px) {
  .page-galerie .gal-grid { columns: 1; column-gap: 0; }
  .page-galerie .gal-cell { margin-bottom: var(--s5); }
  .page-galerie-item .gal-full__paging { grid-template-columns: 1fr; }
  .page-galerie-item .gal-step:last-child { text-align: left; }
  .gal-box { width: 100vw; }
}