/* Lista 50 demo - dodatek do styles.css, nie osobny system.
   Naglowek, stopka, sekcje, przyciski i .lead pochodza ze strony glownej.
   Tu siedzi tylko to, czego na stronie glownej nie ma: formularz z czterema
   polami i lista gotowych zapytan.

   Na calej stronie jest JEDEN czerwony przycisk: „Znajdź". Zaproszenie do
   klubu na dole jest celowo obwiedzione, a nie czerwone - czerwien ma tu
   znaczyc „to jest ruch, po ktory przyszedles", a nie „kup". */

.d50-waski{max-width:var(--container-text)}

.d50-h1{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  line-height:.95;letter-spacing:-.01em;font-size:clamp(2.3rem,6.5vw,4rem);margin:.4rem 0 1.2rem}
.d50-h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  line-height:1;font-size:clamp(1.7rem,3.6vw,2.6rem);margin:0 0 1rem}

/* Zdanie o tym, ze nic nie jest zapisywane. Mniejsze od .lead, bo to nie jest
   obietnica sprzedazowa, tylko informacja - ma byc przeczytana, nie krzyczec. */
.d50-cicho{margin-top:1rem;font-size:.9375rem;line-height:1.65;color:var(--ink-600)}

/* ---------- formularz ---------- */

.d50-form{margin:0 0 2rem}
.d50-pola{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 1.5rem}
@media (max-width:640px){.d50-pola{grid-template-columns:1fr}}

.d50-pole{display:block}
.d50-pole>span{display:block;margin:0 0 .45rem;font-family:var(--font-display);
  font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:.78rem;
  color:var(--ink-700)}
.d50-pole input,.d50-pole select{display:block;width:100%;box-sizing:border-box;
  padding:.85em 1em;background:var(--mocno-white);border:1px solid var(--line-300);
  border-radius:var(--radius-sm);color:var(--ink-900);font:inherit;font-size:1rem}
.d50-pole input::placeholder{color:var(--ink-500)}
.d50-pole input:focus,.d50-pole select:focus{outline:none;border-color:var(--ink-800)}
/* Bialy formularz na bialej sekcji znika. Ta sama zasada, co dla .card
   w styles.css: na bieli pola biora jasnoszare tlo strony. */
.section--white .d50-pole input,.section--white .d50-pole select{background:var(--mocno-light)}
.section--white .d50-pole input:focus,.section--white .d50-pole select:focus{background:var(--mocno-white)}
/* Podpowiedz pod polem nie jest etykieta, wiec resetujemy to, co .d50-pole>span
   ustawilo wyzej - inaczej czytalaby sie jak druga nazwa pola. */
.d50-pole .d50-note{margin:.45rem 0 0;font-family:var(--font-body);font-weight:400;
  text-transform:none;letter-spacing:0;font-size:.8125rem;color:var(--ink-600)}

.d50-ptaszek{display:flex;gap:.7rem;align-items:flex-start;margin:1.4rem 0 1.6rem;
  font-size:.9375rem;line-height:1.55;color:var(--ink-700);cursor:pointer}
.d50-ptaszek input{flex:none;width:20px;height:20px;margin:.1rem 0 0;accent-color:var(--mocno-red)}

/* ---------- wyniki ---------- */

.d50-pusto{padding:2rem 1.5rem;background:var(--mocno-light);
  border:1px dashed var(--line-300);border-radius:var(--radius-sm);text-align:center}
.d50-pusto b{display:block;font-family:var(--font-display);font-weight:900;
  text-transform:uppercase;font-size:1.2rem;margin:0 0 .4rem}
.d50-pusto span{display:block;max-width:44ch;margin:0 auto;font-size:.9375rem;
  color:var(--ink-600)}

.d50-wyniki{display:grid;gap:2.5rem}
.d50-grupa h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  line-height:1.05;font-size:1.35rem;margin:0 0 .5rem}
.d50-opis{margin:0 0 1rem;font-size:.9375rem;line-height:1.6;color:var(--ink-600);
  max-width:60ch}

/* Zapytanie to wiersz do klikniecia, nie odnosnik w zdaniu - stad cala plytka
   i strzalka, ktora mowi, ze otworzy sie nowa karta. */
.d50-zapytania{display:grid;gap:.5rem}
.d50-zapytania a{display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding:.9rem 1.1rem;background:var(--mocno-white);
  border:1px solid var(--line-200);border-radius:var(--radius-sm);
  color:var(--ink-900);text-decoration:none;font-weight:500;line-height:1.4;
  transition:border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out)}
.d50-zapytania a::after{content:"↗";flex:none;color:var(--ink-500);font-size:1.05rem}
.d50-zapytania a:hover{border-color:var(--ink-800);box-shadow:var(--shadow-card)}
.d50-zapytania a:hover::after{color:var(--mocno-red)}
.d50-zapytania a:focus-visible{outline:2px solid var(--mocno-red);outline-offset:2px}
/* Na bialej sekcji karty musza sie odciac od tla, bo obie sa biale. */
.section--white .d50-zapytania a{background:var(--mocno-light);border-color:var(--line-200)}

.d50-kroki{margin:0 0 1.25rem;padding:0 0 0 1.4rem;list-style:decimal;
  display:grid;gap:.7rem;color:var(--ink-700)}
.d50-kroki li{padding-left:.3rem;line-height:1.6}
.section--dark .d50-kroki{color:rgba(255,255,255,.78)}