/* ===========================================================================
   prospect-finder — landing i dokumenty prawne

   Kolory wyłącznie tokenami z `tokens.css`.
   Ani jednej wartości wpisanej wprost — to jedyny mechanizm, który utrzymuje
   landing i panel w jednym wyglądzie. Po każdej zmianie w warstwie tokenów:
   `venv/bin/python design/kontrast.py` (kod wyjścia 1 przy naruszeniu).

   Mobile-first, punkty łamania 640 i 900 px — te same, co w panelu, żeby
   obie powierzchnie łamały się w tych samych miejscach.
   =========================================================================== */

/* --- Rytm sekcji ----------------------------------------------------------
   Granice sekcji niosą pasy tła i odstęp, a nie kreski. Kreska między każdą
   parą sekcji to główny powód, dla którego strona czyta się jak formularz. */
section { padding-block: var(--pf-space-16); }
.alt { background: var(--pf-surface-sunken); }

h2 { font-size: clamp(1.6rem, 4vw, var(--pf-text-2xl)); margin-bottom: var(--pf-space-8); }
h3 { font-size: var(--pf-text-lg); }

.eyebrow {
  font-family: var(--pf-font-mono);
  font-size: var(--pf-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pf-text-subtle);
  margin-bottom: var(--pf-space-3);
}

/* --- Pasy ----------------------------------------------------------------
   Ciemne tło otwiera i zamyka stronę. Wszystko w środku pasa musi brać
   kolory z tokenów `--pf-hero-*`, bo domyślne kolory tekstu i linków są
   przeznaczone na jasną powierzchnię i na granacie znikają.                */
.band {
  background: var(--pf-hero-bg);
  color: var(--pf-hero-fg);
}
.band .eyebrow  { color: var(--pf-hero-muted); }
.band h1, .band h2 { color: var(--pf-hero-fg); }
.band .lead     { color: var(--pf-hero-muted); }
.band .hero-note { color: var(--pf-hero-muted); opacity: 0.85; }

.band-hero { padding-bottom: var(--pf-space-24); }
.band-cta  { padding-block: var(--pf-space-16); text-align: center; }
.band-cta .lead { margin-inline: auto; }
.band-cta .hero-actions { justify-content: center; }
.band-cta h2 { margin-bottom: var(--pf-space-4); }

/* --- Nagłówek strony (wewnątrz ciemnego pasa) ----------------------------- */
.site-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--pf-space-3);
  padding-block: var(--pf-space-6);
  border-bottom: 1px solid var(--pf-hero-border);
}
.brand {
  display: flex; align-items: center; gap: var(--pf-space-2);
  text-decoration: none; color: var(--pf-hero-fg);
}
.brand svg { width: 30px; height: 30px; flex: none; }
.brand b {
  font-size: var(--pf-text-lg);
  font-weight: var(--pf-weight-bold);
  letter-spacing: -0.02em;
}
.head-actions { display: flex; align-items: center; gap: var(--pf-space-2); }
.lang-switch {
  font-size: var(--pf-text-sm);
  color: var(--pf-hero-muted);
  text-decoration: none;
  padding: var(--pf-space-2) var(--pf-space-3);
  border-radius: var(--pf-radius-sm);
  min-height: 44px; display: inline-flex; align-items: center;
}
.lang-switch:hover { color: var(--pf-hero-fg); }

/* --- Przyciski -----------------------------------------------------------
   Cel dotyku 44 px, tak jak w panelu. `btn-outline` i `btn-quiet` żyją
   wyłącznie na ciemnym pasie, dlatego biorą kolory z `--pf-hero-*`.        */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--pf-space-2);
  min-height: 44px;
  padding: var(--pf-space-3) var(--pf-space-6);
  border-radius: var(--pf-radius-md);
  border: 1px solid transparent;
  font: inherit;
  font-weight: var(--pf-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-primary { background: var(--pf-accent); color: var(--pf-on-accent); box-shadow: var(--pf-shadow-md); }
.btn-primary:hover { background: var(--pf-accent-hover); color: var(--pf-on-accent); transform: translateY(-1px); }
.btn-outline { border-color: var(--pf-hero-border); color: var(--pf-hero-fg); background: transparent; }
.btn-outline:hover { border-color: var(--pf-hero-muted); color: var(--pf-hero-fg); }
.btn-quiet { color: var(--pf-hero-muted); background: transparent; }
.btn-quiet:hover { color: var(--pf-hero-fg); }

/* --- Sekcja otwierająca --------------------------------------------------- */
.hero { padding-top: var(--pf-space-16); display: grid; gap: var(--pf-space-12); }
.hero h1 {
  font-size: clamp(2.25rem, 6vw, var(--pf-text-4xl));
  max-width: 16ch;
  margin-bottom: var(--pf-space-6);
}
.hero .lead { font-size: var(--pf-text-lg); max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--pf-space-3); margin-top: var(--pf-space-8); }
.hero-note { margin-top: var(--pf-space-4); font-size: var(--pf-text-sm); margin-bottom: 0; }

/* --- Element sygnaturowy strony -------------------------------------------
   Adres, cytat ze strony i data odczytu. To jedyna obietnica, której
   konkurencja nie składa, więc dostaje jedyne miejsce, które ją wyróżnia.
   Bez etykiety nad adresem — nazwa klasy jest wewnętrzna, tekst dla klienta
   nie używa słowa „dowód" (patrz content.py).                              */
.proof {
  margin: 0;
  background: var(--pf-surface-raised);
  color: var(--pf-text);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  box-shadow: var(--pf-shadow-lg);
  padding: var(--pf-space-6);
  /* Karta wysuwa się poniżej pasa i wiąże go z jasną częścią strony.
     Ujemny margines skraca pas o 8rem, a jego własne 6rem dopełnienia
     zostawia 2rem zwisu — mieści się w górnym dopełnieniu następnej sekcji,
     więc karta nachodzi na puste miejsce, nie na tekst.                    */
  margin-bottom: calc(var(--pf-space-24) * -1 - var(--pf-space-8));
  /* Sekcja po pasie jest później w drzewie. Bez własnego kontekstu
     układania jej tło zamalowałoby zwis karty w dniu, w którym ktoś doda
     do niej klasę `alt`.                                                   */
  position: relative;
  z-index: 1;
}
.proof figcaption {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-space-3);
  margin-bottom: var(--pf-space-4);
}
.proof-example { font-size: var(--pf-text-xs); color: var(--pf-text-subtle); }
.proof-url {
  display: block;
  font-family: var(--pf-font-mono);
  font-size: var(--pf-text-sm);
  color: var(--pf-evidence-fg);
  text-decoration: none;
  word-break: break-all;
  padding: var(--pf-space-3);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-evidence-bg);
  border: 1px solid var(--pf-evidence-border);
}
.proof-url:hover { color: var(--pf-evidence-fg); text-decoration: underline; }
.proof-quote {
  margin: var(--pf-space-4) 0 0;
  padding-left: var(--pf-space-4);
  border-left: 3px solid var(--pf-evidence-border);
  color: var(--pf-text);
  font-size: var(--pf-text-lg);
  line-height: var(--pf-leading-base);
}
.proof-meta {
  font-family: var(--pf-font-mono);
  font-size: var(--pf-text-xs);
  color: var(--pf-text-subtle);
  margin: var(--pf-space-3) 0 0;
}
.proof-note {
  margin: var(--pf-space-4) 0 0;
  padding-top: var(--pf-space-4);
  border-top: 1px solid var(--pf-border);
  font-size: var(--pf-text-sm);
  color: var(--pf-text-muted);
}

/* --- Układy dwukolumnowe --------------------------------------------------
   Domyślnie jedna kolumna. Podział dopiero od 900 px, bo przy 640 dwie
   kolumny tekstu robią się węższe niż wiersz, który da się czytać.         */
.split, .split-even, .cards-3 { display: grid; gap: var(--pf-space-8); }

.card {
  background: var(--pf-surface-raised);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  padding: var(--pf-space-6);
  box-shadow: var(--pf-shadow-sm);
}
.card h3 { margin-bottom: var(--pf-space-3); }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

.figure-card {
  background: var(--pf-surface-raised);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  padding: var(--pf-space-6);
  box-shadow: var(--pf-shadow-sm);
}

/* --- Kroki ---------------------------------------------------------------
   Numeracja jest tu uzasadniona treścią: to realna kolejność uruchomienia,
   a nie ozdobnik. Liczba stoi w kroju mono, bo jest wartością, nie słowem. */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--pf-space-8); max-width: 54rem; }
.steps li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--pf-space-4); align-items: start; }
.step-n {
  font-family: var(--pf-font-mono);
  font-size: var(--pf-text-lg);
  color: var(--pf-accent);
  padding-top: 0.15em;
  font-variant-numeric: tabular-nums;
}
.steps h3 { font-family: var(--pf-font-sans); font-size: var(--pf-text-base); margin-bottom: var(--pf-space-2); }
.steps p { margin: 0; color: var(--pf-text-muted); }

/* --- Pętla nauki ---------------------------------------------------------
   Ta sama numeracja co przy krokach, ale w rzędzie: to nie jest lista rzeczy
   do zrobienia po kolei, tylko trzy części jednego obiegu, który się powtarza.
   Na wąskim ekranie i tak jedna kolumna.                                   */
.loop { list-style: none; padding: 0; margin: var(--pf-space-12) 0 0; display: grid; gap: var(--pf-space-8); }
.loop li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--pf-space-3); align-items: start; }
.loop h3 { font-family: var(--pf-font-sans); font-size: var(--pf-text-base); margin-bottom: var(--pf-space-2); }
.loop p { margin: 0; color: var(--pf-text-muted); font-size: var(--pf-text-sm); }

/* --- Dowód kwalifikacji w karcie leada ------------------------------------ */
.evidence {
  display: inline-flex; align-items: center; gap: var(--pf-space-2);
  padding: var(--pf-space-1) var(--pf-space-3);
  border-radius: var(--pf-radius-pill);
  background: var(--pf-evidence-bg);
  color: var(--pf-evidence-fg);
  border: 1px solid var(--pf-evidence-border);
  font-size: var(--pf-text-sm);
  font-weight: var(--pf-weight-medium);
}
.evidence svg { width: 1em; height: 1em; flex: none; }

/* --- Przykładowa karta leada ---------------------------------------------- */
.lead-demo {
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  overflow: hidden;
  background: var(--pf-surface-raised);
  box-shadow: var(--pf-shadow-sm);
}
.lead-demo header {
  padding: var(--pf-space-4) var(--pf-space-6);
  border-bottom: 1px solid var(--pf-border);
  background: var(--pf-surface-sunken);
  font-family: var(--pf-font-mono);
  font-size: var(--pf-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pf-text-subtle);
}
.lead-demo dl {
  margin: 0; padding: var(--pf-space-6);
  display: grid; grid-template-columns: max-content 1fr;
  gap: var(--pf-space-3) var(--pf-space-6);
  font-size: var(--pf-text-sm);
}
.lead-demo dt { color: var(--pf-text-subtle); }
.lead-demo dd { margin: 0; font-family: var(--pf-font-mono); font-size: var(--pf-text-xs); }
.lead-demo .missing { color: var(--pf-text-subtle); font-style: italic; }

/* --- Cennik --------------------------------------------------------------- */
.price-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--pf-space-2); margin-bottom: var(--pf-space-4); }
.price-figure b {
  font-family: var(--pf-font-display);
  font-size: var(--pf-text-4xl);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.price-figure span { color: var(--pf-text-muted); font-size: var(--pf-text-sm); }

/* Tabela cen na wąskim ekranie przewija się we własnym pudełku — strona
   nigdy nie przewija się w poziomie. */
.price-table { margin: var(--pf-space-6) 0 var(--pf-space-4); font-size: var(--pf-text-sm); font-family: var(--pf-font-mono); }
.price-table th { font-family: var(--pf-font-sans); white-space: nowrap; }
.price-table td { white-space: nowrap; }
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-card { overflow-x: auto; }

/* --- Listy z odhaczeniem / wykluczeniem -----------------------------------
   Znacznika NIE ustawiamy przez grid/flex na <li>: treść typu
   "<strong>X.</strong> reszta zdania" stałaby się dwoma elementami siatki
   i tekst wylądowałby w kolumnie znacznika, łamiąc się po każdym słowie.   */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--pf-space-4); }
.checks li { position: relative; padding-left: 1.9rem; }
.checks li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--pf-status-accepted-fg);
  font-weight: var(--pf-weight-bold);
}
.checks.no li::before { content: "✕"; color: var(--pf-text-subtle); }

/* --- FAQ ------------------------------------------------------------------ */
.faq { max-width: var(--pf-width-prose); }
.faq details { border-bottom: 1px solid var(--pf-border); padding: var(--pf-space-4) 0; }
.faq summary { cursor: pointer; font-weight: var(--pf-weight-medium); min-height: 44px; display: flex; align-items: center; }
.faq summary::marker { color: var(--pf-text-subtle); }
.faq details p { margin: var(--pf-space-3) 0 0; color: var(--pf-text-muted); }

/* --- Drobne pomocnicze ----------------------------------------------------- */
.muted { color: var(--pf-text-muted); }
.fineprint { font-size: var(--pf-text-sm); color: var(--pf-text-subtle); margin-bottom: var(--pf-space-2); }
.fineprint:last-child { margin-bottom: 0; }
.section-note { margin-top: var(--pf-space-8); max-width: var(--pf-width-prose); color: var(--pf-text-muted); }

/* --- Stopka --------------------------------------------------------------- */
.site-foot {
  padding-block: var(--pf-space-12);
  border-top: 1px solid var(--pf-border);
  font-size: var(--pf-text-sm);
  color: var(--pf-text-subtle);
}
.site-foot a { color: var(--pf-text-muted); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: var(--pf-space-4); margin-top: var(--pf-space-3); }

/* --- Diagram metody ------------------------------------------------------- */
.diagram { width: 100%; height: auto; }
.diagram .shelf { fill: none; stroke: var(--pf-border-strong); stroke-width: 2; }
.diagram .box { fill: var(--pf-surface-sunken); stroke: var(--pf-border-strong); stroke-width: 1.5; }
.diagram .box-match { fill: var(--pf-accent-subtle); stroke: var(--pf-accent); stroke-width: 2; }
.diagram .arrow { fill: none; stroke: var(--pf-evidence-fg); stroke-width: 2; stroke-dasharray: 5 4; }
.diagram .label { fill: var(--pf-text-muted); font-size: 13px; font-family: var(--pf-font-sans); }
.diagram .label-strong { fill: var(--pf-text); font-size: 13px; font-weight: 600; font-family: var(--pf-font-sans); }

/* --- Dokumenty prawne ------------------------------------------------------
   Regulaminy dzielą tę warstwę z landingiem: ta sama typografia i te same
   powierzchnie. Dokument, który wygląda jak doklejony z innego serwisu,
   czyta się jak cudzy.
   Interlinia luźniejsza niż na landingu — paragrafy prawne czyta się wolniej
   i wraca do nich wzrokiem.                                                */
.legal { padding-block: var(--pf-space-16); max-width: 52rem; }
.legal h1 { font-size: clamp(1.9rem, 5vw, var(--pf-text-3xl)); }
.legal h2 {
  font-size: var(--pf-text-lg);
  margin-top: var(--pf-space-16);
  padding-top: var(--pf-space-6);
  border-top: 1px solid var(--pf-border);
}
.legal ol { padding-left: 1.4rem; display: grid; gap: var(--pf-space-3); }
.legal ol ol { margin-top: var(--pf-space-3); }
.legal li { line-height: var(--pf-leading-loose); }
.legal p  { line-height: var(--pf-leading-loose); }
.legal code {
  background: var(--pf-surface-sunken);
  padding: 0.1em 0.35em;
  border-radius: var(--pf-radius-sm);
}

.legal-meta { color: var(--pf-text-subtle); font-size: var(--pf-text-sm); font-family: var(--pf-font-mono); }
.legal-lead {
  background: var(--pf-surface-raised);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  box-shadow: var(--pf-shadow-sm);
  padding: var(--pf-space-6);
  margin-bottom: var(--pf-space-12);
}
.legal-lead p:last-child { margin-bottom: 0; }
.legal-warning { color: var(--pf-status-complained-fg); font-size: var(--pf-text-sm); }

/* Nagłówek dokumentu prawnego stoi na jasnym tle, nie na ciemnym pasie —
   dlatego marka i przełącznik języka potrzebują tu kolorów powierzchni.   */
.legal-head { border-bottom: 1px solid var(--pf-border); }
.legal-head .brand { color: var(--pf-text); }
.legal-head .lang-switch { color: var(--pf-text-muted); }
.legal-head .lang-switch:hover { color: var(--pf-text); }
.legal-head .btn-outline { border-color: var(--pf-border-strong); color: var(--pf-text); }
.legal-head .btn-outline:hover { border-color: var(--pf-text-subtle); color: var(--pf-text); }
.legal-head .btn-quiet { color: var(--pf-text-muted); }
.legal-head .btn-quiet:hover { color: var(--pf-text); }

/* --- Ruch ----------------------------------------------------------------
   Jedna zaaranżowana sekwencja przy wejściu, wyłącznie w pasie otwierającym.
   Reszta strony stoi spokojnie. Wyłączenie obsługuje globalna reguła
   `prefers-reduced-motion` z base.css.                                      */
@keyframes pf-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.band-hero .eyebrow      { animation: pf-rise .5s .04s both; }
.band-hero h1            { animation: pf-rise .5s .12s both; }
.band-hero .lead         { animation: pf-rise .5s .20s both; }
.band-hero .hero-actions { animation: pf-rise .5s .28s both; }
.band-hero .hero-note    { animation: pf-rise .5s .34s both; }
.proof                   { animation: pf-rise .6s .42s both; }

/* --- Od 640 px ------------------------------------------------------------ */
@media (min-width: 640px) {
  .proof { padding: var(--pf-space-8); }
  .site-head { padding-block: var(--pf-space-8); }
  .cards-3 { grid-template-columns: repeat(2, 1fr); }
}

/* --- Od 900 px ------------------------------------------------------------ */
@media (min-width: 900px) {
  section { padding-block: var(--pf-space-24); }
  .hero { grid-template-columns: 1.05fr 0.95fr; align-items: start; gap: var(--pf-space-16); }
  .hero h1 { font-size: var(--pf-text-4xl); }
  .split { grid-template-columns: 1.05fr 0.95fr; gap: var(--pf-space-16); align-items: start; }
  .split-even { grid-template-columns: repeat(2, 1fr); }
  .cards-3 { grid-template-columns: repeat(3, 1fr); }
  .loop { grid-template-columns: repeat(3, 1fr); gap: var(--pf-space-12); }
  .band-cta .lead { max-width: 52ch; }
}