/* assets/naglowek.css
   Purpose: nagłówek strony głównej — siatka przystanków pod treścią, przyciski, pas liczb, kamera
   NOT for: podstawy nagłówka wspólnej dla stron (→ site.css), stosu zrzutów (→ glowna.css)

   Ładowane TYLKO przez index.html. Podstrony mają ten sam jasny nagłówek bez płótna.

   Warstwy od spodu: płótno z przystankami → zasłona (czytelność tekstu po lewej)
   → zejście w grunt u dołu → treść. Każda warstwa ma jedno zadanie. */

/* Dół ciaśniej niż w podstronach: pas liczb już jest „zamknięciem” nagłówka, a kolejny
   pas dokłada własny odstęp — razem robiło się 230 px pustki (QA 07.10.2026). */
.hero-glowna { min-height: min(92vh, 840px); padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(1.6rem, 2.5vw, 2.4rem); }
.hero-glowna + .band { padding-top: calc(var(--band) * .72); }
.hero-plotno { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; display: block; }

/* Zasłona: gęsta po lewej, gdzie leży tekst, przezroczysta po prawej, gdzie siatka
   ma być widoczna. Kierunek zamiast równomiernego rozjaśnienia. */
.hero-zaslona {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(100deg, var(--paper) 0%, rgba(242, 242, 239, .94) 30%,
                              rgba(242, 242, 239, .45) 56%, rgba(242, 242, 239, 0) 100%);
}
/* Zejście: siatka rozpływa się w grunt, zamiast kończyć się krechą na granicy sekcji. */
.hero-zejscie {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(242, 242, 239, 0) 55%, var(--paper) 100%);
}

/* ── przyciski ─────────────────────────────────────────────── */
.hero-akcje { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
/* Na wąskim ekranie dwa przyciski różnej szerokości, dosunięte do lewej, wyglądały
   jak niedokończone — jeden pod drugim, na całą szerokość, tekst w środku. */
@media (max-width: 559px) { .hero-akcje a { flex: 1 1 100%; justify-content: center; } }
.btn-glowny, .btn-drugi {
  display: inline-flex; align-items: center; min-height: 54px;
  padding: 0 1.6rem; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em;
  transition: transform .3s var(--ease-out), background .3s, box-shadow .3s, border-color .3s;
}
.btn-glowny {
  background: var(--amber); color: var(--paper-pure);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 14px 30px -14px rgba(176, 18, 38, .7);
}
.btn-glowny:hover {
  transform: translateY(-2px); background: #9a0f21;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 20px 40px -16px rgba(176, 18, 38, .75);
}
.btn-drugi {
  color: var(--ink); border: 1px solid var(--rule-hard);
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.btn-drugi:hover { transform: translateY(-2px); background: var(--paper-pure); border-color: var(--ink); }

/* ── pas liczb: szklany pasek leżący na siatce ─────────────── */
.hero-dol { margin-top: clamp(2.4rem, 5vw, 4rem); }
.licznik {
  margin: 0; padding: clamp(1.2rem, 2.4vw, 1.7rem) clamp(1.2rem, 2.6vw, 2rem);
  display: grid; gap: .9rem 2rem; grid-template-columns: 1fr;
  background: var(--panel); border-radius: var(--panel-r);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--cien-panel);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
/* Poniżej 900 px: księga, nie siatka 2×2 — w dwóch kolumnach etykieta
   „dni wypowiedzenia opieki” łamała się na trzy linie (QA 07.10.2026). */
.licznik > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.licznik > div dt { flex: 1 1 auto; }
@media (min-width: 900px) {
  .licznik { grid-template-columns: repeat(4, 1fr); gap: 1.2rem 2rem; }
  .licznik > div { display: block; }
}
/* .76rem, nie .7rem: przy 11,2 px wersaliki z rozstrzeleniem były nieczytelne
   dla wzroku, dla którego ta strona powstała. */
.licznik dt {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0;
}
@media (min-width: 900px) { .licznik dt { margin-bottom: .3rem; } }
.licznik dd {
  margin: 0; font-weight: 700; line-height: 1; letter-spacing: -.04em;
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem); color: var(--ink);
}

/* ── kamera wchodząca w siatkę ─────────────────────────────── */
/* Treść ustępuje, gdy kamera wchodzi w siatkę. `--glebia` ustawia siec.js z pozycji
   przewinięcia (0 u góry, 1 na dole nagłówka); bez JS zmiennej nie ma i nic się nie
   dzieje. Kamera siedzi na OPAKOWANIACH (.hero-grid, .hero-dol), nie na blokach
   z data-flow — te mają przejścia wejścia i ruch ze scrolla by za nimi „pływał”. */
.hero-grid, .hero-dol {
  transform: translateY(calc(var(--glebia, 0) * -38px));
  will-change: transform, opacity;
}
/* Gaśnie tylko górna treść. Pas liczb leży na dole nagłówka — gdy czytelnik do niego
   dojeżdżał, kamera była już w połowie drogi i liczby robiły się szarą plamą (QA 07.10). */
.hero-grid { opacity: calc(1 - var(--glebia, 0) * .85); }
/* Poza ekranem nic się nie rusza — siec.js dokłada .hero-poza i warstwa GPU jest zwalniana. */
.hero-poza .hero-grid, .hero-poza .hero-dol { will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  .hero-grid, .hero-dol { transform: none; opacity: 1; will-change: auto; }
}