/* Hero dokumentu prawnego — arkusz partu `strona-hero.php`.
 *
 * Wartości przepisane z `canvas:Regulamin Marginalia` l. 35–52 i `canvas:
 * Prywatnosc Marginalia` l. 34–51 w chwili pisania. Oba pliki mają ten pas
 * jeden do jednego, więc różnice między nimi to wyłącznie tekst.
 *
 * GÓRNY ODSTĘP: canvas daje `padding-top: 26px` PONAD rozpórką 90 px, którą
 * sam rysuje pod paskiem nawigacji (l. 32). W motywie tę rozpórkę stawia
 * `header.php`, więc 26 px przenosi się wprost — to jest zapas nad okruszkiem,
 * a nie odstęp od paska. Ta sama pułapka, co przy `/faq`: liczba w canvasie
 * bywa sumą, a nie składnikiem.
 */

.szewko-strona-hero {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  /* ⚠︎ 180/88 Z CANVASU MINUS 70 PX FALI. Canvas trzyma falę w hero, więc jego
     `padding-bottom: 88px` zawiera pas, na którym fala leży. U nas fala jest
     dzieckiem arkusza (patrz niżej), więc te 70 px przeszły razem z nią —
     inaczej ciemny pas urósłby o wysokość fali. Suma jest ta sama co
     na canvasie, przesunęła się tylko granica elementów. */
  min-height: 110px;
  padding: 26px 80px 18px;

  /* TA SAMA RECEPTURA, CO PASEK NAWIGACJI — nie `var(--color-smoked-tent)`.
     `header.css` daje paskowi w stanie litym `rgba(28, 16, 7, 0.95)`, a przez
     przezroczystą rozpórkę prześwituje pod nim Parchment z `body`, więc pasek
     wychodzi JAŚNIEJSZY od czystego tokenu. Hero z pełnym Smoked Tentem
     rysowałoby poziomą granicę tam, gdzie canvas ma jedną płaszczyznę.
     Zapisane jako operacja, nie jako jej wynik: zmiana tła `body` przestawi
     pasek i hero razem. Ten sam wniosek wyszedł przy `/faq` (`faq-hero.css`). */
  background: color-mix(in srgb, var(--color-smoked-tent) 95%, transparent);

  @media (max-width: 1023px) {
    padding-right: var(--space-xl);
    padding-left: var(--space-xl);
  }

  @media (max-width: 767px) {
    padding-right: var(--space-lg);
    padding-left: var(--space-lg);
  }
}

/* Dwie warstwy dekoracyjne.

   ⚠︎ `inset: 0`, NIE `0 0 -12px 0`. Pierwsza wersja zsuwała tło 12 px poniżej
   hero, żeby wypełnić zapas pod falą, która wtedy jeszcze stała w hero. Po
   przeniesieniu fali do arkusza ten zwis **przyciemniał jej pierwsze 12 px**
   gradientem 86 % — zmierzone: rgb(34, 22, 13) zamiast rgb(39, 27, 17), czyli
   dokładnie ta krawędź, którą poprawka miała usunąć.

   ⚠︎ ZOSTAJĄ, choć przy `/faq` właściciel zdjął 04.08 dokładnie tę parę warstw.
   Tamta decyzja była mierzalna, nie estetyczna: `pergamin.png` ma 578 × 432 px
   i winietę, a `background-size: cover` rozciągał ją na 1905 px i robił z winiety
   ciemne pasy po bokach. Tutaj canvas woła `240% auto` z `no-repeat` — przy tym
   powiększeniu przyciemnione krawędzie wychodzą poza kadr, więc powód tamtej
   decyzji się nie przenosi. Zdjęcie warstw to skasowanie dwóch reguł niżej
   i dwóch divów w `strona-hero.php`. */
.szewko-strona-hero__tlo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.szewko-strona-hero__pergamin {
  position: absolute;
  inset: 0;
  background-image: url("../img/scenes/pergamin.png");
  background-repeat: no-repeat;
  background-position: center 50%;
  background-size: 240% auto;
  opacity: 0.16;
  mix-blend-mode: luminosity;
}

.szewko-strona-hero__ciemnia {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-smoked-tent) 55%, transparent) 0%,
    color-mix(in srgb, var(--color-smoked-tent) 86%, transparent) 100%
  );
}

.szewko-strona-hero__tresc {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.szewko-strona-hero__okruszki {
  margin: 0 0 10px;
  color: color-mix(in srgb, var(--color-sand-gold) 80%, transparent);
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.06em;

  /* Sand Gold ma na Smoked Tent własną podłogę krycia — minimum 75 %,
     potwierdzone czterokrotnie (`PORT.md` §2d). 80 % z canvasu mieści się
     nad nią; reguła „nie schodź poniżej 60 %" z warsztatu `ui-ux` dla tego
     tokenu NIE wystarcza. */
  & a {
    color: inherit;
    text-decoration: none;

    &:hover {
      color: var(--color-brass-lantern);
    }
  }

  & .szewko-strona-hero__strzalka {
    margin: 0 var(--space-sm);
  }

  & .szewko-strona-hero__biezacy {
    color: var(--color-parchment);
  }
}

.szewko-strona-hero__tytul {
  margin: 0;
  color: var(--color-parchment);
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  /* Najdłuższy tytuł dokumentu w projekcie ma 21 znaków („Polityka
     prywatności"), więc łamanie nie jest tu problemem — ale przy 390 px
     i wersaliku z odstępem 0,12em rozjeżdża się każdy dłuższy. */
  text-wrap: balance;

  @media (max-width: 767px) {
    font-size: 28px;
    letter-spacing: 0.1em;
  }
}

.szewko-strona-hero__lead {
  max-width: 640px;
  margin: 12px 0 0;
  color: var(--color-sand-gold);
  font-family: var(--font-accent);
  font-size: 17px;
  font-style: italic;
  line-height: 1.5;
  text-wrap: pretty;
}

/* ⚠︎ **HERO NIE MA FALI I NIE MA JEJ DOSTAĆ.** Canvas rysuje ją tutaj,
   wypełnioną Parchmentem, i pierwsza transkrypcja to powtórzyła. Zmierzone
   po fakcie: arkusz pod spodem ma fakturę lnu i renderuje się jako
   rgb(244, 228, 192), a płaski Parchment fali to rgb(245, 233, 211) — przez
   całą szerokość biegł jaśniejszy pas na 80 px.

   Fala stoi w `page.php` jako dziecko arkusza, wypełniona kolorem TEGO pasa.
   Pod krzywą zostaje wtedy przezroczystość i faktura dochodzi do grzbietu sama.
   Reguła przekrojowa: `.claude/CLAUDE.md`, „Fale wydmy na styku sekcji". */

/* ⚠︎ ROZPÓRKA POD PASKIEM NAWIGACJI ZOSTAJE PRZEZROCZYSTA — i to jest
   ODWROTNOŚĆ reguły z `single.css`. Warto wiedzieć dlaczego, bo pierwsza
   poprawka tego styku przepisała tamtą regułę w ciemno i **pogorszyła styk**.

   `single.css` maluje rozpórkę Smoked Tentem, bo wpis otwiera się sekcją
   w czystym Smoked Tencie — pasek przy `95 %` przepuszczałby pod spodem
   Parchment z `body` i wychodziłby jaśniejszy od niej.

   To hero **nie jest** czystym Smoked Tentem: ma tę samą recepturę co pasek
   (`smoked-tent 95 %`), właśnie po to, żeby styk zniknął. Rozpórka pomalowana
   na Smoked Tent daje wtedy pasek rgb(29, 16, 7) przy hero rgb(41, 28, 19) —
   różnicę WIĘKSZĄ niż bez niej. Zmierzone w obie strony.

   Reguła przekrojowa brzmi więc: **rozpórka ma mieć wyrenderowany kolor sekcji
   pod nią**, a nie „Smoked Tent". Przy przezroczystej rozpórce pasek i hero
   liczą się z tego samego Parchmentu i wychodzą identycznie. */

/* ─── DRUK ───────────────────────────────────────────────────── */

/* Hero zostaje jako tytuł dokumentu, ale bez ciemnego pola na całą szerokość
   kartki, bez tekstury i bez fali.
   ⚠︎ Reguła stoi TUTAJ, a nie w `strona.css`: `page.php` kolejkuje `strona.css`
   PRZED partami, więc ten arkusz ładuje się później i przy równej
   specyficzności wygrywa. Ta sama reguła napisana tam nie działała. */
@media print {
  .szewko-strona-hero {
    min-height: 0;
    padding: 0 0 var(--space-lg);
    background: none;
  }

  .szewko-strona-hero__tlo {
    display: none;
  }

  .szewko-strona-hero__tytul,
  .szewko-strona-hero__lead,
  .szewko-strona-hero__okruszki,
  .szewko-strona-hero__okruszki a {
    color: var(--color-druk-tekst);
  }
}