/* Hallmark · pre-emit critique: P5 H4 E5 S5 R5 V4 · macrostructure: Catalogue · nav: N6 + pasek przyklejony · footer: Ft4 z logo · theme: custom
 * contrast: pass · mobile: 320/375/414/768/1024 bez wystawania i klikalnego tekstu w 2 liniach (narzedzia/zrzuty.py)
 * zgiecie: tabliczka cala na 1280x800, 1366x650, 1536x730, 1440x900, 1920x950 · bez kroju mono (24.10)
 * Tobi Wood · uklad: tabliczka znamionowa (N6) -> pasek -> wstep -> katalog (4 + rozwin) -> realizacje (4 serie + 4 poboczne)
 *   -> zaplecze (pas ciemny z plynnym przejsciem) -> o nas -> kontakt -> stopka z logo
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; font-optical-sizing: auto; margin: 0; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
sub { font-size: 0.68em; vertical-align: -0.22em; line-height: 0; }
::selection { background: var(--color-accent); color: var(--color-on-accent); }
:where(a, button, summary):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius); }
/* skok do sekcji zostawia miejsce na przyklejony pasek nawigacji */
[id] { scroll-margin-top: calc(var(--pasek-h) + var(--space-md)); }

.pomin {
  position: absolute; left: var(--space-md); top: var(--space-md); z-index: 10;
  padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper);
  transform: translateY(-200%); transition: transform var(--dur) var(--ease);
}
.pomin:focus-visible { transform: none; }

/* ---------- tabliczka znamionowa (N6) ---------- */
.tabliczka {
  max-width: var(--page-max); margin: 0 auto;
  padding: var(--space-lg) var(--page-gutter) 0;
  text-align: center;
}
/* logo tak duze, jak pozwala ekran: cala tabliczka z nawigacja ma sie zmiescic na pierwszym ekranie laptopa (bramka 44) */
.tabliczka-logo { width: min(62vw, 21rem, 38svh); margin: var(--space-lg) auto var(--space-xl); }
.tabliczka-tytul {
  font-weight: 330; font-size: var(--text-2xl); line-height: 1.06; letter-spacing: -0.018em;
  max-width: 21ch; margin: 0 auto;
}
/* telefon: mniejsze logo, zeby pasek z Kontaktem byl na pierwszym ekranie (Safari zabiera ~115 px na pasek adresu) */
@media (max-width: 479px) { .tabliczka-logo { width: min(40vw, 25svh); margin: var(--space-md) auto var(--space-lg); } }
@media (min-width: 1100px) { .tabliczka-tytul { max-width: 40ch; } }   /* 24.10 Source Serif 4 szerszy: 34ch dawalo 3 linie */
.tabliczka-tech {
  margin-top: var(--space-lg);
  font-family: var(--font-display); font-variant-caps: all-small-caps; font-size: var(--text-sm); letter-spacing: 0.1em;
  color: var(--color-ink-2);
}
.tabliczka-tech span, .nw { white-space: nowrap; }
.podwojna {
  border: 0; height: 4px; margin: var(--space-xl) 0 0;
  border-top: var(--rule-hair) solid var(--color-rule-strong); border-bottom: var(--rule-hair) solid var(--color-rule-strong);
}
/* pasek nawigacji: osobny element body (nie w naglowku), bo sticky trzyma sie tylko w obrebie rodzica */
.pasek { position: sticky; top: 0; z-index: 5; background: var(--color-paper); }
.pasek ul {
  width: calc(min(100%, var(--page-max)) - 2 * var(--page-gutter)); margin: 0 auto; padding: var(--space-2xs) 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 var(--space-lg);
  list-style: none;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.pasek a {
  display: inline-block; padding: var(--space-xs) var(--space-2xs); white-space: nowrap;
  font-size: var(--text-sm); font-weight: 500; text-decoration: none; color: var(--color-ink);
}
.pasek a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
/* runda 4: Kontakt po prawej, wyrozniony, od razu otwiera nowy mail. Pusty ::before i Kontakt dziela wolne
 * miejsce po rowno, wiec cztery sekcje stoja dokladnie na srodku paska. */
.pasek ul::before { content: ""; flex: 1 1 0; }
.pasek-kontakt { flex: 1 1 0; display: flex; justify-content: flex-end; }
.pasek-kontakt a {
  background: var(--color-accent); color: var(--color-on-accent); border-radius: var(--radius);
  padding: var(--space-2xs) var(--space-md);
  transition: background-color var(--dur) var(--ease);
}
.pasek-kontakt a:hover { background: var(--color-accent-strong); text-decoration: none; }
/* telefon: piec pozycji w jednej linii, cel dotyku ~44 px */
@media (max-width: 479px) {
  .pasek ul { justify-content: space-between; align-items: center; gap: 0; padding: 0; }
  .pasek ul::before { content: none; }
  .pasek-kontakt { flex: none; }
  .pasek a { font-size: var(--text-xs); padding: var(--space-sm) 0; }
  .pasek-kontakt a { padding: var(--space-xs) var(--space-sm); }
}

/* ---------- wstep ---------- */
.wstep {
  max-width: var(--page-max); margin: 0 auto;
  padding: var(--space-2xl) var(--page-gutter) 0;
  display: grid; gap: var(--space-xl);
}
.wstep-lead { font-family: var(--font-display); font-weight: 380; font-size: var(--text-xl); line-height: 1.35; max-width: 36ch; }
.wstep-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.wstep-dane {
  margin: 0; padding: var(--space-lg) var(--space-lg) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius);
  background: var(--color-paper-2);
}
.wstep-dane div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-sm) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.wstep-dane div:first-child { border-top: 0; }
/* ink-2, nie ink-3: na papierze-2 ramki ink-3 ma tylko 4,38:1 (kontrast.py) */
.wstep-dane dt { font-size: var(--text-xs); color: var(--color-ink-2); padding-top: 0.15em; }
.wstep-dane dd { margin: 0; font-size: var(--text-sm); }
@media (min-width: 900px) {
  .wstep { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: var(--space-2xl); }
}
@media (max-width: 420px) {
  .wstep-dane div { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
}

/* ---------- przyciski i linki ---------- */
.przycisk {
  display: inline-block; white-space: nowrap;
  padding: 0.8em 1.35em; border-radius: var(--radius);
  background: var(--color-accent); color: var(--color-on-accent);
  font-weight: 500; font-size: var(--text-sm); text-decoration: none;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.przycisk:hover { background: var(--color-accent-strong); }
/* runda 4: "Napisz zapytanie" na dole ma sie wyrozniac */
.przycisk--duzy { font-size: var(--text-lg); padding: 0.95em 2.4em; }
@media (max-width: 479px) { .przycisk--duzy { display: block; text-align: center; } }
.przycisk:active { transform: translateY(1px); }
.link-strzalka { font-size: var(--text-sm); font-weight: 500; white-space: nowrap; text-decoration-color: var(--color-rule-strong); }
.link-strzalka:hover { text-decoration-color: var(--color-accent); }

/* ---------- sekcje ---------- */
.sekcja { max-width: var(--page-max); margin: 0 auto; padding: var(--space-3xl) var(--page-gutter) 0; }
/* naglowek sekcji na srodku (Sebastian: "zeby bardziej sie wyroznialo, ze jest sie na kolejnej sekcji"):
 * krotka kreska w kolorze marki nad tytulem, opis pod nim, pelna linia zamyka naglowek */
.sekcja-glowa {
  display: grid; justify-items: center; gap: var(--space-sm); text-align: center;
  padding-bottom: var(--space-lg); margin-bottom: var(--space-xl);
  border-bottom: var(--rule-hair) solid var(--color-rule-strong);
}
.sekcja-glowa h2 { font-weight: 330; font-size: var(--text-3xl); line-height: 1.04; letter-spacing: -0.015em; }
.sekcja-opis { display: grid; gap: var(--space-sm); color: var(--color-ink-2); max-width: 60ch; }

.plakietka {
  display: inline-block; white-space: nowrap; line-height: 1.5;
  padding: 0 0.5em; border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius);
  font-weight: 500; font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent);
}
.plakietka--gotowy { border-color: var(--color-rule-strong); color: var(--color-ink-2); }

/* ---------- katalog ---------- */
.katalog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-xl); }
.karta { padding: var(--space-md) 0 var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); display: grid; align-content: start; row-gap: var(--space-xs); }
/* bez kodow TW-0x (Sebastian: "nie katalogujemy tak produktow"): sama plakietka na srodku nad zdjeciem */
.karta-kod { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-xs); }
.wizualnie-ukryte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.karta-foto { background: var(--color-paper-2); margin: var(--space-3xs) 0 var(--space-xs); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); }
.karta-foto img { width: 100%; transition: transform 420ms var(--ease); }
/* tresc rozlozona na wiersze karty: w rzedzie kart tytuly, opisy, specyfikacje i linki stoja na jednej linii */
.karta-tresc { display: contents; }
.karta h3 { font-weight: 470; font-size: var(--text-lg); line-height: 1.2; letter-spacing: -0.005em; }
.karta-tresc > p { font-size: var(--text-sm); color: var(--color-ink-2); }
.spec { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: var(--space-3xs) var(--space-sm); margin: var(--space-xs) 0 0; padding-top: var(--space-xs); border-top: var(--rule-hair) dashed var(--color-rule); }
.spec dt { font-weight: 500; font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-3); padding-top: 0.25em; }
.spec dd { margin: 0; font-size: var(--text-xs); }
.karta-link { justify-self: start; margin-top: var(--space-xs); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; color: var(--color-ink); text-decoration-color: var(--color-accent); }
.karta-link:hover { color: var(--color-accent); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .karta:hover .karta-foto img { transform: translateY(-6px) scale(1.015); }
}
/* 4 wyroby na wierzchu, kolejne 4 pod przyciskiem (klase zwijania dodaje JS, bez JS widac wszystkie) */
.katalog--zwiniety .karta--wiecej { display: none; }
.katalog-wiecej { display: flex; justify-content: center; margin-top: var(--space-sm); }
.katalog-wiecej[hidden] { display: none; }
.przycisk-obrys {
  font: inherit; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; cursor: pointer;
  padding: 0.75em 1.35em; border-radius: var(--radius);
  background: transparent; color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule-strong);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.przycisk-obrys::after { content: "+"; margin-left: 0.6em; color: var(--color-accent); }
.przycisk-obrys[aria-expanded="true"]::after { content: "\2212"; }
.przycisk-obrys:hover { border-color: var(--color-ink-2); background: var(--color-paper-2); }
.przycisk-obrys:active { transform: translateY(1px); }
.katalog-dopisek { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-sm); }
.katalog-dopisek a { color: var(--color-ink); font-weight: 500; text-decoration-color: var(--color-accent); white-space: nowrap; }

/* telefon: zdjecie obok tytulu i opisu, specyfikacja i link na cala szerokosc pod spodem */
@media (max-width: 599px) {
  .karta { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto auto 1fr auto auto; column-gap: var(--space-md); }
  .karta-kod, .spec, .karta-link { grid-column: 1 / -1; }
  .karta-foto { grid-column: 1; grid-row: 2 / span 2; margin: var(--space-3xs) 0 0; align-self: start; }
  .karta h3 { grid-column: 2; grid-row: 2; margin-top: var(--space-3xs); }
  .karta-tresc > p { grid-column: 2; grid-row: 3; }
}
@media (min-width: 600px) {
  .katalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karta { grid-row: span 6; grid-template-rows: subgrid; }
  .karta-link { align-self: start; }
}
@media (min-width: 1100px) { .katalog { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- realizacje: 4 serie na wierzchu + 4 poboczne; kazde zdjecie otwiera podglad ---------- */
.seria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-md); }
.kafel { margin: 0; display: grid; align-content: start; gap: var(--space-sm); }
.powieksz { display: block; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--color-paper-2); cursor: zoom-in; }
.powieksz img { width: 100%; transition: transform 500ms var(--ease); }
.kafel .powieksz img { aspect-ratio: 1; object-fit: cover; }
/* bez plusikow na miniaturach (Sebastian 24.10: "Wywal te plusiki obok miniaturek"); kursor zoom-in zostaje */
.karta-foto .powieksz { height: 100%; border-radius: 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .powieksz:hover img { transform: scale(1.03); }
}
.kafel figcaption { font-size: var(--text-sm); color: var(--color-ink-2); }
.kafel figcaption strong { display: block; font-family: var(--font-display); font-weight: 470; font-size: var(--text-lg); line-height: 1.25; color: var(--color-ink); margin-bottom: var(--space-3xs); }
@media (min-width: 600px) {
  .seria { gap: var(--space-xl) var(--space-lg); }
  .kafel .powieksz img { aspect-ratio: 4 / 3; }
}
@media (min-width: 1000px) {
  .seria { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
  .kafel .powieksz img { aspect-ratio: auto; height: clamp(14rem, 18vw, 18rem); }
}

.poboczne { margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.poboczne-tytul { font-weight: 400; font-size: var(--text-xl); margin-bottom: var(--space-md); }
.poboczne-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm) var(--space-lg); }
.poboczne-lista li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: center; gap: var(--space-sm); }
.poboczne-lista span { font-family: var(--font-display); font-weight: 470; font-size: var(--text-base); line-height: 1.25; }
@media (min-width: 600px) {
  .poboczne-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poboczne-lista li { grid-template-columns: 4.5rem minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  .poboczne-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .poboczne-lista li { grid-template-columns: 5.5rem minmax(0, 1fr); }
}

.tabela { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tabela th { text-align: left; font-weight: 500; font-size: var(--text-xs); color: var(--color-ink-3); padding: 0 var(--space-md) var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule-strong); }
.tabela td { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
.tabela td:first-child { font-weight: 500; }

/* ---------- zaplecze (pas ciemny) ---------- */
/* papier przechodzi w noc i z powrotem miekko (krzywa wygladzona, mieszanie w oklab), a nie ostrym cieciem.
 * Tekst zaczyna sie dopiero za strefa przejscia (padding > --przejscie), wiec zawsze stoi na pelnej nocy. */
.sekcja--noc {
  max-width: none; margin-top: var(--space-xl);
  padding: calc(var(--przejscie) + var(--space-xl)) var(--page-gutter);
  background-color: var(--color-night);
  background-image: linear-gradient(to bottom,
    var(--color-paper) 0,
    color-mix(in oklab, var(--color-paper), var(--color-night) 12%) calc(var(--przejscie) * 0.25),
    color-mix(in oklab, var(--color-paper), var(--color-night) 50%) calc(var(--przejscie) * 0.5),
    color-mix(in oklab, var(--color-paper), var(--color-night) 88%) calc(var(--przejscie) * 0.75),
    var(--color-night) var(--przejscie),
    var(--color-night) calc(100% - var(--przejscie)),
    color-mix(in oklab, var(--color-paper), var(--color-night) 88%) calc(100% - var(--przejscie) * 0.75),
    color-mix(in oklab, var(--color-paper), var(--color-night) 50%) calc(100% - var(--przejscie) * 0.5),
    color-mix(in oklab, var(--color-paper), var(--color-night) 12%) calc(100% - var(--przejscie) * 0.25),
    var(--color-paper) 100%);
  color: var(--color-night-ink);
}
.sekcja--noc + .sekcja { padding-top: var(--space-xl); }
.noc-wnetrze { max-width: calc(var(--page-max) - 2 * var(--page-gutter)); margin: 0 auto; }
.sekcja--noc .sekcja-glowa { border-bottom-color: var(--color-night-rule); }
.sekcja--noc .sekcja-opis { color: var(--color-night-muted); }
.sekcja--noc :where(a, button, summary):focus-visible { outline-color: var(--color-night-accent); }
.zaplecze { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl) var(--space-lg); }
.maszyna { display: grid; gap: var(--space-xs); align-content: start; }
.maszyna img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius); margin-bottom: var(--space-xs); background: var(--color-night-2); }
.maszyna h3 { font-weight: 400; font-size: var(--text-xl); line-height: 1.2; }
.maszyna p { font-size: var(--text-sm); color: var(--color-night-muted); }
@media (min-width: 600px) { .zaplecze { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .zaplecze { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wykonczenie { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-night-rule); color: var(--color-night-muted); font-size: var(--text-sm); }
.wykonczenie strong { color: var(--color-night-ink); font-weight: 500; }

.park { margin-top: var(--space-xl); border: var(--rule-hair) solid var(--color-night-rule); border-radius: var(--radius); }
.park summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg); cursor: pointer; list-style: none;
  font-weight: 500; white-space: nowrap;
}
.park summary::-webkit-details-marker { display: none; }
.park summary::after { content: "+"; font-size: var(--text-lg); line-height: 1; color: var(--color-night-accent); }
.park[open] summary::after { content: "\2212"; }
.park summary:hover { background: var(--color-night-2); }
.park-tresc { padding: 0 var(--space-lg) var(--space-md); }
.tabela--noc th { color: var(--color-night-muted); border-bottom-color: var(--color-night-rule); }
.tabela--noc td { border-bottom-color: var(--color-night-rule); }
.tabela--noc td:first-child { white-space: nowrap; }
.tabela--noc td:last-child { color: var(--color-night-muted); }
.tabela--noc tbody tr:last-child td { border-bottom: 0; }
/* telefon: urzadzenie nad zastosowaniem, zamiast dwoch waskich kolumn */
@media (max-width: 479px) {
  .tabela--noc thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabela--noc tr { display: grid; gap: var(--space-3xs); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-night-rule); }
  .tabela--noc tbody tr:last-child { border-bottom: 0; }
  .tabela--noc td { border: 0; padding: 0; }
}

/* ---------- o nas ---------- */
/* Jedno zdjecie (runda 4: Tobiasz przy pracy w warsztacie), ostre krawedzie, ten sam promien co karty.
 * Zrodlo to klatka z rolki 540 px: nie szersze niz 25rem (400 px), inaczej mieknie. */
.onas { display: grid; gap: var(--space-xl); }
.onas-zdjecia { max-width: 25rem; }
.onas-foto { margin: 0; }
.onas-foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.onas-tekst { display: grid; gap: var(--space-md); align-content: center; }
.onas-lead { font-family: var(--font-display); font-weight: 380; font-size: var(--text-xl); line-height: 1.35; max-width: 34ch; }
.onas-tekst > p:not(.onas-lead) { color: var(--color-ink-2); max-width: 62ch; }
@media (min-width: 900px) {
  .onas { grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: var(--space-3xl); align-items: center; }
}
.pokolenia { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule-hair) solid var(--color-rule-strong); }
.pokolenia li { position: relative; padding: var(--space-md) var(--space-sm) 0 0; display: grid; gap: var(--space-3xs); }
.pokolenia li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--color-brand); }
.pokolenia li:last-child::before { background: var(--color-accent); }
.pokolenie { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 470; }
.pokolenie-opis { font-size: var(--text-xs); color: var(--color-ink-3); }
@media (max-width: 479px) {
  .pokolenia { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: var(--rule-hair) solid var(--color-rule-strong); }
  .pokolenia li { padding: 0 0 var(--space-md) var(--space-md); }
  .pokolenia li::before { top: 0.55em; left: -4px; }
}

/* ---------- kontakt ---------- */
.sekcja--kontakt { padding-bottom: var(--space-3xl); }
.kontakt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
.kontakt-lista { display: grid; gap: var(--space-lg); align-content: start; }
.kontakt h3 { font-weight: 400; font-size: var(--text-xl); }
.lista-krokow { list-style: none; margin: 0; padding: 0; counter-reset: krok; }
.lista-krokow li { counter-increment: krok; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.lista-krokow li::before { content: counter(krok) "."; font-variant-numeric: tabular-nums; font-weight: 500; font-size: var(--text-xs); color: var(--color-accent); padding-top: 0.3em; }
.kontakt-dane { margin: 0; border-top: var(--rule-hair) solid var(--color-rule-strong); }
.kontakt-dane div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.kontakt-dane dt { font-size: var(--text-xs); color: var(--color-ink-3); padding-top: 0.3em; }
.kontakt-dane dd { margin: 0; overflow-wrap: anywhere; }
.kontakt-dane a { text-decoration-color: var(--color-rule-strong); }
.kontakt-dane a:hover { text-decoration-color: var(--color-accent); }
.kontakt-dane .link-strzalka { display: inline-block; margin-top: var(--space-xs); }
/* "Skopiuj adres": maly przycisk obok maila, na waskim ekranie pod mailem */
.mail-wiersz { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); }
.kopiuj {
  font: inherit; font-size: var(--text-xs); font-weight: 500; white-space: nowrap; cursor: pointer;
  min-height: 2.25rem; padding: 0 var(--space-sm); border-radius: var(--radius);
  background: transparent; color: var(--color-ink-2); border: var(--rule-hair) solid var(--color-rule-strong);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.kopiuj:hover { border-color: var(--color-ink-2); background: var(--color-paper-2); color: var(--color-ink); }
.kopiuj:active { transform: translateY(1px); }
@media (min-width: 900px) { .kontakt { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
@media (max-width: 420px) { .kontakt-dane div { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); } }

/* ---------- stopka (Ft4 z logo): tabliczka na koniec strony, dane w kolumnach z oddechem ---------- */
.stopka {
  width: calc(min(100%, var(--page-max)) - 2 * var(--page-gutter)); margin: 0 auto; padding: 0 0 var(--space-xl);
  text-align: center;
}
.stopka .podwojna { margin: 0; }
.stopka-logo { width: clamp(6.5rem, 5rem + 6vw, 9.5rem); margin: var(--space-2xl) auto var(--space-md); }
.stopka-haslo {
  font-family: var(--font-display); font-variant-caps: all-small-caps; letter-spacing: 0.1em;
  font-size: var(--text-sm); color: var(--color-ink-2);
}
.stopka-kolumny {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg);
  max-width: 56rem; margin: var(--space-2xl) auto 0;
  font-size: var(--text-sm); line-height: 1.75; color: var(--color-ink-2);
}
.stopka-tytul { font-size: var(--text-2xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-3); margin-bottom: var(--space-2xs); }
.stopka a { white-space: nowrap; text-decoration-color: var(--color-rule-strong); }
.stopka a:hover { text-decoration-color: var(--color-accent); }
.stopka-dol {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-xs); color: var(--color-ink-3);
}
.stopka-linki { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-lg); }
.stopka-linki a { color: var(--color-ink-2); }
@media (min-width: 700px) { .stopka-kolumny { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 479px) { .stopka-dol { justify-content: center; } }

/* ---------- podglad zdjec ---------- */
.podglad {
  width: min(94vw, 76rem); max-width: none; max-height: 94vh; padding: 0; border: 0;
  background: var(--color-night); color: var(--color-night-ink); border-radius: var(--radius);
}
.podglad::backdrop { background: var(--color-backdrop); }
.podglad figure { margin: 0; }
.podglad img { width: auto; max-width: 100%; max-height: 78vh; margin: 0 auto; background: var(--color-paper-2); }   /* wyroby katalogu sa wyciete z tla */
.podglad figcaption { display: flex; gap: var(--space-md); padding: var(--space-sm) var(--space-md) 0; font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--color-night-muted); }
.podglad-sterowanie { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-md) var(--space-md); }
.podglad button {
  font: inherit; font-size: var(--text-sm); white-space: nowrap; cursor: pointer;
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius);
  background: transparent; color: var(--color-night-ink); border: var(--rule-hair) solid var(--color-night-rule);
}
.podglad button:hover { border-color: var(--color-night-muted); }
.podglad button:focus-visible { outline: 2px solid var(--color-night-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .podglad[open] { animation: pojaw 200ms var(--ease); }
}
@keyframes pojaw { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.linki-obok { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); }

/* ---------- dotyk (telefon, tablet): kazdy cel ma co najmniej 44 px wysokosci (Apple HIG 44 pt) ----------
   Na myszy zostaje gesty uklad. Mierzy narzedzia/mobilne.py (elementFromPoint, czyli prawdziwe pole trafienia). */
@media (pointer: coarse) {
  .kontakt-dane dd a, .karta-link, .link-strzalka, .stopka a, .kopiuj { display: inline-flex; align-items: center; min-height: 44px; }
  .kontakt-dane dd { line-height: 1.4; }
  .kontakt-dane .link-strzalka { display: flex; width: fit-content; margin-top: 0; }
  .karta-link { margin-top: 0; }
  /* przycisk Kontakt w pasku: wizualnie 36 px, pole trafienia na cala wysokosc paska */
  .pasek-kontakt a { position: relative; }
  .pasek-kontakt a::after { content: ""; position: absolute; inset: -5px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}