/* ============================================
   Sternal.IT - Podstrona: Cyberbezpieczeństwo dla firm
   Rozszerzenie style.css. Używa tokenów z :root.
   ============================================ */

/* --- Breadcrumb --- */
.breadcrumb {
  padding-top: calc(var(--header-height) + var(--spacing-md));
  padding-bottom: var(--spacing-sm);
  background-color: var(--color-bg);
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.breadcrumb__list li:not(:last-child)::after {
  content: "\203A";
  margin-left: var(--spacing-xs);
  color: var(--color-border);
}
.breadcrumb__list a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition);
}
.breadcrumb__list a:hover {
  color: var(--color-accent-hover);
}
.breadcrumb__list [aria-current="page"] {
  color: var(--color-text);
}

/* --- Hero wariant podstrony (niższy niż home) --- */
/* --- Hero: H1 na wąskich ekranach ---
   .hero__title ze style.css ma stałe --fs-3xl (40px). Słowo
   „cyberbezpieczeństwo" 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. Ta sama poprawka co w opieka.css - powielona świadomie,
   żeby podstrony pozostały od siebie niezależne. */
@media (max-width: 767px) {
  .hero--sub .hero__title {
    font-size: clamp(1.75rem, 1.1rem + 3.2vw, var(--fs-3xl));
    overflow-wrap: break-word;
  }
}

.hero--sub {
  min-height: auto;
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-2xl);
}
/* Hero: pełna szerokość jak treść pod spodem, ale tekst wyśrodkowany.
   Zdejmujemy tylko wewnętrzne 720px z home; wyśrodkowanie (text-align:center,
   subtitle auto, actions center) zostaje dziedziczone. */
.hero--sub .hero__content {
  max-width: var(--max-width);
}

/* --- Sekcje: padding jak na stronie głównej (.services/.about = spacing-3xl 0) --- */
.section {
  padding: var(--spacing-3xl) 0;
}
.prose-section {
  background-color: var(--color-bg);
}
.section--alt {
  background-color: var(--color-bg-alt);
}

/* Proza: nagłówki, akapity, karty i kroki wypełniają całą szerokość kontenera
   (1120px) - tak jak sekcje na stronie głównej. Czytelność długich akapitów
   daje justowanie + hyphens, NIE zwężanie kolumny. Bez max-width na <p>. */
.prose > p {
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}
.prose > .section__title {
  margin-bottom: var(--spacing-md);
}
/* Grafiki w treści: responsywne, odstęp jak akapit.
   Grafika 1 (ikony zagrożeń) ma dużo pustego tła góra/dół - ograniczamy
   szerokość i przycinamy pionowo (object-fit: cover obcina puste tło,
   ikony siedzą w bezpiecznym środkowym pasie). */
.prose-figure {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  max-height: 260px;
  object-fit: cover;
  margin: var(--spacing-lg) auto;
  border-radius: var(--radius-md);
}
.prose__lead {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-heading);
}

/* Wyłącz justowanie na wąskich ekranach (kolumna schodzi za krótko) */
@media (max-width: 560px) {
  .prose > p {
    text-align: left;
    hyphens: manual;
  }
}

/* --- Karty zagrożeń (3 w rzędzie, ragged-right - wąskie kolumny) --- */
.threat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}
@media (min-width: 640px) {
  .threat-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.threat-card {
  padding: var(--spacing-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent);
}
.threat-card__title {
  font-size: var(--fs-md);
  color: var(--color-heading);
  margin-bottom: var(--spacing-xs);
  text-wrap: balance;
}
.threat-card p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
  text-wrap: pretty;
}

/* --- Układ sekcji „5 kroków": grafika pionowa | lista --- */
.steps-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}
@media (min-width: 860px) {
  .steps-layout {
    grid-template-columns: minmax(320px, 400px) 1fr;
    gap: var(--spacing-2xl);
    align-items: start;
  }
}
.steps-figure__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
@media (min-width: 860px) {
  .steps-figure {
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-lg));
  }
}

/* --- Kroki (numerowana lista) --- */
.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: var(--spacing-md);
}
.step {
  counter-increment: step;
  position: relative;
  padding-left: calc(var(--spacing-2xl) + var(--spacing-xs));
  min-height: var(--spacing-2xl);
}
.step::before {
  content: counter(step);
  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-xl);
  font-weight: 700;
  color: var(--color-accent);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.step__title {
  font-size: var(--fs-md);
  color: var(--color-heading);
  margin-bottom: var(--spacing-xs);
}
.step p {
  color: var(--color-text-muted);
  line-height: 1.6;
  text-wrap: pretty;
}

/* --- GRAFIKA 2: diagram łańcucha dostaw (drzewko jeden→wielu) --- */
.chain {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.chain__top {
  display: flex;
  justify-content: center;
}
.chain__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}
.chain__node--client {
  min-width: 180px;
}
.chain__node--you {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent-glow);
  background-color: var(--color-surface-hover);
}
.chain__icon {
  color: var(--color-text-muted);
}
.chain__node--client .chain__icon,
.chain__node--you .chain__icon {
  color: var(--color-accent);
}
.chain__label {
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.2;
}
.chain__node--you .chain__label {
  color: var(--color-heading);
}
.chain__sub {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
/* Etykieta relacji między poziomami + pionowa kreska od kontrahenta w dół */
.chain__rel {
  position: relative;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-accent-hover);
  margin: var(--spacing-md) 0;
  padding: var(--spacing-sm) 0;
}
/* pionowa linia nad etykietą (od kontrahenta) i pod nią (do szyny) */
.chain__rel::before,
.chain__rel::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  height: var(--spacing-sm);
  background-color: var(--color-accent);
}
.chain__rel::before { top: calc(-1 * var(--spacing-xs)); }
.chain__rel::after { bottom: calc(-1 * var(--spacing-xs)); }
/* Rząd dostawców
   Mobile (< 700px): jedna kolumna z pionową szyną po lewej i odnogami do
   każdego węzła. Siatka 2x2 była tu myląca - kreska od kontrahenta kończyła
   się w przerwie między kafelkami, a układ sugerował dwie pary dostawców
   zamiast czterech równorzędnych. Desktop (>= 700px) ma własny układ niżej. */
.chain {
  --rail-x: 2.25rem;   /* odległość osi szyny od krawędzi treści */
  --rail-w: 2px;       /* grubość WSZYSTKICH linii diagramu */
  /* Wysokość kafelka dostawcy w układzie mobilnym (poziomym):
     padding 2 × --spacing-sm (32px) + ikona 24px + border 2px = 58px.
     Używane wyłącznie do zakończenia szyny na osi ostatniego węzła. */
  --node-h: 3.625rem;
}

/* Kontrahent na pełną szerokość: to on obejmuje cały łańcuch, więc wąski
   kafelek zaniżał go wizualnie względem dostawców pod nim. */
.chain__top {
  display: block;
}
.chain__node--client {
  align-items: flex-start;
  text-align: left;
  min-width: 0;
  width: 100%;
}

/* Etykieta relacji: sam tekst, przesunięty obok szyny.
   Kreski NIE rysuje - całą pionową linię rysuje jeden element (patrz niżej). */
.chain__rel {
  text-align: left;
  padding-left: var(--rail-x);
  margin: 0;
}
.chain__rel::before,
.chain__rel::after { content: none; }

/* CAŁA pionowa linia (od kafelka kontrahenta do osi ostatniego węzła) jest
   JEDNYM elementem. Wcześniej rysowały ją dwa osobne pseudoelementy o różnych
   punktach odniesienia - nie dawało się ich zejść co do piksela i zostawał
   widoczny uskok. Jeden element = jedna oś, zero łączenia. */
.chain__rail {
  position: relative;
}
.chain__rail::before {
  content: "";
  position: absolute;
  left: calc(var(--rail-x) / 2 - var(--rail-w) / 2);
  top: 0;
  /* Kończy się na osi ostatniego węzła: pełna wysokość minus połowa kafelka.
     -1px, bo odnoga rośnie w DÓŁ od swojej osi (grubość 2px), więc jej dolna
     krawędź leży o piksel niżej niż wyliczony środek. */
  bottom: calc(var(--node-h) / 2 - 1px);
  width: var(--rail-w);
  background-color: var(--color-accent);
}

.chain__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
  position: relative;
  padding-left: var(--rail-x);
  padding-top: var(--spacing-sm);
}

/* Węzły poziomo (ikona obok etykiety), żeby kolumna nie urosła na pół ekranu */
.chain__row .chain__node {
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  position: relative;
}

/* Odnoga: od szyny do krawędzi węzła, ta sama grubość co szyna */
.chain__row .chain__node::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--rail-x) / 2 - var(--rail-w) / 2);
  top: calc(50% - var(--rail-w) / 2);
  width: calc(var(--rail-x) / 2);
  height: var(--rail-w);
  background-color: var(--color-accent);
}
.chain__caption {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-heading);
  text-wrap: balance;
}

/* Desktop: 4 dostawców w rzędzie + linie drzewka
   WAŻNE: reguły mobilne wyżej ustawiają własne left/bottom/width/height na tych
   samych pseudoelementach. Każda z nich musi tu zostać jawnie nadpisana -
   inaczej wartość z mobile przecieka na desktop i rozjeżdża drzewko. */
@media (min-width: 700px) {
  .chain__top {
    display: flex;
  }
  .chain__node--client {
    width: auto;
    min-width: 180px;
    align-items: center;
    text-align: center;
  }
  .chain__rel {
    text-align: center;
    padding: var(--spacing-sm) 0;
    margin: var(--spacing-md) 0;
  }
  .chain__rel::before {
    top: calc(-1 * var(--spacing-xs));
    bottom: auto;
    left: 50%;
    width: 2px;
    height: var(--spacing-sm);
  }
  .chain__rel::after {
    content: "";
    bottom: calc(-1 * var(--spacing-xs));
  }

  .chain__row {
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    padding-left: 0;
    padding-top: var(--spacing-lg);
  }
  /* Pozioma szyna: od OSI pierwszego kafelka do OSI ostatniego.
     `12.5%` byłoby poprawne tylko przy zerowym gap - przy gapie środek
     skrajnego kafelka leży bliżej krawędzi, więc szyna kończyła się 6-7px
     obok odnóg (zmierzone na renderze). Kolumna ma szerokość
     (100% - 3*gap)/4, więc jej oś to połowa tego. */
  .chain__row::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: auto;
    left: calc((100% - 3 * var(--spacing-sm)) / 8);
    /* -2px z prawej: odnoga startuje na `left: 50%` i rośnie w PRAWO od osi,
       więc jej prawa krawędź leży 2px dalej niż oś kolumny. */
    right: calc((100% - 3 * var(--spacing-sm)) / 8 - 2px);
    width: auto;
    height: 2px;
    background-color: var(--color-accent);
  }
  /* pionowa szyna to element wyłącznie mobilny */
  .chain__rail::before {
    content: none;
  }
  /* na desktopie wracają kreski nad i pod etykietą (drzewko pionowe) */
  .chain__rel::before,
  .chain__rel::after {
    content: "";
  }
  /* węzły wracają do układu pionowego */
  .chain__row .chain__node {
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-xs);
  }
  /* pionowa kreska od każdego węzła do szyny.
     +2px wysokości, żeby weszła w grubość poziomej szyny - bez tego zostaje
     widoczny prześwit między odnogą a szyną. */
  .chain__row .chain__node::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--spacing-lg));
    left: 50%;
    width: 2px;
    height: calc(var(--spacing-lg) + 2px);
    background-color: var(--color-accent);
  }
}

/* --- GRAFIKA 3: oś czasu terminów NIS2 (CSS) --- */
.timeline {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.timeline__track {
  list-style: none;
  display: grid;
  gap: var(--spacing-lg);
}
.timeline__item {
  display: grid;
  gap: var(--spacing-xs);
}
.timeline__date {
  font-weight: 700;
  color: var(--color-accent-hover);
}
.timeline__fact {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.timeline__dot {
  display: none;
}
.timeline__meaning {
  color: var(--color-text);
  line-height: 1.5;
}
.timeline__caption {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-heading);
  text-wrap: balance;
}
/* Mobile: pionowa oś z linią po lewej */
@media (max-width: 699px) {
  .timeline__track {
    padding-left: var(--spacing-lg);
    border-left: 2px solid var(--color-accent);
  }
  .timeline__item {
    position: relative;
  }
  .timeline__item::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--spacing-lg) - 5px);
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-accent);
  }
}
/* Desktop: pozioma oś, 4 kolumny.
   Linia i kropka żyją w tym samym elemencie (item), na tej samej wysokości -
   dzielą układ współrzędnych, więc nie mogą się rozjechać. Kropka NAD treścią,
   linia biegnie przez środek kropki łącząc sąsiednie itemy (border-top itemu). */
@media (min-width: 700px) {
  .timeline__track {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .timeline__item {
    position: relative;
    text-align: center;
    padding: var(--spacing-lg) var(--spacing-sm) 0;
    gap: var(--spacing-xs);
  }
  /* pozioma linia: górna krawędź każdego itemu (sąsiednie = ciągła oś) */
  .timeline__item::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-accent);
  }
  /* skróć linię na skrajnych, żeby nie wychodziła poza oś */
  .timeline__item:first-child::before { left: 50%; }
  .timeline__item:last-child::before { right: 50%; }
  /* kropka na linii */
  .timeline__dot {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-accent);
    border: 2px solid var(--color-surface);
  }
  .timeline__fact { margin-bottom: var(--spacing-sm); }
}

/* --- Ramka prawna (zastrzeżenie NIS2) - stonowana, to nie CTA --- */
.legal-note {
  margin-top: var(--spacing-md);
  padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-md);
  border-left: 2px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.legal-note strong {
  color: var(--color-text);
}

/* --- Sekcja CTA: nagłówek + ramka po lewej, formularz po prawej --- */
/* .contact__inner (z home) jest gridem 1fr na mobile, 1fr 1fr na desktopie.
   Tutaj mamy TRZY dzieci (.cta-main, .cta-aside, .cta-form), więc bez
   jawnego przypisania do kolumn trzecie zawinęłoby się do nowego wiersza.
   Dlatego lewa kolumna dostaje dwa wiersze (nagłówek, pod nim ramka),
   a formularz siedzi w prawej kolumnie rozciągnięty na oba.
   Na mobile grid ma jedną kolumnę i elementy idą po kolei. */
@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;
    /* Formularz zaczyna się na wysokości leadu, nie nagłówka - inaczej
       pierwsze pole stoi równo z H2 i sekcja wygląda na dwie niezależne
       kolumny zamiast jednej całości. */
    margin-top: var(--spacing-3xl);
  }
}

/* Podtytuł CTA - druga część rozbitego nagłówka. Domyślny odstęp pod
   nagłówkiem jest za mały, żeby oddzielić go od leadu, więc dokładamy
   własny margines na dole. */
.cta-main__sub {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-heading);
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  text-wrap: balance;
}

.cta-aside {
  padding: var(--spacing-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
}
.cta-aside__name {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: var(--spacing-sm);
}
.cta-aside__contact {
  display: grid;
  gap: var(--spacing-xs);
  font-style: normal;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}
.cta-aside__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition);
}
a.cta-aside__row:hover {
  color: var(--color-accent-hover);
}
.cta-aside__row svg {
  flex-shrink: 0;
  color: var(--color-accent);
}
.cta-aside__lead {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-sm);
}
.cta-aside__list {
  list-style: none;
  display: grid;
  gap: var(--spacing-sm);
}
.cta-aside__list li {
  position: relative;
  padding-left: var(--spacing-lg);
  color: var(--color-text);
  line-height: 1.5;
}
.cta-aside__list li::before {
  content: "\2713"; /* ptaszek */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
  font-weight: 700;
}

/* --- Placeholder grafiki (tylko na czas projektowania - do usunięcia po wstawieniu grafik) --- */
.graphic-slot {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-md);
  margin: var(--spacing-lg) 0;
  background-color: var(--color-surface);
  border: 2px dashed var(--color-accent);
  border-radius: var(--radius-md);
}
.graphic-slot__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-accent-hover);
  letter-spacing: 0.03em;
}
.graphic-slot__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}