/* ==========================================================================
   SŁONECZNY ATLAS — strona opisowa
   --------------------------------------------------------------------------
   Warstwa indeksowalna. Wymaga tokeny.css.

   Rytm strony: każda sekcja ma inny układ, bo każda mówi co innego.
   Powtórzony układ czyta się jako szablon nawet wtedy, gdy treść jest różna.
   ========================================================================== */

body { overflow-x: hidden; }

.owijka {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--o-5);
}
@media (max-width: 700px) { .owijka { padding-inline: var(--o-4); } }

/* ==========================================================================
   NAWIGACJA
   ========================================================================== */

.nawigacja {
  position: sticky;
  top: 0;
  z-index: var(--z-pasek);
  height: 68px;
  background: rgba(244, 240, 232, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linia);
}
.nawigacja-tresc {
  display: flex;
  align-items: center;
  gap: var(--o-5);
  height: 100%;
}

.marka {
  display: flex;
  align-items: baseline;
  gap: var(--o-3);
  text-decoration: none;
  white-space: nowrap;
}
.marka-nazwa {
  font-family: var(--krój-display);
  font-size: 1.3rem;
  letter-spacing: -0.012em;
}
.marka-slonce { font-style: italic; color: var(--cynober-tekst); }
.marka-autor {
  font-family: var(--krój-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tusz-3);
}

.nawigacja-linki {
  display: flex;
  gap: var(--o-5);
  margin-left: auto;
  align-items: center;
}
/* Selektor celuje wyłącznie w odnośniki sekcji. Ogólne „.nawigacja-linki a"
   miałoby wyższą specyficzność niż .btn-glowny i pomalowałoby tekst przycisku
   na kolor tekstu pobocznego, czyli ciemny na ciemnym petrolu. */
.nawigacja-linki a:not([class]) {
  font-size: var(--t-base);
  color: var(--tusz-2);
  text-decoration: none;
  transition: color var(--czas-1) var(--krzywa);
}
.nawigacja-linki a:not([class]):hover { color: var(--tusz); }
.nawigacja .btn-glowny { min-height: 40px; padding: var(--o-2) var(--o-4); }

@media (max-width: 860px) {
  .nawigacja-linki a { display: none; }
  .marka-autor { display: none; }
}

/* ==========================================================================
   OKRUSZKI
   ========================================================================== */

.okruszki {
  padding: var(--o-4) 0 0;
  font-family: var(--krój-mono);
  font-size: var(--t-xs);
  color: var(--tusz-3);
}
.okruszki ol { display: flex; flex-wrap: wrap; gap: var(--o-2); list-style: none; margin: 0; padding: 0; }
.okruszki a { color: var(--tusz-3); text-decoration: none; }
.okruszki a:hover { color: var(--cynober-tekst); text-decoration: underline; }
.okruszki li + li::before { content: '/'; margin-right: var(--o-2); color: var(--linia-mocna); }

/* ==========================================================================
   OTWARCIE
   --------------------------------------------------------------------------
   Układ dzielony: teza po lewej, makieta po prawej. Na wąskim ekranie
   makieta idzie pod tekst, bo najpierw trzeba wiedzieć, co się ogląda.
   ========================================================================== */

.otwarcie { padding: var(--o-7) 0 var(--o-8); }

.otwarcie-uklad {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--o-7);
  align-items: center;
}

/* Stopień pisma dobrany do szerokości kolumny, nie do szerokości okna.
   Kolumna tekstowa w otwarciu ma około 570 px, więc skala oparta na samym
   vw dawała tu 87 px i łamała nagłówek na pięć wierszy. */
.otwarcie-tytul {
  font-family: var(--krój-display);
  font-size: clamp(2.1rem, 1.55rem + 1.75vw, 3.3rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.026em;
  margin-bottom: var(--o-5);
  text-wrap: balance;
}
.otwarcie-tytul em {
  font-style: italic;
  color: var(--cynober-tekst);
  /* Kursywa z descenderem („ó") ucina się przy ciasnym wierszu */
  line-height: 1.1;
  padding-bottom: 0.04em;
}

.otwarcie-lid {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--tusz-2);
  max-width: 46ch;
  margin-bottom: var(--o-6);
}

.otwarcie-akcje { display: flex; flex-wrap: wrap; gap: var(--o-3); }

/* --- Fakty ---------------------------------------------------------------- */

/* Siatka, nie zawijany rząd: przy czterech pozycjach zawijanie dawało układ
   trzy plus jeden, który czyta się jak błąd, a nie jak decyzja. */
.fakty {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--o-4);
  margin-top: var(--o-6);
  padding-top: var(--o-5);
  border-top: 1px solid var(--linia);
}
@media (max-width: 560px) {
  .fakty { grid-template-columns: repeat(2, 1fr); gap: var(--o-5) var(--o-4); }
}
.fakt-liczba {
  font-family: var(--krój-display);
  font-size: var(--t-xl);
  line-height: 1;
  color: var(--tusz);
}
.fakt-opis {
  font-family: var(--krój-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tusz-3);
  margin-top: 5px;
}

/* --- Scena makiety -------------------------------------------------------- */

.scena-makiety {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--papier-2);
  border: 1px solid var(--linia);
  overflow: hidden;
}

/* Plakat jest elementem LCP: rysunek wektorowy renderuje się natychmiast,
   scena 3D wchodzi na wierzch dopiero, gdy jest gotowa. */
.scena-plakat {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  transition: opacity var(--czas-3) var(--krzywa);
}
.scena-makiety[data-zywa="1"] .scena-plakat { opacity: 0; }

#makieta-hero {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity var(--czas-3) var(--krzywa);
}
.scena-makiety[data-zywa="1"] #makieta-hero { opacity: 1; }

/* Wejście w makietę jest decyzją odwiedzającego, nie kosztem domyślnym.
   Dopóki nikt nie kliknie, strona nie pobiera ani bajta biblioteki 3D. */
.ozyw-makiete {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: rgba(251, 249, 245, 0.94);
  border-color: var(--petrol);
  box-shadow: var(--cien-2);
  backdrop-filter: blur(4px);
}
.ozyw-makiete:hover { background: var(--papier-czysty); }
.ozyw-makiete[hidden] { display: none; }
.scena-makiety[data-zywa="1"] .ozyw-makiete { display: none; }

.scena-podpis {
  position: absolute;
  left: var(--o-3);
  bottom: var(--o-3);
  right: var(--o-3);
  display: flex;
  align-items: center;
  gap: var(--o-3);
  flex-wrap: wrap;
  font-family: var(--krój-mono);
  font-size: var(--t-xs);
  color: var(--tusz-3);
}
.scena-plakietka {
  padding: 3px 9px;
  border-radius: var(--r-zeton);
  background: rgba(251, 249, 245, 0.92);
  border: 1px solid var(--linia);
}

@media (max-width: 940px) {
  .otwarcie-uklad { grid-template-columns: 1fr; gap: var(--o-6); }
  .scena-makiety { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   SEKCJE — wspólne
   ========================================================================== */

.sekcja { padding: var(--o-9) 0; }
.sekcja-ciemna {
  background: var(--petrol);
  color: var(--papier);
}
.sekcja-kamien { background: var(--papier-2); }

.sekcja-tytul {
  font-family: var(--krój-display);
  font-size: var(--t-3xl);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.024em;
  max-width: 22ch;
  margin-bottom: var(--o-4);
}
.sekcja-ciemna .sekcja-tytul { color: var(--papier); }

.sekcja-lid {
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--tusz-2);
  max-width: 58ch;
  margin-bottom: var(--o-7);
}
.sekcja-ciemna .sekcja-lid { color: rgba(244, 240, 232, 0.8); }

/* ==========================================================================
   ŚWIATŁO — sekcja z ruchomym słońcem
   --------------------------------------------------------------------------
   Drugi moment „wow", świadomie bez WebGL. Rzut mieszkania w SVG, plamy
   światła przesuwają się z godziną. Kosztuje kilka kilobajtów i działa
   wszędzie, także tam, gdzie makieta 3D się nie uruchomi.
   ========================================================================== */

.swiatlo-uklad {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--o-7);
  align-items: start;
}

.rzut-owijka {
  position: relative;
  background: var(--papier-czysty);
  border: 1px solid var(--linia);
  padding: var(--o-4);
}
#rzut-swiatla { width: 100%; height: auto; display: block; }

.swiatlo-ster { margin-top: var(--o-4); }
.swiatlo-gora {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--o-3);
  margin-bottom: var(--o-2);
}
.swiatlo-godzina {
  font-family: var(--krój-mono);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--slonce-tekst);
  font-variant-numeric: tabular-nums;
}
.swiatlo-stan { font-size: var(--t-sm); color: var(--tusz-2); text-align: right; }

.suwak-slonca {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  background: transparent;
  cursor: pointer;
}
.suwak-slonca::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: var(--r-zeton);
  background: linear-gradient(90deg, #3E5C6B 0%, #E0A32F 26%, #FFF3D6 50%, #E0A32F 74%, #3E5C6B 100%);
}
.suwak-slonca::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -9px;
  width: 23px; height: 23px;
  border-radius: 50%;
  background: var(--papier-czysty);
  border: 2px solid var(--slonce-tekst);
  box-shadow: var(--cien-2);
}
.suwak-slonca::-moz-range-track {
  height: 5px;
  border-radius: var(--r-zeton);
  background: linear-gradient(90deg, #3E5C6B 0%, #E0A32F 26%, #FFF3D6 50%, #E0A32F 74%, #3E5C6B 100%);
}
.suwak-slonca::-moz-range-thumb {
  width: 23px; height: 23px;
  border-radius: 50%;
  background: var(--papier-czysty);
  border: 2px solid var(--slonce-tekst);
}

.swiatlo-wyniki { display: flex; flex-direction: column; gap: var(--o-4); }

.wynik-pokoj {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--o-3);
  padding-bottom: var(--o-3);
  border-bottom: 1px solid var(--linia);
}
.wynik-nazwa { font-size: var(--t-md); color: var(--tusz); }
.wynik-strona { font-family: var(--krój-mono); font-size: var(--t-xs); color: var(--tusz-3); }
.wynik-godziny {
  font-family: var(--krój-display);
  font-size: var(--t-xl);
  line-height: 1;
  color: var(--slonce-tekst);
  white-space: nowrap;
}
.wynik-godziny span { font-family: var(--krój-ui); font-size: var(--t-sm); color: var(--tusz-3); }

@media (max-width: 900px) {
  .swiatlo-uklad { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PANEL — sekcja o stronie biura
   --------------------------------------------------------------------------
   Zamiast udawanego zrzutu ekranu: działający, prawdziwy fragment interfejsu.
   Kliknięcie w etap faktycznie przenosi kartę.
   ========================================================================== */

.panel-uklad {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--o-7);
  align-items: center;
}

.lejek-podglad {
  background: var(--papier);
  border: 1px solid var(--linia);
  padding: var(--o-5);
}
.sekcja-ciemna .lejek-podglad { border-color: rgba(244, 240, 232, 0.18); }

.lejek-etapy {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--linia);
  border: 1px solid var(--linia);
  margin-bottom: var(--o-4);
}
.lejek-kolumna { background: var(--papier); padding: var(--o-3); min-height: 128px; }
.lejek-glowa {
  font-family: var(--krój-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tusz-3);
  margin-bottom: var(--o-3);
  display: flex;
  justify-content: space-between;
  gap: var(--o-2);
}
.lejek-glowa b { color: var(--tusz); }

.lejek-karta {
  width: 100%;
  text-align: left;
  padding: var(--o-2) var(--o-3);
  margin-bottom: 5px;
  background: var(--papier-2);
  border: 1px solid var(--linia);
  border-left: 2px solid var(--petrol-blady);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--t-sm);
  color: var(--tusz);
  transition: transform var(--czas-1) var(--krzywa), border-color var(--czas-1) var(--krzywa);
}
.lejek-karta:hover { transform: translateX(2px); border-left-color: var(--cynober); }
.lejek-karta small { display: block; color: var(--tusz-3); font-size: var(--t-xs); margin-top: 2px; }

.lejek-podpowiedz {
  font-family: var(--krój-mono);
  font-size: var(--t-xs);
  color: var(--tusz-3);
}

@media (max-width: 900px) {
  .panel-uklad { grid-template-columns: 1fr; }
  .lejek-etapy { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   LINK — sekcja o wyszukiwaniu w adresie
   --------------------------------------------------------------------------
   Układ pionowy, pełna szerokość. Adres buduje się na oczach czytelnika.
   ========================================================================== */

.link-demo {
  background: var(--papier-czysty);
  border: 1px solid var(--linia);
  padding: var(--o-6);
}

.link-kontrolki {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o-3);
  margin-bottom: var(--o-5);
}
.link-kontrolki .przel {
  min-height: 40px;
  padding: var(--o-2) var(--o-4);
  border: 1px solid var(--linia-mocna);
  border-radius: var(--r-zeton);
  background: var(--papier);
  color: var(--tusz-2);
  font-size: var(--t-base);
  cursor: pointer;
  transition: background var(--czas-1) var(--krzywa), color var(--czas-1) var(--krzywa),
              border-color var(--czas-1) var(--krzywa);
}
.link-kontrolki .przel:hover { border-color: var(--petrol); color: var(--tusz); }
.link-kontrolki .przel[aria-pressed="true"] {
  background: var(--petrol); border-color: var(--petrol); color: var(--papier); font-weight: 500;
}

.link-adres {
  display: block;
  padding: var(--o-4);
  background: var(--petrol);
  color: var(--papier);
  font-family: var(--krój-mono);
  font-size: var(--t-sm);
  line-height: 1.7;
  word-break: break-all;
  margin-bottom: var(--o-4);
}
.link-adres b { color: var(--slonce); font-weight: 400; }

.link-stopka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--o-4);
  flex-wrap: wrap;
}
.link-liczba {
  font-family: var(--krój-display);
  font-size: var(--t-2xl);
  line-height: 1;
  color: var(--cynober-tekst);
}
.link-liczba span {
  font-family: var(--krój-ui);
  font-size: var(--t-base);
  color: var(--tusz-2);
  margin-left: var(--o-2);
}

/* ==========================================================================
   PYTANIA
   ========================================================================== */

.pytania { max-width: 74ch; }

.pytanie {
  border-bottom: 1px solid var(--linia);
}
.pytanie:first-child { border-top: 1px solid var(--linia); }

.pytanie summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--o-4);
  padding: var(--o-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--krój-display);
  font-size: var(--t-lg);
  font-weight: 400;
  line-height: 1.3;
  color: var(--tusz);
}
.pytanie summary::-webkit-details-marker { display: none; }
.pytanie summary::after {
  content: '+';
  flex: 0 0 auto;
  font-family: var(--krój-mono);
  font-size: 1.2rem;
  color: var(--cynober-tekst);
  transition: transform var(--czas-2) var(--krzywa);
}
.pytanie[open] summary::after { transform: rotate(45deg); }
.pytanie summary:focus-visible { outline: 2px solid var(--cynober-tekst); outline-offset: 3px; }

.pytanie-odpowiedz {
  padding-bottom: var(--o-5);
  color: var(--tusz-2);
  line-height: 1.68;
  max-width: 66ch;
}
.pytanie-odpowiedz p + p { margin-top: var(--o-3); }
.pytanie-odpowiedz a { color: var(--cynober-tekst); }

/* ==========================================================================
   UCZCIWOŚĆ
   ========================================================================== */

.uczciwosc-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1px;
  background: var(--linia);
  border: 1px solid var(--linia);
}
.uczciwosc-poz { background: var(--papier); padding: var(--o-5); }
.uczciwosc-poz h3 {
  font-size: var(--t-md);
  font-weight: 600;
  margin-bottom: var(--o-2);
  color: var(--tusz);
}
.uczciwosc-poz p { font-size: var(--t-sm); color: var(--tusz-2); line-height: 1.6; }

/* ==========================================================================
   ZAMKNIĘCIE
   ========================================================================== */

.zamkniecie { text-align: center; padding: var(--o-9) 0; }
.zamkniecie .sekcja-tytul { margin-inline: auto; max-width: 20ch; }
.zamkniecie .sekcja-lid { margin-inline: auto; margin-bottom: var(--o-6); }
.zamkniecie-akcje { display: flex; gap: var(--o-3); justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   STOPKA
   ========================================================================== */

.stopka {
  padding: var(--o-7) 0;
  border-top: 1px solid var(--linia);
  background: var(--papier-2);
}
.stopka-uklad {
  display: flex;
  justify-content: space-between;
  gap: var(--o-6);
  flex-wrap: wrap;
}
.stopka-kol h4 {
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tusz-3);
  margin-bottom: var(--o-3);
  font-weight: 400;
}
.stopka-kol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--o-2); }
.stopka-kol a { color: var(--tusz-2); text-decoration: none; font-size: var(--t-base); }
.stopka-kol a:hover { color: var(--cynober-tekst); text-decoration: underline; }

.stopka-nota {
  margin-top: var(--o-6);
  padding-top: var(--o-4);
  border-top: 1px solid var(--linia);
  font-size: var(--t-sm);
  color: var(--tusz-3);
  line-height: 1.6;
  max-width: 76ch;
}
.stopka-nota a { color: var(--tusz-2); }

/* ==========================================================================
   WEJŚCIE ELEMENTÓW
   --------------------------------------------------------------------------
   Treść wchodzi raz, na wejściu w kadr, krótko i bez przesunięcia układu.
   Animacja wyłącznie na opacity i transform, więc nie wymusza przeliczenia.

   Stan ukryty obowiązuje wyłącznie przy klasie „skrypt", którą dokłada
   krótki wstawiony skrypt w nagłówku dokumentu. Gdyby JavaScript nie
   wystartował albo wywalił się przed obserwatorem, cała treść po prostu
   zostaje widoczna. Bez tego zabezpieczenia awaria jednego skryptu chowa
   piętnaście sekcji strony, która ma być indeksowalna.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .skrypt .wchodzi {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 620ms var(--krzywa), transform 620ms var(--krzywa);
  }
  .skrypt .wchodzi[data-widoczny="1"] { opacity: 1; transform: none; }
}