/* ==========================================================================
   Strony tresciowe: polityka prywatnosci, podziekowanie, regulamin, 404.

   D174, 03.09.2026. Do tej daty `page.php` wypisywal klasy (`sekcja`,
   `kontener`, `strona__naglowek`, `tresc`), ktorych NIE BYLO w zadnym arkuszu
   motywu: zostaly przepisane ze statyka razem z szablonem i nikt tego nie
   zauwazyl, bo do dzisiaj zadna strona tego typu nie byla opublikowana.
   Skutek: tekst szedl przez cala szerokosc okna, bez marginesow, bez rytmu i
   bez kompensacji naglowka.

   Uklad jest celowo cichszy niz na stronie glownej. To sa strony, na ktore
   ktos wchodzi po informacje, a nie po wrazenie: jedna kolumna, miekki
   naglowek na kremie zamiast ciemnego hero, zero ozdobnikow.
   ========================================================================== */

.strona {
  /* ZERO kompensacji naglowka, w odroznieniu od hero. Hero wchodzi POD naglowek
     ujemnym marginesem i dlatego musi doliczac jego wysokosc z powrotem. Strona
     tresciowa zaczyna sie normalnie pod nim, wiec `--header-rest-h` dodane tutaj
     liczyloby te sama wysokosc drugi raz: H1 stal przez to na y=340 zamiast na
     y=232 przy 1440 px. Zmierzone i cofniete 03.09.2026. */
  padding-block-start: var(--space-9);
  padding-block-end: var(--space-section);
}

.strona__wnetrze {
  /* Szerokosc mierzona w znakach, nie w pikselach: dla dlugiego tekstu liczy
     sie liczba znakow w wierszu, a nie to, ile ma milimetrow. 68ch trzyma
     wiersz w zakresie, ktory czyta sie bez gubienia linii. */
  max-inline-size: 68ch;
  margin-inline: auto;
}

.strona__naglowek {
  margin-block-end: var(--space-8);
  padding-block-end: var(--space-6);
  border-block-end: var(--border-width) solid var(--line-on-light-soft);
}

.strona__naglowek h1 {
  /* Nizej niz H1 hero: to jest tytul dokumentu, nie obietnica sprzedazowa. */
  font-size: var(--fs-display-3);
  margin: 0;
}

.strona__zdjecie {
  margin-block-end: var(--space-8);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.strona__zdjecie img { inline-size: 100%; block-size: auto; display: block; }

/* --- typografia tresci ---------------------------------------------------
   Regule pisze sie na kontenerze, a nie na kazdym elemencie z osobna, bo
   tresc pochodzi z edytora i nie wiadomo z gory, jakie elementy w niej beda. */

.tresc {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-on-light);
}

.tresc > * + * { margin-block-start: var(--space-5); }

.tresc h2 {
  font-size: var(--fs-display-4);
  line-height: 1.2;
  margin-block-start: var(--space-9);
}

.tresc h3 {
  font-size: var(--fs-lead);
  line-height: 1.3;
  margin-block-start: var(--space-7);
}

/* Pierwszy naglowek nie potrzebuje odstepu od gory, bo nad nim stoi kreska
   naglowka strony, ktora juz ten odstep daje. */
.tresc > :first-child { margin-block-start: 0; }

.tresc ul,
.tresc ol { padding-inline-start: var(--space-6); }
.tresc li + li { margin-block-start: var(--space-3); }

.tresc a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--dur) var(--ease);
}
.tresc a:hover { color: var(--accent-ctx-hover, var(--accent-deep)); }

.tresc strong { font-weight: var(--fw-semibold); }

/* Akapit otwierajacy, gdy dokument zaczyna sie od ostrzezenia albo wstepu:
   ten sam zabieg co plakietka w cenniku, wszystkie kolory na sztywno, zeby
   nie zalezal od kontekstu tla sekcji (PRZEKAZANIE.md pulapka 16). */
.tresc > p:first-child strong:first-child {
  display: block;
}

.strona__strony {
  margin-block-start: var(--space-8);
  font-size: var(--fs-small);
}

@media (max-width: 700px) {
  .strona {
    padding-block-start: var(--space-7);
    padding-block-end: var(--space-9);
  }
  .strona__naglowek { margin-block-end: var(--space-6); padding-block-end: var(--space-5); }
  .tresc h2 { margin-block-start: var(--space-7); }
}

/* --- strona 404 -----------------------------------------------------------
   Ten sam pion co strony tresciowe, ale wyzsrodkowana i wezsza: to nie jest
   dokument do czytania, tylko rozdroze z dwoma wyjsciami. */

.blad {
  padding-block-start: var(--space-10);
  padding-block-end: var(--space-section);
  text-align: center;
}

.blad__wnetrze {
  max-inline-size: 52ch;
  margin-inline: auto;
}

.blad .eyebrow {
  display: block;
  margin-block-end: var(--space-4);
}

.blad h1 {
  font-size: var(--fs-display-3);
  margin: 0 0 var(--space-5);
}

.blad > .container > p { margin: 0 auto; max-inline-size: 44ch; }

.blad__akcje {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-block-start: var(--space-8);
}

@media (max-width: 700px) {
  .blad { padding-block-start: var(--space-8); padding-block-end: var(--space-9); }
  /* Na telefonie oba wyjscia na pelna szerokosc, jedno pod drugim: przy dwoch
     przyciskach obok siebie kazdy ma ponizej progu wygodnego dotyku. */
  .blad__akcje { flex-direction: column; align-items: stretch; }
}