/* System katalogu PRO — wspólny dla wszystkich wariantów.
   Strona = A4 w pionie (210 × 297 mm). Wszystkie wymiary liczone w milimetrach strony (--mm),
   więc na ekranie strona skaluje się proporcjonalnie, a w druku ma dokładnie format A4. */

@import url("fonty/fonty.css");

:root {
  /* Kolory marki (firma-pro.com) */
  --czerwien: #ee2427;
  --czerwien-ciemna: #db171a;
  --grafit: #2d2d2d;
  --czern: #000;
  --szary: #787878;
  --szary-jasny: #bbb;
  --linia: #d5d5d5;
  --tlo-jasne: #f3f3f3;
  --papier: #fff;

  /* Blat pod stronami (ekran) */
  --blat: #e6e6e6;
  --blat-tekst: #2d2d2d;

  --font-tekst: "Fira Sans", "Helvetica Neue", Arial, sans-serif;
  --font-waski: "Fira Sans Condensed", "Fira Sans", Arial, sans-serif;
  --font-display: "Bebas Neue", "Fira Sans Condensed", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --blat: #1c1c1c; --blat-tekst: #d5d5d5; }
}
:root[data-theme="dark"] { --blat: #1c1c1c; --blat-tekst: #d5d5d5; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--blat);
  color: var(--grafit);
  font-family: var(--font-tekst);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

/* ---------- Publikacja i strona ---------- */

.publikacja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px 16px 48px;
}

.strona {
  container-type: inline-size;
  position: relative;
  width: min(210mm, 100%);
  aspect-ratio: 210 / 297;
  background: var(--papier);
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 8px 24px rgb(0 0 0 / 0.10);
}

/* Jednostki strony: 1 mm i 1 pt strony A4. Moduł rytmu pionowego = 4 mm. */
.strona {
  --mm: calc(100cqw / 210);
  --pt: calc(var(--mm) * 0.3528);
  --rytm: calc(4 * var(--mm));

  /* Marginesy: zewnętrzny 15, wewnętrzny 12, górny 15, dolny 20 mm */
  --m-gora: calc(15 * var(--mm));
  --m-dol: calc(20 * var(--mm));
  --m-zew: calc(15 * var(--mm));
  --m-wew: calc(12 * var(--mm));
  --m-lewy: var(--m-wew);
  --m-prawy: var(--m-zew);
  --odstep: calc(4 * var(--mm));

  /* Skala typograficzna 1,25 */
  --t1: calc(9 * var(--pt));
  --t2: calc(11 * var(--pt));
  --t3: calc(14 * var(--pt));
  --t4: calc(17.5 * var(--pt));
  --t5: calc(22 * var(--pt));
  --t6: calc(28 * var(--pt));
  --t7: calc(35 * var(--pt));
  --t8: calc(44 * var(--pt));
  --t9: calc(55 * var(--pt));
  --t10: calc(69 * var(--pt));
}

/* Strona lewa (parzysta) — margines wewnętrzny po prawej */
.strona--lewa { --m-lewy: var(--m-zew); --m-prawy: var(--m-wew); }

.strona__tresc {
  position: absolute;
  top: var(--m-gora);
  bottom: var(--m-dol);
  left: var(--m-lewy);
  right: var(--m-prawy);
}

/* 12 kolumn, odstęp 4 mm */
.siatka {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--odstep);
}

/* Stopka: numer strony po stronie zewnętrznej (prawa strona: numer z prawej, lewa: z lewej), nazwa sekcji, logo */
.stopka {
  position: absolute;
  left: var(--m-lewy);
  right: var(--m-prawy);
  bottom: calc(8 * var(--mm));
  display: flex;
  align-items: center;
  gap: calc(3 * var(--mm));
  font-family: var(--font-waski);
  font-size: var(--t1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--szary);
  flex-direction: row-reverse;
}
.stopka__numer { font-weight: 600; color: var(--grafit); font-variant-numeric: tabular-nums; }
.stopka__sekcja { flex: 1; text-align: right; }
.stopka__logo { height: calc(3.2 * var(--mm)); width: auto; display: block; }
.strona--lewa .stopka { flex-direction: row; }
.strona--lewa .stopka__sekcja { text-align: left; }

/* ---------- Typografia ---------- */

.nazwa {
  font-family: var(--font-waski);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--grafit);
  overflow-wrap: break-word;
  hyphens: manual;
}

.etykieta {
  font-family: var(--font-waski);
  font-size: var(--t1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--szary);
}

.liczby { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Grafika produktu ---------- */

.grafika {
  position: relative;
  background: var(--papier);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.grafika img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---------- BRAK ---------- */

/* Brak grafiki: pole w tym samym rozmiarze co grafika, żeby siatka się nie rozjechała */
.grafika--brak {
  background:
    repeating-linear-gradient(135deg, transparent 0 calc(2.2 * var(--mm)), rgb(238 36 39 / 0.07) calc(2.2 * var(--mm)) calc(2.6 * var(--mm))),
    var(--tlo-jasne);
  outline: calc(0.35 * var(--mm)) dashed rgb(238 36 39 / 0.55);
  outline-offset: calc(-0.35 * var(--mm));
}
.grafika--brak::after {
  content: "BRAK";
  font-family: var(--font-display);
  font-size: clamp(calc(14 * var(--pt)), 22cqi, calc(69 * var(--pt)));
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--czerwien);
}
.grafika--brak { container-type: inline-size; }

/* Brak tekstu: w miejscu wartości */
.brak {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35em;
  line-height: 0.9;
  letter-spacing: 0.06em;
  color: var(--czerwien);
  background: rgb(238 36 39 / 0.08);
  padding: 0.08em 0.3em 0;
  border-radius: 0.12em;
  white-space: nowrap;
}

/* ---------- Tabela wariantów ---------- */

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-tekst);
  font-size: var(--t1);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--grafit);
}
.tabela th {
  font-family: var(--font-waski);
  font-weight: 500;
  font-size: calc(7.2 * var(--pt));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--szary);
  text-align: left;
  padding: 0 calc(2 * var(--mm)) calc(1 * var(--mm)) 0;
  border-bottom: calc(0.35 * var(--mm)) solid var(--grafit);
  white-space: nowrap;
}
.tabela td {
  padding: calc(1.2 * var(--mm)) calc(2 * var(--mm)) calc(1.2 * var(--mm)) 0;
  border-bottom: calc(0.2 * var(--mm)) solid var(--linia);
  vertical-align: middle;
  white-space: nowrap;
}
.tabela th:last-child, .tabela td:last-child { padding-right: 0; }
.tabela td.tabela__nr { font-weight: 600; }
.tabela td.tabela__rozmiar { font-weight: 600; color: var(--czern); }
.tabela .tabela__mini { width: calc(9 * var(--mm)); }
.tabela .tabela__mini .grafika { width: calc(8 * var(--mm)); height: calc(8 * var(--mm)); }
.tabela .tabela__mini .grafika--brak::after { font-size: calc(7 * var(--pt)); }

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

@page { size: A4 portrait; margin: 0; }
@media print {
  body { background: none; }
  .publikacja { display: block; padding: 0; }
  .strona { width: 210mm; box-shadow: none; break-after: page; }
  .ekran-tylko { display: none !important; }
}