/* ==========================================================================
   BACKUP I OCHRONA DANYCH - /backup-i-ochrona-danych
   Środkowa część podstrony (między hero a formularzem): oś czasu awarii,
   zasada 3-2-1-0, trzy pytania + CTA.

   Wszystkie klasy mają prefiks `stn-` i są SAMODZIELNE - nie dziedziczą
   z .prose/.models/.section i nie kolidują z motywem.
   Hero, formularz, FAQ i stopka korzystają ze stylów motywu (style.css)
   i NIE są tu ruszane.

   Font: motyw nie ładuje Google Fonts (systemowy stack) - używamy tokenów
   --font-family i --font-mono ze style.css zamiast Manrope/JetBrains Mono.
   ========================================================================== */

.stn-backup {
  --bg: #0a1122;
  --bg2: #080e1c;
  --card: #0d1526;
  --line: rgba(255, 255, 255, .07);
  --blue: #3b82f6;
  --amber: #e0a355;
  --fg: #e7ecf5;
  --mut: #9aa7bf;
  --mut2: #8593ad;
  font-family: var(--font-family);
  color: var(--fg);
  background: var(--bg);
}

.stn-backup * { box-sizing: border-box }

.stn-backup h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.08;
}

.stn-backup p { margin: 0; text-wrap: pretty }

/* Tło sekcji idzie na pełną szerokość (jak .section w motywie), ale TREŚĆ
   trzyma się kontenera 1120px - tak jak wszystkie pozostałe podstrony.
   Kod od agenta miał sztywne 88px/72px na pełnej szerokości okna, przez co
   sekcje rozjeżdżały się z resztą serwisu. */
.stn-block {
  padding: var(--spacing-3xl) 0;
  border-bottom: 1px solid var(--line);
}

.stn-block > * {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

.stn-block--alt { background: var(--bg2) }

.stn-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.stn-eyebrow--amber { color: var(--amber) }
.stn-eyebrow--blue { color: var(--blue) }

/* --- 1. oś czasu --- */
.stn-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
  margin-bottom: 72px;
}

.stn-intro h2 {
  font-size: 56px;
  line-height: 1.06;
  letter-spacing: -.025em;
}

.stn-intro-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 6px;
}

/* Akapity czytane ciągiem: justowanie + dzielenie wyrazów (CLAUDE.md §11.4).
   `hyphens:auto` jest przy justowaniu OBOWIĄZKOWE - bez niego polskie długie
   słowa rozpychają odstępy międzywyrazowe i robią rzeki. */
.stn-intro-body p {
  font-size: 19px;
  line-height: 1.65;
  color: var(--mut);
  text-align: justify;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

/* Puenta sekcji. Kursywa broni się tu typograficznie, bo zdanie NIESIE CYTATY
   („mamy kopię?”, „chyba tak”) - to jedyny wyjątek od reguły z sesji 08-07,
   gdzie kursywę na leadzie „O mnie” odrzucono (polska typografia rezerwuje ją
   dla tytułów i cytatów, a pochylenie gorzej czyta się na ciemnym tle).
   ŻEBY ZDJĄĆ KURSYWĘ: usuń `font-style: italic` - reszta wyróżnienia
   (kolor bursztynowy, stopień pisma, grubość) zostaje bez zmian. */
.stn-punch {
  font-size: 21px !important;
  font-weight: 700;
  line-height: 1.45 !important;
  color: var(--amber) !important;
  margin-top: 6px !important;
  font-style: italic;
  text-align: left;
  text-wrap: pretty;
  hyphens: manual;
}

.stn-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}

.stn-timeline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  height: 2px;
  background: linear-gradient(90deg, #1e3a8a 0%, var(--blue) 55%, var(--amber) 100%);
}

.stn-step {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-right: 40px;
}

.stn-step:last-child { padding-right: 0 }

.stn-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 6px var(--bg), 0 0 0 8px rgba(59, 130, 246, .35);
  margin-top: 20px;
}

.stn-step--late .stn-dot {
  background: var(--amber);
  box-shadow: 0 0 0 6px var(--bg), 0 0 0 8px rgba(224, 163, 85, .3);
}

.stn-time {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--blue);
}

.stn-step--late .stn-time { color: var(--amber) }

.stn-step-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
}

.stn-step-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #7c89a3;
}

/* --- 2. zasada 3-2-1-0 --- */
.stn-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}

.stn-head h2 { font-size: 52px; max-width: 18ch }

.stn-head p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--mut);
  max-width: 38ch;
}

.stn-rule {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.stn-rule-card {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stn-rule-card--zero {
  background: linear-gradient(180deg, #16223c 0%, var(--card) 100%);
  border-color: rgba(224, 163, 85, .35);
}

/* Wyrównanie do linii bazowej działa tylko, gdy KAŻDY podpis mieści się
   w jednej linii. „kopia poza firmą” i „błędów przy odtwarzaniu” łamią się
   na dwie, więc przy `baseline` ich pierwsza linia równała się z dołem cyfry
   i cały blok wyglądał na przesunięty w dół względem sąsiadów.
   `flex-end` trzyma dół podpisu na dole cyfry niezależnie od liczby linii. */
.stn-rule-top {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  min-height: 76px;
}

.stn-digit {
  font-size: 88px;
  line-height: .85;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -.05em;
}

.stn-rule-card--zero .stn-digit { color: var(--amber) }

.stn-rule-label {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.stn-rule-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mut2);
}

.stn-note {
  margin-top: 28px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: var(--card);
  border-left: 3px solid var(--amber);
  border-radius: 0 10px 10px 0;
  padding: 26px 30px;
}

.stn-note-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--amber);
  text-transform: uppercase;
  padding-top: 4px;
  white-space: nowrap;
}

/* Bez `max-width` - akapit wypełnia ramkę do końca.
   Kod agenta miał tu 80ch, co ucinało tekst na ~80 znakach i zostawiało pustą
   rynnę po prawej, mimo że ramka jest szersza (CLAUDE.md §11.3: measure nie
   jest narzędziem layoutu). Szerokość i tak ogranicza kontener 1120px. */
.stn-note p {
  font-size: 17px;
  line-height: 1.65;
  color: #c3cddf;
  text-align: justify;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

/* --- 4. pas dowodów „Odzyskane" ---
   Forma świadomie INNA niż wszystko powyżej (nie karty, nie oś, nie pytania):
   dwa bloki oddzielone cienką linią, bez tła i bez obwódek. Ma czytać się jak
   notatka z roboty, nie jak kolejny moduł oferty.
   Umiejscowienie: tuż przed formularzem - dowód działa najmocniej przed prośbą
   o kontakt. */
/* Tło główne, NIE --bg2: sekcja wyżej ma prawą kolumnę na --bg2, a sekcja CTA
   pod spodem ma własne ciemne tło z motywu. Trzy ciemniejsze pasy z rzędu
   zlałyby się w jeden blok bez granic. */
.stn-proof {
  background: var(--bg);
}

/* Mniejszy niż H2 sekcji 2 i 3 (52/50px) - ten pas jest domknięciem narracji,
   nie kolejnym rozdziałem, więc nie może z nimi konkurować na głos. */
/* ⚠️ Selektor MUSI być `.stn-backup h2.stn-proof-heading` — sama klasa przegrywa
   z `.stn-backup h2 { margin: 0 }` wyżej (element+klasa bije klasę), przez co
   margines pod nagłówkiem nie działał i tekst doklejał się do bloków.
   Odstęp równy `--spacing-2xl`, jak `.section__lead` w reszcie serwisu. */
/* ⚠️ BEZ `max-width`. Pierwsza wersja miała tu 22ch „żeby złamać nagłówek na dwie
   linie" - guard zgłosił to jako błąd §11.3, a ja odrzuciłem zgłoszenie jako
   fałszywy alarm. Guard miał rację: `max-width` na nagłówku zwęża CAŁY blok
   (DevTools: 448px przy kontenerze 1072px), więc nagłówek wisiał wąskim słupkiem
   nad siatką idącą na pełną szerokość. Łamanie wiersza załatwia `text-wrap:
   balance`, które NIE rusza szerokości bloku.
   Do porównania: `.section__title` w reszcie serwisu też nie ma `max-width`. */
.stn-backup h2.stn-proof-heading {
  font-size: 34px;
  line-height: 1.15;
  margin-bottom: var(--spacing-2xl);
  text-wrap: balance;
}

.stn-proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.stn-proof-item {
  padding: 0 var(--spacing-2xl) 0 0;
  border-right: 1px solid var(--line);
}

.stn-proof-item:last-child {
  padding: 0 0 0 var(--spacing-2xl);
  border-right: none;
}

.stn-proof-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 12px;
  color: var(--fg);
  text-wrap: balance;
}

.stn-proof-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--mut2);
  text-align: justify;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

/* --- 3. trzy pytania + CTA ---
   Ta sekcja ma dwa TŁA stykające się na środku, więc siatka musi iść przez
   całą szerokość okna. Wyrównanie do kontenera robią wtedy paddingi boczne
   liczone z wolnej przestrzeni: max(padding, (100vw - 1120px) / 2). */
.stn-final {
  display: grid;
  grid-template-columns: 1fr 1fr;
  --stn-gutter: max(var(--spacing-md), (100vw - var(--max-width)) / 2);
}

.stn-final-left {
  padding: var(--spacing-3xl) var(--spacing-2xl) var(--spacing-3xl) var(--stn-gutter);
}

.stn-final-left h2 {
  font-size: 50px;
  line-height: 1.1;
  margin-bottom: 22px;
}

.stn-final-left p {
  font-size: 19px;
  line-height: 1.65;
  color: var(--mut);
  margin-bottom: 40px;
  text-align: justify;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

.stn-cta {
  display: inline-block;
  background: #2563eb;
  color: #fff;
  text-decoration: none;
  font-size: 17px;
  font-weight: 700;
  padding: 18px 34px;
  border-radius: 9px;
  transition: background .15s ease;
}

.stn-cta:hover,
.stn-cta:focus {
  background: #1d4ed8;
  color: #fff;
}

.stn-cta-sub {
  margin-top: 18px;
  font-size: 15px;
  color: #6f7d96;
}

.stn-final-right {
  background: var(--bg2);
  padding: var(--spacing-2xl) var(--stn-gutter) var(--spacing-2xl) var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stn-q {
  padding: 26px 0;
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--line);
}

.stn-q:last-child { border-bottom: none }

.stn-q-num {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--blue);
  padding-top: 5px;
}

.stn-q-title {
  font-size: 23px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
}

.stn-q-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--mut2);
}

@media (max-width: 1024px) {
  .stn-block { padding: var(--spacing-2xl) 0 }
  .stn-intro { grid-template-columns: 1fr; gap: 28px; margin-bottom: 56px }
  .stn-intro h2 { font-size: 40px }
  .stn-head h2, .stn-final-left h2 { font-size: 38px }
  .stn-backup h2.stn-proof-heading { font-size: 28px; margin-bottom: var(--spacing-xl) }
  .stn-timeline { grid-template-columns: repeat(2, 1fr); gap: 40px 24px }
  .stn-timeline::before { display: none }
  .stn-step { padding-right: 0 }
  .stn-rule { grid-template-columns: repeat(2, 1fr) }
  /* Jedna kolumna = tła nie stykają się już bokami, więc padding wraca
     do zwykłego marginesu kontenera. */
  .stn-final { grid-template-columns: 1fr }
  .stn-final-left {
    padding: var(--spacing-2xl) var(--stn-gutter) var(--spacing-lg);
  }
  .stn-final-right {
    padding: var(--spacing-md) var(--stn-gutter) var(--spacing-2xl);
  }
  /* Jedna kolumna: pionowa kreska zamienia się w poziomą między blokami. */
  .stn-proof-grid { grid-template-columns: 1fr; gap: var(--spacing-lg) }
  .stn-proof-item {
    padding: 0 0 var(--spacing-lg) 0;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .stn-proof-item:last-child {
    padding: 0;
    border-bottom: none;
  }
}

@media (max-width: 640px) {
  .stn-block { padding: var(--spacing-xl) 0 }
  .stn-intro h2 { font-size: 32px }
  .stn-head h2, .stn-final-left h2 { font-size: 30px; max-width: none }
  .stn-backup h2.stn-proof-heading { font-size: 24px; margin-bottom: var(--spacing-lg) }
  .stn-intro-body p { font-size: 17px }
  .stn-punch { font-size: 19px !important }
  .stn-timeline { grid-template-columns: 1fr; gap: 32px }
  .stn-rule { grid-template-columns: 1fr }
  .stn-digit { font-size: 68px }
  /* Cyfra 68px × line-height .85 ≈ 58px - min-height musi zejść razem z nią,
     inaczej zostaje pusty pas nad opisem. */
  .stn-rule-top { min-height: 58px }
  .stn-note { flex-direction: column; gap: 12px; padding: 22px }
  .stn-final-left { padding: var(--spacing-xl) var(--spacing-md) var(--spacing-lg) }
  .stn-final-right { padding: var(--spacing-sm) var(--spacing-md) var(--spacing-xl) }
  .stn-cta { display: block; text-align: center }

  /* Poniżej 640px kolumna schodzi do ~32 znaków - justowanie robi tam rzeki
     zamiast równej krawędzi (CLAUDE.md §11.4). */
  .stn-intro-body p,
  .stn-final-left p,
  .stn-note p,
  .stn-proof-desc {
    text-align: left;
    hyphens: manual;
  }
}