/*
 * HERO JEDNOKOLUMNOWY + PREZENTACJA W DWÓCH ORIENTACJACH.
 *
 * Liczby układu (skala nagłówka, próg 760 px, paleta) przepisane z makiety
 * `docs/mockup/cd-prezentacja-szeroka_1.html` — to ona jest wersją rozstrzygającą:
 * wobec starszej różni się dokładnie tym, co jest sednem zlecenia (nagłówek bez
 * `max-width`, brak zdania pod nagłówkiem).
 *
 * ── Co tu JEST, a czego NIE MA ─────────────────────────────────────────────────
 * Ten plik opisuje wyłącznie STRONĘ wokół prezentacji: nagłówek, pudełko sceny,
 * przyciski i pasek modułów. Wnętrze prezentacji — panele, liczby, wykresy, cała
 * animacja — żyje w samym komponencie (`assets/anim/cd-hero-animation*.html`), bo to
 * ten sam plik, który wyjeżdża na zewnątrz. Druga kopia tych stylów tutaj znaczyłaby
 * dwa miejsca do poprawiania jednej rzeczy.
 *
 * ── ⛔ Warunek wysokości rządzi proporcją ───────────────────────────────────────
 * Kryterium: przy 1440×800 przycisk „Uruchom okres próbny" ma być widoczny BEZ
 * przewijania. Scena szeroka na 1240 px przy proporcji 16:7 miałaby 542 px wysokości
 * i sama zjadłaby ekran laptopa. Dlatego w orientacji poziomej wysokość wiąże się
 * z WYSOKOŚCIĄ OKNA, a nie z szerokością sceny — wtedy warunek spełnia się sam na
 * każdym ekranie, a nie tylko na tym jednym, pod który dobrano stałą. Proporcja wraca
 * poniżej progu, gdzie scena jest kwadratowa.
 *
 * ── ⛔ Zieleń ma jedno zadanie: DZIAŁANIE ───────────────────────────────────────
 * Na stronie zieleń zostaje na przyciskach i na jednym wyróżnionym słowie w nagłówku.
 * Ikony przy modułach zeszły do granatu: przy pięciu modułach pięć zielonych kółek
 * krzyczało głośniej niż przycisk, a kolor, który oznacza wszystko, nie oznacza nic.
 */

.cd-hero {
  --cd-navy: #0f2438;
  --cd-ink: #10263c;
  --cd-muted: #5b6b7c;
  /* Odcień ZMIERZONY, nie przepisany z makiety. Makieta ma `#0fa83c`; policzone:
     biel na nim → 3,14 : 1 (etykieta przycisku wymaga 4,5), a on sam na tle `#eef3fa`
     → 2,82 : 1 (akcent w nagłówku wymaga 3,0). Czyli kolor, który zlecenie każe uczynić
     NAJWAŻNIEJSZYM, byłby najtrudniejszy do odczytania na całej stronie. `#0a7c2c` daje
     5,34 : 1 pod bielą i 4,79 : 1 na tle — przechodzi nawet ostrzejszy próg dla
     drobnego tekstu, a zostaje tą samą zielenią. */
  --cd-go: #0a7c2c;
  --cd-go-d: #097026;

  position: relative;
  background: linear-gradient(180deg, #eef3fa 0%, #f7fafd 62%, #fff 100%);
  /* Górny odstęp maleje na niskim oknie: każdy oddany piksel wraca do sceny jako
     2,46 px szerokości, bo scena jest przypięta proporcją do budżetu wysokości.
     Wartości mniejsze niż wcześniej, bo zniknęła krawędź między białym paskiem
     nawigacji a jasnym pasem hero — nie ma już czego oddzielać odstępem. */
  /* Dolne wyścielenie hero jest częścią odstępu do sekcji problemu — a ta ma własny
     margines 50 px. Razem dawało 80 px przy 52 px odstępu NAD paskiem modułów, czyli
     dalej odwrotnie, niż powinno. Zmierzone i wyrównane do ~60 px. */
  padding: min(clamp(16px, 2.4vw, 30px), 3svh) 0 clamp(6px, 1vw, 10px);
  margin-top: 0;
  /* Bez zaokrąglenia u góry: tło jest teraz jednym pasem od samej krawędzi strony,
     a promień rysowałby szew dokładnie tam, gdzie miał zniknąć. */
  border-radius: 0 0 22px 22px;
  text-align: center;
  color: var(--cd-ink);
}

/* ── Pasek nawigacji dostaje kolor, od którego zaczyna się gradient hero ───────
   Biały pasek nad hero dzielił ekran na dwie części i odbierał scenie wysokość: między
   nagłówkiem strony a nawigacją trzeba było trzymać odstęp, żeby ta krawędź nie wyglądała
   na przypadek. Gdy tło jest jedno, odstęp może być mniejszy — a mniejszy odstęp to
   szersza scena.

   ⚠ Pierwsze podejście malowało tło warstwą `::before` wychodzącą ponad hero. Nie miało
   prawa zadziałać i nie zadziałało: `#main` ma `overflow: hidden`, więc wszystko, co
   wystaje ponad jego pudełko, jest UCINANE. Zmierzone na żywo — warstwa istniała,
   miała poprawne `top: -160px`, i nie było jej widać.

   Rozwiązanie jest prostsze i nie wymaga ani JavaScriptu, ani zabaw ze stosem: pasek
   dostaje PŁASKI kolor `#eef3fa`, czyli dokładnie ten, od którego zaczyna się gradient
   hero. Szew wypada tam, gdzie oba tła mają tę samą wartość, więc go nie widać. */

/* ⚠ Tylko na landingu i tylko na desktopie.
   · Landing, bo pasek nawigacji jest wspólny dla wszystkich stron publicznych, a na
     Strefie wiedzy czy podstronach prawnych nie ma za nim żadnego tła.
   · Desktop, bo poniżej 992 px pasek jest PRZYKLEJONY (`.navbar.sticky-top`) i jedzie
     nad przewijaną treścią. Przezroczysty nachodziłby wtedy na tekst sekcji niżej —
     zamiast tła miałby pod sobą to, co akurat przewija się pod nim. Na desktopie pasek
     stoi w miejscu i ma pod sobą wyłącznie gradient hero. */
@media (min-width: 992px) {
  .cd-landing header { background-color: #eef3fa; }
  .cd-landing .navbar {
    background-color: transparent;
    box-shadow: none;
  }
}
/* `.hero` z landing.css dokłada 30 px marginesu od 992 px w górę — przy warunku
   „przycisk widoczny bez przewijania" to jest 30 px wprost z budżetu. */
@media (min-width: 992px) {
  .cd-hero { margin-top: 0; }
}

/* ── Nagłówek: cała dostępna szerokość ─────────────────────────────────────────
   Bez `max-width` i bez ograniczenia długości wiersza — ma się rozłożyć na jeden albo
   dwa wiersze i być odpowiednio większy, bo nie konkuruje już z niczym po prawej.
   `text-wrap: balance` wyrównuje długość wierszy, żeby łamanie wyglądało celowo,
   a nie przypadkowo; przeglądarki bez tej własności pokazują zwykłe łamanie. */
.cd-hero__title {
  /* Skala zależy od szerokości ORAZ od wysokości okna — z tego samego powodu
     co odstęp wyżej. Na wysokim ekranie nagłówek jest pełnowymiarowy. */
  /* Stopień mniej niż wcześniej: 54 → 48 px.
     ⚠ Ograniczenie wysokościowe zostaje na 6svh, a nie 5,4. Przy 5,4 nagłówek schodził
     przy 1440×800 do 43 px i mieścił się w JEDNYM wierszu, a przy 900 wracał do dwóch —
     ta sama strona miała inną typografię zależnie od wysokości okna. Przy 6svh są dwa
     wiersze na każdej wysokości, a oddane 13 px wraca do sceny jako 34 px szerokości. */
  font-size: min(clamp(26px, 4.4vw, 48px), 6svh);
  line-height: 1.08;
  letter-spacing: -1.2px;
  font-weight: 800;
  margin: 0 auto min(clamp(18px, 2.6vw, 30px), 3svh);
  max-width: none;
  text-wrap: balance;
  color: var(--cd-navy);
}
/* Jedno wyróżnione słowo w nagłówku — jedyne miejsce poza przyciskami, gdzie zieleń
   ma prawo wystąpić. */
.cd-hero__title span { color: var(--cd-go); font-weight: 800; }

/* ── Scena ─────────────────────────────────────────────────────────────────────
   ⛔ PEŁNA SZEROKOŚĆ KONTENERA — ta sama, co pasek nawigacji i nagłówek. Węższa scena
   pod szerokim nagłówkiem sprawia, że hero wygląda, jakby się cofał w głąb.

   Ramka nie ma własnej oprawy: komponent rysuje się sam na jasnym tle hero, więc karta,
   promień czy cień byłyby ramką wokół czegoś, co już ma swoje karty. Scena komponentu
   skaluje się w środku (`fit()`), a gdy pudełko jest szersze niż jej proporcja, po
   bokach zostaje TŁO HERO — niewidoczne, bo to dokładnie ten sam gradient. */
.cd-stage { width: 100%; margin: 0 auto; }

.cd-stage__frame {
  /* ── Szerokość WPROST z budżetu wysokości ────────────────────────────────────
     Pudełko ma proporcję sceny (1600 : 700), więc prezentacja wypełnia je co do
     piksela — nie ma pustego pasa po bokach, w którym wcześniej pływała.

     `--cd-hero-rezerwa` to ZMIERZONE miejsce, którego potrzebuje wszystko poza sceną
     przy 1440 px: pasek nawigacji (160), górny odstęp hero, nagłówek w dwóch wierszach
     z marginesem, odstęp i przycisk. Szerokość to (wysokość okna − rezerwa) × 2,2857,
     bo tyle wynosi proporcja sceny.

     ⚠ Dwóch reguł ze zlecenia NIE DA SIĘ spełnić naraz na laptopie 1440×800: scena
     szeroka na całe 1272 px miałaby przy tej proporcji 556 px wysokości, a wtedy
     przycisk kończyłby się 152 px pod krawędzią okna. Zmierzone, nie oszacowane.
     Wybrane zostało kryterium twardsze — przycisk nad zgięciem — a scena bierze
     całą szerokość, na jaką pozwala wysokość okna. Od ~1080 px wysokości dochodzi
     do pełnej szerokości kontenera i zrównuje się z paskiem nawigacji.

     ⚠ Rezerwa NIE jest stałą liczbą, i to jest istotne. Pierwsza wersja miała stałe
     410 px, a nagłówek i górny odstęp kurczyły się na niskim oknie — więc przy 800 px
     rezerwa wynosiła naprawdę 398, a przy 900 już 419, i przycisk mieścił się przy
     800, a NIE mieścił przy 900. Wyższe okno wypadało gorzej niż niższe. Dlatego wzór
     poniżej powtarza DOKŁADNIE te same wyrażenia `min(...)`, których używa nagłówek
     i odstęp — rezerwa rośnie i maleje razem z nimi. */
  --cd-hero-rezerwa: calc(
    265px                       /* pasek nawigacji (160) + odstęp i przycisk (20 + 51)
                                   + 34 px ODDECHU pod przyciskiem: przy zapasie 6 px
                                   przyciski wyglądały na przyklejone do dolnej krawędzi
                                   okna, a nie na postawione nad zgięciem */
    + min(30px, 3svh)           /* górny odstęp hero — ta sama wartość co w `.cd-hero` */
    + 2.16 * min(48px, 6svh)    /* nagłówek: dwa wiersze o wysokości 1,08 skali pisma */
    + min(30px, 3svh)           /* margines pod nagłówkiem */
  );

  display: block;
  width: min(100%, calc((100svh - var(--cd-hero-rezerwa)) * 2.5806));
  aspect-ratio: 1600 / 620;
  height: auto;
  margin: 0 auto;
  border: 0;
  background: transparent;
}

/* Przeglądarka bez `svh` (starsze Safari) dostaje zwykłe `vh`. Różnica dotyczy tylko
   pasków przeglądarki na telefonie, a tam i tak rządzi proporcja, nie wysokość okna. */
@supports not (height: 100svh) {
  .cd-stage__frame {
    --cd-hero-rezerwa: 430px;
    width: min(100%, calc((100vh - var(--cd-hero-rezerwa)) * 2.5806));
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PONIŻEJ 760 px — ORIENTACJA KWADRATOWA
   Kontroler podmienia wtedy wariant komponentu na scenę 1080×1080, a pudełko wraca do
   PROPORCJI: na telefonie wysokość wzięta z okna zostawiłaby z prezentacji pasek,
   a po obróceniu ekranu — pasek jeszcze węższy.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .cd-stage__frame {
    width: min(460px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
  }
}

/* ── Przyciski pod sceną ───────────────────────────────────────────────────────
   Główny jest ZIELONY. Do tej pory był niebieski — czyli najcichszy element na stronie
   pełnej zieleni; rzecz, którą chcesz, żeby kliknięto, była wizualnie najmniej ważna. */
.cd-hero__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
.cd-btn {
  display: inline-block;
  border: 0;
  border-radius: 999px;
  padding: 15px 28px;
  font: inherit;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}
.cd-btn--go { background: var(--cd-go); color: #fff; }
a.cd-btn--go:hover, button.cd-btn--go:hover { background: var(--cd-go-d); color: #fff; }
.cd-btn--ghost { background: transparent; color: var(--cd-ink); border: 1px solid #cfdae6; font-weight: 500; }
a.cd-btn--ghost:hover { background: #fff; color: var(--cd-ink); }
.cd-btn:focus-visible { outline: 2px solid var(--cd-navy); outline-offset: 3px; }

/* ── Pasek modułów ─────────────────────────────────────────────────────────────
   Pięć modułów w równej siatce; ikony w granacie, nie w zieleni.

   ── Odstępy były odwrotne, niż powinny ───────────────────────────────────────
   Nad paskiem 36 px, a pod nim (razem z marginesem następnej sekcji) ~180 px. Pasek
   przyklejał się przez to do przycisków — czytało się go jak ich podpis — a po nim
   szło pół ekranu pustego tła. Teraz odstęp górny jest WIĘKSZY od dolnego: blok
   zaczyna się wyraźnie, a sekcja problemu wchodzi zaraz po nim. */
.cd-hero__modules-lead {
  margin: clamp(30px, 4.2vw, 52px) auto 0;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--cd-navy);
  text-align: center;
  max-width: 46ch;
}
.cd-hero .hero-modules {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  padding: clamp(16px, 2vw, 24px) 0 0;
  margin: 0;
  text-align: left;
}
.cd-hero .hero-chip {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  color: var(--cd-ink);
}
.cd-hero .hero-chip:hover, .cd-hero .hero-chip:focus-visible { border: 0; }
.cd-hero .hero-chip:hover .cd-mod__name { text-decoration: underline; }
.cd-hero .hero-chip .feature-check-icon {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  background-color: #dfe7f0;
  background-size: 11px 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230f2438' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.6l2.7 2.7L12 5'/%3E%3C/svg%3E");
}
.cd-hero .hero-chip__text { white-space: normal; display: block; }
.cd-hero .cd-mod__name { font-weight: 650; display: block; }
.cd-hero .hero-chip__desc { color: var(--cd-muted); font-size: 13px; display: block; }