/* ============================================================
   OPIEKA — sekcja: awaria („A jeśli jednak padnie?")
   ------------------------------------------------------------
   Plik roboczy jednej sekcji, ładowany PO opieka.css, więc nadpisuje
   reguły z tamtego pliku bez !important. Powstał 2026-08-27.
   Zero hardkodów: kolory, typografia, odstępy tylko przez var(--token).
   ============================================================ */

/* ------------------------------------------------------------
   DOPRACOWANIE 2026-08-27 — co zostało zmienione i czego NIE ruszać

   Struktura zostaje: JEDEN panel na całą procedurę, oś z odręcznych numerów,
   pięć identycznych kroków. Historia tej decyzji siedzi w opieka.css i warto
   ją znać, zanim ktoś wróci do kafli:
     1. Kroki bez teł, z jedną kartą na wyróżnionym: wyglądało na przypadek.
     2. Każdy krok własną kartą: wychodziły DOKŁADNIE te same karty co
        w sekcji „co robimy" obok, tylko rozciągnięte, czyli stos kafli.
     3. Teraz: jeden panel. Procedura potrzebuje osi i ciągłości, nie
        segmentacji na pięć zamkniętych pudełek.

   Zmiany z tej rundy, wszystkie w obrębie tej struktury:
   - Numer stoi w JEDNEJ LINII WZROKU z tytułem kroku. Wcześniej wisiał
     pomiędzy tytułem a opisem, bo Mansalva ma glif cyfry nisko w polu litery
     i --font-h1 z line-height 0.9 zostawiał nad nim kilkanaście pikseli
     powietrza. Korekta jest liczona od WŁASNEGO stopnia pisma numeru, więc
     trzyma się przy każdej szerokości ekranu.
   - Krok 2 dostał zdanie z liczbą i gwiazdką. NIE dostał tła, ramki ani
     pogrubienia: sekwencja chronologiczna nie ma hierarchii (uwaga Łukasza
     2026-07-28), a pudełko w pudełku to osobny zakaz z 2026-08-27.
   - Pod panelem doszedł przypis z gwiazdką, ten sam mechanizm co w sekcji
     „czas-reakcji": pseudoelement o własnym, stałym stopniu pisma, a nie
     znak w treści.

   ⚠️ GWIAZDKA JEST BLIŹNIACZA Z .opieka-reakcja__ref I .opieka-reakcja__przypis.
      Reguły są celowo powtórzone, a nie współdzielone: obie sekcje mają
      osobne pliki robocze, a przeniesienie wspólnej klasy do opieka.css jest
      zabronione, dopóki trwa równoległa przebudowa. Gdy pliki robocze będą
      scalane z powrotem do opieka.css, te dwie pary reguł należy złączyć
      w jedną klasę. Do tego czasu ZMIANA W JEDNYM MIEJSCU WYMAGA TAKIEJ
      SAMEJ ZMIANY W DRUGIM, inaczej dwie sąsiadujące sekcje będą miały
      dwie różne gwiazdki.
   ------------------------------------------------------------ */

/* ---------- NAGŁÓWEK SEKCJI ---------- */
/* Nota schodzi z --font-h5 na --font-body, tak samo jak w sekcji obok:
   zdanie wprowadzające nie ma być większe od treści, którą wprowadza. */
.opieka-awaria__note {
  max-width: 58ch;
  font: var(--fw-regular) var(--font-body)/var(--lh-relaxed) var(--font-sans);
  color: var(--ink-62);
}

/* ---------- PANEL PROCEDURY ---------- */
/* Kolumna numeru szersza o 1rem, bo dwucyfrowa numeracja i tak kiedyś
   przyjdzie, a przy 6rem cyfra stała blisko krawędzi tekstu. */
.opieka-awaria__step {
  grid-template-columns: 7rem minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: start;
}

/* Numer: pozycja pionowa liczona od jego WŁASNEGO stopnia pisma, nie od
   wysokości wiersza tytułu. Dzięki temu korekta nie rozjeżdża się, gdy
   --font-h1 skaluje się z szerokością okna. Wartość dobrana pomiarem
   (patrz raport), nie na oko. */
.opieka-awaria__num {
  display: block;
  margin-top: -0.06em;
  line-height: 1;
}

/* ---------- KROK ---------- */
/* Tytuł i opis to dwa stopnie tego samego rejestru, i tylko dwa. Żadnych
   ikon, cytatów, plakietek ani paneli w środku kroku.
   Odstęp między krokami (--space-5) i szerokość opisu (62ch) zostają takie,
   jakie były: obie wartości były już raz zmierzone przy poprzedniej rundzie
   i wydłużenie opisów niczego w nich nie zmienia. Świadomie ich nie ruszam,
   żeby nie zamieniać poprawki treści na przypadkową zmianę rytmu. */
.opieka-awaria__title {
  margin: 0 0 var(--space-1);
}
/* Zdanie z jedyną liczbą w sekcji. Świadomie BEZ font-weight, bez koloru
   i bez tła: ma się czytać jako część tego samego akapitu, a wyróżnia je
   sama treść i gwiazdka. */
.opieka-awaria__ref::after {
  content: "*";
  font-size: var(--font-caption);
  font-weight: var(--fw-bold);
  line-height: 1;
  vertical-align: 0.25em;
  color: var(--color-accent);
  margin-left: 0.15em;
}

/* ---------- PRZYPIS POD PANELEM ---------- */
/* Rangą niżej niż procedura (przygaszony kolor), ale ROZMIAREM taki sam jak
   proza w sekcji. Zejście do --font-caption zrobiłoby z zobowiązania czasowego
   drobny druk.
   Gwiazdka jako pseudoelement, nie znak w treści: w treści dziedziczyła
   stopień pisma akapitu i przy szerokim ekranie puchła razem z nim.
   top w em od WŁASNEGO rozmiaru, więc znacznik siedzi na wysokości
   pierwszego wiersza niezależnie od tego, jak ten wiersz się złamie.

   PADDING ZEROWY, GWIAZDKA WISI NA ZEWNĄTRZ (uwaga Łukasza 2026-08-27).
   Tekst przypisu stoi na tej samej osi pionowej co panel procedury nad nim,
   a gwiazdka wychodzi POZA kolumnę w lewo, więc niczego nie przesuwa i nie
   rzuca się w oczy. Reguła jest bliźniacza z .opieka-reakcja__przypis::before
   i MA POZOSTAĆ IDENTYCZNA: jedna gwiazdka wisząca, a druga w linii tekstu
   w dwóch sąsiadujących sekcjach byłaby dokładnie tą niespójnością, której
   Łukasz wypatruje. */
.opieka-awaria__przypis {
  position: relative;
  margin: var(--space-3) 0 0;
  padding-left: 0;
  max-width: 68ch;
  font: var(--fw-regular) var(--font-body)/var(--lh-relaxed) var(--font-sans);
  color: var(--ink-50);
}
.opieka-awaria__przypis::before {
  content: "*";
  position: absolute;
  right: calc(100% + var(--space-1));
  top: 0.35em;
  font-size: var(--font-caption);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-accent);
}

/* ---------- TELEFON ---------- */
/* Poniżej 480 px opieka.css zwęża kolumnę numeru do 4.4rem. Zostawiamy to
   zwężenie, ale bez naszej szerszej kolumny z desktopu, inaczej cyfra
   zabierałaby jedną piątą szerokości ekranu. */
@media (max-width: 480px) {
  .opieka-awaria__step {
    grid-template-columns: 4.8rem minmax(0, 1fr);
    column-gap: var(--space-2);
  }
}