/* ==========================================================================
   Gallery page (templates/pages/gallery.html).
   Sticky category filter + one justified mosaic per category: every photo keeps its true proportions, rows share
   one height, nothing is cropped, and the visual order is the DOM order (keyboard + lightbox follow it).
   Motion: only opacity / translate / scale (Motion rule).
   ========================================================================== */
.gallery { padding-bottom: var(--section-y); }

/* ---------------------------------------------------------------- sticky filter bar */
.gallery-bar {
  position: sticky; top: var(--header-h); z-index: var(--z-sticky);
  padding-block: .8rem; background: rgba(251, 248, 242, .96); border-bottom: 1px solid var(--line);
  transition: translate .45s var(--ease-out);
}
/* follows the header when it slides away on scroll-down (full motion only) */
body:has(.site-header.is-hidden) .gallery-bar { translate: 0 calc(-1 * var(--header-h)); }
html:not(.js) .gallery-bar { display: none; }
.gallery-filters {
  display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-block: 2px;
  scroll-padding-inline: var(--gutter);
}
.gallery-filters::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .gallery-filters { justify-content: center; flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
/* phones/tablets: every category is visible at once — the chips wrap onto two or three centred rows (no sideways strip
   with a chip cut in half at the edge); the taller bar then stays in the page instead of sticking under the header */
@media (max-width: 899px) {
  .gallery-bar { position: relative; top: auto; translate: none !important; }
  /* a fixed grid (3 × 2, phones 2 × 3) rather than free wrapping: the number of rows never depends on the font, so
     nothing below moves when the web fonts swap in on a first visit */
  .gallery-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .gallery-filter { justify-content: center; min-width: 0; padding-inline: .7rem .45rem; }
}
/* phones: two per row; every chip is tall enough for a two-line label, so a label that wraps (or stops wrapping when
   the web font arrives) never changes the height of its row */
@media (max-width: 599px) {
  .gallery-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-filter { min-height: 52px; font-size: .9rem; line-height: 1.2; text-align: center; }
}
.gallery-filter { flex: none; min-height: 44px; padding-inline: 1.05rem .55rem; gap: .55rem; font-weight: 500; }
:lang(en) .gallery-filter { padding-inline: 1.05rem .55rem; }
.gallery-filter__n {
  display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.6rem; padding-inline: .45rem; border-radius: var(--r-pill);
  background: var(--stone-100); color: var(--muted); font-size: .78rem; font-weight: 600; font-variant-numeric: lining-nums tabular-nums;
}
.gallery-filter[aria-pressed="true"] .gallery-filter__n { background: rgba(247, 240, 227, .14); color: var(--gold-300); }
@media (hover: hover) { .gallery-filter:not([aria-pressed="true"]):hover { border-color: var(--gold-500); color: var(--ink); } }

/* ---------------------------------------------------------------- groups */
.gallery__groups { display: grid; gap: clamp(3.5rem, 2.4rem + 3.4vw, 6.5rem); padding-top: clamp(2.5rem, 1.9rem + 2.2vw, 4.25rem); }
html.js .gallery__groups { transition: opacity .26s var(--ease-out), translate .6s var(--ease-expo); }
html.js .gallery__groups.is-switching { opacity: 0; }
html.js[data-motion="full"] .gallery__groups.is-switching { translate: 0 16px; transition-duration: .24s, .24s; }

.gallery-group__head { display: flex; align-items: center; gap: .3rem 1rem; flex-wrap: wrap; margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }
.gallery-group__num { font-family: var(--font-latin); font-size: 1.15rem; font-weight: 600; letter-spacing: .08em; color: var(--gold-600); line-height: 1; }
.gallery-group__title { font-size: clamp(1.65rem, 1.3rem + 1.3vw, 2.5rem); line-height: 1.3; }
.gallery-group__rule { flex: 1 1 3rem; min-width: 2rem; height: 1px; background: var(--line-strong); transform-origin: var(--origin-start); }
.gallery-group__count { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }
@media (max-width: 479px) { .gallery-group__rule { display: none; } .gallery-group__count { flex-basis: 100%; } }

/* ---------------------------------------------------------------- justified mosaic
   Rows come from templates/pages/gallery.mjs: inside a row each photo's width is proportional to its aspect ratio
   (flex: aspect 1 0) and its height follows, so every row fills the width exactly at one shared height and no group
   ends with a lonely photo. Phones: a two-column grid of square tiles (+ a full-width lead when the count is odd). */
.gallery-group { container-type: inline-size; }
.gallery-mosaic { --gallery-gap: 8px; display: grid; gap: var(--gallery-gap); margin: 0; padding: 0; }
.gallery-row { display: flex; gap: var(--gallery-gap); }
.gallery-item { position: relative; min-width: 0; flex: var(--a) 1 0; aspect-ratio: var(--a); }
@media (min-width: 700px) { .gallery-mosaic { --gallery-gap: 12px; } }
@media (min-width: 1024px) { .gallery-mosaic { --gallery-gap: 14px; } }
@media (max-width: 699px) {
  .gallery-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-row { display: contents; }
  .gallery-item { aspect-ratio: 1; }
  .gallery-item--lead { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
}
.gallery-item > .gallery-item__frame { position: absolute; inset: 0; height: auto; aspect-ratio: auto; border-radius: var(--r-sm); --curtain: var(--stone-100); }
@media (min-width: 700px) { .gallery-item > .gallery-item__frame { border-radius: var(--r-md); } }
/* small thumbnails on phones: a smaller "enlarge" badge */
@media (max-width: 699px) {
  .gallery-item .frame__zoom { bottom: .4rem; inset-inline-end: .4rem; width: 30px; height: 30px; }
  .gallery-item .frame__zoom .icon { width: 14px; height: 14px; }
}
/* ---------------------------------------------------------------- motion (full mode; calm mode = the base fades) */
html.js[data-motion="full"] .gallery-group__rule { transition-property: opacity, scale; transition-duration: .6s, 1.4s; transition-timing-function: var(--ease-out), var(--ease-expo); }
html.js[data-motion="full"] .gallery-group__rule:not(.is-in) { scale: 0 1; }