/* ============================================================
   OPIEKA — sekcja: pakiety
   ------------------------------------------------------------
   Plik roboczy jednej sekcji, ładowany PO opieka.css, więc nadpisuje
   reguły z tamtego pliku bez !important. Powstał 2026-08-27, żeby kilku
   agentów mogło pracować nad różnymi sekcjami bez kolizji w jednym pliku.
   Po zakończeniu przebudowy treść wraca do opieka.css, a ten plik znika.
   Zero hardkodów: kolory, typografia, odstępy tylko przez var(--token).
   ============================================================ */

/* ============================================================
   1. UKŁAD: 2+1, KARTA WYRÓŻNIONA NA PEŁNEJ SZEROKOŚCI POD SPODEM
   ------------------------------------------------------------
   ⛔ NIE ZMIENIAJ TEGO UKŁADU BEZ SŁOWA ŁUKASZA. Cennik miał trzy układy
      w trzy dni i za każdym razem ktoś uznawał poprzedni za usterkę:
      2+1 (stan zaprojektowany, akceptowany), trzy równe kolumny
      (26.08, uznanie 2+1 za defekt siatki), drabina kart pełnej szerokości
      (27.08, bo trzy kolumny w 768 px dawały karty po 240 px). 2+1 jest
      układem docelowym i decyzją, nie przypadkiem.

   Start i Pro w pierwszym wierszu, Standard szeroki pod nimi. Szerokość
   podkreśla rekomendację („Najpopularniejszy"), a nie pozycję w siatce.

   Karta wyróżniona jest umieszczona JAWNIE (grid-row 2, grid-column
   1 / -1), a Start i Pro dokłada auto-placement. Dzięki temu kolejność
   w DOM zostaje Start, Standard, Pro, czyli rosnąco po cenie, i to samo
   widzi czytnik ekranu. Konsekwencje tego wyboru opisane niżej,
   w sekcji „KOLEJNOŚĆ DOM KONTRA WIDOK".

   Zapis grid, nie flex: potrzebujemy komórki rozpiętej na dwie kolumny,
   a `order` i `flex-basis` dawałyby ten sam efekt kosztem gorszej
   czytelności reguły.
   ============================================================ */
.opieka-pakiety__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
  align-items: stretch;
}
/* Karta szeroka (Pro) rozpięta na oba tory, w drugim wierszu. Jawne
   umieszczenie tylko dla niej: reszta wchodzi automatycznie w wolne komórki
   w kolejności DOM, więc Start ląduje w 1/1, a Standard w 1/2.

   2026-09-02: szerokość przeniesiona ze Standardu na Pro (słowo Łukasza).
   Klasa jest osobna od `--featured` właśnie po to: `--featured` niesie
   plakietkę „Najpopularniejszy" i zostaje przy Standardzie, `--szeroki`
   niesie wyłącznie pozycję w siatce. */
.opieka-pakiet--szeroki {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* ============================================================
   KOLEJNOŚĆ DOM KONTRA WIDOK — rozstrzygnięcie świadome
   ------------------------------------------------------------
   W układzie dwukolumnowym kolejność wzrokowa (Start, Pro, Standard)
   NIE pokrywa się z kolejnością w DOM (Start, Standard, Pro). Wybrano
   to świadomie, bo drugi wariant był gorszy w obie strony:

   1. Kolejność w DOM zostaje ROSNĄCO PO CENIE, więc czytnik ekranu
      i nawigacja klawiaturą dostają sekwencję, która ma sens w cenniku
      (399 → 899 → 1 699). WCAG 1.3.2 wymaga sekwencji SENSOWNEJ, nie
      identycznej z układem wizualnym, a ta jest sensowna.
   2. Poniżej 641 px siatka schodzi do jednej kolumny i wtedy kolejność
      wzrokowa RÓWNA SIĘ kolejności w DOM (Start, Standard, Pro). Gdybyśmy
      przestawili DOM pod widok desktopowy, zepsulibyśmy kolejność na
      telefonie, gdzie cennik czyta się liniowo i gdzie ruch od najtańszego
      do najdroższego jest jedyną poprawną kolejnością.
   3. Numery 01/02/03 zostają spójne z ceną. Przy przestawionym DOM górny
      wiersz pokazywałby 01 i 03, a dolny 02, co wygląda na usterkę.

   Koszt, który świadomie przyjmujemy: widzący użytkownik klawiatury
   w widoku dwukolumnowym przejdzie Start (lewy górny) → Standard (dolny)
   → Pro (prawy górny), czyli fokus zejdzie w dół i wróci w górę. Dotyczy
   trzech kart w jednej sekcji i tylko powyżej 640 px.
   ============================================================ */

.opieka-pakiet {
  /* position zostaje relative, ale plakietka nie jest już pozycjonowana
     absolutnie: na karcie pełnej szerokości wisiałaby nad krawędzią
     w środku, daleko od nazwy pakietu, której dotyczy. */
  position: relative;
  background: var(--surface-raised);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  scroll-margin-top: var(--space-8);
}
/* Karta szeroka dostaje większy oddech, bo ma na niego miejsce.
   2026-09-02: ZDJĘTA czerwona warstwa tła („nie takie czerwone", Łukasz).
   Wszystkie trzy karty stoją teraz na tym samym --surface-raised, a jedynym
   wyróżnieniem Standardu jest plakietka „Najpopularniejszy". Motyw wyróżnia
   skalą i plakietką, nie kolorem tła. */
.opieka-pakiet--szeroki {
  padding: var(--space-6) var(--space-5);
}

/* ---------- Wiersz kickera: plakietka ----------
   Renderowany tylko w karcie wyróżnionej. Numery 01/02/03 zdjęte razem
   z powrotem do 2+1: numer znaczył próg cenowy, a w tym układzie górny
   wiersz pokazywał 01 i 03, dolny 02, co czyta się jak usterka. */
.opieka-pakiet__kicker {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
/* Plakietka w przepływie, nie pozycjonowana absolutnie. Kolory bez zmian:
   zmierzone 2026-08-26, biel na akcencie dawała 3,63:1 przy 13 px,
   ciemny tekst na tym samym tle 4,80:1. */
.opieka-pakiet__badge {
  position: static;
  transform: none;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-text);
  font: var(--fw-semibold) var(--font-caption)/1.6 var(--font-sans);
  white-space: nowrap;
}

/* ---------- Nagłówek karty: nazwa po lewej, kwota po prawej ----------
   Kwoty trzech pakietów stoją w tej samej kolumnie wzrokowej, więc nadal
   porównuje się je jednym spojrzeniem. To był powód odejścia od układu
   2+1 w sierpniu i tutaj zostaje spełniony bez ściskania tekstu. */
.opieka-pakiet__top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: end;
}
.opieka-pakiet__ident { min-width: 0; }
.opieka-pakiet__money {
  text-align: right;
  min-width: 0;
}
/* Nazwa odręczną Mansalvą, rozmiar z tokena --font-h2 (26 → 44 px), a nie
   z własnego clamp: w karcie 240 px trzeba było zmniejszać ręcznie, w karcie
   pełnej szerokości token pasuje bez kombinowania. Jedyny element odręczny
   w tej karcie, zgodnie z zasadą „nigdy dwa odręczne obok siebie". */
.opieka-pakiet__name {
  margin: 0;
  font: var(--fw-regular) var(--font-h2)/1 var(--font-decorative);
  color: var(--color-accent);
}
.opieka-pakiet__for {
  margin: var(--space-1) 0 0;
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}
.opieka-pakiet__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: .25em;
  font: var(--fw-black) var(--font-h1)/1 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  white-space: nowrap;
}
.opieka-pakiet__unit {
  margin: var(--space-1) 0 0;
  font: var(--fw-regular) var(--font-caption)/1.5 var(--font-sans);
  color: var(--ink-50);
  white-space: nowrap;
}

/* ---------- Panel puli godzin ----------
   Osobny blok z własnym tłem, stojący PRZED listą „plus". Powód nie jest
   kosmetyczny: godziny są ilościowe i wartość droższego pakietu zastępuje
   tańszą (Pro = 4h razem), a wewnątrz listy pod nagłówkiem „Wszystko
   z pakietu X, plus:" czytelnik dodawał je do godzin niższego pakietu.
   Wyróżnienie tłem i wagą, bo dla Pro to najmocniejszy argument za ceną,
   więc nie może wyglądać na drobny druk. */
.opieka-pakiet__pula {
  margin: var(--space-2) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-04);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
}
.opieka-pakiet__pula-label {
  flex: 1 0 100%;
  font: var(--fw-semibold) var(--font-caption)/1.4 var(--font-sans);
  color: var(--ink-50);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.opieka-pakiet__pula-val {
  font: var(--fw-regular) var(--font-body)/var(--lh-snug) var(--font-sans);
  color: var(--ink-90);
}
/* Sama liczba w rozmiarze nagłówka karty i w akcencie: to ona jest
   argumentem, nie słowo „dev/design". */
.opieka-pakiet__pula-val strong {
  font: var(--fw-black) var(--font-h4)/1 var(--font-sans);
  color: var(--color-accent);
  letter-spacing: -0.01em;
}
/* Zastrzeżenie stoi przy liczbie, nie w przypisie na dole strony, bo to
   dokładnie ten punkt, w którym czytelnik dodawał godziny do siebie. */
.opieka-pakiet__pula-note {
  flex: 1 0 100%;
  font: var(--fw-regular) var(--font-caption)/1.5 var(--font-sans);
  color: var(--ink-50);
}

/* ---------- Linia dziedziczenia ---------- */
.opieka-pakiet__inherit {
  margin: var(--space-2) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--surface-04);
  font: var(--fw-semibold) var(--font-h5)/var(--lh-snug) var(--font-sans);
  color: var(--color-ink);
}

/* ---------- Lista punktów: dwie kolumny w szerokiej karcie ----------
   minmax w ch, nie w pikselach: kolumna łamie się dopiero wtedy, gdy
   zabrakłoby miejsca na sensowną długość wiersza, niezależnie od
   rozmiaru fontu. Przy 672 px treści wychodzą dwie kolumny po 320 px,
   czyli około 40 znaków w wierszu zamiast 21 przed zmianą. */
/* Panel puli sam rozdziela bloki tłem, więc kreska nad linią dziedziczenia
   byłaby drugim separatorem w odległości jednego odstępu. */
.opieka-pakiet__pula + .opieka-pakiet__inherit {
  border-top: 0;
  padding-top: 0;
  margin-top: var(--space-3);
}

/* Kreska nad listą także w pakiecie bez linii dziedziczenia (Start), żeby
   trzy karty miały ten sam rytm pionowy. */
.opieka-pakiet__top + .opieka-pakiet__list {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--surface-04);
}
.opieka-pakiet__list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
  gap: var(--space-2) var(--space-4);
  flex: none;
}
.opieka-pakiet__list li {
  position: relative;
  padding-left: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: start;
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--ink-90);
}
/* Kreska-punktor z opieka.css ustępuje odręcznemu ptaszkowi w markupie,
   tak samo jak w .fit-card na stronie głównej. */
.opieka-pakiet__list li::before { content: none; }
.opieka-pakiet__list li svg {
  color: var(--color-accent);
  margin-top: .45em;
  flex: none;
}

/* ---------- Akcje ---------- */
.opieka-pakiet__actions {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--surface-04);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
/* Przycisk na pełną szerokość był konieczny w kolumnie 240 px. W karcie
   768 px rozciągnięty na całość wygląda jak pasek, więc wraca do
   naturalnej szerokości z zapasem na palec. */
.opieka-pakiet__cta {
  margin-top: 0;
  width: auto;
  min-width: 22ch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  box-sizing: border-box;
}
.opieka-pakiet__alt {
  margin: 0;
  text-align: left;
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
}

/* ============================================================
   2. TABELA PORÓWNAWCZA ZA ROZWINIĘCIEM
   ------------------------------------------------------------
   Wzorzec rozwinięcia zgodny z .opieka-wtyczki__more: natywne
   <details>/<summary>, zero JS, minimalna wysokość celu dotykowego 44 px.
   ============================================================ */
.opieka-pakiety__compare {
  margin-top: var(--space-5);
  text-align: center;
}
.opieka-pakiety__compare summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: var(--space-3);
  font: var(--fw-semibold) var(--font-body)/1.4 var(--font-sans);
  color: var(--color-ink);
  list-style: none;
}
.opieka-pakiety__compare summary::-webkit-details-marker { display: none; }
.opieka-pakiety__compare summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}
.opieka-pakiety__compare[open] summary { margin-bottom: var(--space-4); }

.porownanie {
  text-align: left;
}
/* Poziome przewijanie siedzi TUTAJ, nigdy na <body>. tabindex="0"
   w markupie, bo przewijalny obszar musi być osiągalny z klawiatury. */
.porownanie__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  padding: var(--space-3);
}
.porownanie__scroll:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.porownanie__table {
  width: 100%;
  /* Podłoga w ch, nie w pikselach: poniżej tej szerokości kolumny pakietów
     zjadałyby etykiety funkcji, więc lepiej przewinąć tabelę w jej własnym
     kontenerze niż zwęzić wiersz do dwóch słów. */
  min-width: 44ch;
  border-collapse: collapse;
}
/* Opis tabeli, POD tabelą (uwaga Łukasza 2026-08-27: nad tabelą „trochę
   psuje"). Stoi POZA kontenerem przewijania, bo <caption> z caption-side:
   bottom dostawał szerokość pudełka tabeli (419 px przy 390 px ekranu),
   nie widocznego okna (325 px), i był przycinany. Uzasadnienie i pomiary
   w komentarzu w template-parts/opieka/pakiety.php.
   Charakter przypisu: --font-caption, --ink-50, wyrównany do lewej. */
.porownanie__opis {
  margin: var(--space-3) 0 0;
  max-width: 68ch;
  font: var(--fw-regular) var(--font-caption)/1.5 var(--font-sans);
  color: var(--ink-50);
}
/* Widoczna tylko tam, gdzie tabela faktycznie się nie mieści. */
.porownanie__hint { display: none; }
/* Padding górny w całym wierszu nagłówkowym, nie tylko w kolumnie Standard:
   podświetlenie kolumny wyróżnionej jest rysowane TŁEM na komórce, więc
   padding przesuwa tekst WEWNĄTRZ podświetlenia, a nie odsuwa podświetlenie.
   Tego chciał Łukasz: więcej miejsca nad nazwą pakietu w środku czerwonego
   pola. Gdyby padding stał tylko na komórce wyróżnionej, nazwy trzech
   pakietów przestałyby stać w jednej linii bazowej. */
.porownanie__corner {
  text-align: left;
  font: var(--fw-semibold) var(--font-caption)/1.4 var(--font-sans);
  color: var(--ink-50);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: var(--space-4) var(--space-2) var(--space-3) 0;
  vertical-align: bottom;
}
.porownanie__pkg {
  padding: var(--space-4) var(--space-1) var(--space-3);
  vertical-align: bottom;
  text-align: center;
  white-space: nowrap;
}
.porownanie__pkg-name {
  display: block;
  font: var(--fw-bold) var(--font-h5)/var(--lh-snug) var(--font-sans);
  color: var(--color-ink);
}
.porownanie__pkg--featured .porownanie__pkg-name { color: var(--color-accent); }
.porownanie__pkg-price {
  display: block;
  font: var(--fw-regular) var(--font-caption)/1.5 var(--font-sans);
  color: var(--ink-62);
}
.porownanie__feature {
  text-align: left;
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-top: 1px solid var(--surface-04);
  font: var(--fw-regular) var(--font-body)/var(--lh-snug) var(--font-sans);
  color: var(--ink-90);
}
.porownanie__cell {
  padding: var(--space-2) var(--space-1);
  border-top: 1px solid var(--surface-04);
  text-align: center;
  vertical-align: middle;
}
/* Kolumna wyróżnionego pakietu podświetlona tak samo jak jego karta. */
.porownanie__cell--featured,
.porownanie__pkg--featured { background: var(--color-accent-bg); }
.porownanie__yes { color: var(--color-accent); display: inline-flex; }
/* Kreska „poza pakietem" na --ink-50, nie --ink-28: dokumentacja motywu
   wskazuje --ink-28 jako najgorszy kontrast w serwisie (2,28:1). Znaczenie
   i tak niesie tekst dla czytnika ekranu, ale znak ma być widoczny. */
.porownanie__no { color: var(--ink-50); display: inline-flex; }
.porownanie__val {
  font: var(--fw-semibold) var(--font-caption)/1.4 var(--font-sans);
  color: var(--color-ink);
  white-space: nowrap;
}
/* Pod tabelą stoją teraz DWIE linie i to są dwie różne rzeczy:
     1. <caption> opisuje TABELĘ (co znaczą liczby w kolumnach),
     2. .porownanie__foot zastrzega coś o OFERCIE (SLA nie zależy od ceny).
   Żeby nie zlały się w jeden szary akapit, druga jest odcięta kreską,
   dostaje większy odstęp i jest o stopień głośniejsza (--ink-62), bo
   ogranicza obietnicę, a nie tylko objaśnia tabelę. Bez gwiazdki: w tabeli
   nie ma znacznika, do którego gwiazdka miałaby się odnosić. */
.porownanie__foot {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  /* Kreska na pełną szerokość kolumny, BEZ max-width na akapicie: obcięta
     do 68ch kończyła się w połowie i czytała się jak usterka, a nie jak
     separator. Samo zdanie jest krótkie i mieści się w jednym wierszu. */
  border-top: 1px solid var(--surface-04);
  font: var(--fw-regular) var(--font-caption)/1.6 var(--font-sans);
  color: var(--ink-62);
}

/* ============================================================
   3. WĄSKIE EKRANY
   ============================================================ */
/* ⚠️ Relikt układu trzykolumnowego: opieka.css poniżej 1200 px zwęża kartę
   do 42rem i centruje ją, bo trzy kolumny schodziły wtedy do jednej
   wyśrodkowanej. W drabinie karta ma pełną szerokość kolumny na KAŻDEJ
   szerokości ekranu. Zmierzone przed poprawką przy 900 px: kontener 768 px,
   karta 420 px, lista punktów spadała do jednej kolumny. Znalezione dopiero
   przy sprawdzaniu 900 px, bo przy 1440 px ta reguła nie obowiązuje. */
@media (max-width: 1199px) {
  .opieka-pakiet {
    max-width: none;
    margin-inline: 0;
    width: auto;
  }
}

/* ---------- Wąska karta w wierszu dwukolumnowym ----------
   Start i Pro dostają w kolumnie 768 px około 372 px, czyli 276 px treści
   przy padding --space-5. Nazwa Mansalvą i kwota w --font-h1 nie stają
   obok siebie w takiej szerokości, a przycisk z min-width 22ch nie stanie
   obok linku „Albo umów rozmowę". Dlatego w wąskiej karcie ten sam rozkład
   pionowy, co na telefonie. Karta szeroka (Pro), rozpięta na 768 px, zostaje
   przy rozkładzie poziomym.

   Reguły są zdublowane z blokiem poniżej 641 px świadomie: tam wąskie są
   WSZYSTKIE karty, tutaj tylko niewyróżnione. Jednego selektora dla obu
   przypadków nie da się napisać bez @container, a ten wymagałby kontekstu
   kontenera na siatce i podniósłby próg przeglądarek. */
@media (min-width: 641px) {
  .opieka-pakiet:not(.opieka-pakiet--szeroki) {
    /* 48 px paddingu z dwóch stron zabierałoby wąskiej karcie ponad
       czwartą część szerokości. */
    padding: var(--space-4);
  }
  .opieka-pakiet:not(.opieka-pakiet--szeroki) .opieka-pakiet__top {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .opieka-pakiet:not(.opieka-pakiet--szeroki) .opieka-pakiet__money {
    text-align: left;
  }
  .opieka-pakiet:not(.opieka-pakiet--szeroki) .opieka-pakiet__price {
    justify-content: flex-start;
  }
  .opieka-pakiet:not(.opieka-pakiet--szeroki) .opieka-pakiet__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .opieka-pakiet:not(.opieka-pakiet--szeroki) .opieka-pakiet__cta {
    width: 100%;
    min-width: 0;
  }
  .opieka-pakiet:not(.opieka-pakiet--szeroki) .opieka-pakiet__alt {
    text-align: center;
  }
}

/* ---------- Jedna kolumna ----------
   Poniżej 641 px siatka schodzi do jednego toru i wtedy kolejność wzrokowa
   równa się kolejności w DOM: Start, Standard, Pro. Jawne umieszczenie karty
   szerokiej trzeba zdjąć, inaczej zostawiłaby puste miejsce w wierszu 1. */
@media (max-width: 640px) {
  .opieka-pakiety__grid { grid-template-columns: minmax(0, 1fr); }
  /* Padding kart BEZ ZMIAN, celowo. Wąska karta w wierszu dwukolumnowym
     dostaje mniejszy padding, ale na telefonie karta ma całą kolumnę
     i --space-5 się w niej mieści. Zmierzone: 317 px treści przy
     --space-4 kontra 301 px przy --space-5, więc zysk 16 px nie jest wart
     zmiany rytmu na widoku, którego nikt nie prosił o zmianę. */
  .opieka-pakiet--szeroki {
    grid-column: auto;
    grid-row: auto;
  }
  .porownanie__hint { display: block; }
  /* Nazwa i kwota jedna pod drugą: obok siebie w 302 px treści kwota
     „1 699 PLN" zabierała nazwie połowę miejsca. */
  .opieka-pakiet__top {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .opieka-pakiet__money { text-align: left; }
  .opieka-pakiet__price { justify-content: flex-start; }
  .opieka-pakiet__actions { flex-direction: column; align-items: stretch; }
  .opieka-pakiet__cta { width: 100%; min-width: 0; }
  .opieka-pakiet__alt { text-align: center; }
}