/* Katalog — rozkładówki (wariant C, karta C2 „Wiersze”). Obszar treści strony: 183 × 262 mm (marginesy 15/12/15/20). */

/* ---------- Ekran: rozkładówki ---------- */

.publikacja { gap: 40px; }

.rozkladowka {
  display: flex;
  justify-content: center;
  width: min(420mm, 100%);
}
.rozkladowka > .strona { flex: 0 0 50%; width: 50%; }

.rozkladowka:not(.rozkladowka--pojedyncza) {
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 10px 30px rgb(0 0 0 / 0.14);
}
.rozkladowka:not(.rozkladowka--pojedyncza) > .strona { box-shadow: none; }

/* Grzbiet: delikatny cień przy wewnętrznej krawędzi obu stron */
.rozkladowka:not(.rozkladowka--pojedyncza) > .strona::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(10 * var(--mm));
  pointer-events: none;
  z-index: 5;
}
.rozkladowka:not(.rozkladowka--pojedyncza) > .strona--lewa::after { right: 0; background: linear-gradient(to left, rgb(0 0 0 / 0.13), transparent); }
.rozkladowka:not(.rozkladowka--pojedyncza) > .strona:not(.strona--lewa)::after { left: 0; background: linear-gradient(to right, rgb(0 0 0 / 0.10), transparent); }

@media (max-width: 899px) {
  .publikacja { gap: 16px; }
  .rozkladowka { flex-direction: column; align-items: center; gap: 16px; width: 100%; box-shadow: none !important; }
  .rozkladowka > .strona { flex: none; width: min(210mm, 100%); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 8px 24px rgb(0 0 0 / 0.10) !important; }
  .rozkladowka > .strona::after { display: none; }
}

/* ---------- Strony ciemne ---------- */

.strona--ciemna { background: var(--grafit); color: var(--papier); }
.strona--ciemna .stopka { color: var(--szary-jasny); }
.strona--ciemna .stopka__numer { color: var(--papier); }

/* ---------- Okładka ---------- */

.okladka__gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(10 * var(--mm));
}
.okladka__logo { height: calc(8 * var(--mm)); width: auto; display: block; }
.okladka__rok {
  font-family: var(--font-waski);
  font-weight: 600;
  font-size: var(--t3);
  letter-spacing: 0.12em;
  color: var(--grafit);
}
.okladka__grafika {
  position: absolute;
  top: calc(26 * var(--mm));
  left: calc(6 * var(--mm));
  right: calc(6 * var(--mm));
  height: calc(136 * var(--mm));
}
.okladka__pas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100 * var(--mm));
  background: var(--grafit);
  border-top: calc(3 * var(--mm)) solid var(--czerwien);
  padding: calc(18 * var(--mm)) var(--m-prawy) calc(16 * var(--mm)) var(--m-lewy);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.okladka__tytul {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(92 * var(--pt));
  line-height: 0.86;
  letter-spacing: 0.005em;
  color: var(--papier);
}
.okladka__dol {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: calc(0.25 * var(--mm)) solid rgb(255 255 255 / 0.25);
  padding-top: calc(4 * var(--mm));
  font-family: var(--font-waski);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.okladka__podtytul { font-size: var(--t3); font-weight: 500; color: var(--papier); }
.okladka__www { font-size: var(--t2); color: var(--szary-jasny); text-transform: none; letter-spacing: 0.06em; }

/* ---------- Otwarcie sekcji: czerwone tło (decyzja 2026-11-02); akcenty, które były czerwone, są białe ---------- */

.otwarcie.strona--ciemna { background: var(--czerwien); }
.otwarcie .otwarcie__nr,
.otwarcie .otwarcie__spis-tytul { color: var(--papier); }
.otwarcie .otwarcie__akcent { background: var(--papier); }
.otwarcie .otwarcie__seria,
.otwarcie .otwarcie__meta,
.otwarcie .otwarcie__lista li,
.otwarcie .stopka { color: rgb(255 255 255 / 0.82); }

.otwarcie__gora {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  height: calc(16 * var(--mm));
}
.otwarcie__nr {
  font-family: var(--font-display);
  font-size: var(--t9);
  line-height: 0.8;
  color: var(--czerwien);
}
.otwarcie__seria {
  font-family: var(--font-waski);
  font-size: var(--t1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--szary-jasny);
}
.otwarcie__kafel {
  margin-top: calc(8 * var(--mm));
  height: calc(124 * var(--mm));
  background: var(--papier);
  padding: calc(12 * var(--mm));
  display: flex;
}
.otwarcie__grafika { flex: 1; min-height: 0; }
.otwarcie__akcent {
  width: calc(24 * var(--mm));
  height: calc(1.6 * var(--mm));
  background: var(--czerwien);
  margin-top: calc(12 * var(--mm));
}
.otwarcie__tytul {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t10);
  line-height: 0.9;
  letter-spacing: 0.01em;
  margin-top: calc(4 * var(--mm));
  color: var(--papier);
}
.otwarcie__meta {
  margin-top: calc(2 * var(--mm));
  font-family: var(--font-waski);
  font-size: var(--t2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--szary-jasny);
}
.otwarcie__spis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: calc(0.25 * var(--mm)) solid rgb(255 255 255 / 0.25);
  padding-top: calc(3 * var(--mm));
}
.otwarcie__spis-tytul {
  font-family: var(--font-waski);
  font-size: calc(7.2 * var(--pt));
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--czerwien);
  margin-bottom: calc(2 * var(--mm));
}
.otwarcie__lista {
  list-style: none;
  columns: 2;
  column-gap: calc(8 * var(--mm));
}
.otwarcie__lista li {
  break-inside: avoid;
  display: flex;
  gap: calc(2 * var(--mm));
  align-items: baseline;
  font-family: var(--font-waski);
  font-size: calc(7.6 * var(--pt));
  line-height: 1.25;
  padding: calc(0.6 * var(--mm)) 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--szary-jasny);
}
.otwarcie__poz { flex: 1; min-width: 0; }
.otwarcie__str { color: var(--papier); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Sadržaj i marki ---------- */

.sadrzaj__tytul {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t8);
  line-height: 0.9;
  letter-spacing: 0.01em;
  padding-bottom: calc(4 * var(--mm));
  border-bottom: calc(0.35 * var(--mm)) solid var(--grafit);
}
.sadrzaj__lista { list-style: none; margin-top: calc(4 * var(--mm)); }
.sadrzaj__poz { border-bottom: calc(0.2 * var(--mm)) solid var(--linia); }
.sadrzaj__link {
  display: grid;
  grid-template-columns: calc(12 * var(--mm)) minmax(0, 1fr) auto;
  column-gap: calc(4 * var(--mm));
  align-items: baseline;
  padding: calc(1.4 * var(--mm)) 0;
  color: inherit;
  text-decoration: none;
}
/* Na ekranie: wskazanie pozycji podświetla nazwę sekcji; przewinięcie do otwarcia płynne, z odstępem od góry okna */
@media screen {
  html { scroll-behavior: smooth; }
  .otwarcie { scroll-margin-top: 24px; }
  .sadrzaj__link:hover .sadrzaj__sekcja, .sadrzaj__link:hover .sadrzaj__str { color: var(--czerwien); }
}
.sadrzaj__nr { font-family: var(--font-display); font-size: var(--t4); line-height: 1; color: var(--czerwien); }
.sadrzaj__opis { display: flex; flex-direction: column; gap: calc(0.4 * var(--mm)); min-width: 0; }
.sadrzaj__sekcja {
  font-family: var(--font-waski);
  font-size: var(--t2);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sadrzaj__pod {
  font-family: var(--font-waski);
  font-size: calc(6.8 * var(--pt));
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--szary);
}
.sadrzaj__str { font-family: var(--font-waski); font-size: var(--t2); font-weight: 600; font-variant-numeric: tabular-nums; }

.marki__lista {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(8 * var(--mm)) var(--odstep);
  margin-top: calc(10 * var(--mm));
}
.marki__poz { display: flex; flex-direction: column; gap: calc(3 * var(--mm)); }
.marki__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(40 * var(--mm));
  background: var(--tlo-jasne);
  padding: calc(8 * var(--mm));
}
.marki__img { display: block; max-width: 100%; max-height: calc(14 * var(--mm)); width: auto; height: auto; }
.marki__liczba {
  font-family: var(--font-waski);
  font-size: var(--t2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--szary);
}

/* ---------- Strony produktów ---------- */

.produkty__naglowek {
  display: flex;
  align-items: baseline;
  gap: calc(3 * var(--mm));
  height: calc(8 * var(--mm));
  border-bottom: calc(0.35 * var(--mm)) solid var(--grafit);
}
.produkty__nr {
  font-family: var(--font-display);
  font-size: var(--t4);
  line-height: 1;
  color: var(--czerwien);
}
.produkty__tytul {
  font-family: var(--font-waski);
  font-size: var(--t2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Podkategorie na stronie (pro_ai.chorwacki_grupy) — po prawej, jak żywa pagina */
.produkty__pod {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-family: var(--font-waski);
  font-size: var(--t1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--szary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.produkty__siatka {
  position: absolute;
  top: calc(14 * var(--mm));
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  row-gap: calc(6 * var(--mm));
}

/* Karta „Wiersze”: grafika na jasnym tle po lewej (45 %), po prawej logo marki z linią do krawędzi,
   nazwa, miejsce na opis, tabela wariantów. Karta zajmuje 1–3 rzędy (grid-row ustawia wariant.js). */
.karta {
  display: grid;
  grid-template-columns: 45fr 55fr;
  column-gap: calc(6 * var(--mm));
  min-height: 0;
  min-width: 0;
}
.karta__kadr { position: relative; min-height: 0; background: var(--tlo-jasne); }
.karta__grafika { height: 100%; background: transparent; padding: calc(6 * var(--mm)); }
.karta__grafika img { mix-blend-mode: multiply; }
/* BRAK grafiki: cqi = szerokość pola (wspólny clamp od --pt liczy się wewnątrz pola i kurczy napis) */
.karta__grafika.grafika--brak::after { font-size: 22cqi; }

.karta__opis { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.karta__marka { display: flex; align-items: center; gap: calc(3 * var(--mm)); --marka-h: calc(5 * var(--mm)); }
.karta__akcent { flex: 1; height: calc(0.35 * var(--mm)); background: var(--grafit); }
.karta--grupa .karta__akcent { background: var(--czerwien); }
.karta__nazwa {
  font-size: var(--t4);
  line-height: 1.1;
  margin: calc(3 * var(--mm)) 0;
}
.karta__ciag { color: var(--szary); font-weight: 500; }

/* Logotyp marki: stała wysokość, szerokość z proporcji pliku (PRO ≈ 2,4 : 1, FACHMAYER ≈ 5,5 : 1) */
.marka { display: block; height: var(--marka-h, calc(4.5 * var(--mm))); width: auto; flex: none; }
.marka--brak { height: auto; font-size: var(--t3); }

/* Opis: jasne pole między nazwą a tabelą; mieszczą się tylko całe punkty i zdania (wariant.js) */
.miejsce-opisu {
  flex: 1 1 auto;
  min-height: calc(14 * var(--mm));
  overflow: hidden;
  background: var(--tlo-jasne);
  padding: calc(2.5 * var(--mm)) calc(3 * var(--mm));
  margin-bottom: calc(3 * var(--mm));
  font-family: var(--font-tekst);
  font-size: var(--t1);
  line-height: 1.45;
  color: var(--szary);
}

/* Linia opisu = punkt listy albo akapit ze zdaniami; pole zostaje pełnej wysokości */
.opis__linia { margin: 0; }
.opis__punkt[hidden] { display: none; }
.miejsce-opisu .brak { font-size: var(--t3); }

/* Tabela wariantów bez miniatur; kolumna wariantu może się łamać */
.karta .tabela td { padding-top: calc(1 * var(--mm)); padding-bottom: calc(1 * var(--mm)); }
.karta .tabela td.tabela__rozmiar { white-space: normal; }
.karta--ciag .tabela { margin-top: auto; }

/* ---------- Tylna okładka ---------- */

.tyl__srodek {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--mm));
}
.tyl__logo { width: calc(70 * var(--mm)); height: auto; display: block; }
.tyl__akcent { width: calc(24 * var(--mm)); height: calc(1.6 * var(--mm)); background: var(--czerwien); }
.tyl__www {
  font-family: var(--font-waski);
  font-size: var(--t4);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--papier);
}
.tyl__stopka {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  font-family: var(--font-waski);
  font-size: var(--t1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--szary-jasny);
}

/* Przycisk pobrania PDF — tylko na ekranie, w prawym górnym rogu; plik robi narzedzia/pdf.py */
.pobierz {
  position: fixed; top: 16px; right: 16px; z-index: 10;
  padding: 10px 16px; border-radius: 4px;
  background: var(--czerwien); color: var(--papier);
  font: 600 14px/1 var(--font-tekst); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.25);
}
.pobierz:hover { background: var(--czerwien-ciemna); }

/* ---------- Druk ---------- */

@media print {
  .rozkladowka { display: block; width: auto; box-shadow: none !important; }
  .rozkladowka > .strona { width: 210mm; }
  .rozkladowka > .strona::after { display: none; }
  .strona--ciemna, .okladka__pas, .karta__kadr, .miejsce-opisu, .marki__logo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}