/*
  Showy Hair — style strony głównej (index.html) i strony polityki prywatności.
  Tokeny, przyciski, nagłówek, stopka i pola są w showy.css; tu układ sekcji landingu.
  Wartości przepisane 1:1 z prototypu (www-landing/design_handoff_showy_hair/Studio Włosy.dc.html)
  i jego README. Tam, gdzie klasa ze showy.css różni się od prototypu (np. line-height przycisku,
  text-wrap:balance nagłówków), nadpisujemy ją tutaj lokalnie, żeby landing zgadzał się z projektem.

  Klasa .ruch na <html> (ustawia ją skrypt w <head>): JS działa i brak prefers-reduced-motion
  → sekcje pojawiają się z animacją przy przewijaniu. Bez niej są widoczne od razu.
*/

/* Wysokość nagłówka: na telefonie dwa rzędy (72 + 44 + 1), od 900px jeden (72 + 1).
   strona.js mierzy prawdziwą wysokość i nadpisuje zmienną na <html>. */
:root { --hdr: 117px; }
@media (min-width: 900px) { :root { --hdr: 73px; } }

/* Przycięcie poziome jak na opakowaniu w prototypie. „overflow-x: clip” na body (showy.css) przechodzi
   na okno przeglądarki i samego body nie przycina — taśma opinii poszerzała wtedy stronę na telefonie
   (397 zamiast 390 px). clip (w przeciwieństwie do hidden) nie tworzy kontenera przewijania. */
main { overflow-x: clip; }

/* sekcje przewijane z menu nie chowają się pod przyklejonym nagłówkiem */
main [id] { scroll-margin-top: var(--hdr); }

.przeskok {
  position: absolute; left: 12px; top: -200px; z-index: 100;
  background: var(--white); color: var(--black); padding: 14px 18px;
  font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase;
}
.przeskok:focus { top: 12px; color: var(--black); }

.sekcja { padding: var(--pad-sekcji-y) var(--pad-sekcji-x); }

/* Nagłówki H2 w prototypie łamią się zwyczajnie (bez balance ze showy.css). */
.faq__tytul { text-wrap: wrap; }
/* Przyciski w prototypie mają line-height „normal”, a pełne nie mają ramki. */
.kontakt__wyslij { line-height: normal; }
.kontakt__wyslij { border-width: 0; }

/* =============================================================================
   TYPOGRAFIA Z PROJEKTU (Canva) — wspólna dla sekcji; kolor i odstępy ustawia sekcja
   ============================================================================= */

.tytul-wersaliki {
  font-weight: 300; font-size: clamp(22px, 1.88vw, 34px); line-height: 1.25; letter-spacing: 0.05em;
  text-transform: uppercase; margin: 0;
}
.akapit-projekt { font-size: clamp(15px, 1.19vw, 19px); font-weight: 300; line-height: 1.4; letter-spacing: 0.02em; }
/* drugi poziom tekstu: gęsty tekst w kolumnach (w Canvie wyraźnie mniejszy niż akapity wprowadzające) */
.akapit-kolumny { font-size: clamp(14px, 1vw, 16px); font-weight: 300; line-height: 1.55; letter-spacing: 0.01em; }
.haslo-kursywa {
  font-style: italic; font-weight: 300; font-size: clamp(13px, 1.29vw, 20px); line-height: 1.45;
  letter-spacing: 0.3em; text-transform: uppercase;
}
/* Nagłówek sekcji zwykłymi literami (Canva): mniejszy niż nagłówek hero; tekst pod nim to .akapit-projekt */
.tytul-sekcji { font-weight: 400; font-size: clamp(22px, 1.93vw, 34px); line-height: 1.2; letter-spacing: 0.01em; margin: 0; }
/* mały nagłówek nad tytułem sekcji (Canva): wersaliki bez rozstrzelenia, w kolorze tekstu */
.kicker-projekt {
  font-size: clamp(12px, 1.03vw, 16px); font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase;
  margin: 0 0 clamp(12px, 1.4vw, 22px);
}
/* łamanie wierszy jak w projekcie tylko od 900px; na telefonie tekst łamie się sam */
br.szeroki { display: none; }
@media (min-width: 900px) { br.szeroki { display: inline; } }

/* =============================================================================
   HERO
   ============================================================================= */

/* Wg projektu z Canvy (strona 1). Rozmiary tekstu w vw odpowiadają proporcjom projektu 16:9, z granicami. */
.hero { position: relative; background: var(--black); }
.hero__panel {
  position: relative; overflow: hidden; background: var(--black);
  display: flex; align-items: flex-end;
  min-height: calc(100vh - var(--hdr));
  min-height: calc(100svh - var(--hdr));
}
/* Telefon (do 900px): zdjęcie w górnej części panelu, wygaszone ku dołowi — tekst zaczyna się pod twarzą,
   a nie na niej. Od 900px zdjęcie wypełnia cały panel jak w projekcie. */
.hero__obraz {
  position: absolute; left: 0; right: 0; top: 0;
  height: 64vh; height: 64svh;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
@media (min-width: 900px) {
  .hero__obraz { bottom: 0; height: auto; -webkit-mask-image: none; mask-image: none; }
}
.hero__obraz picture, .hero__obraz img { display: block; width: 100%; height: 100%; }
/* 70% w poziomie: na wąskim ekranie kadr trzyma twarz (postać jest w prawej części zdjęcia) */
.hero__obraz img { max-width: none; object-fit: cover; object-position: 70% 25%; }

/* Przyciemnienie zmierzone na projekcie: czerń od 43% u góry do pełnej na dole, bez gradientu z boku.
   Kolor --black (14,14,14): dół hero ma to samo tło co pozostałe ciemne sekcje. */
.hero__cien {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,14,14,0.43) 0%, rgba(14,14,14,0.655) 30%, rgba(14,14,14,0.815) 60%, var(--black) 100%);
}

.hero__tresc { position: relative; width: 100%; }
.hero__kolumna {
  position: relative; max-width: var(--max); margin: 0 auto; color: var(--white);
  padding: 36vh clamp(20px, 5vw, 32px) clamp(40px, 14vh, 130px);
  padding-top: 36svh;
}
@media (min-width: 900px) { .hero__kolumna { padding-top: clamp(96px, 16vh, 180px); } }
/* max-width w em: od 900px nagłówek łamie się na trzy wiersze jak w projekcie, niezależnie od szerokości okna */
/* Nagłówek zwykłymi literami (Canva, wersja z 27.09): większy niż wersalikowe nagłówki sekcji */
.hero__tytul {
  font-weight: 400; font-size: clamp(26px, 2.45vw, 43px); line-height: 1.12; letter-spacing: 0.01em;
  color: var(--white); margin: 0;
}
.hero__lead { color: var(--white); margin: clamp(16px, 1.5vw, 26px) 0 0; }
.hero__lead + .hero__lead { margin-top: clamp(20px, 3.4vw, 54px); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3.6vw, 56px); }
/* przycisk z projektu (hero i rezerwacja): większy i pogrubiony, kolor z .przycisk--jasny / --ciemny */
.przycisk-projekt {
  font-size: clamp(14px, 1.29vw, 20px); font-weight: 600; letter-spacing: 0.04em; padding: 0.78em 1.55em;
  line-height: normal; border-width: 0;
}
/* drobna linia pod przyciskiem i hasło w rogu: wersaliki, hasło bez kursywy, w jednym wierszu */
.hero__podpis {
  font-size: clamp(9px, 0.62vw, 11px); font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase;
  margin: clamp(18px, 1.7vw, 26px) 0 0;
}
.hero__haslo {
  font-size: clamp(12px, 1.03vw, 17px); font-weight: 400; line-height: 1.45; letter-spacing: 0.3em;
  text-transform: uppercase; margin: 22px 0 0;
}
/* od 900px hasło w prawym dolnym rogu, wyrównane do prawej krawędzi treści */
@media (min-width: 900px) {
  .hero__haslo {
    position: absolute; right: clamp(20px, 5vw, 32px); bottom: clamp(28px, 10vh, 100px);
    margin: 0; margin-right: -0.3em; text-align: right; white-space: nowrap;
  }
}

/* =============================================================================
   POJAWIANIE SIĘ SEKCJI ([data-reveal], JS dodaje .widoczny)
   ============================================================================= */

.ruch [data-reveal] { transition: opacity .9s ease, transform .9s ease; }
.ruch [data-reveal]:not(.widoczny) { opacity: 0; transform: translateY(24px); }

/* =============================================================================
   REZERWACJA I KONTAKT (Canva, strona 5; za FAQ, ciemne tło): tekst, przycisk, adres, telefon i godziny
   po lewej; logo jako znak wodny z hasłem i formularzem po prawej
   ============================================================================= */

.rezerwacja { background: var(--black); color: var(--white); overflow: hidden; }
.rezerwacja__siatka { display: grid; gap: clamp(48px, 6vw, 96px); align-items: stretch; }
@media (min-width: 900px) { .rezerwacja__siatka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rezerwacja__tekst { display: flex; flex-direction: column; align-items: flex-start; }
.rezerwacja .tytul-sekcji { margin-bottom: clamp(28px, 3.6vw, 56px); }
.rezerwacja__akapit { margin: 0 0 0.9em; }
.rezerwacja__cta { margin-top: clamp(24px, 3.6vw, 56px); }
.rezerwacja__dane { margin-top: clamp(32px, 4vw, 56px); }
/* Instagram na dole kolumny (na telefonie pod danymi) */
.rezerwacja__instagram {
  display: flex; align-items: center; gap: clamp(12px, 1.2vw, 18px); margin-top: clamp(36px, 5vw, 64px);
  color: var(--white); font-size: clamp(13px, 0.95vw, 15px); font-weight: 400; line-height: 1.4;
}
@media (min-width: 900px) { .rezerwacja__instagram { margin-top: auto; padding-top: 48px; } }
.rezerwacja__instagram:hover { color: rgba(255,255,255,0.7); }
.rezerwacja__ikona { flex: none; width: clamp(30px, 2.7vw, 44px); height: auto; }
/* prawa kolumna: logo (białe, ok. 7% krycia) za hasłem i formularzem, wyśrodkowane w pionie */
.rezerwacja__znak { position: relative; min-width: 0; }
.rezerwacja__logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(100%, 540px); height: auto; opacity: 0.07; filter: invert(1); pointer-events: none;
}
.rezerwacja__formularz { position: relative; }
.rezerwacja__haslo {
  font-size: clamp(14px, 1.35vw, 22px); font-weight: 400; line-height: 1.5; letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0 0 clamp(14px, 1.4vw, 22px);
}

/* =============================================================================
   NASZ SPOSÓB PRACY (Canva, strona 4): nagłówek + hasło, trzy kafle z liniami między nimi
   ============================================================================= */

.praca { background: var(--black); color: var(--white); }
.praca__naglowek {
  display: flex; flex-wrap: wrap; gap: 24px clamp(32px, 6vw, 96px); align-items: flex-start; justify-content: space-between;
  margin-bottom: clamp(48px, 8vw, 130px);
}
/* hasło: wersaliki bez kursywy, rozmiar małego nagłówka */
.praca__haslo {
  font-size: clamp(12px, 1.03vw, 16px); font-weight: 400; line-height: 1.4; letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0;
}
/* Kafle jak w dawnym szablonie: linie to krawędzie kafli (nie prześwit tła siatki), więc kafel, który jeszcze
   się nie pojawił (animacja [data-reveal]), nie odsłania szarego pola. */
.praca__kafle { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
.praca__kafel {
  background: var(--black); padding: clamp(32px, 4.2vw, 58px); min-width: 0;
  transition: opacity .9s ease, transform .9s ease, background-color .3s ease;
}
.praca__kafel:hover { background: var(--black-hover); }
/* reguła pojawiania (.ruch [data-reveal]) ustawia własne przejścia; płynne rozjaśnienie po najechaniu zostaje */
.ruch .praca__kafel[data-reveal] { transition: opacity .9s ease, transform .9s ease, background-color .3s ease; }
.praca__kafel + .praca__kafel { border-top: 1px solid rgba(255,255,255,0.18); }
.praca__tytul { font-size: clamp(17px, 1.29vw, 21px); font-weight: 400; line-height: 1.3; margin: 0 0 18px; }
.praca__tekst { margin: 0 0 0.9em; }
.praca__tekst:last-child { margin-bottom: 0; }
/* Tekst kafli przycięty do wspólnej wysokości: sekcja ma być schludna, a nie rozciągnięta na trzy ekrany.
   Wysokość liczona w wierszach, żeby cięcie padało między wierszami, a nie w połowie liter.
   Bez JS (html bez klasy „js”) nic nie przycinamy: lepiej pokazać całość niż uciąć tekst bez możliwości rozwinięcia. */
.js .praca__tresc { overflow: hidden; }
.js .praca__kafel--rozwiniety .praca__tresc { max-height: none !important; }

/* Przycisk wstawia strona.js i tylko tam, gdzie tekst faktycznie się nie mieści. */
.praca__wiecej {
  background: none; border: 0; padding: 12px 0; margin: 10px 0 -12px; cursor: pointer;
  color: rgba(255, 255, 255, 0.7); font: inherit;
  font-size: 12px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
}
.praca__wiecej:hover { color: var(--white); }
.praca__wiecej::after {
  content: ""; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.15s ease;
}
.praca__kafel--rozwiniety .praca__wiecej::after { transform: translateY(1px) rotate(-135deg); }

/* od 900px trzy kafle w rzędzie z pionowymi liniami; tytuły zajmują tyle samo miejsca, teksty startują równo */
@media (min-width: 900px) {
  .praca__kafle { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .praca__kafel + .praca__kafel { border-top: 0; border-left: 1px solid rgba(255,255,255,0.18); }
  .praca__tytul { min-height: calc(2em * 1.3); margin-bottom: clamp(24px, 3.5vw, 56px); }
}

/* =============================================================================
   OPINIE Z BOOKSY — taśma (plakietka: opinia.css, dane i tryb taśmy: strona.js)
   ============================================================================= */

/* Bez JS nie ma skąd wziąć opinii, a przy pustej odpowiedzi/błędzie skrypt ustawia .bez-opinii na <html>:
   wtedy znika sekcja i link „Opinie” w obu menu (mocniejszy selektor niż display:flex linków w showy.css). */
html:not(.js) .opinie, html:not(.js) a[href="#opinie"],
.bez-opinii .opinie, .bez-opinii a[href="#opinie"] { display: none; }

/* plakietki mniejsze niż wcześniej (Canva: ok. 245 px przy 1552 px szerokości okna) */
.opinie { background: var(--paper-warm); color: var(--ink); --opinia-szer: clamp(210px, 60vw, 250px); }
@media (min-width: 900px) { .opinie { --opinia-szer: clamp(220px, 15.8vw, 280px); } }
.opinie__naglowek { margin: 0 0 clamp(40px, 6vw, 96px); }
.opinie__opis { margin: clamp(16px, 1.8vw, 28px) 0 0; }
.opinie__opis + .opinie__opis { margin-top: 0.7em; }
.opinie__okno {
  position: relative; margin: 0 calc(-1 * clamp(20px, 7vw, 120px)); overflow: hidden;
  /* miejsce na rząd plakietek od razu — sekcja nie podskakuje, gdy dojdą dane z /api/opinie */
  min-height: calc(var(--opinia-szer) * 3 / 2 + 8px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.opinie__okno:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.opinie__tasma, .opinie__lista { display: flex; gap: clamp(20px, 2.4vw, 36px); }
.opinie__tasma { width: max-content; padding: 4px clamp(10px, 1.2vw, 18px); }
.opinie__lista .opinia { width: var(--opinia-szer); flex: none; }
/* Wszystko się mieści (.statyczne): rząd wyśrodkowany, bez kopii, bez wygaszania brzegów. */
.opinie__okno.statyczne { -webkit-mask-image: none; mask-image: none; }
.opinie__okno.statyczne .opinie__tasma { margin: 0 auto; }
/* .jedzie — taśmę przesuwa strona.js (transform); palec i mysz ją łapią. Pionowy gest palca zostaje dla
   strony (pan-y), poziomy gest gładzika nie cofa strony w historii (overscroll-behavior-x). */
.opinie__okno.jedzie {
  cursor: grab; touch-action: pan-y pinch-zoom; overscroll-behavior-x: contain;   /* powiększanie dwoma palcami zostaje */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.opinie__okno.jedzie.ciagnie, .opinie__okno.reczne.ciagnie { cursor: grabbing; }
.opinie__okno.jedzie .opinie__tasma { will-change: transform; }
.opinie__okno.jedzie img { -webkit-user-drag: none; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  /* nic nie jedzie samo: skrypt nie dokleja kopii, zostaje zwykłe przewijanie ręczne
     (palcem, gładzikiem, strzałkami po fokusie) */
  .opinie__okno { overflow-x: auto; }
  .opinie__lista[data-kopia] { display: none; }
  /* .reczne — lista się nie mieści: mysz przeciąga okno (strona.js), palec i gładzik przewijają je natywnie */
  .opinie__okno.reczne { cursor: grab; -webkit-user-select: none; user-select: none; }
  .opinie__okno.reczne img { -webkit-user-drag: none; }
}

/* =============================================================================
   FAQ (jasne tło: między ciemnymi „Nasz sposób pracy” i rezerwacją)
   ============================================================================= */

.faq { background: var(--paper-warm); color: var(--ink); }
.faq__siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(36px, 6vw, 80px); }
.faq__wstep, .faq__lista { min-width: 0; }
.faq__tytul { margin: 0 0 clamp(16px, 1.8vw, 28px); }
.faq__opis { color: var(--ink-soft); max-width: 38ch; margin: 0; text-wrap: pretty; }
.faq__lista { display: flex; flex-direction: column; }
.faq__pozycja { border-top: 1px solid rgba(26,26,26,0.18); padding: 26px 0; }
.faq__pytanie { font-size: clamp(17px, 1.29vw, 21px); font-weight: 400; line-height: 1.3; margin: 0 0 10px; }
.faq__odpowiedz { color: var(--ink-soft); margin: 0; max-width: 56ch; text-wrap: pretty; }
/* Zajawka w FAQ prowadzi do podstrony usługowej. Link dodaje się w zapleczu, więc bywa, że go nie ma. */
.faq__link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 6px 0 -12px;
  color: var(--ink); font-size: 13px; font-weight: 400; letter-spacing: 0.02em;
  text-decoration: underline; text-decoration-color: rgba(26,26,26,0.35); text-underline-offset: 4px;
}
.faq__link:hover { text-decoration-color: var(--ink); }
.faq__link::after {
  content: ""; width: 6px; height: 6px; border-right: 1px solid currentColor; border-top: 1px solid currentColor;
  transform: rotate(45deg);
}

/* =============================================================================
   KONTAKT: dane salonu i formularz (w sekcji rezerwacji, ciemne tło)
   ============================================================================= */

.kontakt__opis { color: rgba(255,255,255,0.72); max-width: 44ch; margin: 0 0 clamp(20px, 2.4vw, 32px); text-wrap: pretty; }
.kontakt__dane { display: grid; gap: 22px; font-size: clamp(14px, 1vw, 16px); font-weight: 300; line-height: 1.6; color: rgba(255,255,255,0.85); }
.kontakt__blok { display: grid; gap: 6px; }
.kontakt__etykieta { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.kontakt__wartosc { font-style: normal; color: inherit; }
/* numer jako link: pole dotyku 44px bez zmiany układu (padding zjedzony ujemnym marginesem) */
.kontakt__tel {
  justify-self: start; padding: 12px 0; margin: -12px 0;
  text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); text-underline-offset: 4px;
}
.kontakt__tel:hover { color: var(--white); text-decoration-color: var(--white); }

.kontakt__formularz { position: relative; min-width: 0; display: grid; gap: 20px; align-content: start; }
.kontakt__wiersz { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; }
/* błąd pola: mocniejsza biała linia (bez zmiany wysokości) */
.kontakt .pole [aria-invalid="true"] { border-bottom-color: var(--white); box-shadow: inset 0 -1px 0 var(--white); }
.kontakt .pole__blad { color: var(--white); }

.zgoda { display: grid; gap: 4px; }
.zgoda__etykieta {
  display: flex; align-items: flex-start; gap: 14px; min-height: 44px; padding: 10px 0; cursor: pointer;
  font-size: 13px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,0.72);
}
.zgoda__etykieta input {
  -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0;
  border: 1px solid rgba(255,255,255,0.55); border-radius: 0; background: transparent; cursor: pointer;
}
.zgoda__etykieta input:checked {
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.2l3.3 3.3L15 6.8' fill='none' stroke='%230E0E0E' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
  border-color: var(--white);
}
.zgoda__etykieta input[aria-invalid="true"] { border-color: var(--white); box-shadow: 0 0 0 1px var(--white); }
.zgoda__etykieta input:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.zgoda__etykieta a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.zgoda__etykieta a:hover { color: rgba(255,255,255,0.72); }

/* pułapka na boty: poza ekranem (nie display:none — część botów to rozpoznaje) */
.poza-ekranem { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.kontakt__wysylka { display: grid; justify-items: start; }
.kontakt__wyslij { padding: 17px clamp(26px, 7vw, 38px); min-height: 48px; }
.kontakt__wyslij[aria-disabled="true"] { cursor: progress; }
.kontakt__status { font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--white); margin: 0; max-width: 52ch; }
.kontakt__status:not(:empty) { margin-top: 20px; }
.kontakt__status a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* =============================================================================
   STOPKA (uzupełnienia do showy.css)
   ============================================================================= */

.stopka__marka { min-width: 0; }

/* =============================================================================
   POLITYKA PRYWATNOŚCI
   ============================================================================= */

.dokument { background: var(--paper-warm); }
.dokument .kicker { color: #5A5A5A; }
/* wąska kolumna tekstu (ok. 70 znaków w wierszu) — wygodna przy długim dokumencie */
.dokument__kolumna { max-width: 760px; }
.dokument__tytul { margin-bottom: 18px; }
.dokument__data { font-size: 13px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: #5A5A5A; margin: 0 0 28px; }
.dokument__wstep { font-size: clamp(16px, 1.3vw, 18px); font-weight: 300; line-height: 1.7; color: var(--ink); margin: 0 0 40px; }
/* uwaga redakcyjna nad dokumentem (np. „projekt do sprawdzenia prawnego”): ramka zamiast koloru,
   paleta zostaje achromatyczna jak w całym projekcie */
.dokument__uwaga {
  font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--ink);
  background: var(--card); border: 1px solid rgba(26,26,26,0.18); border-left-width: 3px;
  padding: 16px 18px; margin: 0 0 28px;
}
.dokument a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(26,26,26,0.35); text-underline-offset: 3px; overflow-wrap: anywhere; }
.dokument a:hover { text-decoration-color: var(--ink); }

.dokument__spis { border-top: 1px solid rgba(26,26,26,0.18); border-bottom: 1px solid rgba(26,26,26,0.18); padding: 24px 0; margin: 0 0 16px; }
.dokument__spis-tytul { font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: #5A5A5A; margin: 0 0 14px; }
.dokument__spis ol { margin: 0; padding-left: 1.6em; columns: 2 260px; column-gap: 40px; font-size: 14px; line-height: 1.5; }
.dokument__spis li { break-inside: avoid; padding: 5px 0; }
.dokument__spis a { text-decoration: none; }
.dokument__spis a:hover { text-decoration: underline; }

.dokument__sekcja { padding-top: clamp(28px, 3vw, 40px); }
.dokument__h2 { font-size: clamp(19px, 1.6vw, 23px); font-weight: 400; line-height: 1.3; margin: 0 0 16px; }
.dokument__nr { display: inline-block; min-width: 1.6em; color: #5A5A5A; }
.dokument__h3 { font-size: 16px; font-weight: 500; line-height: 1.4; margin: 26px 0 8px; }
.dokument__sekcja p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--ink-soft); margin: 0 0 14px; }

/* tabela okresów przechowywania; do 600px wiersze jako bloki (kategoria, pod nią okres) — role ARIA
   w HTML zachowują dla czytników ekranu semantykę tabeli mimo zmiany display */
.tabela { margin: 8px 0 20px; }
.tabela table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
.tabela th, .tabela td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-top: 1px solid rgba(26,26,26,0.18); }
.tabela thead th { font-size: 11px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: #5A5A5A; border-top: 0; padding-top: 0; }
.tabela tbody th { width: 34%; font-weight: 500; color: var(--ink); }
.tabela td { font-weight: 300; color: var(--ink-soft); }
@media (max-width: 599.98px) {
  .tabela table, .tabela tbody, .tabela tr,
  .tabela th, .tabela td { display: block; width: auto; }
  .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela tr { border-top: 1px solid rgba(26,26,26,0.18); padding: 14px 0; }
  .tabela tbody th, .tabela td { border-top: 0; padding: 0; }
  .tabela tbody th { width: auto; margin-bottom: 4px; }
}

.dokument__koniec { font-size: 14px; font-weight: 400; color: var(--ink); margin: 36px 0 0; padding-top: 24px; border-top: 1px solid rgba(26,26,26,0.18); }
.dokument__powrot { margin-top: 36px; }

/* =============================================================================
   PODSTRONY USŁUGOWE (generowane z tresci/*.md przez deploy/zbuduj-strony.py)
   ============================================================================= */

/* Hero podstrony: ta sama budowa co na landingu, tylko niższy. Landing ma zatrzymać,
   podstrona ma szybko oddać konkret, bo klientka przychodzi na nią z wyszukiwarki. */
/* Hero podstrony: ta sama budowa co na landingu, tylko niższa.
   Do 900px zdjęcie stoi u góry ze stałą wysokością, tekst pod nim, a wysokość panelu wyznacza treść.
   Od 900px reguła bazowa rozciąga zdjęcie na cały panel (bottom: 0, height: auto), więc panel może mieć
   stałą proporcję. Nadpisanie wysokości zdjęcia na szerokim ekranie zostawiało czarny pas pod zdjęciem. */
.hero--podstrona .hero__panel { min-height: 0; }
@media (max-width: 899px) {
  .hero--podstrona .hero__obraz { height: 40vh; height: 40svh; }
  .hero--podstrona .hero__kolumna { padding-top: 21vh; padding-top: 21svh; padding-bottom: clamp(28px, 5vh, 56px); }
}
@media (min-width: 900px) {
  .hero--podstrona .hero__panel { min-height: calc(56vh - var(--hdr)); min-height: calc(56svh - var(--hdr)); }
  .hero--podstrona .hero__kolumna { padding-top: clamp(64px, 10vh, 108px); padding-bottom: clamp(32px, 6vh, 72px); }
}

/* Strona bez własnego zdjęcia: sam ciemny panel. Wyściółka liczona pod zdjęcie zostawiłaby
   nad nagłówkiem pas pustej czerni, więc ją skracamy. */
.hero--bez-zdjecia .hero__kolumna { padding-top: clamp(40px, 8vh, 84px); }

/* Ścieżka nawigacji na zdjęciu hero, czyli na ciemnym tle */
.okruszki { font-size: 12px; font-weight: 300; letter-spacing: 0.08em; color: rgba(255,255,255,0.72); margin: 0 0 16px; }
.okruszki a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.4); text-underline-offset: 3px; }
.okruszki a:hover { text-decoration-color: var(--white); }
.okruszki span[aria-hidden] { padding: 0 7px; }

.usluga { background: var(--paper); color: var(--ink); }
.usluga__kolumna { max-width: 760px; }
.usluga__h2 { margin: clamp(30px, 3.4vw, 52px) 0 14px; }
.usluga__kolumna > .usluga__h2:first-child { margin-top: 0; }
.usluga__h3 { font-size: clamp(16px, 1.25vw, 19px); font-weight: 500; line-height: 1.4; margin: 24px 0 8px; }
.usluga__tekst { color: var(--ink-soft); margin: 0 0 14px; max-width: 64ch; text-wrap: pretty; }
.usluga__lista { color: var(--ink-soft); margin: 0 0 18px; padding-left: 1.3em; line-height: 1.7; }
.usluga__lista li { margin: 0 0 8px; max-width: 62ch; }

/* Domknięcie strony: jedno wezwanie do konsultacji i wyjście do sąsiednich usług,
   żeby żadna podstrona nie była ślepym zaułkiem. */
.usluga__domkniecie { background: var(--paper-warm); color: var(--ink); text-align: center; }
.usluga__domkniecie .tytul-sekcji { margin: 0 0 14px; }
.usluga__domkniecie .usluga__tekst { max-width: 52ch; margin: 0 auto 26px; }
.usluga__nastepne { font-size: 14px; font-weight: 300; color: var(--ink-soft); margin: 28px 0 0; }
.usluga__nastepne a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(26,26,26,0.35); text-underline-offset: 3px; }
.usluga__nastepne a:hover { text-decoration-color: var(--ink); }