/* ====================================================================
   DOKUMENTY — regulamin i polityka prywatności
   ====================================================================
   Te dwie strony czyta się inaczej niż resztę serwisu. Na stronie
   głównej wzrok ma skakać po nagłówkach; tutaj ktoś szuka jednego
   konkretnego zdania — najczęściej tego o zwrocie pieniędzy — i musi
   je znaleźć, zanim się zniechęci.

   Stąd trzy decyzje, których nie ma w reszcie arkuszy:

     • miara wiersza ok. 68 znaków (ustawiona na `ch`, nie na pikselach,
       więc trzyma się przy każdym stopniu pisma),
     • paragrafy numerowane jak w dokumencie prawnym, z numerem
       wyciągniętym na margines — po numerze da się odesłać w mailu
       reklamacyjnym („§ 5 ust. 3"), a to jedyny powód, dla którego
       numeracja w ogóle tu jest,
     • rozmiar pisma 1,0625rem zamiast systemowego 0,875rem: to jest
       tekst do czytania, a nie podpis pod ilustracją.

   Reszta — kolory, krój, siatka — jest wspólna ze styl.css.
==================================================================== */

.dok{
  /* Pasek jest position:fixed i ma ok. 53 px wysokości. Górny odstęp musi
     go przeskoczyć przy KAŻDYM rozmiarze ekranu — clamp zaczynający się
     od 40 px wpuszczał tytuł pod pasek na niskich oknach. */
  padding:calc(56px + clamp(28px,6vh,80px)) 0 clamp(64px,10vh,130px);
}
/* Miara wiersza. Pierwsze podejście ustawiało 74ch, ale `ch` liczy się od
   stopnia pisma ELEMENTU, na którym stoi — a ten dziedziczy 14 px z resetu,
   nie 17 px akapitu. Wychodziło 795 px, czyli 94 znaki w wierszu: o jakieś
   dwadzieścia za dużo, żeby oko trafiało z końca wiersza na początek
   następnego. Stała w rem jest tu po prostu uczciwsza niż `ch`, które
   wygląda na sprytne, a mierzy nie to, co trzeba. */
.dok-wrap{max-width:39rem;margin-inline:auto}

/* Nagłówek dokumentu: ta sama para „kwadrat + etykieta" co w sekcjach
   strony głównej, żeby dokument nie wyglądał na doklejony z innego
   serwisu. */
.dok-gora{
  display:flex;align-items:center;gap:12px;
  margin-bottom:clamp(18px,3vh,30px);
}
.dok h1{
  font-size:clamp(2rem,6.5vw,4.2rem);
  font-weight:700;letter-spacing:-.05em;line-height:.92;
  margin-bottom:clamp(16px,2.5vh,26px);
}
.dok-meta{
  font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--szary-2);
  padding-bottom:clamp(24px,4vh,44px);
  border-bottom:1px solid var(--kreska);
  margin-bottom:clamp(28px,4.5vh,52px);
}

/* --- treść --------------------------------------------------------- */
.dok h2{
  font-size:clamp(1.05rem,2.4vw,1.35rem);
  font-weight:700;letter-spacing:-.02em;line-height:1.25;
  margin:clamp(34px,5vh,58px) 0 14px;
  padding-top:clamp(18px,2.5vh,26px);
  border-top:1px solid var(--kreska);
}
.dok h2:first-of-type{border-top:0;padding-top:0}
.dok h3{
  font-size:1rem;font-weight:700;margin:26px 0 10px;letter-spacing:-.01em;
}
.dok p{font-size:1.0625rem;line-height:1.62;margin-bottom:14px}
.dok a{border-bottom:1px solid var(--kreska);transition:border-color .2s var(--ease)}
.dok a:hover{border-color:var(--czern)}
.dok b,.dok strong{font-weight:700}

/* Ustępy numerowane. Numer siedzi na marginesie, a nie w wierszu —
   dzięki temu lewa krawędź tekstu jest równa i akapit czyta się jak
   akapit, a nie jak lista zakupów. Na wąskim ekranie margines znika
   i numer wraca do wiersza, bo 42 px to tam za dużo. */
.dok ol.ust{counter-reset:ust;margin:0 0 16px}
.dok ol.ust > li{
  counter-increment:ust;
  position:relative;
  font-size:1.0625rem;line-height:1.62;
  margin-bottom:12px;
}
.dok ol.ust > li::before{
  content:counter(ust) ".";
  color:var(--szary-2);
  font-variant-numeric:tabular-nums;
}
@media (min-width:760px){
  .dok ol.ust{padding-left:42px}
  .dok ol.ust > li::before{position:absolute;left:-42px;width:32px;text-align:right}
}
@media (max-width:759px){
  .dok ol.ust > li::before{margin-right:8px}
}

/* Wyliczenia wewnątrz ustępu — litery, jak w ustawie. */
.dok ol.lit{counter-reset:lit;margin:10px 0 10px 18px}
.dok ol.lit > li{counter-increment:lit;position:relative;padding-left:26px;margin-bottom:7px;line-height:1.55}
.dok ol.lit > li::before{
  content:counter(lit,lower-alpha) ")";
  position:absolute;left:0;color:var(--szary-2);
}

/* --- ramka na rzecz, której nie wolno przeoczyć --------------------- */
/* Brak prawa odstąpienia to jedyne postanowienie, które realnie zaskakuje
   kupującego. Jeżeli ma być skuteczne, musi być widoczne, a nie schowane
   w ustępie trzynastym — dlatego jako jedyne dostaje własną ramkę. */
.dok-uwaga{
  border:1px solid var(--czern);
  padding:clamp(18px,3vw,26px);
  margin:26px 0;
}
.dok-uwaga p:last-child{margin-bottom:0}
.dok-uwaga .dok-uwaga-tyt{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;margin-bottom:10px;
}

/* --- dane rejestrowe ------------------------------------------------ */
.dok-dane{
  display:grid;gap:2px 20px;margin:16px 0 22px;
  font-size:.95rem;line-height:1.5;
}
@media (min-width:560px){
  .dok-dane{grid-template-columns:max-content 1fr}
}
.dok-dane dt{color:var(--szary-2);text-transform:uppercase;font-size:.72rem;letter-spacing:.06em;padding-top:.35em}
.dok-dane dd{margin:0 0 8px}

/* --- powrót --------------------------------------------------------- */
.dok-powrot{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:clamp(34px,5vh,56px);
  font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;
  border:0;
}
.dok-powrot:hover{color:var(--zielen-t)}

/* Pasek górny na dokumentach nie odejmuje się od tła: pod nim nie ma
   planszy tytułowej, tylko biała kartka — a przez przezroczysty pasek
   przejeżdżałyby wiersze regulaminu. Wygląd „osiadły" jest tu ustawiony
   w CSS, a nie dopisywany klasą przez JS, żeby był poprawny także przez
   te kilkaset milisekund, zanim skrypt się wczyta. */
.dok-strona .gora{
  mix-blend-mode:normal;
  background:var(--papier);color:var(--czern);
  border-bottom:1px solid var(--kreska);
}