/* ==========================================================================
   Podstrona: Polityka prywatnosci - tresc dokumentu
   Uklad: spis tresci w lewej szynie (sticky od 1024) + jedna waska kolumna
   tekstu z miara do 70ch. Punkty rozdziela hairline i numer wiszacy w
   marginesie kolumny - zadnych kart, ramek ani cieni.
   Pionowy hairline miedzy spisem a trescia jest kregoslupem strony.
   Klasa .pp-todo jest zdefiniowana w polityka-prywatnosci-intro.css.
   ========================================================================== */

.pp-doc {
  --pp-rail: clamp(2rem, 4vw, 4rem);
  padding-block: 0 var(--section);
}

.pp-doc__grid { display: grid; row-gap: clamp(2.25rem, 4vw, 3rem); }

/* Bez align-items: start. Kolumna spisu ma rosnac na cala wysokosc rzedu,
   bo dopiero wtedy sticky wewnatrz niej ma po czym jechac. Przy wysokosci
   z tresci spis znikal po pierwszym ekranie. */
@media (min-width: 1024px) {
  .pp-doc__grid {
    grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr);
    column-gap: var(--pp-rail);
  }
}

/* --- Spis tresci -------------------------------------------------------- */
.pp-toc__t { display: block; margin-bottom: 1rem; }

.pp-toc__list { display: grid; }

/* Na waskich ekranach spis jest kompaktowa dwukolumnowa mapa strony,
   domknieta hairline'ami - inaczej dziesiec pozycji spycha tresc o ekran w dol. */
.pp-toc__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1rem;
  border-block: 1px solid var(--hairline);
  padding-block: 0.35rem;
}

@media (min-width: 1024px) {
  .pp-toc__in {
    position: sticky;
    top: calc(4.5rem + clamp(1.25rem, 3vw, 2.25rem));
  }
  .pp-toc__list {
    grid-template-columns: minmax(0, 1fr);
    border-block: 0;
    padding-block: 0;
  }
}

.pp-toc__list a {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  align-items: baseline;
  padding-block: 0.5rem;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}

@media (min-width: 1024px) {
  .pp-toc__list a { grid-template-columns: 2.1rem minmax(0, 1fr); font-size: 0.9rem; }
}

.pp-toc__n {
  font: 300 0.78rem/1 var(--serif);
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--ink) 32%, transparent);
  transition: color var(--dur) var(--ease);
}

.pp-toc__list a:hover,
.pp-toc__list a:focus-visible { color: var(--ink); }
.pp-toc__list a:hover .pp-toc__n,
.pp-toc__list a:focus-visible .pp-toc__n { color: var(--purple); }

/* --- Kolumna tresci ----------------------------------------------------- */
/* Kolumna trzyma 70ch, ale sam akapit jest wezszy (patrz .pp-p): jednostka ch
   mierzy szerokosc zera, a polski tekst ma litery duzo wezsze, wiec 70ch
   akapitu daloby ponad 90 znakow w wierszu. Struktura (hairline'y, wiersze
   danych, listy) idzie na pelna szerokosc kolumny, tekst czytelny na wezszej
   miare - dwa poziomy zamiast jednego. */
.pp-doc__body { max-width: 70ch; }

@media (min-width: 1024px) {
  .pp-doc__body {
    max-width: calc(70ch + var(--pp-rail));
    padding-inline-start: var(--pp-rail);
    border-inline-start: 1px solid var(--hairline);
  }
}

/* --- Punkt dokumentu ---------------------------------------------------- */
.pp-art {
  scroll-margin-top: 7rem;
  border-top: 1px solid var(--hairline);
  padding-block: clamp(1.9rem, 3.4vw, 2.75rem);
}
.pp-art:last-child { border-bottom: 1px solid var(--hairline); }

/* Punkty wychodza w lewo o szerokosc szyny, zeby kazda pozioma linia dobila do
   pionowego hairline'u kolumny. Naroznik ma byc domkniety, linie maja sie
   stykac, a nie mijac. */
@media (min-width: 1024px) {
  .pp-art {
    margin-inline-start: calc(-1 * var(--pp-rail));
    padding-inline-start: var(--pp-rail);
  }
}

.pp-art__n {
  display: block;
  margin-bottom: 0.6rem;
  font: 300 0.9rem/1.7 var(--serif);
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* Od 560 numer wisi we wlasnej szynie po lewej, a tytul i tresc stoja na
   jednej osi - to ta sama zasada, ktora trzyma liste uslug na stronie glownej. */
@media (min-width: 560px) {
  .pp-art {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    align-items: baseline;
  }
  .pp-art__n { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .pp-art__h { grid-column: 2; grid-row: 1; }
  .pp-art__body { grid-column: 2; grid-row: 2; }
}

.pp-art__h { letter-spacing: -0.01em; }
.pp-art__body { padding-block-start: clamp(0.9rem, 1.8vw, 1.15rem); }

.pp-p {
  max-width: 52ch;   /* ~75 znakow w wierszu przy tym kroju */
  font-size: clamp(0.94rem, 0.9rem + 0.18vw, 1.02rem);
  line-height: 1.75;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.pp-p + .pp-p { margin-block-start: 0.85rem; }

.pp-strong { font-weight: 500; color: var(--ink); }

.pp-link {
  color: var(--purple);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--dur) var(--ease);
}
.pp-link:hover { color: var(--purple-deep); }

/* --- Listy definicyjne -------------------------------------------------- */
/* Termin i wyjasnienie rozdziela hairline, nie ramka. Od 560 termin ma stala
   kolumne, wiec wszystkie wyjasnienia startuja na jednej osi. */
.pp-defs {
  margin-block: clamp(1.35rem, 2.4vw, 1.75rem);
  border-bottom: 1px solid var(--hairline);
}
.pp-defs:last-child { margin-block-end: 0; }
/* Punkt, ktory zaczyna sie od razu lista (np. "Twoje prawa"): pierwsza linia
   ma stac blisko tytulu, inaczej pod naglowkiem zieje 2.5rem pustki. */
.pp-art__body > .pp-defs:first-child { margin-block-start: 0.35rem; }

.pp-def {
  border-top: 1px solid var(--hairline);
  padding-block: 0.9rem;
}

/* 12rem to najkrotsza kolumna, w ktorej wszystkie terminy tego dokumentu
   mieszcza sie w jednej linii. Przy wezszej "Zabezpieczenia serwera" lamie sie
   na dwie linie, a stojaca obok pigulka "do uzupelnienia" zostaje sama przy
   pierwszej z nich i wiersz sie rozjezdza. */
@media (min-width: 560px) {
  .pp-def {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    column-gap: 1.5rem;
    align-items: baseline;
  }
}

.pp-def__t {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ink);
}

.pp-def__d {
  margin: 0;
  max-width: 46ch;
  font-size: 0.93rem;
  line-height: 1.68;
  color: var(--muted);
  text-wrap: pretty;
}
@media (max-width: 559px) { .pp-def__d { margin-block-start: 0.25rem; } }

/* --- Droga wiadomosci z formularza -------------------------------------- */
/* Cztery kroki realnego obiegu danych. Ten sam jezyk co reszta dokumentu:
   numer serifem w lewej szynie, wiersze na hairline'ach, zero ramek. Numer
   dostaje fiolet, bo to jedyna lista w dokumencie, ktora opisuje mechanizm,
   a nie definicje - ma sie odczytac jako sciezka, nie jako kolejne pojecia. */
.pp-flow {
  margin-block: clamp(1.35rem, 2.4vw, 1.75rem);
  border-bottom: 1px solid var(--hairline);
  list-style: none;
}

.pp-flow li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  align-items: baseline;
  border-top: 1px solid var(--hairline);
  padding-block: 0.8rem;
}

.pp-flow__n {
  font: 300 0.82rem/1.68 var(--serif);
  letter-spacing: 0.1em;
  color: var(--purple);
}

.pp-flow__t {
  max-width: 46ch;
  font-size: 0.93rem;
  line-height: 1.68;
  color: var(--muted);
  text-wrap: pretty;
}

/* --- Wiersze kontaktowe ------------------------------------------------- */
.pp-rows { margin-block-start: clamp(1.35rem, 2.4vw, 1.75rem); }
.pp-val { font-size: 0.95rem; }