/* ============================================================
   OPIEKA — sekcja: przewaga
   ------------------------------------------------------------
   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).
   ------------------------------------------------------------
   PRZEBUDOWA 2026-08-27. Hierarchia sekcji, od najmocniejszego elementu:

     1. „Znajomość serwisu od środka" — Mansalva, czerwień, największa
        typografia w sekcji (większa od h2). To puenta Łukasza i ma być
        widziana pierwsza, nawet przy przewijaniu bez czytania.
     2. Nagłówek sekcji.
     3. Trzy konsekwencje, celowo ciche: to dopowiedzenie, nie licytacja.

   Komórka „Godziny" jest przygaszona SPECJALNIE. Gdyby obie miały tę samą
   wagę, wróciłaby dokładnie ta płaskość, którą przebudowa usuwa.
   ============================================================ */

/* ---------- Rytm sekcji ---------- */
.opieka-przewaga__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ---------- Nagłówek + jedno wprowadzenie ---------- */
.opieka-przewaga__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.opieka-przewaga__title {
  margin: 0;
  font: var(--fw-black) var(--font-h2)/var(--lh-snug) var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.opieka-przewaga__intro {
  margin: 0;
  max-width: 48ch;
  font: var(--fw-regular) var(--font-h5)/var(--lh-relaxed) var(--font-sans);
  color: var(--ink-62);
}

/* ---------- Waga: puenta rozłożona na dwie komórki ----------
   Zawsze jedna pod drugą, nigdy obok siebie. Kolumna treści ma 768 px,
   więc dwie komórki w rzędzie dałyby po ~370 px: lewa z jednym słowem,
   prawa z trzema wierszami Mansalvy, czyli kafle o różnej wysokości
   i puenta połamana w środku. Pion daje też właściwą kolejność czytania:
   najpierw rzecz tania, potem rzecz nie do kupienia. */
.opieka-przewaga__waga {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.opieka-przewaga__cell {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-2xl);
}
/* Pierwsza komórka jako jeden wiersz rachunku: rzecz z lewej, jej etykieta
   z prawej. Pion zostawiał obok słowa „Godziny" pół szerokości kolumny pustego
   kafla, co wyglądało na niedokończony układ, a nie na kontrast.
   row-reverse, nie zmiana kolejności w HTML: czytnik ekranu ma dostać najpierw
   warunek („można dosypać"), a potem rzecz, tak jak brzmi zdanie Łukasza.
   Kluczowe jest to, że OBIE wartości startują w tej samej osi X, bo dopiero
   wtedy „Godziny" i „Znajomość serwisu od środka" da się porównać wzrokiem.
   flex-wrap, bo na wąskim ekranie etykieta i wartość nie mieszczą się w rzędzie. */
.opieka-przewaga__cell--dokupisz {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-3);
  background: var(--surface-raised);
}
.opieka-przewaga__cell-label {
  margin: 0 0 var(--space-2);
  font: var(--fw-semibold) var(--font-eyebrow)/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.opieka-przewaga__cell-value {
  margin: 0;
}

/* Komórka pierwsza: towar. Cicha, mała, na zwykłej powierzchni karty.
   --ink-48 (0,55 alfy), nie --ink-50: przy tym rozmiarze liter 0,50 schodzi
   poniżej progu WCAG AA na tle #121212. Patrz komentarz przy tokenie.
   Zmierzone w przeglądarce: etykieta 5,39:1, „Godziny" 6,55:1. */
.opieka-przewaga__cell--dokupisz .opieka-przewaga__cell-label {
  margin-bottom: 0;
  text-align: right;
  color: var(--ink-48);
}
.opieka-przewaga__cell--dokupisz .opieka-przewaga__cell-value {
  font: var(--fw-bold) var(--font-h3)/var(--lh-snug) var(--font-sans);
  color: var(--ink-62);
  letter-spacing: -0.01em;
}

/* Komórka druga: to, po co klient tu jest. Czerwony tint, cień i skok skali.
   Jedyne miejsce w sekcji z Mansalvą i jedyne z tłem w akcencie. */
.opieka-przewaga__cell--nie {
  background: var(--color-accent-bg);
  box-shadow: var(--shadow-lg);
}
.opieka-przewaga__cell--nie .opieka-przewaga__cell-label {
  color: var(--color-accent);
}
.opieka-przewaga__cell-value--hand {
  /* --font-h1 (32 → 52 px), czyli o stopień WYŻEJ niż --font-h2 nagłówka tej
     sekcji. Puenta ma być największą typografią w sekcji, także większą od jej
     tytułu, i dokładnie po to jest tu przeskok o jeden szczebel skali.
     Nie --font-display (40 → 64 px): przy 64 px wiersz ma ~770 px i nie wchodzi
     w 672 px kafla, czyli traci jednowierszową formę. */
  font: var(--fw-regular) var(--font-h1)/1.15 var(--font-decorative);
  color: var(--color-accent);
  /* Bez max-width: zmierzone 626 px przy 52 px kroju, a w kaflu jest 672 px,
     więc na desktopie puenta stoi w JEDNYM wierszu i to jest jej najmocniejsza
     forma. Na telefonie łamie się po „serwisu", bo w PHP stoi twarda spacja
     między „od" i „środka" (inaczej zostawał sierotny wyraz w drugim wierszu). */
  transform-origin: left center;
}
/* reveal.css zostawia .hw-reveal w rotate(-2deg). Na krótkiej notce to urok,
   ale ten wiersz ma 626 px, więc przy 2 stopniach jego prawy koniec wędruje
   o ~22 px i zjada padding kafla. Stąd 1 stopień: przechył zostaje, kolizja
   znika. Wyższa specyficzność niż reveal.css, bez !important. */
html.reveal-on .opieka-przewaga__cell-value--hand.hw-reveal.is-visible {
  transform: rotate(-1deg) translateY(0) scale(1);
}

/* ---------- Trzy konsekwencje ----------
   Bez kafli i bez odręcznych numerów, które miała poprzednia wersja:
   numeracja powtarzała sąsiednią sekcję „Jak zacząć", a trzy dodatkowe
   napisy Mansalvą odbierały puencie status jedynego akcentu odręcznego.
   Zerujemy tu reguły kafli z opieka.css, bo nazwy klas zostały te same. */
.opieka-przewaga__skutki {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.opieka-przewaga__skutki-label {
  margin: 0;
  font: var(--fw-semibold) var(--font-eyebrow)/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.opieka-przewaga__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.opieka-przewaga__skutek {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  /* wyzerowanie kafla z opieka.css */
  padding: 0;
  background: none;
  border-radius: 0;
  counter-increment: none;
}
.opieka-przewaga__skutek::before {
  content: none;
}
.opieka-przewaga__ptaszek {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  height: calc(var(--font-h5) * var(--lh-snug));
  color: var(--color-accent);
}
.opieka-przewaga__skutek-title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font: var(--fw-bold) var(--font-h5)/var(--lh-snug) var(--font-sans);
  color: var(--color-ink);
}
.opieka-przewaga__skutek-desc {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  max-width: 56ch;
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}

/* ---------- Telefon ---------- */
@media (max-width: 768px) {
  .opieka-przewaga__grid { gap: var(--space-5); }
  .opieka-przewaga__cell { padding: var(--space-4); }
  .opieka-przewaga__cell--dokupisz { padding-block: var(--space-3); }
  .opieka-przewaga__cell-value--hand { line-height: 1.2; }
}