/* Statyczne hero + sekcja "ReadEden od środka".
 *
 * Wdrożenie prototypu prototypes/homepage-clarity/static-hero-journey.html
 * (kontrakt: docs/audyty/strona-glowna-2026-08-11/ustalenia.md, wpis Codexa
 * z 12 sierpnia 2026).
 *
 * OSOBNY PLIK, wczytywany PO styles.css - i to jest istotne. styles.css ma
 * własne, starsze reguły dla .hero i dla karuzeli (.tour-*). Nie usuwam ich,
 * bo ten sam arkusz obsługuje podstrony. Zamiast tego nadpisuję je stąd:
 * przy równej wadze wygrywa plik wczytany później, a reguły karuzeli są
 * dodatkowo zawężone przez .app-showcase, żeby wygrywały pewnie.
 *
 * Zmienne są powtórzone z prototypu celowo - styles.css używa innych nazw
 * (--border, --ink-muted), więc bez tego hero rozjechałoby się na kolorach. */
:root {
  --hero-paper: #f6f1e7;
  --hero-ink: #34291c;
  --hero-muted: #716452;
  --hero-gold: #b97930;
  --hero-gold-dark: #8d5721;
  --hero-line: #dfd1bb;
  --header-height: 72px;
}

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

.hero {
  position: relative;
  min-height: calc(100svh - var(--header-height));
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--hero-line);
  background: linear-gradient(105deg, #faf6ed 0%, #f5ede0 55%, #efe0cb 100%);
}

.hero .hero-glow {
  position: absolute;
  z-index: -2;
  width: 670px;
  height: 670px;
  right: -135px;
  top: 48%;
  border-radius: 50%;
  background: rgba(191, 128, 57, .16);
  filter: blur(28px);
  transform: translateY(-50%);
}

/* REGAL ZNIKNAL Z HERO (2026-08-13, decyzja Jana).
   Stalo tu tlo z `library-room.webp` na 30% krycia - ten sam obraz, ktory
   chwile pozniej jest centralnym punktem podrozy. Dwa powody, zeby go stad
   zdjac, i drugi wazy wiecej:
   1. Powtorzenie: ten sam pokoj w tle hero i zaraz potem w podrozy.
   2. To WLASNIE ten obraz pchal ludzi w strone "wypozyczalni e-bookow".
      Audyt z 11.08 mowi wprost: "Regal pozostaje waznym obrazem i nagroda za
      prowadzenie dziennika, ale pojawia sie DOPIERO PO wyjasnieniu
      mechanizmu". W hero stal przed nim, czyli wbrew decyzji, ktora ta
      przebudowe uruchomila.
   Zostaje sama poswiata i telefon - a telefon jest tu wlasciwa ilustracja,
   bo hero ma odpowiadac na pytanie "czym to jest". */

.hero .hero-inner {
  width: min(1180px, calc(100% - 48px));
  min-height: calc(100svh - var(--header-height));
  margin: 0 auto;
  padding: clamp(58px, 8vh, 96px) 0 58px;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, .72fr);
  align-items: center;
  gap: clamp(48px, 8vw, 118px);
  text-align: left;
}

.hero .hero-copy { max-width: 705px; }

.hero .availability {
  display: inline-flex;
  margin: 0 0 28px;
  padding: 8px 13px;
  border: 1px solid rgba(183, 121, 48, .35);
  border-radius: 999px;
  background: rgba(255, 250, 240, .7);
  color: var(--hero-gold-dark);
  font-size: 12px;
  font-weight: 600;
}

/* styles.css ma `.hero h1` z cieniem tekstu i wyśrodkowaniem - nadpisujemy. */
.hero h1 {
  max-width: 740px;
  margin: 0;
  color: #2f2418;
  font-size: clamp(42px, 4.8vw, 68px);
  line-height: 1.06;
  letter-spacing: -.045em;
  text-shadow: none;
}

/* `.hero p.lead` w styles.css jest bardziej szczegółowe niż `.lead`,
 * dlatego tutaj też musi być z `p`, inaczej stare reguły wygrywają. */
.hero .hero-copy p.lead {
  max-width: 680px;
  margin: 25px 0 0;
  color: #615342;
  font-size: clamp(17px, 1.65vw, 20px);
  line-height: 1.72;
  text-align: left;
  text-shadow: none;
}

.hero .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero .actions .btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border: 1px solid var(--hero-gold);
  border-radius: 13px;
  background: var(--hero-gold);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 9px 24px rgba(116, 65, 21, .17);
}

.hero .actions .btn.ghost {
  border-color: #c8a476;
  background: rgba(255, 250, 240, .66);
  color: var(--hero-gold-dark);
  box-shadow: none;
}

/* ===== TELEFON W HERO ===== */

.hero .device-stage {
  position: relative;
  justify-self: center;
  width: min(360px, 30vw);
  padding: 4px;
}

/* ===== ATRAPA TELEFONU =====
 *
 * Te reguły NIE SĄ przypisane do hero, i to jest w nich najważniejsze.
 * Ekrany aplikacji w karuzeli „ReadEden od środka" wisiały jako gołe
 * prostokąty: sam zrzut, bez niczego dookoła. Jan zgłosił to jako brak
 * kontekstu (2026-08-13) - człowiek widzi obrazek i nie od razu wie, że
 * patrzy na telefon. Ta sama atrapa co w hero rozwiązuje to bez wymyślania
 * drugiego wyglądu, a przy okazji daje pasek stanu, który trzyma wysepkę
 * głośnika z dala od tytułu książki.
 *
 * Rozmiar ustawia RODZIC (.device-stage), nie te reguły - dzięki temu ten sam
 * telefon działa w hero, w karuzeli i wszędzie, gdzie się przyda.
 */
.device-shadow {
  position: absolute;
  inset: 14% -16% 3%;
  border-radius: 50%;
  background: rgba(90, 43, 14, .32);
  filter: blur(38px);
  transform: translateY(28px);
}

.phone {
  position: relative;
  padding: 11px;
  border: 2px solid #514031;
  border-radius: 48px;
  background: linear-gradient(145deg, #261b14, #0f0a07 56%, #37261a);
  box-shadow:
    0 35px 80px rgba(53, 27, 11, .34),
    inset 0 0 0 2px rgba(255,255,255,.06);
}

/* Przechył tylko w hero: tam telefon jest ozdobą, w karuzeli pokazuje
   konkretny ekran i ma stać prosto. */
.hero .phone { transform: rotate(1.2deg); }

.phone-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 780 / 1688;
  border-radius: 37px;
  background: #1b130d;
  /* PASEK STANU I PASEK DOLNY, OBA PO 34 PX.
     Zrzuty aplikacji nie maja paska stanu w sobie - zaczynaja sie od razu
     paskiem tytulu - a atrapa telefonu rysuje wysepke glosnika NA ekranie.
     Bez odstepu u gory wysepka ladowala na tytule ksiazki i przecinala go
     w polowie (Jan, 2026-08-13, widoczne na slowie "Beyond").
     Wysepka siedzi 6-25 px od gory ekranu, wiec 34 px daje jej zapas.

     DLACZEGO TYLE SAMO U DOLU. Poczatkowo pas byl tylko u gory i telefon
     wygladal na ciezszy z gory - Janowi wydawalo sie nawet, ze obudowa jest
     u gory szersza. Pomiar na zrzucie: ciemny pas 46 px u gory i 12 px
     u dolu, przy idealnie rownej szerokosci obudowy (352 px na calej
     wysokosci). Oko widzialo asymetrie ciemnej masy i tlumaczylo ja sobie
     jako zwezanie. Rowny pas u dolu to zamyka, a przy okazji wyglada jak
     miejsce na pasek gestow w prawdziwym telefonie. */
  padding-top: 34px;
  padding-bottom: 34px;
}

.phone-screen img {
  width: 100%;
  height: 100%;
  display: block;
  /* od gory, zeby pasek stanu odcial dol zrzutu, a nie jego naglowek */
  object-fit: cover;
  object-position: top;
}

.phone-speaker {
  position: absolute;
  z-index: 3;
  top: 17px;
  left: 50%;
  width: 72px;
  height: 19px;
  border-radius: 999px;
  background: #080604;
  transform: translateX(-50%);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
}

.phone-camera {
  position: absolute;
  z-index: 4;
  top: 23px;
  left: calc(50% + 22px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #201b19;
  box-shadow: inset 0 0 0 2px #080604;
}

/* PRZYCISKI NA OBUDOWIE - UKŁAD ANDROIDOWY, WSZYSTKIE PO PRAWEJ.
 *
 * Najpierw były trzy po lewej (wyciszenie, głośność) i jeden po prawej,
 * czyli iPhone. Jan: „ja mam tylko po prawej u siebie" - i to jest właściwe
 * odniesienie. ReadEden wychodzi najpierw na Google Play, a na Androidzie
 * zasilanie i kołyska głośności siedzą razem po prawej stronie, lewa
 * krawędź zostaje gładka. Telefon na stronie ma przypominać ten, który
 * odwiedzający trzyma w ręce, a nie ten, który zna projektant.
 *
 * POŁOŻENIE W PROCENTACH, NIE W PIKSELACH. Ta sama atrapa stoi w hero
 * (739 px wysokości) i w karuzeli (459 px). Przy pikselach te same 118 px
 * to 16% wysokości dużego telefonu i 26% małego, więc przyciski wędrowałyby
 * po obudowie zależnie od rozmiaru.
 */
.phone-button {
  position: absolute;
  left: auto;
  right: -5px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #3a2c22;
}

/* zasilanie wyżej, pod nim dłuższa kołyska głośności */
.phone-button-power { top: 22%; height: 7%; }
.phone-button-volume { top: 32%; height: 12%; }

/* ===== KOTWICA PODRÓŻY ===== */

.journey-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 0;
}

#jcap5 .jstore-note {
  margin: 14px 0 0;
  color: #d8c7a8;
  font-size: 14px;
}

/* ===== SEKCJA "READEDEN OD ŚRODKA" ===== */

.app-showcase {
  --screen-ratio: .4621;
  position: relative;
  overflow: hidden;
  padding: clamp(78px, 10vw, 132px) 0 clamp(72px, 9vw, 118px);
  border-top: 1px solid var(--hero-line);
  border-bottom: 1px solid var(--hero-line);
  background:
    radial-gradient(circle at 78% 16%, rgba(185, 121, 48, .11), transparent 30%),
    #fbf6ec;
}

.app-showcase .showcase-heading {
  width: min(780px, calc(100% - 44px));
  margin: 0 auto clamp(46px, 6vw, 76px);
  text-align: center;
}

.app-showcase .showcase-kicker,
.app-showcase .slide-number {
  color: #9b6427;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.app-showcase .showcase-heading h2 {
  margin: 10px 0 0;
  color: var(--hero-ink);
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: -.04em;
}

.app-showcase .showcase-heading > p:last-child {
  margin: 18px 0 0;
  color: var(--hero-muted);
  font-size: 17px;
}

.app-showcase .tour-carousel {
  position: relative;
  width: min(1080px, 100%);
  margin: 0 auto;
  scroll-margin-top: 76px;
}

.app-showcase .tour-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.app-showcase .tour-track::-webkit-scrollbar { display: none; }

.app-showcase .tour-slide {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  padding: 0 clamp(58px, 8vw, 108px);
  display: grid;
  grid-template-columns: minmax(250px, 350px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(54px, 8vw, 112px);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.app-showcase .tour-shot {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Szerokość ustawia obudowa telefonu, nie sam obrazek - obrazek wypełnia
   ekran (patrz .phone-screen img). Obramowanie i cień też są już w atrapie,
   więc tutaj zostaje samo pilnowanie rozmiaru. */
.app-showcase .tour-shot .device-stage {
  position: relative;
  width: min(300px, 30vw, calc(68svh * var(--screen-ratio)));
}

.app-showcase .tour-slide figcaption {
  max-width: 480px;
  margin-top: 0;
  text-align: left;
}

.app-showcase .slide-number { margin: 0 0 13px; }

.app-showcase .tour-slide h3 {
  margin: 0;
  color: var(--hero-ink);
  font-size: clamp(30px, 3.7vw, 50px);
  line-height: 1.13;
  letter-spacing: -.035em;
}

.app-showcase .tour-slide figcaption > p:last-child {
  margin: 20px 0 0;
  color: var(--hero-muted);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.72;
}

.app-showcase .tour-nav {
  position: absolute;
  z-index: 4;
  top: 50%;
  width: 48px;
  height: 48px;
  display: none;
  border: 1px solid #d3bea0;
  border-radius: 50%;
  background: rgba(255, 250, 240, .94);
  color: var(--hero-gold-dark);
  font: 400 28px/1 Georgia, serif;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(52, 41, 28, .13);
  transform: translateY(-50%);
}

.app-showcase .tour-carousel.js .tour-nav {
  display: grid;
  place-items: center;
}

.app-showcase .tour-nav.prev { left: 12px; }
.app-showcase .tour-nav.next { right: 12px; }
.app-showcase .tour-nav[disabled] { opacity: .3; cursor: default; }

.app-showcase .tour-dots {
  display: none;
  justify-content: center;
  gap: 10px;
  margin-top: 38px;
}

.app-showcase .tour-carousel.js .tour-dots { display: flex; }

.app-showcase .tour-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(52, 41, 28, .22);
  cursor: pointer;
}

.app-showcase .tour-dots button[aria-current="true"] {
  background: var(--hero-gold);
  transform: scale(1.28);
}

/* ===== TELEFON I MAŁE EKRANY ===== */

@media (max-width: 860px) {
  :root { --header-height: 62px; }

  .hero .hero-inner {
    width: calc(100% - 36px);
    padding: 38px 0 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 34px;
  }
  .hero .hero-copy { max-width: none; }
  .hero .availability { margin-bottom: 21px; font-size: 11px; }
  .hero h1 { font-size: clamp(37px, 10vw, 53px); }
  .hero .hero-copy p.lead { margin-top: 20px; font-size: 16px; line-height: 1.62; }
  .hero .actions { margin-top: 23px; }
  .hero .actions .btn { min-height: 47px; padding: 11px 15px; font-size: 14px; }
  .hero .device-stage { width: min(270px, 69vw); align-self: center; margin-bottom: 46px; }
  .hero .phone { border-radius: 38px; transform: none; }
  .hero .phone-screen { border-radius: 29px; }
  .phone-speaker { top: 16px; width: 60px; height: 16px; }
  .phone-camera { top: 21px; left: calc(50% + 18px); width: 6px; height: 6px; }
}

/* Zagęszczenie z prototypu. Powód nie jest kosmetyczny: przy 390x664 px
 * (typowy telefon) pole "Zapisz" na ekranie w telefonie wypadało 14 px pod
 * krawędzią ekranu. Po tym zagęszczeniu jest 67 px nad nią. Zmierzone
 * 11 sierpnia 2026 - nie rozluźniaj tych odstępów bez ponownego pomiaru. */
/* DWIE KOLUMNY DOPIERO WTEDY, GDY JEST NA NIE MIEJSCE.
 *
 * Slajd karuzeli ekranów układał się w dwie kolumny od 431 px w górę, bo
 * jednokolumnowy wariant siedział dopiero w bloku dla małych telefonów.
 * Rachunek się nie spinał: przy oknie 550 px kolumny wychodziły „350px 30px",
 * czyli obrazek dostawał 350 pikseli, a tekst trzydzieści i łamał się po
 * jednej literze. Jan przysłał to jako zrzut z jednym słowem na wers
 * (2026-08-13); w emulacji telefonu tego nie widać, bo tam działa już wariant
 * jednokolumnowy - usterka mieszkała dokładnie pomiędzy telefonem a laptopem.
 *
 * SKĄD 860 PX, I CZEMU NIE 700.
 * Najpierw policzyłem próg od DOLNEJ granicy kolumny z obrazkiem (250 px)
 * i wyszło 700. Pomiar w przeglądarce pokazał, że przy 701 px na tekst zostaje
 * 179 px, czyli nagłówek dalej łamie się na cztery wersy. Powód: kolumna
 * `minmax(250px, 350px)` bierze swoje MAKSIMUM, gdy tylko jest miejsce, więc
 * liczyć trzeba od 350, nie od 250.
 *
 * Rachunek, który się zgadza: 2 x 8vw marginesu + 350 px obrazka + 8vw odstępu
 * + co najmniej 280 px na zdanie. Przy 860 px zostaje ~300 px na tekst.
 * Poniżej tej szerokości dwie kolumny NIE MAJĄ jak działać, więc układamy je
 * jedna pod drugą. Pilnuje tego scripts/sprawdz-strone.mjs.
 */
@media (max-width: 860px) {
  .app-showcase .tour-slide {
    padding: 0 clamp(28px, 6vw, 58px);
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .app-showcase .tour-slide figcaption {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .app-showcase .tour-shot .device-stage {
    width: min(270px, 62vw, calc(58svh * var(--screen-ratio)));
  }
}

@media (max-width: 430px) {
  /* JEDNA LEWA KRAWEDZ NA TELEFONIE.
     Bylo tak: tytul hero zaczynal sie na 15 px, tresc sekcji na 22, a logo
     na 24. Trzy rozne linie na szerokosci 375 px widac jako niechlujstwo,
     nawet jesli nikt tego nie mierzy. Wszystko rownamy do 22 px, czyli do
     odstepu, ktorego uzywaja sekcje na calej stronie (.wrap w styles.css). */
  .hero .hero-inner { width: calc(100% - 44px); padding-top: 22px; gap: 20px; }
  .hero .availability { margin-bottom: 10px; padding: 6px 10px; }
  .hero h1 { font-size: 32px; line-height: 1.08; letter-spacing: -.04em; }
  .hero .hero-copy p.lead { margin-top: 14px; font-size: 15px; line-height: 1.58; }
  .hero .actions { margin-top: 16px; display: grid; grid-template-columns: 1fr; }
  .hero .actions .btn { width: 100%; }
  .hero .device-stage { width: 250px; margin-bottom: 42px; }

  .app-showcase { padding: 68px 0 72px; }
  .app-showcase .showcase-heading { margin-bottom: 42px; }
  .app-showcase .showcase-heading h2 { font-size: 36px; }
  .app-showcase .showcase-heading > p:last-child { font-size: 15px; }
  .app-showcase .tour-slide {
    padding: 0 28px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .app-showcase .tour-shot .device-stage {
    width: min(230px, 66vw, calc(60svh * var(--screen-ratio)));
  }
  /* mniejszy telefon = mniejsze zaokraglenia i wysepka */
  .app-showcase .phone { padding: 8px; border-radius: 36px; }
  /* mniejszy telefon, wiec i pasy wezsze - ale nadal rowne z gory i z dolu */
  .app-showcase .phone-screen { border-radius: 29px; padding-top: 26px; padding-bottom: 26px; }
  .app-showcase .phone-speaker { top: 13px; width: 54px; height: 15px; }
  .app-showcase .phone-camera { top: 17px; left: calc(50% + 16px); width: 6px; height: 6px; }
  .app-showcase .tour-slide figcaption { text-align: center; }
  .app-showcase .tour-slide h3 { font-size: 28px; }
  .app-showcase .tour-slide figcaption > p:last-child {
    margin-top: 13px;
    font-size: 15px;
    line-height: 1.58;
  }
  .app-showcase .tour-nav { width: 42px; height: 42px; top: 32%; }
  .app-showcase .tour-nav.prev { left: 7px; }
  .app-showcase .tour-nav.next { right: 7px; }
  .app-showcase .tour-dots { margin-top: 30px; }
}

/* Pasek gorny jest wspolny dla calego serwisu i jego szerokosc siedzi
   w styles.css - patrz "PASEK GORNY MA JEDNA SZEROKOSC W CALYM SERWISIE".
   Bylo to najpierw tutaj, czyli tylko na stronie glownej, i przez to logo
   skakalo w bok przy przejsciu na podstrone. */

/* ===== PRZEŁĄCZNIK MOTYWU EKRANÓW =====
 * Siedzi pod nagłówkiem sekcji z ekranami. Ma wyglądać na sterowanie
 * podglądem, a nie na kolejny przycisk akcji, stąd cichy, obwiedziony wygląd
 * zamiast pełnego wypełnienia jak przy „Zobacz, jak działa”. */
.app-showcase .motyw-wybor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 5px 5px 5px 14px;
  border: 1px solid var(--hero-line);
  border-radius: 999px;
  background: rgba(255, 250, 240, .7);
}

.app-showcase .motyw-etykieta {
  color: var(--hero-muted);
  font-size: 14px;
}

.app-showcase .motyw-btn {
  padding: 7px 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--hero-muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.app-showcase .motyw-btn:hover { color: var(--hero-ink); }

.app-showcase .motyw-btn.on {
  background: var(--hero-gold);
  color: #fff;
  font-weight: 600;
}

/* Widoczny ślad klawiatury: przełącznik obsługuje się tabulatorem. */
.app-showcase .motyw-btn:focus-visible {
  outline: 2px solid var(--hero-gold-dark);
  outline-offset: 2px;
}

@media (max-width: 430px) {
  .app-showcase .motyw-wybor { margin-top: 16px; padding-left: 12px; }
  .app-showcase .motyw-etykieta { font-size: 13px; }
  /* Wieksze pole dotyku: 33 px wysokosci to za malo na palec, zalecane
     minimum to 44 px. Zmierzone po zmianie: 45 px. */
  .app-showcase .motyw-btn { padding: 12px 14px; font-size: 13px; }
}

/* Ekrany czekają na swój plik.
 *
 * Gdy odwiedzający ma zapamiętany ciemny motyw, strona i tak startuje
 * z jasnymi adresami wpisanymi w kodzie. Zamiast pokazywać jasny zrzut
 * i podmieniać go w locie, trzymamy obrazek niewidoczny do chwili, gdy
 * właściwy plik jest gotowy (klasę `motyw-gotowy` nadaje karuzela.js).
 * W tle zostaje ciemne wnętrze ramki, więc czekanie wygląda jak wyłączony
 * ekran telefonu, a nie jak dziura w układzie.
 *
 * Dotyczy WYŁĄCZNIE zapamiętanego ciemnego motywu: przy jasnym adresy
 * w kodzie są od razu właściwe i nie ma na co czekać. */
html.motyw-ciemny .app-showcase .phone-screen img:not(.motyw-gotowy) {
  visibility: hidden;
}