/* Cennik KAREM — układ jednostronicowy A4 (druk / zapis do PDF).
   Kolumny CSS rozkładają 8 grup materiałowych tak, żeby całość zmieściła się
   na jednej stronie; rozmiary w mm, bo dokument jest projektowany pod papier. */

:root{
  --ink:#111418;
  --steel-dark:#3D4850;
  --steel:#6B7D88;
  --alu:#B5C2CC;
  --alu-light:#E4EBEE;
  --copper:#9D5228;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#5c626a;font-family:'Archivo',Helvetica,Arial,sans-serif;color:var(--ink)}

/* ---- pasek narzędzi (tylko na ekranie) ---- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;background:var(--ink);position:sticky;top:0;z-index:10}
.tb-back{color:var(--alu);text-decoration:none;font-size:14px}
.tb-back:hover{color:#fff}
.tb-print{background:var(--copper);color:#fff;border:0;padding:11px 22px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
.tb-print:hover{background:#C4794A}

/* ---- arkusz A4 ---- */
.sheet{
  width:210mm;min-height:297mm;margin:16px auto;padding:11mm 10mm 9mm;
  background:#fff;display:flex;flex-direction:column;
}

.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8mm;
  padding-bottom:3mm;border-bottom:.7mm solid var(--ink)}
.brand{display:flex;align-items:center;gap:5mm}
.brand img{height:13mm;width:auto;display:block}
.brand-sub{display:flex;flex-direction:column;gap:1mm}
.brand-sub strong{font-size:5.4mm;font-weight:900;letter-spacing:-.02em;line-height:1}
.brand-sub span{font-family:'Space Mono',monospace;font-size:2.9mm;color:var(--steel)}
.meta{display:flex;flex-direction:column;gap:1.8mm;text-align:right}
.meta div{display:flex;flex-direction:column;gap:.5mm}
.meta span{font-family:'Space Mono',monospace;font-size:2.5mm;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)}
.meta b{font-family:'Space Mono',monospace;font-size:3.6mm;color:var(--ink)}

/* 3 kolumny jako siatka (nie `columns`) — Safari nie balansuje kolumn CSS
   przy druku i cennik rozjeżdżał się na dwie strony. Podział grup między
   kolumny wylicza PHP (split_into_columns), więc wynik jest identyczny
   w każdej przeglądarce. */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0 7mm;align-items:start;margin-top:5mm;flex:1 1 auto}
.col{min-width:0}
.grp{break-inside:avoid;page-break-inside:avoid;display:block;width:100%;margin:0 0 4.6mm}
.grp h2{display:flex;align-items:baseline;justify-content:space-between;gap:2mm;
  margin:0 0 1.1mm;padding:1.5mm 2.2mm;background:var(--ink);color:#fff;
  font-size:3.6mm;font-weight:900;letter-spacing:-.01em}
.grp h2 span{font-family:'Space Mono',monospace;font-size:2.6mm;font-weight:400;color:#C4794A}
.grp table{width:100%;border-collapse:collapse}
.grp td{padding:1.05mm 2.2mm;font-size:3.25mm;line-height:1.22;border-bottom:.18mm solid var(--alu-light);vertical-align:baseline}
.grp tr:last-child td{border-bottom:0}
.grp td.n{color:var(--steel-dark)}
.grp td.p{font-family:'Space Mono',monospace;font-weight:700;text-align:right;white-space:nowrap;color:var(--ink)}

.sheet-foot{display:flex;justify-content:space-between;align-items:baseline;gap:8mm;margin-top:4mm;padding-top:2.5mm;
  border-top:.35mm solid var(--alu);font-family:'Space Mono',monospace;font-size:2.4mm;line-height:1.35;color:var(--steel)}
.sheet-foot span:last-child{text-align:right;white-space:nowrap}

/* ---- druk ----
   Margines jest częścią DOKUMENTU (padding arkusza), a nie @page — ustawienie
   „Marginesy" w oknie drukowania nadpisuje @page, więc przy wyborze „Brak"
   treść dochodziłaby do samych krawędzi papieru. Przy tym rozwiązaniu odstęp
   jest zawsze, niezależnie od ustawień w dialogu. */
@page{size:A4 portrait;margin:0}
@media print{
  html,body{background:#fff;margin:0;padding:0}
  .no-print{display:none !important}
  .sheet{width:auto;max-width:none;min-height:0;height:auto;margin:0;padding:12mm 11mm 10mm;box-shadow:none;display:block}
  .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0 6mm;margin-top:3.5mm}
  .grp{margin-bottom:3.6mm}
  /* twarda gwarancja jednej strony: nic nie może wymusić łamania */
  .sheet,.cols,.grp,.sheet-head,.sheet-foot{page-break-after:avoid;page-break-before:avoid}
  .grp{break-inside:avoid;page-break-inside:avoid}
  /* tła nagłówków grup drukują się też przy domyślnych ustawieniach */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* UWAGA: „screen and” jest tu konieczne. Obszar zadruku A4 to ok. 726 px,
   więc bez tego reguła łapała także druk i składała cennik w jedną kolumnę
   o wysokości ~460 mm — czyli na dwie strony. */
@media screen and (max-width:800px){
  .sheet{width:auto;min-height:0;margin:10px;padding:16px}
  .cols{grid-template-columns:1fr}
  .sheet-head{flex-direction:column;gap:12px}
  .meta{text-align:left}
}