/* ============================================================
   OPIEKA — sekcje: granice + wyjście
   ------------------------------------------------------------
   Plik roboczy dwóch sąsiadujących 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).

   ZAŁOŻENIE UKŁADU (uwaga Łukasza 2026-08-27, „te sekcje dopracować"):
   obie sekcje stoją bezpośrednio obok siebie, więc muszą się różnić fakturą,
   a nie tylko treścią. Podział:
     • GRANICE  — nagłówek DO LEWEJ + odręczna fraza, lista bez kart,
                  duże tytuły, plamka akcentu z krzyżykiem markerem.
     • WYJŚCIE  — nagłówek WYŚRODKOWANY, dwa duże fakty w kartach,
                  pod nimi cztery krótkie dowody bez karty, w siatce 2×2.
   Karty występują tylko w jednej z dwóch sekcji. To jest celowe.
   ============================================================ */

/* ============================================================
   GRANICE — „czego nie obiecujemy"
   ⚠️ NIE zmniejszać do caption i NIE chować w details. Cała wartość tej
   sekcji polega na tym, że zastrzeżenia są widoczne przed decyzją.
   ============================================================ */

/* Nagłówek do lewej: konwencja home/fit.php (h2 + odręczna notka pod nim).
   Wyśrodkowanie zostawiamy sekcji `#wyjscie`, żeby dwie sąsiadujące sekcje
   nie startowały identycznie. */
.opieka-granice__head {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* space-2, nie space-1: podkreślenie .hero__mark w h2 schodzi poniżej
     linii pisma (bottom: -.12em), więc mniejszy odstęp dociskał odręczną
     frazę do czerwonej kreski. */
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.opieka-granice__head h2 {
  font: var(--fw-black) var(--font-h2)/var(--lh-tight) var(--font-sans);
  letter-spacing: -0.01em;
  margin: 0;
}
/* Jedyny akcent odręczny w tej sekcji. Rotacja zadeklarowana tutaj obowiązuje,
   dopóki nie wejdzie reveal: pod html.reveal-on wygrywa transform z
   reveal.css (.hw-reveal), dokładnie tak samo jak w .fit__note. */
.opieka-granice__hand {
  margin: 0;
  color: var(--color-accent);
  font: var(--fw-regular) clamp(2.0rem, 2.2vw, 2.8rem)/var(--lh-tight) var(--font-decorative);
  transform: rotate(-2deg);
}
.opieka-granice__note {
  margin: var(--space-2) 0 0;
  max-width: 54ch;
  font: var(--fw-regular) var(--font-h5)/var(--lh-relaxed) var(--font-sans);
  color: var(--ink-62);
}

.opieka-granice__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.opieka-granice__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: start;
}

/* Krzyżyk: szkic markerem w miękkiej plamce akcentu.
   Poprzednia wersja rysowała go dwiema PROSTYMI liniami z pseudoelementów,
   czyli tą gładką geometrią, której zabrania AI-UI-KIT-GUIDE sekcja 0.
   Kształt siedzi teraz w inline SVG w granice.php (drżąca krzywa + drugie,
   cieńsze przejście), a tutaj zostaje sama oprawa. Pseudoelementy z
   opieka.css trzeba wygasić jawnie, bo inaczej dwie stare kreski nadal
   leżą pod nowym znakiem. */
.opieka-granice__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  margin: 0;
  border-radius: var(--radius-full);
  background: var(--color-accent-bg);
  color: var(--color-accent);
  transform: rotate(-4deg);
}
.opieka-granice__mark::before,
.opieka-granice__mark::after {
  content: none;
}
.opieka-granice__mark svg {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
}

/* Tytuł o stopień większy niż wcześniej (h4, nie h5): każdy punkt ma się
   czytać jak zdanie, które sami wypowiadamy, nie jak pozycja w regulaminie. */
.opieka-granice__title {
  margin: 0 0 var(--space-1);
  font: var(--fw-bold) var(--font-h4)/var(--lh-snug) var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.opieka-granice__desc {
  margin: 0;
  max-width: 62ch;
  font: var(--fw-regular) var(--font-body)/var(--lh-relaxed) var(--font-sans);
  color: var(--ink-62);
}

/* Domknięcie sekcji, w konwencji .fit__honest ze strony głównej: zaproszenie
   do rozstrzygnięcia sprawy przed umową, nie kolejna obietnica. */
.opieka-granice__closer {
  margin: var(--space-6) 0 0;
  max-width: 58ch;
  font: var(--fw-regular) var(--font-h5)/var(--lh-relaxed) var(--font-sans);
  color: var(--ink-90);
}

@media (max-width: 600px) {
  /* Odstępu w liście NIE ścieśniamy: przy 390 px --space-5 daje 24 px, a niżej
     opis punktu zaczynał się doklejać do tytułu następnego. */
  .opieka-granice__mark { width: 3.6rem; height: 3.6rem; }
  .opieka-granice__mark svg { width: 1.8rem; height: 1.8rem; }
}

/* ============================================================
   WYJŚCIE — „a gdy zechcesz odejść"
   Dwa fakty decyzyjne w kartach, pod nimi cztery dowody operacyjne.
   ============================================================ */

.opieka-wyjscie__head {
  text-align: center;
  margin-bottom: var(--space-5);
}
.opieka-wyjscie__head h2 {
  font: var(--fw-black) var(--font-h2)/var(--lh-tight) var(--font-sans);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}
.opieka-wyjscie__note {
  margin: 0 auto;
  max-width: 44ch;
  font: var(--fw-regular) var(--font-h5)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}

/* Górny poziom hierarchii: brak wypowiedzenia i 30 dni na zwrot. To one
   zdejmują ryzyko z decyzji, więc dostają własne karty i skalę tytułu karty. */
.opieka-wyjscie__glowne {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.opieka-wyjscie-fakt {
  min-width: 0;
  background: var(--surface-raised);
  border-radius: var(--radius-2xl);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.opieka-wyjscie-fakt__label {
  margin: 0;
  font: var(--fw-black) var(--font-h3)/var(--lh-tight) var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.opieka-wyjscie-fakt__desc {
  margin: 0;
  font: var(--fw-regular) var(--font-body)/var(--lh-relaxed) var(--font-sans);
  color: var(--ink-62);
}

/* Drugi poziom: cztery dowody, że nie trzymamy nikogo zakładnikiem dostępów.
   Panel z opieka.css zdjęty (tło, promień, wyściółka), bo karty należą teraz
   do dwóch faktów powyżej. Bez tego trzy warstwy paneli jedna w drugiej.

   Jedna kolumna, nie siatka 2×2. Siatkę sprawdziłem na zrzucie: punkt
   o licencjach wtyczek jest trzy razy dłuższy od pozostałych, więc w dwóch
   kolumnach zostawiał dużą dziurę pod lewą kolumną, a całość i tak była
   wyższa (309 px kontra 232 px w jednej kolumnie). */
.opieka-wyjscie__list {
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* Wcięcie w rem, nie w tokenie odstępu: token jest płynny i przy 390 px
   spadał do 12 px, czyli tyle, ile mierzy sama kreska, więc tekst dotykał
   znaku. Ten sam wzorzec co .fit-card li na stronie głównej. */
.opieka-wyjscie__item {
  padding-left: 2.4rem;
  font: var(--fw-regular) var(--font-body)/var(--lh-relaxed) var(--font-sans);
  color: var(--ink-62);
}
/* Tylko wyrównanie kreski do pierwszej linii przy nowej interlinii.
   Szerokość i kolor zostają z opieka.css, żeby nie dublować wartości. */
.opieka-wyjscie__item::before {
  top: 0.75em;
}

@media (max-width: 600px) {
  .opieka-wyjscie__glowne { grid-template-columns: 1fr; }
}