/* Huby materiałów i kategoria tworzyw — STR-118/119/120, 2026-09-09.
   Zero hexów: kolory wyłącznie z tokenów w style.css.
   Próbki kolorów są ILUSTRACJĄ (mieszanką tokenów), nie deklaracją parametru optycznego. */

.plx-hub {
  font-family: var(--plx-font-body);
  color: var(--plx-ink);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--plx-sp-4);
}
.plx-hub h1,
.plx-hub h2,
.plx-hub h3 { font-family: var(--plx-font-head); color: var(--plx-granat); }
.plx-hub h1 { font-size: var(--plx-fs-4xl); line-height: 1.15; margin: 0 0 var(--plx-sp-4); }
.plx-hub h2 { font-size: var(--plx-fs-2xl); margin: 0 0 var(--plx-sp-4); }
.plx-hub h3 { font-size: var(--plx-fs-md); margin: 0 0 var(--plx-sp-2); }
.plx-hub p { font-size: var(--plx-fs-base); line-height: 1.6; }

.plx-hub__okruszki { font-size: var(--plx-fs-sm); color: var(--plx-muted-2); padding: var(--plx-sp-5) 0 0; }
.plx-hub__okruszki a { color: var(--plx-navy); text-decoration: none; }
.plx-hub__okruszki a:hover { text-decoration: underline; }
.plx-hub__okruszki span { margin: 0 var(--plx-sp-2); }

.plx-hub__naglowek { padding: var(--plx-sp-6) 0 var(--plx-sp-5); }
.plx-hub__lead { max-width: 68ch; color: var(--plx-muted); font-size: var(--plx-fs-md); }
.plx-hub__lead p { font-size: var(--plx-fs-md); }
.plx-hub__lead p:last-child { margin-bottom: 0; }

.plx-hub__sekcja { padding: var(--plx-sp-7) 0; border-top: 1px solid var(--plx-line); }
.plx-hub__sekcja:first-of-type { border-top: 0; }
.plx-hub__nota { font-size: var(--plx-fs-sm); color: var(--plx-muted-2); margin: calc(-1 * var(--plx-sp-2)) 0 0; }

.plx-hub__etykieta {
  font-size: var(--plx-fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--plx-muted-2);
  margin: 0;
}
.plx-hub__wartosc { font-family: var(--plx-font-mono); font-size: var(--plx-fs-lg); color: var(--plx-granat); margin: var(--plx-sp-1) 0 0; }
.plx-hub__wartosc-tekst { font-size: var(--plx-fs-base); color: var(--plx-ink); margin: var(--plx-sp-1) 0 0; }

/* Pas maksymalnego formatu — jedyne miejsce ze złotem. */
.plx-hub__format {
  display: flex;
  flex-wrap: wrap;
  gap: var(--plx-sp-5);
  align-items: center;
  justify-content: space-between;
  border-left: 4px solid var(--plx-gold);
  padding-left: var(--plx-sp-5);
}
.plx-hub__format-wartosc { font-family: var(--plx-font-mono); font-size: var(--plx-fs-3xl); color: var(--plx-granat); margin: var(--plx-sp-2) 0 0; }
.plx-hub__format-opis { color: var(--plx-muted); max-width: 52ch; margin: var(--plx-sp-3) 0 0; }
.plx-hub__link { color: var(--plx-navy); font-size: var(--plx-fs-base); text-decoration: none; border-bottom: 1px solid var(--plx-line); }
.plx-hub__link:hover { border-bottom-color: var(--plx-navy); }

.plx-hub__parametry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--plx-sp-5); }

/* Siatki kafli */
.plx-hub__kafle { list-style: none; margin: var(--plx-sp-5) 0 0; padding: 0; display: grid; gap: var(--plx-sp-4); }
.plx-hub__kafle--7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plx-hub__kafle--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plx-hub__kafle--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.plx-hub__kafel {
  display: flex;
  flex-direction: column;
  gap: var(--plx-sp-2);
  padding: var(--plx-sp-5) var(--plx-sp-4);
  border: 1px solid var(--plx-line);
  border-radius: 8px;
  background: var(--plx-bg);
  text-decoration: none;
  height: 100%;
  transition: border-color .15s ease;
}
.plx-hub__kafel:hover,
.plx-hub__kafel:focus-visible { border-color: var(--plx-navy); }
.plx-hub__kafel[aria-current="page"] { border-color: var(--plx-granat); border-width: 2px; }
.plx-hub__kafel-mm { font-family: var(--plx-font-mono); font-size: var(--plx-fs-lg); color: var(--plx-granat); }
.plx-hub__kafel-nazwa { font-family: var(--plx-font-head); font-size: var(--plx-fs-md); color: var(--plx-granat); }
.plx-hub__kafel-cena { font-family: var(--plx-font-mono); font-size: var(--plx-fs-sm); color: var(--plx-muted); }

/* Próbki koloru — mieszanki tokenów, wyłącznie poglądowe. */
.plx-hub__probka { display: block; height: 64px; border-radius: 6px; border: 1px solid var(--plx-line); background: var(--plx-line); }
.plx-hub__probka--krata {
  background-color: var(--plx-bg);
  background-image: linear-gradient(45deg, var(--plx-line) 25%, transparent 25%, transparent 75%, var(--plx-line) 75%),
                    linear-gradient(45deg, var(--plx-line) 25%, transparent 25%, transparent 75%, var(--plx-line) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
.plx-hub__probka--opal   { background: color-mix(in srgb, var(--plx-bg) 80%, var(--plx-linia-2)); }
.plx-hub__probka--braz   { background: color-mix(in srgb, var(--plx-spektrum-pomarancz) 55%, var(--plx-ink)); }
.plx-hub__probka--grafit { background: color-mix(in srgb, var(--plx-szary-ciemny) 75%, var(--plx-bg)); }

/* Karty materiału i usługi */
.plx-hub__karta {
  display: flex;
  flex-direction: column;
  padding: var(--plx-sp-5);
  border: 1px solid var(--plx-line);
  border-radius: 10px;
  background: var(--plx-bg);
  height: 100%;
}
.plx-hub__karta-tytul { font-size: var(--plx-fs-md); }
.plx-hub__karta p { margin: 0 0 var(--plx-sp-3); }
.plx-hub__spec { display: flex; flex-direction: column; gap: var(--plx-sp-1); font-size: var(--plx-fs-sm); color: var(--plx-muted); }
.plx-hub__spec b { font-family: var(--plx-font-mono); font-weight: 500; color: var(--plx-ink); }
.plx-hub__cena { font-family: var(--plx-font-mono); font-size: var(--plx-fs-lg); color: var(--plx-granat); }
.plx-hub__cena small { font-family: var(--plx-font-body); font-size: var(--plx-fs-sm); color: var(--plx-muted); }
.plx-hub__cena--zapytanie { font-family: var(--plx-font-body); font-size: var(--plx-fs-md); color: var(--plx-muted); }
.plx-hub__zrodlo { font-size: var(--plx-fs-xs); color: var(--plx-muted-2); line-height: 1.5; }
.plx-hub__znacznik {
  align-self: flex-start;
  font-size: var(--plx-fs-xs);
  color: var(--plx-muted);
  border: 1px solid var(--plx-line);
  border-radius: 999px;
  padding: var(--plx-sp-1) var(--plx-sp-3);
}
.plx-hub__opis { font-size: var(--plx-fs-sm); color: var(--plx-muted); line-height: 1.6; }
.plx-hub__parametry-szcz { font-size: var(--plx-fs-sm); margin: 0 0 var(--plx-sp-3); }
.plx-hub__parametry-szcz > summary { cursor: pointer; color: var(--plx-navy); padding: var(--plx-sp-1) 0; }
.plx-hub__parametry-szcz dl { margin: var(--plx-sp-2) 0 0; display: grid; grid-template-columns: auto 1fr; gap: var(--plx-sp-1) var(--plx-sp-3); }
.plx-hub__parametry-szcz dt { color: var(--plx-muted-2); }
.plx-hub__parametry-szcz dd { margin: 0; font-family: var(--plx-font-mono); font-size: var(--plx-fs-xs); color: var(--plx-ink); }
.plx-hub__karta-cta { margin: auto 0 0; padding-top: var(--plx-sp-4); border-top: 1px solid var(--plx-line); }
.plx-hub__karta-cta a { color: var(--plx-navy); font-size: var(--plx-fs-base); text-decoration: none; }
.plx-hub__karta-cta a:hover { text-decoration: underline; }

/* Tabela porównawcza — przewija się we własnym kontenerze, strona nigdy w poziomie. */
.plx-hub__tabela-przewij { overflow-x: auto; border: 1px solid var(--plx-line); border-radius: 10px; }
.plx-hub__tabela { width: 100%; border-collapse: collapse; font-size: var(--plx-fs-sm); background: var(--plx-bg); }
.plx-hub__tabela th,
.plx-hub__tabela td { padding: var(--plx-sp-3) var(--plx-sp-4); text-align: left; border-bottom: 1px solid var(--plx-line); white-space: nowrap; }
.plx-hub__tabela thead th { font-family: var(--plx-font-head); font-size: var(--plx-fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--plx-muted-2); }
.plx-hub__tabela tbody th { font-weight: 500; color: var(--plx-ink); white-space: normal; }
.plx-hub__tabela tbody tr:last-child th,
.plx-hub__tabela tbody tr:last-child td { border-bottom: 0; }
.plx-hub__mono { font-family: var(--plx-font-mono); }

/* Pasy */
.plx-hub__pas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--plx-sp-5);
  align-items: center;
  justify-content: space-between;
}
.plx-hub__pas--jasny { border: 1px solid var(--plx-line); border-radius: 10px; padding: var(--plx-sp-6); background: var(--plx-bg); }
.plx-hub__pas--ciemny { background: var(--plx-granat); border-radius: 10px; padding: var(--plx-sp-7) var(--plx-sp-6); border-top: 0; }
.plx-hub__pas--ciemny h2 { color: var(--plx-on-dark); }
.plx-hub__pas--ciemny .plx-hub__pas-tekst { color: var(--plx-on-dark); max-width: 56ch; margin: var(--plx-sp-3) 0 0; }
.plx-hub__pas-tekst { margin: 0; }

.plx-hub__btn {
  display: inline-block;
  font-family: var(--plx-font-head);
  font-size: var(--plx-fs-base);
  padding: var(--plx-sp-3) var(--plx-sp-6);
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}
.plx-hub__btn--koral { background: var(--plx-koral); color: var(--plx-bg); }
.plx-hub__btn--koral:hover { background: var(--plx-koral-hover); color: var(--plx-bg); }
.plx-hub__btn--obrys { border-color: var(--plx-navy); color: var(--plx-navy); background: transparent; }
.plx-hub__btn--obrys:hover { background: var(--plx-bg-2); }
.plx-hub .plx-hub__btn:focus-visible,
.plx-hub a:focus-visible { outline: 2px solid var(--plx-navy); outline-offset: 2px; }

/* Drabinka doklejona pod prozą strony grubości */
.plx-hub--drabinka { padding: 0; max-width: none; }
.plx-hub--drabinka .plx-hub__sekcja:first-of-type { border-top: 1px solid var(--plx-line); }

@media (max-width: 980px) {
  .plx-hub__kafle--7,
  .plx-hub__kafle--4,
  .plx-hub__kafle--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plx-hub__parametry { grid-template-columns: 1fr; }
  .plx-hub h1 { font-size: var(--plx-fs-3xl); }
  .plx-hub__format-wartosc { font-size: var(--plx-fs-2xl); }
}
@media (max-width: 560px) {
  .plx-hub__kafle--3 { grid-template-columns: 1fr; }
  .plx-hub__sekcja { padding: var(--plx-sp-6) 0; }
}