/* Nomad Marketplace photo gallery — full-width carousel + filmstrip + fullscreen viewer.
 * Self-contained, no external deps, no fonts, no CDN.
 *
 * This file runs inside SOMEONE ELSE'S theme, so it is written defensively:
 *   - every rule is prefixed with `.nomad-gallery` (specificity 0,2,0) because theme content rules
 *     look like `.prose ul` / `.prose img` (0,1,1) and would otherwise win — that is exactly how the
 *     thumbnails once rendered as an indented bullet list with 2em margins between the photos;
 *   - the few properties a theme can break outright (list markers, image margins/borders/shadows)
 *     are additionally marked !important, since load order between a theme and a plugin enqueued
 *     from a shortcode is not something the plugin gets to decide.
 */

.nomad-gallery {
  --nomad-gap: clamp(6px, 0.6vw, 12px);
  --nomad-ink: #eef1f5;
  --nomad-muted: #9aa4b2;
  --nomad-stage: #0a0c10;
  --nomad-surface: #14171d;
  --nomad-accent: #7fb0ff;
  /* Filmstrip sizing. Thumbnails grow to share the whole width and stop when they would stop being
     thumbnails; they shrink to the legibility floor and then the strip scrolls. Both bounds scale
     with the viewport, so the same gallery is right on a phone and on a 5K display. */
  --nomad-thumb-min: clamp(58px, 6vw, 96px);
  --nomad-thumb-max: clamp(130px, 14vw, 360px);
  margin: clamp(22px, 4vh, 52px) 0;
  /* The carousel is one dark surface from the stage down through the filmstrip. It is not styling
     for its own sake: the caption sits on the plugin's background, not the theme's, so it stays
     readable whether the surrounding site is white, cream or near-black — and a photograph shown
     against neutral dark is the one presentation that never argues with the picture. */
  padding-bottom: clamp(10px, 1.2vw, 18px);
  background: var(--nomad-surface);
  color: var(--nomad-ink);
  font-size: 15px;
  line-height: 1.5;
}

/* === Escape the theme's text column ==========================================================
 * A photograph is not a paragraph. Themes cap their content at a reading measure (~756px on
 * znosnie.pl), which on a 5K screen is ~15% of it. `--nomad-bleed-*` are set precisely by
 * gallery.js (exact offset, viewport width without the scrollbar); the calc() fallbacks keep the
 * full-width layout working before the script runs and if it never does. */
.nomad-gallery.nomad-gallery--bleed {
  width: var(--nomad-bleed-width, 100vw);
  max-width: var(--nomad-bleed-width, 100vw);
  margin-left: var(--nomad-bleed-offset, calc(50% - 50vw));
  margin-right: var(--nomad-bleed-offset, calc(50% - 50vw));
}

/* === Theme defence ========================================================================== */
.nomad-gallery .nomad-gallery__stage,
.nomad-gallery .nomad-gallery__strip,
.nomad-gallery .nomad-gallery__meta {
  list-style: none !important;
  padding: 0;
  margin: 0;
}

.nomad-gallery .nomad-gallery__thumb::marker,
.nomad-gallery .nomad-gallery__strip::marker {
  content: "" !important;
}

.nomad-gallery .nomad-gallery__photo,
.nomad-gallery .nomad-gallery__thumb img {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  max-width: 100%;
}

.nomad-gallery .nomad-gallery__nav,
.nomad-gallery .nomad-gallery__expand,
.nomad-gallery .nomad-gallery__thumb {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  cursor: pointer;
}

/* === The stage: one photograph, as large as the screen allows ================================
 * Fixed height so switching between a portrait and a landscape frame never shifts the page, and
 * `contain` so a photograph is never cropped to fill a box the author did not compose for. */
.nomad-gallery .nomad-gallery__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(320px, 78vh, 1500px);
  overflow: hidden;
  background: var(--nomad-stage);
  touch-action: pan-y;
}

/* Fills the stage in whichever dimension runs out first, and `contain` means the frame the author
 * composed is never cropped to do it. The upscale ceiling (`--nomad-photo-*`, written per photo by
 * gallery.js from the source dimensions) keeps a small file from being blown across a 5K screen. */
.nomad-gallery .nomad-gallery__photo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: var(--nomad-photo-max-width, 100%);
  max-height: var(--nomad-photo-max-height, 100%);
  object-fit: contain;
  cursor: zoom-in;
  transition: opacity 0.18s ease;
}

.nomad-gallery.is-swapping .nomad-gallery__photo {
  opacity: 0.35;
}

.nomad-gallery .nomad-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 4vw, 64px);
  height: clamp(44px, 4vw, 64px);
  border: 0;
  border-radius: 50%;
  background: rgba(12, 14, 18, 0.5);
  color: #fff;
  opacity: 0.75;
  transition: opacity 0.18s ease, background 0.18s ease;
}

.nomad-gallery .nomad-gallery__nav:hover,
.nomad-gallery .nomad-gallery__nav:focus-visible {
  opacity: 1;
  background: rgba(12, 14, 18, 0.78);
}

.nomad-gallery .nomad-gallery__nav--prev {
  left: clamp(8px, 1.4vw, 26px);
}

.nomad-gallery .nomad-gallery__nav--next {
  right: clamp(8px, 1.4vw, 26px);
}

.nomad-gallery .nomad-gallery__counter {
  position: absolute;
  left: clamp(10px, 1.6vw, 28px);
  bottom: clamp(10px, 1.6vw, 24px);
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(12, 14, 18, 0.55);
  color: #fff;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.nomad-gallery .nomad-gallery__expand {
  position: absolute;
  right: clamp(10px, 1.6vw, 28px);
  bottom: clamp(10px, 1.6vw, 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 14, 18, 0.55);
  color: #fff;
  opacity: 0.8;
}

.nomad-gallery .nomad-gallery__expand:hover,
.nomad-gallery .nomad-gallery__expand:focus-visible {
  opacity: 1;
  background: rgba(12, 14, 18, 0.8);
}

/* Discreet corner mark — never over the middle of a photograph. */
.nomad-gallery .nomad-gallery__watermark {
  position: absolute;
  right: clamp(58px, 5vw, 80px);
  bottom: clamp(16px, 1.8vw, 30px);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* === Caption / EXIF / book link ==============================================================
 * Text keeps a reading measure even when the stage is 5K wide. */
.nomad-gallery .nomad-gallery__meta {
  max-width: 72ch;
  margin: 0 auto;
  padding: clamp(12px, 1.6vw, 20px) 16px 0;
  text-align: center;
}

.nomad-gallery .nomad-gallery__caption {
  margin: 0;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.5;
  color: inherit;
}

.nomad-gallery .nomad-gallery__exif {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--nomad-muted);
  font-variant-numeric: tabular-nums;
}

.nomad-gallery .nomad-gallery__book {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
  font-size: 13px;
  color: inherit;
  text-decoration: none;
}

.nomad-gallery .nomad-gallery__book-label {
  color: var(--nomad-muted);
}

.nomad-gallery .nomad-gallery__book-title {
  font-weight: 700;
}

.nomad-gallery .nomad-gallery__book-cta {
  padding-bottom: 1px;
  border-bottom: 1px solid currentColor;
  color: var(--nomad-accent);
}

.nomad-gallery .nomad-gallery__book:hover .nomad-gallery__book-cta {
  color: #fff;
}

.nomad-gallery [hidden] {
  display: none !important;
}

/* === Filmstrip ===============================================================================
 * Flex does the adaptive maths on its own: every thumbnail grows to an equal share of the row
 * (capped at --nomad-thumb-max, so eight photos do not become eight billboards) and shrinks to
 * --nomad-thumb-min, after which the strip scrolls instead of turning the photos into confetti. */
.nomad-gallery .nomad-gallery__strip {
  display: flex;
  gap: var(--nomad-gap);
  padding: clamp(10px, 1.2vw, 18px) clamp(10px, 1.6vw, 28px) 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 150, 165, 0.5) transparent;
  justify-content: center;
  /* `safe` keeps the first thumbnails reachable once the row overflows; centring alone would push
     them past the scroll origin. Ignored by browsers that do not know it, which then simply centre. */
  justify-content: safe center;
}

/* === UKŁAD SZEROKIEGO EKRANU: zdjęcie po lewej, panel miniatur po prawej =====================
 *
 * Poziomy pasek pod zdjęciem marnował całą wysokość ekranu: zdjęcie musiało zrobić mu miejsce, a
 * on i tak pokazywał kilka kadrów naraz i wymagał przewijania w bok — ruchu, którego myszą się nie
 * robi. Na szerokim ekranie brakuje SZEROKOŚCI po bokach zdjęcia (fotografia jest zwykle wyższa niż
 * kolumna, którą zostawia jej ekran), więc miniatury idą tam, gdzie miejsce naprawdę jest: w pionowy
 * panel po prawej, trzy w rzędzie, przewijany od góry do dołu. Zdjęcie dostaje wtedy prawie całą
 * wysokość okna, a przegląd całej galerii stoi obok niego, nie zamiast niego.
 *
 * Wąski ekran zostaje przy pasku pod zdjęciem — na telefonie panel obok fotografii zabrałby jej
 * połowę szerokości i przestałby być przeglądem, a stałby się przeszkodą. */
@media (min-width: 1000px) {
  .nomad-gallery {
    display: grid;
    /* Panel jest szeroki dokładnie na trzy czytelne miniatury i ani piksela więcej — to zdjęcie jest
       treścią strony, panel tylko mówi, co jeszcze czeka. */
    grid-template-columns: minmax(0, 1fr) clamp(216px, 24vw, 400px);
    grid-template-areas:
      "stage rail"
      "meta rail";
    align-items: start;
    padding-bottom: 0;
  }

  .nomad-gallery .nomad-gallery__stage {
    grid-area: stage;
    /* Prawie pełna wysokość okna: fotografia ma wygrać z każdą inną rzeczą na ekranie. */
    height: clamp(420px, 86vh, 1600px);
  }

  .nomad-gallery .nomad-gallery__meta {
    grid-area: meta;
  }

  .nomad-gallery .nomad-gallery__strip {
    grid-area: rail;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: min-content;
    gap: var(--nomad-gap);
    /* Panel kończy się tam, gdzie zdjęcie — dalej przewija się sam, zamiast rozciągać stronę. */
    height: clamp(420px, 86vh, 1600px);
    padding: var(--nomad-gap);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    justify-content: stretch;
  }

  /* W panelu miniatura jest kwadratem siatki, a nie kadrem o własnych proporcjach: rząd, w którym
     każdy kafelek ma inną szerokość, przestaje być czytelnym przeglądem. */
  .nomad-gallery .nomad-gallery__thumb {
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    flex: none;
  }

  .nomad-gallery .nomad-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.nomad-gallery .nomad-gallery__strip::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.nomad-gallery .nomad-gallery__strip::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(140, 150, 165, 0.45);
}

.nomad-gallery .nomad-gallery__thumb {
  position: relative;
  flex: 1 1 var(--nomad-thumb-min);
  min-width: var(--nomad-thumb-min);
  max-width: var(--nomad-thumb-max);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
  background: #10141a;
  opacity: 0.55;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.nomad-gallery .nomad-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.nomad-gallery .nomad-gallery__thumb:hover {
  opacity: 0.85;
}

.nomad-gallery .nomad-gallery__thumb[aria-current="true"] {
  opacity: 1;
  outline: 2px solid var(--nomad-accent);
  outline-offset: -2px;
}

.nomad-gallery__thumb:focus-visible {
  outline: 3px solid #4c8dff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .nomad-gallery .nomad-gallery__photo,
  .nomad-gallery .nomad-gallery__thumb,
  .nomad-gallery .nomad-gallery__nav {
    transition: none;
  }
}

@media (max-width: 600px) {
  .nomad-gallery {
    --nomad-thumb-min: 62px;
  }

  .nomad-gallery .nomad-gallery__stage {
    height: clamp(260px, 56vh, 620px);
  }

  .nomad-gallery .nomad-gallery__nav {
    width: 40px;
    height: 40px;
  }
}

/* === Fullscreen viewer (created by gallery.js, appended to <body>) ============================
 * Secondary now: the page already shows the carousel. This is "show me this one on the whole
 * screen", opened from the stage or a thumbnail on the book landing page. */
.nomad-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  background: rgba(8, 10, 14, 0.96);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* DRUGI BEZPIECZNIK, NIEZALEŻNY OD SKRYPTU. Okno bez klasy `is-open` jest w drodze do zamknięcia albo
   już zamknięte — i nie ma prawa łapać kliknięć, cokolwiek stanie się z JavaScriptem. Wcześniej
   wystarczyło, że `transitionend` nie przyszedł, a przezroczysty prostokąt na cały ekran blokował
   CAŁĄ stronę autora. Jeden warunek w CSS sprawia, że ta klasa awarii nie może wrócić. */
.nomad-lightbox:not(.is-open) {
  pointer-events: none;
}

.nomad-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.nomad-lightbox__stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 3vh 6vw;
}

.nomad-lightbox__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Discreet watermark pinned to the bottom-right of the viewing stage. */
.nomad-lightbox__watermark {
  position: absolute;
  right: 24px;
  bottom: 16px;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.nomad-lightbox__watermark[hidden] {
  display: none;
}

.nomad-lightbox__caption {
  flex: 0 0 auto;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  color: #e9edf3;
  text-align: center;
  background: rgba(0, 0, 0, 0.35);
}

.nomad-lightbox__text {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.4;
}

.nomad-lightbox__exif {
  margin: 0;
  font-size: 13px;
  color: #9aa4b2;
  font-variant-numeric: tabular-nums;
}

.nomad-lightbox__book {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: #cfe0ff;
  text-decoration: none;
  border-bottom: 1px solid rgba(207, 224, 255, 0.4);
}

.nomad-lightbox__book:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* [hidden] must win over the display rules above when a photo has no book / no text. */
.nomad-lightbox__book[hidden],
.nomad-lightbox__text[hidden],
.nomad-lightbox__exif[hidden] {
  display: none;
}

.nomad-lightbox__book-label {
  opacity: 0.75;
  margin-right: 4px;
}

.nomad-lightbox__nav,
.nomad-lightbox__close {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nomad-lightbox__nav:hover,
.nomad-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.24);
}

.nomad-lightbox__nav--prev {
  left: 16px;
}

.nomad-lightbox__nav--next {
  right: 16px;
}

.nomad-lightbox__nav[hidden] {
  display: none;
}

.nomad-lightbox__close {
  top: 16px;
  right: 16px;
  transform: none;
  width: 44px;
  height: 44px;
  font-size: 22px;
}

@media (max-width: 600px) {
  .nomad-lightbox__nav {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .nomad-lightbox__stage {
    padding: 2vh 2vw;
  }
}

/* === WSTĘP KURATORSKI ==========================================================================
 * Tekst nad zdjęciami mówi czytelnikowi, na co patrzy — i to jedyna proza, jaką galeria niesie.
 * Stoi w mierze czytelniczej (nie na całą szerokość 5K, bo wiersz na pół ekranu jest nie do czytania)
 * i na tej samej ciemnej powierzchni co reszta galerii, żeby nie kłócił się z motywem strony. */
.nomad-gallery .nomad-gallery__intro {
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(18px, 2.4vw, 34px) clamp(16px, 2vw, 28px) clamp(12px, 1.6vw, 22px);
  color: var(--nomad-ink);
}

.nomad-gallery .nomad-gallery__intro-title {
  margin: 0 0 10px;
  color: var(--nomad-ink);
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.25;
}

.nomad-gallery .nomad-gallery__intro p {
  margin: 0 0 12px;
  color: var(--nomad-ink);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.62;
}

.nomad-gallery .nomad-gallery__intro p:last-child {
  margin-bottom: 0;
}

/* Na szerokim ekranie wstęp należy do KOLUMNY ZE ZDJĘCIEM, nie do panelu miniatur — inaczej
   rozpychałby galerię w pionie i odsuwał fotografię od góry ekranu. */
@media (min-width: 1000px) {
  .nomad-gallery {
    grid-template-areas:
      "intro rail"
      "stage rail"
      "meta rail";
  }

  .nomad-gallery .nomad-gallery__intro {
    grid-area: intro;
    margin: 0;
    max-width: 76ch;
  }

  .nomad-gallery .nomad-gallery__strip {
    /* Panel sięga teraz od wstępu w dół, więc jego wysokość liczy się z całej kolumny. */
    height: auto;
    max-height: calc(clamp(420px, 86vh, 1600px) + 8vh);
  }
}

/* Autorstwo pod wstępem: nazwisko jest informacją, biogram kontekstem. Przy składance kilku osób to
   jedyne miejsce, w którym czytelnik dowiaduje się, czyją pracę ogląda. */
.nomad-gallery .nomad-gallery__authors {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(154, 164, 178, 0.28);
}

.nomad-gallery .nomad-gallery__authors-label {
  margin: 0 0 8px;
  color: var(--nomad-muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nomad-gallery .nomad-gallery__author + .nomad-gallery__author {
  margin-top: 10px;
}

.nomad-gallery .nomad-gallery__author-name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.nomad-gallery .nomad-gallery__author-bio {
  margin: 3px 0 0;
  color: var(--nomad-muted);
  font-size: 13px;
  line-height: 1.55;
}

/* === UKŁAD TRZECH KOLUMN: tekst po lewej, zdjęcie w środku, miniatury po prawej ==============
 *
 * Uzgodnione 2026-08-19. Wstęp kuratorski stojący NAD zdjęciem spychał fotografię w dół ekranu —
 * czytelnik dostawał najpierw akapit, a dopiero po nim to, po co przyszedł. Tekst idzie więc w bok:
 * na szerokim ekranie jest miejsce obok kadru, a nad nim nie ma. Czyta się od lewej do prawej —
 * najpierw po co patrzeć, potem sam kadr, na końcu co jeszcze czeka w galerii.
 *
 * Trzy warunki, wszystkie potrzebne:
 *   - `--has-intro`: bez wstępu kolumna tekstu byłaby pustym pasem obok zdjęcia (klasę stawia
 *     renderer, więc decyduje treść galerii, a nie zgadywanie w CSS);
 *   - `--bleed`: układ potrzebuje całego ekranu. Galeria świadomie zostawiona w kolumnie motywu
 *     (`width="column"`, ~756 px) po podziale na trzy zostawiłaby fotografii pasek;
 *   - 1200 px: poniżej tej szerokości trzecia kolumna odbiera zdjęciu więcej, niż daje.
 *
 * Podpis bieżącego kadru schodzi do stopki kolumny tekstu: cała proza galerii stoi w jednym pasie,
 * a zdjęcie nie ma już nad ani pod sobą niczego, co zabierałoby mu wysokość. */
@media (min-width: 1200px) {
  .nomad-gallery--bleed.nomad-gallery--has-intro {
    /* WYSOKOŚĆ GALERII WYZNACZA ZDJĘCIE, NIE TEKST. Bez tego wiersz `1fr` rósłby do długości wstępu
       (kurator pisze akapitami), galeria stawałaby się wyższa od fotografii i pod zdjęciem oraz pod
       panelem miniatur zostawałby ciemny pas. Jawna wysokość daje siatce definitywne miejsce do
       podziału: podpis bierze tyle, ile potrzebuje, a wstęp dostaje resztę i przewija się w sobie. */
    box-sizing: border-box;
    height: clamp(420px, 86vh, 1600px);
    grid-template-columns:
      clamp(260px, 22vw, 420px)
      minmax(0, 1fr)
      clamp(216px, 24vw, 400px);
    /* Podpis stoi przy DOLNEJ krawędzi zdjęcia i zawsze w tym samym miejscu — czytelnik przełącza
       kadry i nie musi go za każdym razem szukać. Wstęp bierze wszystko powyżej. */
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "intro stage rail"
      "meta  stage rail";
  }

  /* Kolumna tekstu kończy się tam, gdzie zdjęcie — dłuższy wstęp przewija się w swojej kolumnie,
     zamiast rozciągać całą galerię i zostawiać obok fotografii pustkę. */
  .nomad-gallery--bleed.nomad-gallery--has-intro .nomad-gallery__intro {
    box-sizing: border-box;
    align-self: stretch;
    min-height: 0;
    max-width: none;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(140, 150, 165, 0.5) transparent;
  }

  .nomad-gallery--bleed.nomad-gallery--has-intro .nomad-gallery__meta {
    max-width: none;
    /* Margines zamiast paddingu, żeby kreska oddzielająca podpis od wstępu miała ten sam wcięty
       początek co tekst nad nią. */
    margin: 0 clamp(16px, 2vw, 28px);
    padding: clamp(10px, 1.2vw, 16px) 0 clamp(14px, 1.8vw, 24px);
    border-top: 1px solid rgba(154, 164, 178, 0.28);
    text-align: left;
  }

  .nomad-gallery--bleed.nomad-gallery--has-intro .nomad-gallery__book {
    justify-content: flex-start;
  }

  /* Panel miniatur stoi teraz obok zdjęcia na całej jego wysokości, a nie od wstępu w dół.
     `border-box`, bo inaczej własny padding panelu dokłada się do wysokości i panel wystaje spod
     galerii o te kilkanaście pikseli. */
  .nomad-gallery--bleed.nomad-gallery--has-intro .nomad-gallery__strip {
    box-sizing: border-box;
    height: clamp(420px, 86vh, 1600px);
    max-height: none;
  }
}