/* ==========================================================================
   BCE HOME v2 — strony prawne (Impressum, Datenschutzerklarung)
   --------------------------------------------------------------------------
   Strony prawne dziela z strona glowna naglowek, stopke, fonty i tokeny.
   Dlatego <body> ma OBIE klasy: `bce-home bce-legal`, a arkusze ladowane sa
   w kolejnosci bce-base.css -> home.css -> legal.css.

   `home.css` jest tu wczytywany WYLACZNIE dla naglowka i stopki. Reszta jego
   regul dotyczy sekcji, ktorych na stronach prawnych nie ma, wiec nic nie
   robi. Alternatywa — wydzielenie naglowka do osobnego pliku — wymagalaby
   ruszania zatwierdzonego arkusza strony glownej. Nie warto: zatwierdzony
   wyglad strony glownej ma zostac nietkniety.

   Tresc prawna jest CELOWO powsciagliwa: zadnej wielkiej typografii hero,
   zadnych paneli sprzedazowych, zadnych CTA. Dokument ma sie czytac.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KOLUMNA TRESCI
   --------------------------------------------------------------------------
   Szerokosc samego tekstu to ~800 px — mniej wiecej 80–90 znakow przy 16 px,
   czyli gorna granica wygodnego czytania dla dokumentu ciaglego.
   -------------------------------------------------------------------------- */

.bce-legal {
  background: var(--bce-white);
}

.bce-legal__wrap {
  max-width: calc(800px + 2 * var(--bce-gutter));
  margin: 0 auto;
  padding: clamp(36px, 5vw, 72px) var(--bce-gutter) clamp(56px, 7vw, 104px);
}

/* --------------------------------------------------------------------------
   2. NAGLOWEK DOKUMENTU
   -------------------------------------------------------------------------- */

.bce-legal__eyebrow {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
  font-family: var(--bce-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bce-muted);
}

.bce-legal__eyebrow-rule {
  width: 26px;
  height: 1px;
  background: var(--bce-blue);
  flex: none;
}

/* Wyraznie mniejszy niz hero strony glownej (tam do 104 px).
   Dokument prawny nie jest reklama.

   DZIELENIE WYRAZOW JEST TU KONIECZNE, nie kosmetyczne. "Datenschutzerklärung"
   to jedno nierozerwalne slowo dlugosci 20 znakow: przy 360 px i rozmiarze
   30 px zajmuje 348 px, a do dyspozycji jest 320 px. Zmierzone — bez tego
   dokument rozpychal sie w poziomie o 8 px.

   `hyphens: auto` dziala, bo <html lang="de"> daje przegladarce niemiecki
   slownik podzialu (Daten-schutz-erklärung). `overflow-wrap` jest siatka
   bezpieczenstwa na wypadek braku slownika — wtedy slowo lamie sie bez
   dywizu, ale nadal nie wychodzi poza ekran. */
.bce-legal__h1 {
  font-family: var(--bce-cond);
  font-weight: 700;
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  padding-bottom: clamp(20px, 3vw, 28px);
  border-bottom: 1px solid var(--bce-graphite);
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   3. HINWEIS PODGLADU
   --------------------------------------------------------------------------
   Blok WYLACZNIE dla podgladu lokalnego. Wizualnie oddzielony od tresci
   prawnej, zeby nikt nie wzial go za jej czesc. Znacznik `data-preview-only`
   jest celowy: wylapuje go tools/check_home_v2.py --release przy wydaniu.
   NIE WOLNO go przeniesc na produkcje — patrz docs/homepage-v2-promotion.md.
   -------------------------------------------------------------------------- */

.bce-legal__note {
  margin: clamp(24px, 3vw, 32px) 0 0;
  border: 1px solid var(--bce-line);
  border-left: 3px solid var(--bce-blue);
  background: var(--bce-tint);
  padding: 14px 18px;
  font-family: var(--bce-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--bce-body);
}

.bce-legal__note-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bce-blue);
  margin-bottom: 5px;
}

/* --------------------------------------------------------------------------
   4. TRESC DOKUMENTU
   -------------------------------------------------------------------------- */

.bce-legal__doc {
  margin-top: clamp(30px, 4vw, 44px);
}

.bce-legal__intro {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.7;
  color: var(--bce-body);
  text-wrap: pretty;
}

/* Sekcja dokumentu: cienki separator nad kazdym naglowkiem drugiego stopnia. */
.bce-legal__h2 {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  margin-top: clamp(34px, 4vw, 46px);
  padding-top: clamp(20px, 2.5vw, 26px);
  border-top: 1px solid var(--bce-line);
  font-family: var(--bce-cond);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.bce-legal__h2 + .bce-legal__p,
.bce-legal__h2 + .bce-legal__block {
  margin-top: 14px;
}

.bce-legal__p {
  overflow-wrap: break-word;
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--bce-body);
  text-wrap: pretty;
}

/* Blok danych: adres, rejestr, kontakt. Wiersze sa krotkie i maja sie
   lamac tam, gdzie chce tego dokument, a nie gdzie wypadnie. */
.bce-legal__block {
  overflow-wrap: break-word;
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--bce-body);
}

.bce-legal__block strong,
.bce-legal__p strong {
  color: var(--bce-graphite);
  font-weight: 600;
}

.bce-legal__source {
  margin-top: clamp(34px, 4vw, 46px);
  padding-top: 18px;
  border-top: 1px solid var(--bce-line);
  font-size: 13px;
  line-height: 1.6;
  color: var(--bce-muted);
}

/* --------------------------------------------------------------------------
   5. LINKI
   --------------------------------------------------------------------------
   Powsciagliwy blekit, podkreslenie dopiero przy najechaniu.

   `overflow-wrap: anywhere` jest tu konieczne, nie kosmetyczne: adres
   `klemczak.t@buildingcontrolexperts.de` ma 37 znakow i przy 360 px bez
   tego rozpychalby dokument w poziomie.
   -------------------------------------------------------------------------- */

.bce-legal__link,
.bce-legal__doc a {
  color: var(--bce-blue);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bce-legal__link:hover,
.bce-legal__doc a:hover {
  color: var(--bce-graphite);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   6. POWROT NA STRONE GLOWNA
   --------------------------------------------------------------------------
   Zwykly link HTML z jawnym celem. Celowo NIE history.back() i nie zgadywanie
   z referrera — dokument prawny musi dzialac takze otwarty wprost z zakladki
   albo z wyszukiwarki.
   -------------------------------------------------------------------------- */

.bce-legal__back {
  display: inline-block;
  margin-top: clamp(36px, 4.5vw, 56px);
  font-family: var(--bce-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bce-graphite);
  border-bottom: 1px solid var(--bce-graphite);
  padding-bottom: 4px;
  transition: color 160ms ease, border-color 160ms ease;
}

.bce-legal__back:hover {
  color: var(--bce-blue);
  border-bottom-color: var(--bce-blue);
}