/*
 * Style rankingu na wyglądzie Biura dla MiŚa (decyzja Artema 2026-11-07, docs/zapozyczenia-z-biurodlamisia.md §5).
 * Kolory, kroje, odstępy i nagłówek/stopka przychodzą z kopii tokens/base/layout/components.css
 * (script/sync-z-biurodlamisia) – tutaj tylko to, czego aplikacja MiŚa nie ma: pasek rankingu i długi artykuł.
 * Wyłącznie tokeny (var(--color-…)), żadnych własnych kolorów – wtedy ciemny motyw działa sam.
 */

:root {
  --szeroko: 46rem;  /* szerokość czytania artykułu */
}

html { scroll-padding-top: 1rem; }

.ramka { max-width: var(--szeroko); margin: 0 auto; padding: 0 var(--container-px); }

.pomin {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-surface-deep); color: var(--color-white); padding: var(--space-xs) var(--space-md);
}
.pomin:focus { left: 0; }

/* Pasek rankingu pod nagłówkiem MiŚa – nawigacja po samym rankingu. */

.pasek-rankingu { background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); }
.pasek-rankingu__wnetrze {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-xs) var(--space-xl); padding-top: var(--space-sm); padding-bottom: var(--space-sm);
}
.pasek-rankingu__nazwa {
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--color-ink);
}
.pasek-rankingu__nazwa:hover { color: var(--color-green); }
.pasek-rankingu__linki { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); font-size: var(--font-size-sm); font-weight: 500; }
.pasek-rankingu__linki a { color: var(--color-text); }
.pasek-rankingu__linki a:hover,
.pasek-rankingu__linki a[aria-current="page"] { color: var(--color-green); }

/* Telefon: linki w jednym wierszu, przewijane w bok zamiast łamania. */
@media (max-width: 40rem) {
  .pasek-rankingu__linki {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    width: calc(100% + 2 * var(--container-px)); margin: 0 calc(-1 * var(--container-px)); padding: 0 var(--container-px);
  }
  .pasek-rankingu__linki a { white-space: nowrap; }
}

/* Treść */

.tresc { padding-top: var(--space-2xl); padding-bottom: var(--space-3xl); }

.artykul h1 { font-size: clamp(1.85rem, 1.35rem + 2.2vw, 2.6rem); margin: 0 0 var(--space-lg); }
.artykul .podtytul { color: var(--color-text-muted); margin: calc(-1 * var(--space-md)) 0 var(--space-xl); }

.artykul h2 {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  margin: var(--space-2xl) 0 var(--space-md); padding-top: var(--space-xl); border-top: 1px solid var(--color-border);
}
.artykul h2 strong, .artykul h3 strong { font-weight: inherit; }

.artykul h3 {
  font-size: var(--font-size-xl); margin: var(--space-2xl) 0 var(--space-md);
  padding: 0.2rem 0 0.2rem var(--space-sm); border-left: 4px solid var(--color-green);
}

.artykul h4 {
  font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-caps-wide); color: var(--color-text-muted);
  margin: var(--space-lg) 0 var(--space-xs);
}

/* base.css zeruje marginesy i kropki list (aplikacja nie ma długich tekstów) – w artykule wracają. */
.artykul p, .artykul ul, .artykul ol { margin: 0 0 var(--space-md); }
.artykul ul { list-style: disc; padding-left: var(--space-lg); }
.artykul ol { list-style: decimal; padding-left: var(--space-lg); }
.artykul li { margin-bottom: 0.45rem; }
.artykul li::marker { color: var(--color-text-muted); }
.artykul li a, .artykul td a { text-decoration: underline; }

.artykul figure { margin: var(--space-md) 0 var(--space-lg); }
.artykul figure img {
  display: block; width: 100%; max-width: 22rem; height: auto;
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
}

/* Wstęp: kto prowadzi ranking i dlaczego siebie w nim nie ocenia. */

.wstep { --notch-fill: var(--color-green-soft); --notch-line: var(--color-green); padding: var(--space-lg); margin: 0 0 var(--space-xl); }
.wstep p { margin: 0 0 var(--space-sm); }
.wstep p:last-child { margin-bottom: 0; }

/* Spis treści na stronie głównej */

.artykul .spis__tytul {
  font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps-wide);
  color: var(--color-text-muted); margin: 0 0 var(--space-xs);
}
.artykul .spis {
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  padding: var(--space-md) var(--space-lg) var(--space-md) 2.5rem; font-weight: 500;
}
.artykul .spis > li { margin-bottom: 0.35rem; }
.artykul .spis a { color: var(--color-ink); text-decoration: none; }
.artykul .spis a:hover { color: var(--color-green); text-decoration: underline; }
.artykul .spis ul { margin: 0.4rem 0 0.5rem; padding-left: 1.1rem; font-weight: 400; font-size: 0.95rem; }
.artykul .spis ul li { margin-bottom: 0.2rem; }
.artykul .spis ul a { color: var(--color-text); }

/* Tabele pakietów */

.tabela { overflow-x: auto; margin: var(--space-xs) 0 var(--space-md); border: 1px solid var(--color-border); background: var(--color-bg-alt); }
.tabela table { width: 100%; border-collapse: collapse; font-size: 0.92rem; line-height: 1.4; }
.tabela th, .tabela td { padding: 0.6rem 0.75rem; text-align: center; vertical-align: top; border-bottom: 1px solid var(--color-border); min-width: 8.5rem; }
.tabela th + th, .tabela td + td { border-left: 1px solid var(--color-border); }
.tabela thead th { background: var(--color-green-soft); color: var(--color-ink); font-weight: 700; }
.tabela tbody tr:first-child td { font-size: var(--font-size-base); font-weight: 600; color: var(--color-ink); }
.tabela tbody tr:last-child td { border-bottom: 0; }

/* Tabela pakietów z bazy (/porownanie) – szersza niż artykuł, przewijana w bok na telefonie. */

.artykul--szeroki { max-width: none; }
.artykul--szeroki > :not(.pakiety) { max-width: var(--szeroko); margin-left: auto; margin-right: auto; }
.ramka:has(.artykul--szeroki) { max-width: var(--max-width); }

.pakiety__opis { max-width: var(--szeroko); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.tabela--pakiety th, .tabela--pakiety td { text-align: left; min-width: 8.5rem; font-size: var(--font-size-sm); }
.tabela--pakiety tbody tr:first-child td { font-size: var(--font-size-sm); font-weight: 400; color: inherit; }
.tabela--pakiety tbody th { background: var(--color-bg-alt); position: sticky; left: 0; z-index: 1; min-width: 11rem; border-right: 1px solid var(--color-border); }
.tabela--pakiety tbody tr + tr th, .tabela--pakiety tbody tr + tr td { border-top: 1px solid var(--color-border); }
.pakiety__biuro { display: block; font-family: var(--font-heading); font-weight: 700; color: var(--color-ink); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.pakiety__nazwa { display: block; font-weight: 600; }
.pakiety__drobne { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 400; }
.pakiety__drobne a { color: inherit; text-decoration: underline; }
.artykul .pakiety__ceny { list-style: none; padding: 0; margin: 0; }
.artykul .pakiety__ceny li { margin-bottom: 0.3rem; }
.pakiety__ceny .pakiety__drobne { display: inline; }
.pakiety__wiecej summary { cursor: pointer; color: var(--color-green); }
.pakiety__wiecej[open] { font-size: var(--font-size-xs); }
.nie-wiemy { color: var(--color-text-muted); font-style: italic; }
.artykul .pakiety__lista { list-style: none; padding: 0; columns: 2 16rem; column-gap: var(--space-xl); }
.artykul .pakiety__lista li { break-inside: avoid; margin-bottom: var(--space-sm); }
.artykul .wszystkie-biura { font-weight: 600; margin: calc(-1 * var(--space-sm)) 0 var(--space-xl); }