/* ============================================================
   OPIEKA — sekcja: godziny („Co idzie z godzin, a co jest w cenie")
   ------------------------------------------------------------
   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).

   Druga przebudowa tego dnia. Pierwsza skróciła sekcję z 1710 px do 1151 px
   i nadal była niezrozumiała, więc formę pytanie-odpowiedź wywalono w całości.
   Cała sekcja to teraz jedna tabela plus rozwinięcie z drobnym drukiem.
   Uzasadnienie i lista zobowiązań: komentarz nagłówkowy w pula.php.
   ============================================================ */

/* ---------- Nagłówek ----------
   Nota pod tytułem i podpis nad tabelą zniknęły z pula.php: pytanie niesie
   teraz sam nagłówek sekcji, a tabela na nie odpowiada. Dlatego zamiast
   --space-6 wystarczy --space-5. */
.opieka-pula__head { margin-bottom: var(--space-5); }

/* ---------- Tabela: co zdejmuje godziny, a co nie ----------
   To jedyny element na stronie, który czyta się jak tabela, i to się
   Łukaszowi podoba. Nie dubluje tabeli porównawczej z cennika: tamta
   porównuje ZAKRESY pakietów, ta klasyfikuje pracę na dwa koszyki.

   Kolumna wartości ma stałą szerokość, żeby wszystkie odpowiedzi stały
   w jednej osi i dało się je przeczytać pionowo, bez czytania lewej kolumny.
   32rem, bo najdłuższa wartość („Z godzin, a gdy ich brak, i tak
   naprawiamy") ma zmieścić się w jednej linii. */
.opieka-pula__lista { gap: var(--space-1); }
.opieka-pula__wiersz {
  grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
  column-gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

/* Trzy poziomy jasności wartości, żeby klasyfikacja była widoczna zanim
   ktokolwiek przeczyta słowa:
     najjaśniejszy  — nie zdejmuje godzin, jest w cenie,
     przygaszony    — schodzi z godzin (wartość domyślna z opieka.css),
     akcent         — płacimy my (jedyny wiersz na naszą niekorzyść).
   Akcent zostaje przy JEDNYM wierszu. Czerwień jako tekst jest na tej stronie
   wiszącą decyzją o kontraście, więc nie mnożymy jej „dla podkreślenia". */
.opieka-pula__wiersz--stale .opieka-pula__wiersz-jak {
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
}

/* ---------- Rozwinięcie: zasady rozliczania ----------
   TYMCZASOWE, do usunięcia po przeniesieniu treści do FAQ (patrz pula.php).
   Wzór z .opieka-wtyczki__more, natywny <details>, zero JS.
   min-height 44px, bo samo <summary> ma ~22 px, czyli połowę minimum WCAG
   dla celu dotykowego. */
.opieka-pula__more { margin-top: var(--space-4); }
.opieka-pula__more summary {
  cursor: pointer;
  display: inline-flex; align-items: center;
  min-height: 44px;
  font: var(--fw-semibold) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--color-ink);
  list-style: none;
}
.opieka-pula__more summary::-webkit-details-marker { display: none; }
.opieka-pula__more summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}
.opieka-pula__more[open] summary { margin-bottom: var(--space-2); }

/* Drobny druk, więc bez kart. W opieka.css .opieka-pula__zasady jest siatką
   kart pytanie-odpowiedź, a .opieka-pula__zasada ma tło i padding. Tu zerujemy
   jedno i drugie: to są cztery zdania, a nie cztery kafle. */
.opieka-pula__zasady {
  display: flex; flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0; padding: 0;
}
.opieka-pula__zasada {
  padding: 0;
  background: none;
  border-radius: 0;
  max-width: 68ch;
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}
.opieka-pula__zasada strong {
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
}

@media (max-width: 768px) {
  /* Dwie kolumny się nie mieszczą, więc wartość schodzi pod opis. Wiersz jest
     wtedy dwuwierszowy, a wartość musi trzymać się bliżej swojego opisu niż
     następnego wiersza, stąd mały row-gap i większy odstęp między wierszami. */
  .opieka-pula__wiersz {
    grid-template-columns: 1fr;
    row-gap: var(--space-1);
  }
  .opieka-pula__lista { gap: var(--space-2); }
}