/* ============================================================
   OPIEKA — sekcja: rozpoznanie (sześć scenariuszy awarii)
   ------------------------------------------------------------
   Plik roboczy jednej sekcji, ładowany PO opieka.css, więc nadpisuje
   reguły z tamtego pliku bez !important. Powstał 2026-08-27.
   Stare reguły `.opieka-scen` i `.opieka-kwal` zostają w opieka.css,
   bo tamte pliki PHP jeszcze istnieją, tylko nie są wołane.
   Zero hardkodów: kolory, typografia, odstępy tylko przez var(--token).
   ------------------------------------------------------------
   ZASADY PORZĄDKU, których ten plik pilnuje. Powstały z uwagi Łukasza
   o wersji łączonej („totalny chaos, nie wiem, gdzie mam patrzeć") i są
   ważniejsze niż jakikolwiek pomysł na ozdobienie tej sekcji:

     1. JEDNO TŁO NA KAFEL. Żadnego panelu w panelu. Poprzednia wersja
        miała tło karty i tło zagnieżdżonego panelu ryzyka, przez co oko
        widziało dwa pudełka tam, gdzie jest jedna myśl.
     2. DWA REJESTRY W KAFLU, nie trzy: awaria odręcznie w akcencie,
        odpowiedź zwykłym tekstem. Etykieta jest trzecim elementem, ale
        celowo najmniejszym, żeby nie konkurowała.
     3. WSZYSTKIE KAFLE IDENTYCZNE. Żaden nie jest wyróżniony, bo sekcja
        ma być listą do przebiegnięcia wzrokiem, a nie rankingiem.
     4. ZERO IKON. Ikony person odeszły razem z personami.
     5. JEDEN NOŚNIK RELACJI problem-odpowiedź: etykieta. Bez strzałki
        obok niej, bo to byłoby dwa razy to samo.

   Na co pada wzrok pierwszy: nagłówek sekcji, a zaraz po nim czerwone
   odręczne zdanie w lewym górnym kaflu. To jedyne dwa miejsca z akcentem
   i największym stopniem pisma w całej sekcji.
   ============================================================ */

/* ---------- Nagłówek sekcji ----------
   Wyśrodkowany, jak w pozostałych sekcjach opieki (zakres, poza-pakietem,
   pula). Hero nad nią jest wyrównane do lewej, więc środek dodatkowo
   oddziela ją od nagłówka strony. */
.opieka-rozpoznanie__head {
  text-align: center;
  margin-bottom: var(--space-5);
}
.opieka-rozpoznanie__head h2 {
  margin: 0 auto var(--space-2);
  max-width: 20ch;
  font: var(--fw-black) var(--font-h2)/var(--lh-snug) var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.opieka-rozpoznanie__note {
  margin: 0;
  font: var(--fw-regular) var(--font-h5)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}

/* ---------- Siatka sześciu kafli ----------
   Dwie kolumny, nie trzy. W kolumnie treści 768 px trzy kafle dają po
   234 px, a przy odręcznym kroju to około osiemnastu znaków w wierszu
   i zdanie o białym ekranie łamie się na pięć wierszy. Dwie kolumny dają
   368 px na kafel i 304 px na tekst, czyli dwa wiersze na zdanie.
   Ten sam podział miała stara sekcja `scenariusze` i to jest jedyna
   rzecz, którą z niej przejmujemy bez zmian. */
.opieka-rozpoznanie__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.opieka-rozpoznanie__item {
  background: var(--surface-raised);
  border-radius: var(--radius-2xl);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
}

/* Awaria: jedyny element odręczny i jedyny w akcencie. Rozmiar z tokena
   --font-h4, nie z własnego clamp, bo w kaflu 368 px większy stopień
   robi z dwóch wierszy cztery. */
.opieka-rozpoznanie__problem {
  margin: 0;
  font: var(--fw-regular) var(--font-h4)/1.3 var(--font-decorative);
  color: var(--color-accent);
  /* Wyważenie wierszy: bez tego w kaflach zostawały sierotne wyrazy
     („kupić.", „Od miesiąca."), a przy sześciu kaflach obok siebie taki
     rząd ogonków jest widoczny od razu. */
  text-wrap: balance;
}
/* Etykieta celowo najmniejszym stopniem i przygaszona: ma oddzielić dwa
   zdania, a nie zabrać uwagę. --ink-48 to 0,55 alfy, czyli 5,39:1 na tle
   kafla, powyżej progu AA. */
.opieka-rozpoznanie__label {
  margin: var(--space-3) 0 var(--space-1);
  font: var(--fw-semibold) var(--font-caption)/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-48);
}
.opieka-rozpoznanie__solution {
  margin: 0;
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--color-ink);
}

/* ---------- Telefon ----------
   Jedna kolumna poniżej 768 px. Przy 390 px kafel ma 318 px, więc dwie
   kolumny dałyby po 143 px, czyli mniej niż dziesięć znaków w wierszu. */
@media (max-width: 768px) {
  .opieka-rozpoznanie__grid { grid-template-columns: 1fr; }
}