/* ═══════════════════════════════════════════════════════════════════════
   WSAD 49 — DODATKI WZORCA

   Ładowany PO arkuszu motywu, więc nadpisuje bazę tam, gdzie trzeba,
   i nie dubluje jej tam, gdzie nie trzeba.

   ── ZASADA NAZW ──────────────────────────────────────────────────────
   Wszystkie klasy tego pliku zaczynają się od `wsad-`. Reszta strony —
   w szczególności lista pobrana z kolekcji — należy do motywu i NIE MA
   tu ani jednej reguły. To jest ta granica: hero i zakończenie są nasze,
   środek jest serwisu.

   ── DLACZEGO WŁASNE ZMIENNE ──────────────────────────────────────────
   Motyw ma swoje i mogą się zmienić razem z nim. Wzorzec ma wyglądać tak
   samo jutro, więc trzyma własne — nazwane tak, żeby nie kolidowały.
   ═══════════════════════════════════════════════════════════════════════ */

.wsad-strona {
  --wsad-atrament: #14161c;
  --wsad-atrament-2: #5d6470;
  --wsad-tlo: #ffffff;
  --wsad-ciemne: #10141d;
  --wsad-akcent: #b9935a;
  --wsad-linia: rgba(255, 255, 255, .14);
}

.wsad-kontener {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── HERO ─────────────────────────────────────────────────────────────
   Ciemny ekran na pełną wysokość okna, ale z `min-height`, nie `height`:
   przy długim nagłówku po podmianie w panelu tekst ma się zmieścić,
   a nie wyjechać poza kadr. */
.wsad-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 92vh;
  padding: 120px 0;
  background: var(--wsad-ciemne);
  color: #fff;
  overflow: hidden;
}

.wsad-hero__nadtytul {
  margin: 0 0 22px;
  font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--wsad-akcent);
}

/* `clamp()` zamiast progów: nagłówek jest jednym z niewielu miejsc, gdzie
   płynna skala nie szkodzi, bo to nie jest tekst do czytania wierszami. */
.wsad-hero__tytul {
  margin: 0 0 28px;
  max-width: 16ch;
  font: 700 clamp(38px, 7vw, 92px)/1.02 'Poppins', system-ui, sans-serif;
  letter-spacing: -.03em;
}

.wsad-hero__lead {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.65;
  color: rgba(255, 255, 255, .74);
}

/* ── FAJERWERKI ───────────────────────────────────────────────────────
   Warstwa leży POD tekstem (`z-index` niżej niż kontener) i nie łapie
   kliknięć. Iskra to kropka o stałym rozmiarze — o jej ruchu decyduje
   skrypt, arkusz daje tylko wygląd. */
.wsad-fajerwerki {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.wsad-iskra {
  position: absolute;
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
}

/* Treść hero nad warstwą fajerwerków. */
.wsad-hero > .wsad-kontener { position: relative; z-index: 1; }

/* Cząstki animacji. `inline-block`, bo `yPercent` nie rusza elementami
   liniowymi; `overflow: hidden` na rodzicu przycina je na czas wjazdu. */
.wsad-czastka { display: inline-block; will-change: transform, opacity; }

/* Wyraz trzyma swoje litery razem. Bez tego każda litera jest osobnym
   pudełkiem i przeglądarka łamie wiersz w środku słowa — „za s / prawą". */
.wsad-slowo { display: inline-block; white-space: nowrap; }

/* Świadomie BEZ `overflow: hidden` na nagłówku: przycinałoby ogonki
   polskich liter (ą, ż) przy tej wielkości stopnia. Litery i tak wchodzą
   z przezroczystości, więc nie ma czego chować. */

.wsad-hero__strzalka {
  position: absolute; left: 50%; bottom: 34px;
  width: 1px; height: 46px;
  background: linear-gradient(180deg, var(--wsad-akcent), transparent);
}

/* ── SEKCJA Z KOLEKCJĄ ────────────────────────────────────────────────
   Tylko nagłówek i powietrze wokół. Sama lista przychodzi z motywu
   i wzorzec jej nie dotyka — gdyby dotykał, każda zmiana stylów serwisu
   wymagałaby poprawki tutaj. */
.wsad-zasoby { padding: 96px 0; background: var(--wsad-tlo); color: var(--wsad-atrament); }

.wsad-naglowek {
  margin: 0 0 10px;
  font: 700 clamp(26px, 3vw, 40px)/1.12 'Poppins', system-ui, sans-serif;
  letter-spacing: -.02em;
}
.wsad-naglowek__lead {
  margin: 0 0 46px;
  max-width: 60ch;
  color: var(--wsad-atrament-2);
}

/* ── ZAKOŃCZENIE ──────────────────────────────────────────────────────
   Znowu ciemne, żeby domknąć stronę tym samym tonem, co otwarcie. */
.wsad-final {
  padding: 110px 0;
  background: var(--wsad-ciemne);
  color: #fff;
  text-align: center;
}
.wsad-final__tytul {
  margin: 0 auto 22px;
  max-width: 22ch;
  font: 700 clamp(26px, 4vw, 52px)/1.14 'Poppins', system-ui, sans-serif;
  letter-spacing: -.02em;
}
.wsad-final__tresc {
  margin: 0 auto 34px;
  max-width: 54ch;
  color: rgba(255, 255, 255, .72);
  line-height: 1.7;
}
.wsad-final__przycisk {
  display: inline-block;
  padding: 15px 34px;
  border: 1px solid var(--wsad-akcent);
  color: var(--wsad-akcent);
  text-decoration: none;
  font: 600 14px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .04em;
  transition: background .2s ease, color .2s ease;
}
.wsad-final__przycisk:hover,
.wsad-final__przycisk:focus {
  background: var(--wsad-akcent);
  color: var(--wsad-ciemne);
}

/* ── STOPKA ───────────────────────────────────────────────────────────
   Stopka WZORCA, nie serwisu. Ta druga zostaje bez zmian i nie ma jej
   na tej podstronie, bo wsad jest pełnym dokumentem. */
.wsad-stopka {
  padding: 44px 0;
  background: #0a0d13;
  color: rgba(255, 255, 255, .62);
  font-size: 13.5px;
  border-top: 1px solid var(--wsad-linia);
}
.wsad-stopka__siatka {
  display: grid; gap: 18px 40px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.wsad-stopka p { margin: 0 0 6px; }
.wsad-stopka__nazwa { color: #fff; font-weight: 600; letter-spacing: .02em; }

@media (max-width: 700px) {
  .wsad-hero { min-height: 78vh; padding: 90px 0; }
  .wsad-zasoby, .wsad-final { padding: 64px 0; }
  .wsad-hero__tytul { max-width: none; }
}