/* SEMANAT — baza wiedzy: hub
 *
 * Ładowany wyłącznie na /baza-wiedzy/, tak jak knowledge.css na stronach przewodników. Hub nie jest
 * przewodnikiem i nie korzysta z komponentów przewodnika — ale korzysta z tych samych ROL KOLORU:
 *
 *   granat / błękit  = technika, wiedza, dane
 *   zieleń           = działanie, handel, przejście dalej
 *   bursztyn         = ostrzeżenie i ograniczenie
 *   szarość          = nieznane, drugi plan
 *
 * Przed reworkiem hub był katalogiem białych kart na białym tle: przewodnik o PP ważył wizualnie tyle samo
 * co pojedynczy artykuł, a sekcje rozdzielał wyłącznie tekst. Ten arkusz daje hierarchię: pasma sekcji,
 * okładki techniczne, mocniejsze karty przewodników i wyraźnie lżejsze karty artykułów.
 */

body.semanat-hub {
  --h-navy: var(--sem-navy-900);
  --h-navy-mid: var(--sem-navy-800);
  --h-blue: var(--sem-blue-700);
  --h-blue-100: var(--sem-blue-100);
  --h-blue-050: var(--sem-blue-050);
  --h-band-tech: #E7F0F9;
  --h-band-act: #EDF5F0;
  --h-green: var(--sem-green-600);
  --h-green-700: var(--sem-green-700);
  --h-line: #D4DDE5;
  --h-line-soft: #E4EAF0;
  --h-muted: #5B6873;
  --h-ink: #16222E;
}

/* ------------------------------------------------------------------ pasma sekcji
 * Pasmo jest pełnej szerokości, a treść zostaje w tej samej siatce co reszta serwisu. Dzięki temu przy
 * mocnym pomniejszeniu strony widać RYTM sekcji, a nie jednolitą biel z drobnym tekstem. */
body.semanat-hub .sem-hub-band { position: relative; }
body.semanat-hub .sem-hub-band::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
body.semanat-hub .sem-hub-band > * { position: relative; z-index: 1; }
body.semanat-hub .sem-hub-band.is-tech::before { background: var(--h-band-tech); }
body.semanat-hub .sem-hub-band.is-act::before { background: var(--h-band-act); }
body.semanat-hub .sem-hub-band.is-soft::before { background: #F5F7F9; }

/* ------------------------------------------------------------------ hero
 * Krótko i mocno. Hero huba nie opowiada, czym jest baza wiedzy — pokazuje, o czym jest, a decyzję
 * „po co tu jestem” podejmuje się trzy centymetry niżej, na ścieżkach. */
body.semanat-hub .sem-hub-hero { max-width: 68ch; }
body.semanat-hub .sem-hub-hero .sem-hub-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--h-blue);
}
body.semanat-hub .sem-hub-hero .sem-hub-eyebrow::before {
  content: ""; width: 13px; height: 13px; border-radius: 3px; background: var(--h-navy-mid); flex: 0 0 auto;
}
body.semanat-hub .sem-hub-hero h1 {
  margin: 0; font-size: 44px; line-height: 1.1; letter-spacing: -0.018em; color: var(--h-navy);
}
body.semanat-hub .sem-hub-hero .sem-hub-lead {
  margin: 14px 0 0; font-size: 17.5px; line-height: 1.55; color: var(--h-ink);
}
@media (max-width: 860px) { body.semanat-hub .sem-hub-hero h1 { font-size: 34px; } }
@media (max-width: 620px) {
  body.semanat-hub .sem-hub-hero h1 { font-size: 28px; }
  body.semanat-hub .sem-hub-hero .sem-hub-lead { font-size: 16px; }
}

/* ------------------------------------------------------------------ nagłówek sekcji
 * Wyrównany do lewej krawędzi siatki, nie wyśrodkowany. Numer i kwadrat niosą rangę sekcji tak samo jak
 * w przewodnikach — hub ma być rozpoznawalny jako część tego samego systemu. */
body.semanat-hub .sem-hub-head { margin: 0 0 22px; }
body.semanat-hub .sem-hub-head .sem-hub-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--h-blue);
}
body.semanat-hub .sem-hub-head .sem-hub-eyebrow::before {
  content: ""; width: 13px; height: 13px; border-radius: 3px; background: var(--h-navy-mid); flex: 0 0 auto;
}
body.semanat-hub .sem-hub-head h2 {
  margin: 0; font-size: 30px; line-height: 1.2; letter-spacing: -0.012em; color: var(--h-navy);
}
body.semanat-hub .sem-hub-head p {
  margin: 10px 0 0; max-width: 62ch; font-size: 15.5px; line-height: 1.6; color: var(--h-muted);
}
body.semanat-hub .sem-hub-head .sem-hub-rule {
  display: block; height: 3px; width: 64px; margin: 16px 0 0; background: var(--h-navy-mid); border-radius: 2px;
}

/* ------------------------------------------------------------------ ścieżki „zacznij od problemu”
 * Element nawigacyjny, nie kolejny artykuł. Stąd inna forma niż karta przewodnika: numer, jedno zdanie,
 * strzałka. Użytkownik myśli problemem, a nie strukturą naszej bazy. */
body.semanat-hub .sem-hub-paths {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0;
}
body.semanat-hub .sem-hub-path {
  display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 18px;
  background: #fff; border: 1px solid var(--h-line); border-top: 3px solid var(--h-navy-mid); border-radius: 10px;
  color: inherit; text-decoration: none; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
body.semanat-hub .sem-hub-path .sem-hub-path-n {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em; color: var(--h-blue);
}
body.semanat-hub .sem-hub-path strong {
  font-size: 19px; line-height: 1.25; color: var(--h-navy); letter-spacing: -0.008em;
}
body.semanat-hub .sem-hub-path span { font-size: 14.5px; line-height: 1.55; color: var(--h-muted); }
body.semanat-hub .sem-hub-path em {
  margin-top: auto; padding-top: 12px; font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--h-blue);
}
body.semanat-hub .sem-hub-path:hover,
body.semanat-hub .sem-hub-path:focus-visible {
  border-color: var(--h-blue); box-shadow: 0 6px 18px rgba(11, 31, 58, 0.09); transform: translateY(-2px);
}

/* ------------------------------------------------------------------ karta przewodnika
 * Okładka techniczna zamiast zdjęcia z banku. Tytuł, jedno zdanie, żetony tematów, wejście. Karta jest
 * wyraźnie cięższa od karty artykułu, bo przewodnik jest wyższą rangą treści. */
body.semanat-hub .sem-hub-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0;
}
body.semanat-hub .sem-hub-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.semanat-hub .sem-hub-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--h-line); border-radius: 10px;
  color: inherit; text-decoration: none;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
body.semanat-hub .sem-hub-card:hover,
body.semanat-hub .sem-hub-card:focus-visible {
  border-color: var(--h-blue); box-shadow: 0 8px 22px rgba(11, 31, 58, 0.10); transform: translateY(-2px);
}
body.semanat-hub .sem-hub-cover {
  display: block; background: var(--h-blue-050); border-bottom: 1px solid var(--h-line-soft);
  padding: 14px 16px; line-height: 0;
}
body.semanat-hub .sem-hub-cover-svg { width: 100%; height: auto; display: block; max-height: 150px; }
body.semanat-hub .sem-hub-card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1 1 auto; }
body.semanat-hub .sem-hub-kind {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--h-blue);
}
body.semanat-hub .sem-hub-card h3 {
  margin: 0; font-size: 19.5px; line-height: 1.22; letter-spacing: -0.01em; color: var(--h-navy);
}
body.semanat-hub .sem-hub-sum { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--h-muted); }
body.semanat-hub .sem-hub-topics { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
body.semanat-hub .sem-hub-topics li {
  font-size: 11.5px; font-weight: 600; color: var(--h-blue); background: var(--h-blue-100);
  border-radius: 999px; padding: 3px 10px;
}
body.semanat-hub .sem-hub-go {
  margin-top: auto; padding-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--h-blue);
}

/* Karta praktyczna: dwie strony mocno handlowe dostają większy format i listę przykładów. */
body.semanat-hub .sem-hub-card.is-wide .sem-hub-cover { padding: 18px 22px; background: var(--h-blue-100); }
body.semanat-hub .sem-hub-card.is-wide .sem-hub-cover-svg { max-height: 186px; }
body.semanat-hub .sem-hub-card.is-wide h3 { font-size: 23px; }
body.semanat-hub .sem-hub-card.is-wide .sem-hub-sum { font-size: 15.5px; }
body.semanat-hub .sem-hub-examples { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
body.semanat-hub .sem-hub-examples li {
  position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--h-ink);
}
body.semanat-hub .sem-hub-examples li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 2px; background: var(--h-blue);
}

/* ------------------------------------------------------------------ karta artykułu
 * Artykuł jest treścią drugiego planu i ma to widać: bez okładki, węższy rytm, mniejszy tytuł. */
body.semanat-hub .sem-hub-arts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0;
}
body.semanat-hub .sem-hub-art {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 15px;
  background: #fff; border: 1px solid var(--h-line-soft); border-left: 3px solid var(--h-line);
  border-radius: 8px; color: inherit; text-decoration: none;
  transition: border-left-color .16s ease, box-shadow .16s ease;
}
body.semanat-hub .sem-hub-art:hover,
body.semanat-hub .sem-hub-art:focus-visible {
  border-left-color: var(--h-blue); box-shadow: 0 4px 12px rgba(11, 31, 58, 0.07);
}
/* Poziom niesie SŁOWO; intensywność jest dodatkiem, nie jedyną informacją.
 *
 * Gradacja idzie w jednej rodzinie koloru marki: jasny błękit → średni niebieski → ciemny granat. Zieleń
 * zostaje działaniu i modułom handlowym — użyta do „podstaw” przestałaby cokolwiek znaczyć. Rosnący ciężar
 * ma być widać na zrzucie całej sekcji, bez czytania plakietek. */
body.semanat-hub .sem-hub-lvl {
  align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 4px; padding: 3px 8px;
}
body.semanat-hub .sem-hub-lvl.is-1 { color: var(--h-blue); background: var(--h-blue-050); box-shadow: inset 0 0 0 1px var(--h-blue-100); }
body.semanat-hub .sem-hub-lvl.is-2 { color: #fff; background: var(--h-blue); }
body.semanat-hub .sem-hub-lvl.is-3 { color: #fff; background: var(--h-navy); }

/* PODSTAWY — najlżejszy: biała karta, blada błękitna krawędź. Wrażenie łatwego startu. */
body.semanat-hub .sem-hub-art.is-1 { border-left-color: var(--h-blue-100); background: #fff; }
/* PRAKTYKA — środkowy: bladobłękitna powierzchnia i mocniejsza krawędź. Wrażenie robocze. */
body.semanat-hub .sem-hub-art.is-2 {
  border-left-color: var(--h-blue); border-left-width: 4px; background: var(--h-blue-050);
}
/* EKSPERT — najmocniejszy: granatowe pasmo u góry zamiast całej ciemnej karty, która byłaby ciężkim blokiem. */
body.semanat-hub .sem-hub-art.is-3 {
  border-left-color: var(--h-navy); border-left-width: 4px; border-top: 5px solid var(--h-navy);
  background: #FBFCFE; padding-top: 12px;
}
body.semanat-hub .sem-hub-art.is-3 h4 { color: var(--h-navy); }
body.semanat-hub .sem-hub-art.is-1:hover, body.semanat-hub .sem-hub-art.is-1:focus-visible { border-left-color: var(--h-blue); }
body.semanat-hub .sem-hub-art.is-2:hover, body.semanat-hub .sem-hub-art.is-2:focus-visible { border-left-color: var(--h-navy-mid); }
body.semanat-hub .sem-hub-art.is-3:hover, body.semanat-hub .sem-hub-art.is-3:focus-visible { border-left-color: var(--h-navy); }

/* Grupa poziomu dostaje własne, subtelne tło — rosnąca głębia widoczna przy pomniejszeniu strony. */
body.semanat-hub .sem-hub-lvlgroup { border-radius: 10px; padding: 18px 18px 20px; margin: 0 0 16px; }
body.semanat-hub .sem-hub-lvlgroup.is-1 { background: #FAFCFE; }
body.semanat-hub .sem-hub-lvlgroup.is-2 { background: var(--h-blue-050); }
body.semanat-hub .sem-hub-lvlgroup.is-3 { background: #EEF2F7; }
body.semanat-hub .sem-hub-lvlgroup.is-3 .sem-hub-lvlh { color: var(--h-navy); }
body.semanat-hub .sem-hub-art h4 {
  margin: 0; font-size: 15.5px; line-height: 1.3; color: var(--h-navy);
  /* Bardzo długi tytuł nie może zrobić karty dwa razy wyższej od sąsiadów. Ucinamy WIERSZAMI, nie znakami:
     słowo zostaje całe, pismo zostaje czytelne, a pełny tytuł jest w atrybucie i na stronie docelowej. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
body.semanat-hub .sem-hub-art p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--h-muted); }
body.semanat-hub .sem-hub-art .sem-hub-go { padding-top: 6px; font-size: 12.5px; }
body.semanat-hub .sem-hub-lvlh {
  margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--h-navy-mid); display: flex; align-items: center; gap: 9px;
}
body.semanat-hub .sem-hub-lvlh::before {
  content: ""; width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto;
}
body.semanat-hub .sem-hub-lvlgroup.is-1 .sem-hub-lvlh::before { background: var(--h-blue-100); }
body.semanat-hub .sem-hub-lvlgroup.is-2 .sem-hub-lvlh::before { background: var(--h-blue); }
body.semanat-hub .sem-hub-lvlgroup.is-3 .sem-hub-lvlh::before { background: var(--h-navy); }

/* ------------------------------------------------------------------ pasek kotwic */
body.semanat-hub .sem-hub-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.semanat-hub .sem-hub-nav a {
  display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--h-navy-mid); text-decoration: none;
  background: #fff; border: 1px solid var(--h-line); border-radius: 999px; padding: 7px 15px;
  transition: border-color .16s ease, color .16s ease;
}
body.semanat-hub .sem-hub-nav a:hover, body.semanat-hub .sem-hub-nav a:focus-visible {
  border-color: var(--h-blue); color: var(--h-blue);
}

/* ------------------------------------------------------------------ blok handlowy na dole
 * Hub nie może kończyć się ostatnią kartą artykułu. Niebieski = kupujący, zielony = sprzedający. */
body.semanat-hub .sem-hub-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
body.semanat-hub .sem-hub-cta > a {
  display: flex; flex-direction: column; gap: 10px; padding: 0 0 22px; overflow: hidden;
  background: #fff; border: 1px solid var(--h-line); border-radius: 10px; color: inherit; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}
body.semanat-hub .sem-hub-cta > a:hover, body.semanat-hub .sem-hub-cta > a:focus-visible {
  transform: translateY(-2px); box-shadow: 0 8px 22px rgba(11, 31, 58, 0.10);
}
body.semanat-hub .sem-hub-cta h3 {
  margin: 0; padding: 16px 22px; font-size: 20px; line-height: 1.25; color: #fff;
}
body.semanat-hub .sem-hub-cta p { margin: 0; padding: 0 22px; font-size: 15px; line-height: 1.6; color: var(--h-ink); }
body.semanat-hub .sem-hub-cta .sem-hub-btn {
  margin: 4px 22px 0; align-self: flex-start; font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #fff; border-radius: 6px; padding: 11px 20px;
}
body.semanat-hub .sem-hub-cta .is-buyer h3 { background: var(--h-navy-mid); }
body.semanat-hub .sem-hub-cta .is-buyer .sem-hub-btn { background: var(--h-navy-mid); }
body.semanat-hub .sem-hub-cta .is-seller h3 { background: var(--h-green-700); }
body.semanat-hub .sem-hub-cta .is-seller .sem-hub-btn { background: var(--h-green-700); }

/* ------------------------------------------------------------------ szerokości
 * Telefon nie dostaje pomniejszonego desktopu: siatki schodzą do jednej kolumny, okładki zostają. */
@media (max-width: 1100px) {
  body.semanat-hub .sem-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.semanat-hub .sem-hub-arts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.semanat-hub .sem-hub-head h2 { font-size: 27px; }
}
@media (max-width: 860px) {
  body.semanat-hub .sem-hub-paths { grid-template-columns: 1fr; }
  body.semanat-hub .sem-hub-arts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.semanat-hub .sem-hub-grid.is-two { grid-template-columns: 1fr; }
  body.semanat-hub .sem-hub-cta { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  body.semanat-hub .sem-hub-grid, body.semanat-hub .sem-hub-arts { grid-template-columns: 1fr; }
  body.semanat-hub .sem-hub-head h2 { font-size: 24px; }
  body.semanat-hub .sem-hub-card h3 { font-size: 18px; }
  body.semanat-hub .sem-hub-card.is-wide h3 { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  body.semanat-hub .sem-hub-path,
  body.semanat-hub .sem-hub-card,
  body.semanat-hub .sem-hub-art,
  body.semanat-hub .sem-hub-cta > a { transition: none; }
  body.semanat-hub .sem-hub-path:hover,
  body.semanat-hub .sem-hub-card:hover,
  body.semanat-hub .sem-hub-cta > a:hover { transform: none; }
}

/* ------------------------------------------------------------------ okładki — role koloru
 * Okładka jest techniczna, więc pracuje w granacie i błękicie. Bursztyn wyłącznie tam, gdzie motyw niesie
 * decyzję z wyjściem „za mało danych”; zieleń nie pojawia się na okładkach w ogóle, bo nie jest tu działaniem. */
/* Etykiety są tu treścią, nie ozdobą: okładka ma powiedzieć, o czym jest przewodnik, zanim ktoś przeczyta
 * tytuł. Dlatego mają pełny kontrast granatu, a nie szarość podpisu. */
body.semanat-hub .sem-hub-cover-svg .kc-t { fill: var(--h-navy); letter-spacing: 0.02em; }
body.semanat-hub .sem-hub-cover-svg .kc-t-on { fill: #fff; letter-spacing: 0.03em; }
body.semanat-hub .sem-hub-cover-svg .kc-t-sub { fill: var(--h-blue); letter-spacing: 0.07em; }
body.semanat-hub .sem-hub-cover-svg .kc-arh { fill: var(--h-navy-mid); }
body.semanat-hub .sem-hub-cover-svg .kc-fibre { fill: #8FB4D4; }
body.semanat-hub .sem-hub-cover-svg .kc-drop { fill: var(--h-blue); }
body.semanat-hub .sem-hub-cover-svg .kc-stop { stroke: var(--h-navy-mid); stroke-width: 3; stroke-linecap: round; }
body.semanat-hub .sem-hub-cover-svg .kc-line { stroke: #9FB6CB; stroke-width: 1.6; fill: none; }
body.semanat-hub .sem-hub-cover-svg .kc-dash { stroke: #A9BED1; stroke-width: 1.6; fill: none; stroke-dasharray: 5 4; }
body.semanat-hub .sem-hub-cover-svg .kc-axis { stroke: var(--h-navy-mid); stroke-width: 2; fill: none; }
body.semanat-hub .sem-hub-cover-svg .kc-curve { stroke: var(--h-blue); stroke-width: 2.4; fill: none; }
body.semanat-hub .sem-hub-cover-svg .kc-box { fill: #fff; stroke: #B8CBDC; stroke-width: 1.3; }
body.semanat-hub .sem-hub-cover-svg .kc-box-tint { fill: #DCEAF6; stroke: #A9C6E0; stroke-width: 1.3; }
body.semanat-hub .sem-hub-cover-svg .kc-box-solid { fill: var(--h-navy-mid); stroke: none; }
body.semanat-hub .sem-hub-cover-svg .kc-box-warn { fill: #F6E6D2; stroke: #DDBF95; stroke-width: 1.3; }
body.semanat-hub .sem-hub-cover-svg .kc-field { fill: #F0F5FA; stroke: #C8D8E6; stroke-width: 1.2; }
body.semanat-hub .sem-hub-cover-svg .kc-dot { fill: #B6D0E8; stroke: #7FA6C8; stroke-width: 1.3; }
body.semanat-hub .sem-hub-cover-svg .kc-dot.is-bonded { fill: #DCEAF6; stroke: var(--h-blue); stroke-width: 2; }