/* ============================================
   Sternal.IT - Podstrona: Opieka informatyczna (Rumia)
   Rozszerzenie style.css + cyber.css. Używa tokenów z :root.
   Dziedziczy: .breadcrumb, .hero--sub, .section, .prose,
   .prose-section, .section--alt, .cta-aside (z cyber.css).
   ============================================ */

/* --- Hero: H1 na wąskich ekranach ---
   .hero__title ze style.css ma stałe --fs-3xl (40px). Słowo „informatyczna"
   przy tym rozmiarze nie mieści się w 390px i wychodzi poza krawędź
   (body ma overflow-x:hidden, więc zamiast paska przewijania tekst jest
   po prostu ucinany). Skalujemy nagłówek do szerokości ekranu; od 768px
   style.css i tak podnosi go do --fs-4xl, więc nadpisujemy tylko dół zakresu. */
@media (max-width: 767px) {
  .hero--sub .hero__title {
    font-size: clamp(1.75rem, 1.1rem + 3.2vw, var(--fs-3xl));
    overflow-wrap: break-word;
  }
}

/* --- SEKCJA 1: sygnały „po czym poznasz" --- */
/* Lista wąskich pozycji - ragged-right, bez justowania (krótkie wiersze) */
.signals {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
  margin: var(--spacing-lg) 0;
}
@media (min-width: 700px) {
  .signals {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm) var(--spacing-lg);
  }
}
.signal {
  position: relative;
  padding-left: var(--spacing-lg);
  color: var(--color-text);
  line-height: 1.6;
  text-wrap: pretty;
}
/* Znacznik: kreska w kolorze akcentu - sygnał, nie ptaszek (to nie jest lista zalet) */
.signal::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: 2px;
  background-color: var(--color-accent);
}

/* --- CTA domykające sekcję (miękkie, prowadzi dalej po stronie) --- */
.section-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-lg);
}

/* --- SEKCJA 2: karty „co się dzieje w tle" --- */
.care-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}
@media (min-width: 640px) {
  .care-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .care-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.care-card {
  padding: var(--spacing-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--color-accent);
  transition: border-color var(--transition);
}
/* Tytuły kart mają 1-2 wiersze; wyrównanie do siatki, żeby rząd był równy */
.care-grid > .care-card {
  align-self: stretch;
}
.care-card:hover {
  border-color: var(--color-accent);
}
.care-card__title {
  font-size: var(--fs-md);
  color: var(--color-heading);
  margin-bottom: var(--spacing-xs);
  text-wrap: balance;
}
.care-card p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
  text-wrap: pretty;
}

/* --- GRAFIKA 1: rytm pilnowania (codziennie / co miesiąc / co kwartał) --- */
.rhythm {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0 0;
  padding: var(--spacing-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
@media (min-width: 700px) {
  .rhythm {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
  }
}
.rhythm__col {
  display: grid;
  gap: var(--spacing-sm);
  align-content: start;
}
/* Pionowa przegroda między kolumnami (desktop) */
@media (min-width: 700px) {
  .rhythm__col + .rhythm__col {
    padding-left: var(--spacing-lg);
    border-left: 1px solid var(--color-border);
  }
}
.rhythm__when {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-accent-hover);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.rhythm__list {
  list-style: none;
  display: grid;
  gap: var(--spacing-xs);
}
.rhythm__list li {
  position: relative;
  padding-left: var(--spacing-md);
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.rhythm__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
}
/* Puenta sekcji - stoi POD ramką siatki, nie w niej (wariant B, decyzja
   właściciela 2026-08-02: podpis w ramce czytał się jak stopka tabeli).
   Selektor .prose > … jest konieczny: .prose > p ma wyższą specyficzność
   niż sama klasa i inaczej narzuciłoby justowanie, które rozjeżdża
   odstępy między słowami przy wyśrodkowanym tekście. */
.prose > .rhythm-outro {
  max-width: 900px;
  margin: var(--spacing-lg) auto 0;
  text-align: center;
  hyphens: manual;
  font-size: var(--fs-lg);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-heading);
  text-wrap: balance;
}
.rhythm-outro strong {
  font-weight: 700;
}

/* --- SEKCJA 3: układ dwukolumnowy (tekst + ścieżka zgłoszenia) --- */
.fault {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}
@media (min-width: 900px) {
  .fault {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--spacing-2xl);
    align-items: start;
  }
}
/* Akapity w węższej kolumnie: justowanie zostaje, ale hyphens muszą działać,
   inaczej przy tej szerokości robią się rzeki między słowami.
   Selektor .prose > .fault … bo .prose > p ma wyższą specyficzność. */
.prose > .fault .fault__text p {
  color: var(--color-text);
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}
.prose > .fault .fault__text p + p {
  margin-top: var(--spacing-md);
}
@media (max-width: 560px) {
  .prose > .fault .fault__text p {
    text-align: left;
    hyphens: manual;
  }
}

/* Ścieżka zgłoszenia - mniejsza skala niż .start (sekcja 5), żeby obie osie
   nie wyglądały identycznie: numery 3rem zamiast 4rem, opisy w fs-sm. */
.path {
  list-style: none;
  counter-reset: path;
  display: grid;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.path__step {
  counter-increment: path;
  position: relative;
  padding-left: calc(var(--spacing-xl) + var(--spacing-sm));
}
.path__step::before {
  content: counter(path);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-accent);
  border-radius: 50%;
  z-index: 1;
}
.path__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--spacing-xl) / 2 - 1px);
  top: var(--spacing-xl);
  height: calc(100% - var(--spacing-xl) + var(--spacing-lg));
  width: 2px;
  background-color: var(--color-border);
}
.path__title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 2px;
  padding-top: 0.35rem;
}
.path__step p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
  text-wrap: pretty;
}

/* --- SEKCJA 4: modele współpracy --- */
.models {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}
@media (min-width: 860px) {
  .models {
    grid-template-columns: repeat(3, 1fr);
  }
}
.model {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), transform var(--transition);
}
.model:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.model__title {
  font-size: var(--fs-lg);
  color: var(--color-heading);
  margin-bottom: var(--spacing-xs);
}
.model__lead {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-accent-hover);
  margin-bottom: var(--spacing-sm);
}
/* Justowanie w kartach na życzenie właściciela (2026-08-02). Kolumna ma ~40 znaków,
   więc hyphens:auto jest tu obowiązkowe - bez dzielenia wyrazów polskie długie słowa
   rozpychają odstępy i robią rzeki (por. CLAUDE.md §11.4). */
.model__text {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
  text-align: justify;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  margin-bottom: var(--spacing-md);
}
/* „Dla kogo" przyklejone do dołu karty - równa linia mimo różnej długości opisów */
.model__for {
  margin-top: auto;
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text);
  text-align: center;
  text-wrap: pretty;
}
/* Wąska kolumna na małych ekranach schodzi poniżej 32 znaków - justowanie wyłączone */
@media (max-width: 560px) {
  .model__text {
    text-align: left;
    hyphens: manual;
  }
}

/* --- SEKCJA 4b: zakres usług (podlista pod modelami) --- */
.scope {
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}
.scope__title {
  font-size: var(--fs-xl);
  color: var(--color-heading);
  margin-bottom: var(--spacing-md);
}
.scope__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}
@media (min-width: 860px) {
  .scope__list {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md) var(--spacing-2xl);
  }
}
.scope__list li {
  position: relative;
  padding-left: var(--spacing-lg);
  color: var(--color-text-muted);
  line-height: 1.6;
  text-wrap: pretty;
}
.scope__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
  font-weight: 700;
}
.scope__list strong {
  color: var(--color-heading);
  font-weight: 600;
}

/* --- SEKCJA 5: kroki startu współpracy --- */
/* Pionowa oś z numerami; na desktopie linia łączy kolejne kroki */
.start {
  list-style: none;
  counter-reset: start;
  display: grid;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}
.start__step {
  counter-increment: start;
  position: relative;
  padding-left: calc(var(--spacing-2xl) + var(--spacing-sm));
}
.start__step::before {
  content: counter(start);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--spacing-2xl);
  height: var(--spacing-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-accent);
  border-radius: 50%;
  z-index: 1;
}
/* Linia łącząca numery - od dołu numeru do numeru następnego kroku.
   Rozciąga się na wysokość kroku + odstęp z grid gap, więc oś jest ciągła
   niezależnie od tego, ile wierszy ma opis. */
.start__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--spacing-2xl) / 2 - 1px);
  top: var(--spacing-2xl);
  height: calc(100% - var(--spacing-2xl) + var(--spacing-lg));
  width: 2px;
  background-color: var(--color-border);
}
.start__title {
  font-size: var(--fs-md);
  color: var(--color-heading);
  margin-bottom: var(--spacing-xs);
  padding-top: 0.4rem;
}
.start__step p {
  color: var(--color-text-muted);
  line-height: 1.6;
  text-wrap: pretty;
}

/* --- Sekcja CTA: nagłówek + ramka po lewej, formularz po prawej --- */
/* Układ identyczny jak na cyber.css: trzy dzieci gridu (.cta-main,
   .cta-aside, .cta-form), więc kolumny i wiersze przypisujemy jawnie -
   bez tego formularz zawinąłby się do nowego wiersza pod nagłówkiem.
   Kolumny wracają do 1fr 1fr (wcześniej 1.35fr 1fr pod sam tekst),
   bo prawa kolumna niesie teraz formularz, nie samą kartę kontaktową. */
@media (min-width: 768px) {
  .cta-main {
    grid-column: 1;
    grid-row: 1;
  }

  .cta-aside {
    grid-column: 1;
    grid-row: 2;
  }

  .cta-form {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: var(--spacing-3xl);
  }
}
.cta-main .contact__lead {
  text-wrap: pretty;
}
.cta-main .section__title {
  text-wrap: balance;
}