/* Hallmark · genre: editorial · macrostructure: Catalogue
 * theme: studied-DNA (source: Kopia MASSMEDICA OFERTA PRODUKTOWA ROBIN LAFAYSSE.pdf)
 *   paper oklch(97.6% 0.005 61) · accent oklch(52% 0.075 61) · copper oklch(73.2% 0.06 61)
 *   axes: paper-band light · display-style high-contrast-serif · accent-hue warm-copper
 *   type: Cormorant Garamond (display) + Geist (body) — dwie rodziny, bez outliera
 * hero: H2 Split diptych (ratio=6/5, prawa=zdjecie, divider=hairline)
 * section head: S3 Sticky pinned · features: F6 Product card grid (density=auto-fill 26rem,
 *   ratio=4/3 landscape, micro-action=none) + F3 Tabular spec sheet (cols=2, rules=every row)
 * cta: C3 Typographic link (underline=solid, hover=thicken, arrow=none)
 * nav: N6 Newspaper masthead (issue-line=above wordmark, wordmark=2xl, rule=double)
 * footer: Ft6 Letter close (signoff=roman, postscript=yes, width=60ch)
 * enrichment: none — zdjecia i packshoty pochodza z materialow Massmedica
 * motion: cover-rise (staggered) + media-hover-scale + link-thicken (3/3)
 * pre-emit critique: P5 H4 E4 S5 R5 V4
 *
 * slop test 58/58 · contrast: pass (40–41, 29 par zmierzonych tools/check-contrast.py)
 * nav: N6 · footer: Ft6 · slop: pass (42–45) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (49) · icons: pass (30)
 * mobile: pass (34, 49, 50–57 — zmierzone na 320/375/414/768/1024/1920)
 *
 * Dwa udokumentowane odstepstwa, oba na --color-pack:
 *  · bramka 7 (zakaz czystej bieli jako koloru bazowego)
 *  · bramka 22 (zakaz neutralnych o zerowej chrominancji)
 * Podkladka packshotu musi byc dokladnie tym bialym, na ktorym sfotografowano
 * opakowania (255/255/255, bez kanalu alfa), inaczej wokol kazdego zdjecia
 * pojawia sie ramka albo falszuje sie kolor produktu. Nie nosi tekstu.
 * Trzecie: theme-color w <meta> musi byc literalnym hexem — var() tam nie dziala.
 */

/* ── Reset ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

/* [hidden] musi wygrywac z autorskim display — pol strony ma display: grid */
[hidden] { display: none !important; }

html {
  overflow-x: clip;              /* clip, nie hidden — nie zabija position: sticky */
  -webkit-text-size-adjust: 100%;
}
body { overflow-x: clip; }
/* Bez scroll-behavior: smooth — katalog ma ~18 tys. px, animowany przejazd
   do ostatniej kategorii trwalby sekundy. Skok jest natychmiastowy. */

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  text-underline-offset: 0.18em;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 400;
  font-style: normal;            /* naglowki nigdy kursywa */
  overflow-wrap: anywhere;
  min-width: 0;
}
p, dl, dd, dt, ul, ol, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }

.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--color-muted); }

:where(a, button, summary, input):focus-visible {
  outline: var(--rule-thin) solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
  /* bez animacji — obwodka musi byc natychmiast */
}

.skip {
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  z-index: var(--z-modal);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  transform: translateY(-160%);
  transition: transform var(--dur-micro) var(--ease-out);
}
.skip:focus-visible { transform: none; }

/* ── Typograficzny link (C3) ───────────────────────────────────────── */

.link {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { color: var(--color-accent-2); text-decoration-thickness: 2px; }
}

/* ── Maszt (N6) ────────────────────────────────────────────────────── */

.mast {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--page-gutter) var(--space-lg);
}

.mast__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  align-items: center;
  justify-content: space-between;
}

.mast__line {
  font-size: var(--text-xs);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--color-neutral);
}

.mast__mark { justify-self: center; display: block; }
.mast__mark img { width: clamp(132px, 16vw, 188px); height: auto; }

/* Przełącznik języka */
.lang { display: flex; gap: var(--space-3xs); }
.lang__btn {
  padding: var(--space-2xs) var(--space-sm);
  min-height: 34px;
  border: var(--rule-hair) solid transparent;
  background: none;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-mid);
  color: var(--color-neutral);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;          /* to teraz <a>, zeby crawler przeszedl jezyki */
  display: inline-flex;
  align-items: center;
  transition: color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.lang__btn[aria-current="true"] {
  color: var(--color-accent);
  /* akcent, nie miedz — miedz ma 2,24:1 na papierze, a to jest ramka
     niosaca STAN kontrolki, wiec musi wyrobic 3:1 (bramka 40).
     Miedz zostaje tam, gdzie linia jest ozdobna. */
  border-color: var(--color-accent);
}
@media (hover: hover) and (pointer: fine) {
  .lang__btn:hover { color: var(--color-ink); }
}
@media (pointer: coarse) { .lang__btn { min-height: 44px; min-width: 44px; } }

/* ── Przyklejony pasek kategorii ───────────────────────────────────── */

.bar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  display: flex;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-xs) var(--page-gutter);
  background: var(--color-paper);
  /* podwójna linia — sygnatura maszty broadsheetowej */
  border-block: var(--rule-hair) solid var(--color-rule);
  box-shadow: 0 3px 0 -2px var(--color-rule);
}

.bar__nav { flex: 1 1 auto; min-width: 0; }

.bar__list {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding-block: var(--space-3xs);
}
.bar__list::-webkit-scrollbar { display: none; }

.bar__link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding-inline: var(--space-sm);
  scroll-snap-align: start;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: var(--rule-thin) solid transparent;
  transition: color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.bar__link[aria-current="true"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
@media (hover: hover) and (pointer: fine) {
  .bar__link:hover { color: var(--color-ink); border-bottom-color: var(--color-copper); }
}
@media (pointer: coarse) { .bar__link { min-height: 44px; } }

/* Szukajka */
.find { position: relative; flex: 0 0 15rem; }
.find__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.find__input {
  width: 100%;
  min-height: 38px;
  padding: var(--space-2xs) var(--space-xl) var(--space-2xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--text-sm);
  -webkit-appearance: none;
  appearance: none;
  outline: var(--rule-thin) solid transparent;   /* rezerwa na obwodke */
  transition: border-color var(--dur-micro) var(--ease-out);
}
.find__input::placeholder { color: var(--color-muted); }
.find__input::-webkit-search-cancel-button { display: none; }
.find__input:hover { border-color: var(--color-neutral); }
.find__input:focus { border-color: var(--color-accent); }

.find__clear {
  position: absolute;
  inset-inline-end: var(--space-3xs);
  inset-block-start: 50%;
  translate: 0 -50%;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--color-neutral);
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .find__clear:hover { color: var(--color-ink); }
}

@media (max-width: 39.999rem) {
  .bar { flex-wrap: wrap; }
  .find { flex: 1 1 100%; }
  @media (pointer: coarse) { .find__input { min-height: 44px; } }
}

/* Banner „wersja w przygotowaniu” */
.pending {
  margin: 0;
  padding: var(--space-sm) var(--page-gutter);
  background: var(--color-accent-wash);
  border-bottom: var(--rule-hair) solid var(--color-copper);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

/* ── Okładka (H2 split diptych) ────────────────────────────────────── */

.cover {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-xl) var(--space-2xl);
  align-items: center;
  padding: var(--space-2xl) var(--page-gutter) var(--space-3xl);
}

.cover__title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--color-accent);
}
@media (max-width: 24rem) { .cover__title { letter-spacing: 0.02em; } }

.cover__meta {
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-copper);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--color-neutral);
}

.cover__lead {
  margin-block-start: var(--space-md);
  max-width: 46ch;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-ink-2);
}

.cover__fig { margin: 0; }
.cover__fig img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 66% 50%;   /* modelka jest przy prawej krawedzi kadru */
}

@media (max-width: 56rem) {
  .cover {
    grid-template-columns: minmax(0, 1fr);
    padding-block-start: var(--space-xl);
  }
  .cover__fig { order: -1; }
}

/* ── Spis kategorii ────────────────────────────────────────────────── */

.toc {
  padding: var(--space-xl) var(--page-gutter) var(--space-2xl);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.toc__h {
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-neutral);
}

.toc__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-lg) var(--space-xl);
  margin-block-start: var(--space-lg);
  counter-reset: toc;
}

.toc__item { counter-increment: toc; min-width: 0; }

.toc__anchor {
  display: grid;
  gap: var(--space-sm);
  color: inherit;
  text-decoration: none;
}

.toc__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-paper-2);
}
.toc__thumb img { width: 100%; height: 100%; object-fit: cover; }

.toc__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1.2;
  color: var(--color-ink);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}
.toc__name::before {
  content: counter(toc, decimal-leading-zero) " ";
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mid);
  color: var(--color-copper);
}
.toc__blurb { font-size: var(--text-sm); color: var(--color-ink-2); }

@media (hover: hover) and (pointer: fine) {
  .toc__anchor:hover .toc__name { text-decoration-color: var(--color-accent); }
}

/* ── Licznik wyników ──────────────────────────────────────────────── */

.tally {
  padding: 0 var(--page-gutter) var(--space-md);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--color-neutral);
}

.empty {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-3xl) var(--page-gutter);
  max-width: 46ch;
}
.empty__line { font-family: var(--font-display); font-size: var(--text-lg); }
.empty__hint { font-size: var(--text-sm); color: var(--color-muted); }

/* ── Kategoria (S3 sticky pinned) ──────────────────────────────────── */

.cat { scroll-margin-block-start: calc(var(--banner-height) + var(--space-md)); }
.cat[hidden] { display: none; }

.cat__head {
  position: sticky;
  top: var(--banner-height);
  z-index: var(--z-sticky);
  padding: var(--space-sm) var(--page-gutter);
  background: var(--color-paper);
  border-block-end: var(--rule-hair) solid var(--color-ink);
}

/* Licznik siedzi WEWNATRZ h2, nie w drugiej kolumnie naglowka — etykieta
   obok tytulu we wlasnej kolumnie to najlepiej rozpoznawalny szablonowy
   tell (bramka 54). Tu jest jednym elementem z tytulem. */
.cat__name {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  align-items: baseline;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.1;
  letter-spacing: var(--track-tight);
}

.cat__count {
  margin-inline-start: auto;
  flex: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--color-neutral);
  white-space: nowrap;
}

.cat__lead {
  max-width: 54ch;
  padding: var(--space-lg) var(--page-gutter) 0;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-ink-2);
}

.cat__items { padding-block-end: var(--space-3xl); }

/* ── Linia produktowa ─────────────────────────────────────────────── */

.line { padding-block-start: var(--space-2xl); }
.line[hidden] { display: none; }

.line__name {
  padding-inline: var(--page-gutter);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.15;
  color: var(--color-accent);
}

.line__intro {
  display: grid;
  gap: var(--space-lg) var(--space-2xl);
  padding: var(--space-md) var(--page-gutter) 0;
}
.line__intro:empty { display: none; }
.line__prose { display: grid; gap: var(--space-md); max-width: var(--measure); min-width: 0; }
.line__prose p { color: var(--color-ink-2); }
.line__prose:empty, .line__blocks:empty { display: none; }

/* Wykazy pod proza, w kolumnach — wczesniej staly obok w wezszym pasie
   i przy dlugiej liscie zostawialy pol ekranu pustki. */
.line__blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-lg) var(--space-xl);
  align-items: start;
  min-width: 0;
}

/* ── Siatka kart (F6) ─────────────────────────────────────────────── */

.grid {
  display: grid;
  /* min(100%, …) trzyma trak w viewporcie — nigdy bare 1fr pod obrazek.
     21rem daje 3 kolumny od ~1100 px, 2 od ~730 px, 1 nizej. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: var(--space-xl) var(--space-xl);
  align-items: start;
  padding: var(--space-xl) var(--page-gutter) 0;
}

.card {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
}
.card[hidden] { display: none; }
/* produkty bez tabelki danych, ale z długim opisem, dostają cały wiersz */
.card[data-wide="true"] { grid-column: 1 / -1; }

@media (min-width: 60rem) {
  .card[data-wide="true"] {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-xl);
    align-items: start;
  }
}

.card__media {
  margin: 0;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* biel dokladnie taka jak w packshocie — patrz komentarz przy --color-pack */
  background: var(--color-pack);
  border: var(--rule-hair) solid var(--color-rule);
}
.card__media img {
  max-width: 88%;
  max-height: 88%;
  width: auto;
  object-fit: contain;
  transition: scale var(--dur-long) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__media img { scale: 1.02; }
}

.card__body { display: grid; gap: var(--space-sm); min-width: 0; }

.card__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1.2;
  letter-spacing: var(--track-tight);
}

.card__content { display: grid; gap: var(--space-md); min-width: 0; }
.card__content p { font-size: var(--text-sm); color: var(--color-ink-2); }

/* ── Tabelka danych (F3) ──────────────────────────────────────────── */

.specs {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  text-align: start;
}
.specs th,
.specs td {
  padding-block: var(--space-xs);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  vertical-align: baseline;
  text-align: start;
}
.specs tr:first-child th,
.specs tr:first-child td { border-block-start: 0; }
.specs th {
  width: 8rem;
  padding-inline-end: var(--space-md);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-neutral);
  white-space: normal;
}
.specs td { color: var(--color-ink); }

@media (max-width: 30rem) {
  .specs th, .specs td { display: block; width: auto; padding-inline: 0; }
  .specs td { border-block-start: 0; padding-block-start: 0; }
}

/* ── Blok „nazwany wykaz” ─────────────────────────────────────────── */

.block { display: grid; gap: var(--space-xs); min-width: 0; }

.block__h {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--color-accent);
}

.block__list { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
.block__list li {
  position: relative;
  padding-inline-start: var(--space-md);
  color: var(--color-ink-2);
}
.block__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.72em;
  width: 0.5rem;
  height: var(--rule-hair);
  background: var(--color-copper);
}

/* ── Rozwijane „czytaj dalej” ─────────────────────────────────────── */

.more { min-width: 0; }
.more__sum {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: var(--text-xs);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--color-accent);
  cursor: pointer;
  list-style: none;
}
.more__sum::-webkit-details-marker { display: none; }
.more__sum::after {
  content: "";
  margin-inline-start: var(--space-xs);
  width: 1.5rem;
  height: var(--rule-hair);
  background: currentColor;
}
@media (pointer: coarse) { .more__sum { min-height: 44px; } }
.more[open] .more__sum::after { width: 0.5rem; }
.more__body { display: grid; gap: var(--space-md); padding-block-start: var(--space-sm); }

/* ── Stopka-list (Ft6) ────────────────────────────────────────────── */

.close {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: center;
  padding: var(--space-3xl) var(--page-gutter) var(--space-3xl);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
}

.close__fig { margin: 0; }
.close__fig img { width: 100%; }

.close__body { max-width: 60ch; display: grid; gap: var(--space-lg); }

.close__h {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: var(--track-tight);
}

/* ── Przedstawiciele ──────────────────────────────────────────────────
   Wiersz kontaktu, nie eyebrow przy naglowku: nazwisko po lewej, telefon
   po prawej, region pod spodem przez cala szerokosc. Hairline miedzy
   wierszami — ten sam jezyk co tabelka danych przy produktach. */

.reps { display: grid; }

.rep {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3xs) var(--space-md);
  align-items: baseline;
  padding-block: var(--space-sm);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}
.rep:first-child { border-block-start: 0; padding-block-start: 0; }

.rep__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1.2;
}
.rep__tel { justify-self: end; font-size: var(--text-sm); white-space: nowrap; }
.rep__area,
.rep__mail { grid-column: 1 / -1; font-size: var(--text-sm); }
.rep__area { color: var(--color-ink-2); }

@media (max-width: 34rem) {
  .rep { grid-template-columns: minmax(0, 1fr); }
  .rep__tel { justify-self: start; }
}


.close__sign { font-family: var(--font-display); font-size: var(--text-md); line-height: 1.4; }
.close__sign strong { font-weight: 600; }
.close__top { font-size: var(--text-sm); }

@media (max-width: 56rem) {
  .close { grid-template-columns: minmax(0, 1fr); }
}

.noscript {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-xl) var(--page-gutter);
  border-block-start: var(--rule-hair) solid var(--color-copper);
  font-size: var(--text-sm);
}

/* ── Stany :active i :disabled ─────────────────────────────────────────
   Nic na tej stronie nie jest wylaczane, ale osiem stanow to regula —
   style musza byc w kodzie, zeby nie trzeba ich bylo dopisywac przy
   pierwszym przycisku, ktory realnie sie wylacza. */

.lang__btn:active,
.find__clear:active,
.more__sum:active { transform: translateY(1px); }

.link:active,
.bar__link:active { color: var(--color-accent-2); }

.lang__btn:disabled,
.find__clear:disabled,
.find__input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  color: var(--color-muted);
}
.find__input:disabled { background: var(--color-paper-2); }

/* ── Ruch: jedno wejście, tylko okładka ───────────────────────────────
   Animacja NIE ustawia stanu poczatkowego w regule bazowej — gdyby
   nie wystartowala (stary silnik, wylaczone animacje), tekst i tak jest
   widoczny. Wczesniejsza wersja gasila cale sekcje katalogu przez
   IntersectionObserver i jeden nietrafiony callback ukrywal 18 tys. px. */

.cover__text > * { animation: rise var(--dur-long) var(--ease-out) both; }
.cover__title { animation-delay: 0ms; }
.cover__meta  { animation-delay: 70ms; }
.cover__lead  { animation-delay: 140ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  @keyframes rise { from { opacity: 0; transform: none; } }
  .card:hover .card__media img { scale: 1; }
}

/* ── Druk ─────────────────────────────────────────────────────────── */

@media print {
  @page { size: A4; margin: 16mm 14mm; }

  /* Cala skala typograficzna stoi na rem, wiec zmniejsza sie tylko przez
     html — `body { font-size }` nie ruszalo var(--text-*) w ogole. */
  html { font-size: 9.5pt; }

  .bar, .lang, .skip, .toc, .tally, .pending, .close__top { display: none; }

  .cat__head { position: static; }

  /* Okladka i kontakty dostaja wlasne strony, reszta plynie */
  .cover { break-after: page; padding-block: var(--space-lg); }
  .close { break-before: page; }

  /* Naglowek nigdy nie zostaje sam na dole strony */
  .cat__head, .line__name, .card__name, .block__h { break-after: avoid; }
  .card, .rep { break-inside: avoid; }
  .cat, .line { break-inside: auto; }

  .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* Karta nie moze pekac miedzy stronami, wiec musi byc niska — inaczej
     caly wiersz siatki zjezdza na nastepna strone i zostaje pol strony
     pustki. Packshot jest `contain`, wiec nizsza ramka go nie kadruje. */
  .card__media { aspect-ratio: auto; block-size: 34mm; }
  /* jawne ograniczenie obu wymiarow — procentowy max-height na obrazku
     w wysokich packshotach (pudelko + strzykawka) pozwalal go obcinac */
  .card__media img { max-block-size: 30mm; max-inline-size: 86%; }

  /* Zwiniete „Rozwin" musi sie wydrukowac w calosci — etykieta znika,
     tresc wychodzi. ::details-content dziala od Chrome 131 / Safari 18.4;
     tools/make-pdf.py dodatkowo otwiera je skryptem, wiec PDF jest pewny. */
  .more__sum { display: none; }
  .more::details-content { content-visibility: visible; block-size: auto; }

  a { text-decoration: none; color: inherit; }
  .link { color: var(--color-accent); }
}