/* Vistitio — feed (/) i wyniki wyszukiwania (/szukaj).
   Źródła: „Vistitio Prototyp Mobile.dc.html” ekran „Feed” oraz
   „Vistitio Prototyp Desktop.dc.html” ekran „Wyniki wyszukiwania”.

   Ten arkusz układa stronę i nic poza tym. Wygląd chipa, pola, kafelka, przełącznika
   i pustego stanu należy do komponentów — tutaj nie podmieniamy ich wysokości ani
   promieni, bo wtedy dwa widoki zaczynają wyglądać inaczej niż reszta serwisu.

   Uwaga na tokeny typografii: --v-t-ui i rodzina to skrót `font` (rozmiar/interlinia),
   nie sam rozmiar. Używamy ich tylko jako `font: 600 var(--v-t-ui) var(--v-font-body);`. */

/* Feed na stronie głównej sam trzyma kontener, bo widok idzie na pełną szerokość. */
.feed {
  max-width: var(--v-w-page);
  margin: 0 auto;
  padding: var(--v-s-6) 24px var(--v-s-16);
}

/* Nagłówek listy na stronie głównej: tytuł i zdanie po lewej, sortowanie po prawej.
   Pomiar z makiety: tytuł 32/600 Outfit, zdanie 14 px n-600. */
.feed__naglowek {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--v-s-6);
  flex-wrap: wrap;
  margin-bottom: var(--v-s-6);
}

.feed__naglowek-tresc {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  min-width: 0;
}

.feed__tytul {
  margin: 0;
  font: 600 28px/1.25 var(--v-font-display); /* pomiar z makiety */
}

.feed__nota {
  margin: 0;
  font-size: 14px;
  color: var(--v-n-600);
}

.feed__sort {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-s-2);
}

@media (max-width: 760px) {
  .feed__tytul { font-size: 24px; }
}

/* ---------- wspólne ---------- */

/* Kafelek oferty ma w bibliotece stałe 200 px szerokości — w siatce rozciąga się
   na komórkę, bo to siatka decyduje o kolumnach. */
.feed__kafelek,
.wyn__kafelek { width: 100%; }

/* Rzeczy, które ma włączyć dopiero Alpine: szkielet ładowania, zdanie zamykające listę
   i wejście w arkusz filtrów. Bez JS zostają schowane, więc nie pokazujemy „to wszystko”
   obok przycisku „Pokaż więcej” ani przycisku, który nie miałby czego otworzyć.

   Wyliczamy je po nazwie zamiast pisać `.wyn [x-cloak]`: x-filter-panel używa `x-cloak`
   jako znacznika „skrypty działają” i sam siebie NIE chowa, więc reguła zbiorcza zgasiłaby
   bez JS całą kolumnę filtrów. */
.feed__szkielet[x-cloak],
.feed__koniec[x-cloak],
.wyn__koniec[x-cloak],
.wyn__otworz[x-cloak] { display: none; }

/* ---------- feed (/) ---------- */

.feed { display: flex; flex-direction: column; gap: var(--v-s-4); }

.feed__pasek { display: flex; }

.feed__dzialy {
  display: flex;
  gap: var(--v-s-2);
  overflow-x: auto;
  padding-bottom: var(--v-s-1);
}

.feed__dzialy > * { flex-shrink: 0; }

/* Siatka feedu: DWIE kolumny na web, jedna na telefonie. Karta oferty jest szeroka
   (zdjęcie po lewej, treść po prawej), więc cztery kolumny by ją zgniotły — prototyp
   układa te karty po dwie w rzędzie. */
.feed__siatka,
.wyn__siatka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v-s-5);
}

/* Wszystkie karty w siatce tej samej wysokości (Hubert 17.10: „wszystkie kafelki zawsze mają być
   takie same”): rzędy równe najwyższemu, więc dwuwierszowa dostawa czy linia Omnibusa w jednej
   karcie nie robi różnicy między rzędami. Na telefonie karta stoi sama w rzędzie — bez zmian. */
@media (min-width: 761px) {
  .feed__siatka,
  .wyn__siatka { grid-auto-rows: 1fr; }
}

.feed__szkielet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--v-s-6) var(--v-s-4);
}

/* Stopka listy: „Pokaż więcej” (makieta „Vistitio Strona Glowna.dc.html”, blok `showMore`)
   albo zdanie zamykające, gdy nie ma już nic dalej. Numerowanej paginacji tu nie ma —
   Styleguide Wdrozenie trzyma ją wyłącznie dla panelu. */
.feed__stopka,
.wyn__stopka {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v-s-3);
  margin-top: var(--v-s-6);
}

.feed__koniec,
.wyn__koniec {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-600);
  text-align: center;
}

/* ---------- wyniki (/szukaj) ---------- */

/* Kolumna filtrów to x-filter-panel: ramka, nagłówek, licznik, „Wyczyść wszystkie”,
   grupy i arkusz na telefonie należą do niego. Widok podaje tylko szerokość kolumny
   i odsunięcie przyklejenia — nagłówek serwisu ma około 69 px, więc panel zatrzymuje
   się pod nim, nie za nim. Zmienna jest dziedziczona, bo komponent nie przyjmuje klasy. */
.wyn {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--v-s-8);
  align-items: start;
  --v-filtry-gora: calc(var(--v-s-16) + var(--v-s-4));
}

/* Grupa widełek jest <form>-em, a ten ma w przeglądarce własny dolny margines — w kolumnie
   filtrów zrobiłby dziurę większą niż odstęp między grupami. */
.wyn__cena { margin: 0; }

.wyn__chipy { display: flex; flex-wrap: wrap; gap: 6px; /* z makiety */ }

.wyn__widelki { display: flex; align-items: center; gap: var(--v-s-2); }

/* Pola ceny dzielą wiersz po równo; szerokość należy do układu, reszta do x-input. */
.wyn__widelki .v-field { flex: 1; min-width: 0; }

.wyn__myslnik { color: var(--v-n-500); font: 400 13px/1 var(--v-font-body); }

.wyn__jednostka { color: var(--v-n-600); font: 400 13px/1 var(--v-font-body); }

.wyn__blad {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-error-text);
}

.wyn__pokaz { align-self: stretch; }

/* Wejście w arkusz filtrów istnieje tylko na telefonie — na web panel stoi obok wyników. */
.wyn__otworz { display: none; }

/* ---------- kolumna wyników ---------- */

.wyn__tresc {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-5);
  min-width: 0;
}

.wyn__naglowek { display: flex; flex-direction: column; gap: 6px; /* z makiety */ }

.wyn__naglowek h1 { text-wrap: pretty; }

.wyn__ile { font: 400 var(--v-t-ui) var(--v-font-body); color: var(--v-n-600); }

.wyn__sort { display: flex; align-items: center; flex-wrap: wrap; gap: var(--v-s-2); }

.wyn__sort-etykieta {
  font: 600 12.5px/1.4 var(--v-font-body);
  color: var(--v-n-600);
}

/* Pusty stan z makiety ma zdanie, trzy wskazówki i dopiero potem przycisk — wszystko
   pod sobą, więc gniazdo akcji z x-empty układa się w kolumnę. */
.wyn__pusto .v-empty__akcja {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--v-s-3);
}

.wyn__wskazowki {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
}

.wyn__wskazowki li {
  display: flex;
  gap: var(--v-s-2);
  font: 400 13.5px/1.5 var(--v-font-body);
  color: var(--v-n-700);
}

.wyn__wskazowki li::before {
  content: "·";
  flex-shrink: 0;
  color: var(--v-secondary);
}

/* ---------- wąski ekran ---------- */
/* Poniżej 760 px kolumnę filtrów przejmuje arkusz — robi to x-filter-panel sam, na tym
   samym węźle. Tutaj zostaje siatka na dwie kolumny i dwie rzeczy wokół arkusza. */

@media (max-width: 760px) {
  .wyn {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--v-s-4);
  }

  /* Wejście w arkusz. `.wyn__otworz[x-cloak]` wyżej ma wyższą specyficzność, więc dopóki
     Alpine nie wystartuje, przycisk jest schowany i widać sam panel w toku strony. */
  .wyn__otworz { display: flex; }

  /* Gdy panel pracuje jako arkusz, zatwierdzanie widełek przejmuje jego stopka —
     przycisk przy polach byłby wtedy drugim „Pokaż wyniki” na jednym ekranie.
     `:not([x-cloak])` to ten sam znacznik „skrypty działają”, którego używa komponent. */
  .v-filtry:not([x-cloak]) .wyn__pokaz { display: none; }

  /* DWIE KOLUMNY także na telefonie — ekran „Feed” w Prototypie Mobile rysuje siatkę
     2 × N, a nie listę szerokich kart. Sama karta zamienia się w kafelek regułami
     w `k-oferta-i-transakcja.css`. */
  .feed__siatka,
  .wyn__siatka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--v-s-5) var(--v-s-4);
  }

  /* Szkielet ładowania zostaje wąskim kafelkiem — udaje kształt, nie treść. */
  .feed__szkielet {
    grid-template-columns: 1fr 1fr;
    gap: var(--v-s-4) var(--v-s-3);
  }
}


/* Wyniki mają obok siatki kolumnę filtrów, więc dwie szerokie karty mieszczą się
   dopiero na naprawdę szerokim ekranie. */
@media (max-width: 1400px) {
  .wyn__siatka { grid-template-columns: minmax(0, 1fr); }
}


/* ================= Strona główna: sekcje dla niezalogowanej =================
   Źródło: „Vistitio Strona Glowna.dc.html”. Sekcje widzi tylko gość — zalogowana
   osoba wchodzi po oferty, nie po opis serwisu. */

.gl-hero,
.gl-popularne,
.gl-sprzedajacy {
  max-width: var(--v-w-page);
  margin: 0 auto;
  padding: var(--v-s-10) 24px;
  display: grid;
  gap: var(--v-s-5);
}

/* `586px` na sztywno nie miescilo sie przy 1120 px (kontener 1072 po rynnach),
   wiec blok z przykladem wychodzil poza ekran o 96 px. `minmax(0, 586px)` daje
   te sama szerokosc tam, gdzie jest miejsce, i zweza sie tam, gdzie go brak. */
.gl-hero { grid-template-columns: minmax(0, 586px) minmax(0, 1fr); }

.gl-hero__karta {
  background: var(--v-primary);
  color: var(--v-n-0);
  border-radius: var(--v-r-hero);
  padding: var(--v-s-10);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--v-s-5);
}

.gl-hero__tytul {
  margin: 0;
  font: 600 40px/1.15 var(--v-font-display);
}

.gl-hero__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--v-n-200);
}

.gl-hero__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-s-3);
  margin-top: var(--v-s-2);
}

/* Trzecia akcja hero to zwykły odnośnik, nie przycisk — tak rysuje ją makieta. */
.gl-hero__link {
  align-self: center;
  color: var(--v-secondary);
  font-weight: 700;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.gl-hero__kafle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v-s-5);
  align-content: start;
}

.gl-kafel {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--v-s-1);
  min-height: 140px;
  padding: var(--v-s-5);
  border-radius: var(--v-r-card);
  background: var(--v-n-100);
  color: var(--v-primary);
  text-decoration: none;
}

.gl-kafel--ochra { background: var(--v-secondary-soft); }

.gl-kafel__nazwa { font: 600 19px/1.25 var(--v-font-display); }

.gl-kafel__opis {
  font-size: 13px;
  color: var(--v-n-600);
}

.gl-kafel:hover { filter: brightness(.97); }

/* ---------- popularne kategorie i marki ---------- */

.gl-popularne { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.gl-popularne__karta {
  background: var(--v-n-50);
  border-radius: var(--v-r-card);
  padding: var(--v-s-6);
}

.gl-popularne__tytul {
  margin: 0 0 var(--v-s-4);
  font: 600 19px/1.25 var(--v-font-display);
}

.gl-popularne__chipy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-s-2);
}

/* ---------- cztery obietnice ---------- */

.gl-zaufanie { background: var(--v-n-50); }

.gl-zaufanie__in {
  max-width: var(--v-w-page);
  margin: 0 auto;
  padding: var(--v-s-10) 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--v-s-8);
}

.gl-obietnica {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
}

/* Znak obietnicy to kwadrat 44 px z promieniem 12. KAŻDY ma inny ton — pomiar
   z makiety: granat z ochrowym napisem, zielony, chłodny i ochrowy. Kolor niesie
   tu znaczenie (pieniądze, potwierdzenie, czas, zwrot), więc nie ujednolicamy go. */
.gl-obietnica__znak {
  width: 44px;
  height: 44px;
  border-radius: var(--v-r-input);
  display: grid;
  place-items: center;
  font: 700 15px/1 var(--v-font-body); /* pomiar z makiety */
  margin-bottom: var(--v-s-2);
}

.gl-obietnica__znak--granat {
  background: var(--v-primary);
  /* Ochra NA GRANACIE ma własny, jaśniejszy token — tak mierzy to makieta (#E0AB4A). */
  color: var(--v-secondary-dark);
}

.gl-obietnica__znak--zielony {
  background: var(--v-success-soft);
  color: var(--v-success-text);
  font: 400 20px/1 var(--v-font-body); /* pomiar z makiety */
}

.gl-obietnica__znak--chlodny {
  background: var(--v-n-100);
  color: var(--v-primary);
  font: 700 14px/1 var(--v-font-body); /* pomiar z makiety */
}

.gl-obietnica__znak--ochra {
  background: var(--v-secondary-soft);
  color: var(--v-secondary-text);
  font: 400 20px/1 var(--v-font-body); /* pomiar z makiety */
}

.gl-obietnica__tytul { font: 600 19px/1.3 var(--v-font-display); } /* pomiar z makiety */

.gl-obietnica__tekst {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--v-n-600);
}

/* ---------- dla sprzedających ---------- */

/* Pomiar z makiety: kolumna tekstu 572 px, karta z przykładem 568, między nimi 52. */
.gl-sprzedajacy {
  /* Dwie STALE kolumny (572 + 568 + rynny = 1188) mieszcza sie tylko przy
     kontenerze 1240. Przy 1120 px strona jechala w bok o 96 px — ostatni
     przypadek z checklisty handoffu PWA. `minmax(0, …)` zostawia te same
     szerokosci tam, gdzie jest miejsce, i pozwala sie zwezic tam, gdzie go brak. */
  grid-template-columns: minmax(0, 572px) minmax(0, 568px);
  gap: 52px; /* makieta */
  justify-content: space-between;
}

.gl-sprzedajacy__nad {
  display: block;
  font: 700 12px/1.2 var(--v-font-body);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--v-secondary-text);
}

.gl-sprzedajacy__tytul {
  margin: var(--v-s-3) 0 var(--v-s-6);
  font: 600 38px/1.15 var(--v-font-display); /* pomiar z makiety */
}

.gl-kroki {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--v-s-5);
}

.gl-krok {
  display: flex;
  gap: var(--v-s-3);
}

.gl-krok__numer {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--v-primary);
  color: var(--v-n-0);
  display: grid;
  place-items: center;
  font: 700 12px/1 var(--v-font-body);
}

.gl-krok__tresc { display: flex; flex-direction: column; gap: 2px; }
.gl-krok__tytul { font-weight: 700; font-size: 15px; }

.gl-krok__tekst {
  font-size: 14px;
  line-height: 1.5;
  color: var(--v-n-600);
}

.gl-sprzedajacy__nota {
  margin: var(--v-s-6) 0 0;
  padding: var(--v-s-4);
  border-radius: var(--v-r-input);
  background: var(--v-secondary-soft);
  font-size: 14px;
}

.gl-sprzedajacy__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-s-3);
  margin-top: var(--v-s-6);
}

.gl-przyklad {
  border: 1px solid var(--v-n-200);
  border-radius: var(--v-r-card);
  padding: var(--v-s-6);
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
  align-self: start;
}

.gl-przyklad__nad {
  font: 700 12px/1.2 var(--v-font-body);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--v-n-600);
}

.gl-przyklad__strony {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v-s-3);
}

.gl-przyklad__strona {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-1);
  padding: var(--v-s-4);
  border-radius: var(--v-r-input);
  background: var(--v-n-50);
}

.gl-przyklad__strona--dostaje { background: var(--v-success-soft); }

.gl-przyklad__etykieta {
  font: 700 11px/1.2 var(--v-font-body);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--v-n-600);
}

.gl-przyklad__kwota { font: 600 26px/1.2 var(--v-font-display); }

.gl-przyklad__nota {
  font-size: 12px;
  color: var(--v-n-600);
}

.gl-przyklad__stopka {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--v-n-600);
}

/* ---------- częste pytania ---------- */

.gl-faq { background: var(--v-n-50); }

.gl-faq__in {
  /* Pomiar z makiety: kolumna treści 850 px (plus wyściółka 24 z każdej strony),
     sekcja z wyściółką 64 px od góry i dołu. */
  max-width: 898px; /* makieta: 850 treści + 2 x 24 */
  margin: 0 auto;
  padding: 64px 24px; /* makieta */
  display: flex;
  flex-direction: column;
  gap: var(--v-s-5);
}

.gl-faq__tytul {
  margin: 0 0 var(--v-s-3);
  font: 600 32px/1.25 var(--v-font-display); /* pomiar z makiety */
  text-align: center;
}

.gl-pytanie {
  background: var(--v-n-0);
  border: 1px solid var(--v-n-200);
  border-radius: 14px; /* makieta */
  padding: var(--v-s-4) var(--v-s-5); /* pomiar z makiety: 16 x 20 */
}

/* Otwarte pytanie makieta obrysowuje granatem — widać, które czytasz. */
.gl-pytanie[open] { border-color: var(--v-primary); }

.gl-pytanie__naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-s-4);
  cursor: pointer;
  list-style: none;
}

.gl-pytanie__naglowek::-webkit-details-marker { display: none; }

.gl-pytanie__pytanie { font: 600 16px/1.35 var(--v-font-display); } /* pomiar z makiety */

/* Przełącznik to kwadrat 28 px, nie goła strzałka: zamknięty jasny, otwarty granatowy. */
.gl-pytanie__przelacznik {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--v-r-chip);
  background: var(--v-n-50);
  color: var(--v-n-700);
  display: grid;
  place-items: center;
  font-size: 14px; /* makieta: znak ma być czytelny, nie kropką */
  line-height: 1;
}

.gl-pytanie__przelacznik::before { content: '▾'; }

.gl-pytanie[open] .gl-pytanie__przelacznik {
  background: var(--v-primary);
  color: var(--v-n-0);
}

.gl-pytanie[open] .gl-pytanie__przelacznik::before { content: '▴'; }

.gl-pytanie__tresc {
  margin: var(--v-s-3) 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--v-n-700);
}

/* ---------- ostatnie wezwanie ---------- */

.gl-cta {
  max-width: var(--v-w-page);
  margin: 0 auto;
  padding: var(--v-s-12) 24px;
}

.gl-cta__karta {
  background: var(--v-primary);
  color: var(--v-n-0);
  border-radius: var(--v-r-hero);
  padding: var(--v-s-10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-s-8);
  flex-wrap: wrap;
}

.gl-cta__tytul {
  margin: 0;
  font: 600 36px/1.25 var(--v-font-display); /* pomiar z makiety */
}

.gl-cta__tytul span { color: var(--v-secondary); }

.gl-cta__lead {
  margin: var(--v-s-3) 0 0;
  color: var(--v-n-200);
}

.gl-cta__akcje { display: flex; gap: var(--v-s-3); flex-wrap: wrap; }

@media (max-width: 1100px) {
  .gl-hero,
  .gl-sprzedajacy { grid-template-columns: minmax(0, 1fr); }
  .gl-zaufanie__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .gl-hero,
  .gl-popularne,
  .gl-sprzedajacy,
  .gl-cta { padding: var(--v-s-6) var(--v-s-4); }

  .gl-hero__karta { padding: var(--v-s-6); }
  .gl-hero__tytul { font-size: 28px; }
  .gl-popularne { grid-template-columns: minmax(0, 1fr); }
  .gl-zaufanie__in { grid-template-columns: minmax(0, 1fr); padding: var(--v-s-8) var(--v-s-4); }
  .gl-sprzedajacy__tytul,
  .gl-faq__tytul,
  .gl-cta__tytul { font-size: 24px; }
  .gl-faq__in { padding: var(--v-s-8) var(--v-s-4); }
}


/* ---------- „Ostatnio ogladane" (feed po zalogowaniu) ---------- */
/* Zrodlo: ekran „Feed" w Prototypie Mobile i Desktop. Historia siedzi w ciasteczku,
   wiec „Wyczysc" stoi tuz obok tytulu — to ma byc jedno klikniecie, nie ustawienie. */

.gl-ostatnio {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
  margin-bottom: var(--v-s-6);
}

.gl-ostatnio__gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-s-4);
}

.gl-ostatnio__tytul {
  margin: 0;
  font: 600 var(--v-t-h3) var(--v-font-display);
  letter-spacing: var(--v-ls-h3);
  color: var(--v-primary);
}

.gl-ostatnio__siatka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--v-s-4);
}

@media (min-width: 760px) {
  .gl-ostatnio__siatka { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

.gl-ostatnio__nota {
  margin: 0;
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}


/* HERO I KAFLE DZIALOW — handoff 31. Hero mowi teraz jedna rzecz: cala cena zostaje
   u sprzedajacej. Kafle dostaly probki koloru i zywe liczby zamiast stalych opisow. */
.gl-hero__nadtytul {
  font: 700 11.5px/1 var(--v-font-body);
  letter-spacing: .09em; /* makieta */
  text-transform: uppercase;
  color: var(--v-secondary-jasna, #E0AB4A); /* TODO token */
}

/* Handoff 57: trzy fakty w JEDNYM rzędzie — siatka 3 kolumn z pionowymi kreskami między,
   cyfra 22 px, podpis 12,5/1,35 zawija się pod cyfrą (nigdy cyfra). Wcześniej flex z zawijaniem
   spychał trzeci fakt do drugiego rzędu (zrzut Huberta, Screenshot_2). */
.gl-hero__liczby {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 18px; /* makieta */
  margin-top: var(--v-s-1);
  border-top: 1px solid #2A3A58; /* TODO token */
}

.gl-hero__liczba {
  display: flex;
  flex-direction: column;
  gap: 4px; /* makieta */
  min-width: 0;
  padding: 0 12px 0 16px; /* makieta */
  border-left: 1px solid #2A3A58; /* TODO token */
}

.gl-hero__liczba:first-child { padding-left: 0; border-left: none; }

.gl-hero__liczba-wartosc {
  font: 600 22px/1.1 var(--v-font-display); /* makieta */
  letter-spacing: -.02em; /* makieta */
  color: var(--v-n-0);
  white-space: nowrap;
}

.gl-hero__liczba-podpis { font: 400 12.5px/1.35 var(--v-font-body); color: #9FB0C8; /* TODO token */ text-wrap: pretty; }

/* Drugi przycisk hero: bialy na granacie. */
.v-btn--jasny {
  background: var(--v-n-0);
  color: var(--v-primary);
  border: none;
  font-weight: 700;
}

.v-btn--jasny:hover { background: var(--v-n-100); color: var(--v-primary); }

/* Kafel dzialu: probki u gory, nazwa i liczby na dole. */
.gl-kafel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--v-s-3);
  padding: 18px; /* makieta */
  min-height: 140px; /* makieta */
  border-radius: 20px; /* makieta */
  text-decoration: none;
}

.gl-kafel:hover { opacity: .88; }

.gl-kafel__probki { display: flex; gap: 6px; /* makieta */ }

.gl-kafel__probka {
  flex: 1;
  height: 56px; /* makieta */
  border-radius: 10px; /* makieta */
}

.gl-kafel__tresc { display: flex; flex-direction: column; gap: 2px; /* makieta */ }

.gl-kafel__nazwa {
  font: 600 19px/1.2 var(--v-font-display);
  letter-spacing: -.02em; /* makieta */
  color: var(--v-primary);
}

.gl-kafel__opis { font: 400 13px/1.4 var(--v-font-body); color: var(--v-n-700); }


/* MOBILE: jedna rynna zamiast dwoch (uwaga Huberta 29.09 — „zobacz ile miejsca
   marnujemy”). `.powloka__tresc` daje juz 16 px z kazdej strony, a sekcje dokladaly
   swoje 24 — razem 40 px z 390, czyli ponad jedna dziesiata ekranu na nic. */
@media (max-width: 760px) {
  .gl-hero,
  .gl-popularne,
  .gl-sprzedajacy {
    padding-left: 0;
    padding-right: 0;
  }

  /* Karta hero i kafle maja wtedy pelna szerokosc tresci. */
  .gl-hero__karta { padding: var(--v-s-5); }
}


/* Feed na telefonie: JEDNA karta na wiersz (plansza „Strona Glowna”, 29.09).
   Dwie kolumny pochodzily z Prototypu Mobile — patrz rozstrzygniecie w
   k-oferta-i-transakcja.css. */
@media (max-width: 760px) {
  .feed__siatka,
  .wyn__siatka {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--v-s-4);
  }

  /* Ta sama rynna co w hero: `.powloka__tresc` daje juz 16 px, wiec wlasne 24
     zwezalo karte z 358 do 310 px (zmierzone 29.09). */
  .feed { padding-left: 0; padding-right: 0; }
}


/* HERO NA TELEFONIE 1:1 Z PLANSZA (30.09, po uwadze Huberta). Wartosci wprost ze
   zmiennych planszy: heroTitleSize 30px, heroBodySize 14.5px, heroPad 18px 18px 4px,
   ctaDir column, ctaBtnW 100%, heroCtaAlign stretch. */
@media (max-width: 759px) {
  .gl-hero__karta { padding: 18px 18px 4px; /* makieta */ }

  .gl-hero__tytul { font: 700 30px/1.06 var(--v-font-display); /* makieta */ }

  .gl-hero__lead { font: 400 14.5px/1.5 var(--v-font-body); /* makieta */ }

  /* Przyciski w kolumnie, oba na PELNA szerokosc karty — w projekcie nie stoja
     obok siebie i nie maja szerokosci wlasnej tresci. */
  .gl-hero__akcje {
    flex-direction: column;
    align-items: stretch;
  }

  .gl-hero__akcje .v-btn { width: 100%; /* makieta */ }
}


/* Naglowki pytan na stronie glownej mialy 28 px — to rozwijany element, wiec musi
   dac sie w niego trafic palcem (audyt 30.09). */
@media (max-width: 759px) {
  .gl-pytanie__naglowek { min-height: 44px; }
}


/* ZGODNOSC Z PLANSZA NA TELEFONIE — druga tura (30.09, weryfikacja 84 zmiennych
   mobilnych z „Vistitio Strona Glowna”). Poprzednio przypisalem `heroPad` KARCIE,
   a ta wartosc nalezy do SEKCJI; karta ma wlasna `heroCardPad`. */
@media (max-width: 759px) {
  .gl-hero { padding: 18px 18px 4px; /* makieta: heroPad */ }

  .gl-hero__karta { padding: 22px 20px; /* makieta: heroCardPad */ }

  .gl-hero__karta > * + * { margin-top: 0; }

  /* OBIETNICE: na telefonie to BIALE KARTY z obwodka, a znak stoi OBOK tekstu
     (`trustDir: row`), nie nad nim. Do tej pory byly przezroczyste i w kolumnie. */
  .gl-obietnica {
    display: flex;
    flex-direction: row; /* makieta: trustDir */
    align-items: flex-start; /* makieta: trustAlign */
    gap: 14px; /* makieta: trustGap */
    background: var(--v-n-0); /* makieta: trustBg */
    border: 1px solid #E4E9F0; /* makieta: trustBorder */ /* TODO token */
    border-radius: 16px; /* makieta: trustRadius */
    padding: 16px; /* makieta: trustPad */
    flex-wrap: wrap;
  }

  .gl-obietnica__tytul { font: 600 16px/1.25 var(--v-font-display); /* makieta: trustTitle */ }

  .gl-obietnica__tekst { font: 400 13.5px/1.5 var(--v-font-body); /* makieta: trustBody */ flex: 1 1 100%; }

  .gl-zaufanie__in { gap: 10px; /* makieta: trustGridGap */ }
}


/* RYNNA LICZY SIE RAZ (uwaga Huberta 30.09: „znowu zwezileś te sekcje”).
   Plansza mierzy `heroPad`/`sectionPad` w kontenerze BEZ wysciolki, a u nas
   `.powloka__tresc` daje juz 18 px z kazdej strony. Przypisanie wartosci z planszy
   wprost oznacza 36 px i sekcje wezsze od kafelkow ofert. Pion zostaje z planszy,
   poziom zeruje sie tutaj. */
@media (max-width: 759px) {
  .gl-hero { padding: 18px 0 4px; /* makieta: heroPad, poziom z kontenera */ }

  /* Nazwy sekcji sprawdzone w widoku (30.09): u nas pytania to `.gl-faq`,
     nie `.gl-pytania` — wczesniejsze reguly pisane na zla nazwe nie dzialaly. */
  .gl-popularne,
  .gl-sprzedajacy,
  .gl-zaufanie,
  .gl-faq,
  .gl-ostatnio,
  .gl-cta { padding-left: 0; padding-right: 0; }

  .gl-zaufanie__in,
  .gl-faq__in { padding-left: 0; padding-right: 0; }
}


/* TLO CALEJ STRONY NA TELEFONIE (uwaga Huberta 30.09: „w projekcie mobile cala strona
   ma to tlo”). W planszy `trustBg` i `blockBg` sa BIALE na telefonie, a przezroczyste
   na web — czyli karty sa biale, a tlo pod nimi NIE MOZE byc biale, bo karty znikaja.
   Do 30.09 mielismy odwrotnie: strona biala, jeden pas przytlumiony, a karty
   „popularnych” szare na bialym. Teraz: strona przytlumiona, wszystkie karty biale. */
@media (max-width: 759px) {
  /* Sekcje nie malują juz wlasnych pasow — tlo daje strona. */
  .gl-zaufanie,
  .gl-faq { background: transparent; }

  /* Karty sa biale, tak jak w planszy. */
  .gl-popularne__karta,
  .gl-pytanie { background: var(--v-n-0); }
}


/* „Najpopularniejsze kategorie” i „Popularne marki” NIE WCHODZA na telefon
   (decyzja Huberta 30.09). Na 390 px siedzialy na wysokosci 5884 px, pod feedem
   wysokim na 4682 — czyli nikt do nich nie dociera, a zajmuja 748 px. Na web
   zostaja bez zmian. */
@media (max-width: 759px) {
  .gl-popularne { display: none; }
}


/* TABLET 760-1119: hero ma stala kolumne 586 px, wiec na tablecie sklada sie
   w jedna — tak samo jak na telefonie (handoff PWA, sekcja 2). */
@media (min-width: 760px) and (max-width: 1119px) {
  .gl-hero { grid-template-columns: minmax(0, 1fr); }
}

/* Blok z przykladem rozliczenia ma stala szerokosc i wychodzil poza hero
   przy 1120 px. */
.gl-przyklad { max-width: 100%; }


/* Kolumny hero musza umiec sie zwezic. Bez `min-width: 0` element siatki nie
   schodzi ponizej szerokosci swojej tresci, wiec blok z przykladem rozliczenia
   (568 px) rozpychal prawa kolumne i wypychal strone o 96 px przy 1120 px —
   mimo `max-width: 100%` na samym bloku. Ta sama zasada co przy mega menu. */
.gl-hero > * { min-width: 0; }

.gl-sprzedajacy > * { min-width: 0; }

/* ---------- Start zalogowanej osoby (makieta v80 „Start - Twoje zainteresowania”, C1–C3 i D1–D3) ----------
   Kontener jak feed. Odstęp 14 px między blokami (makieta). Siatka kafelków: 5 kolumn na komputerze
   (D1, odstęp 18 / 12), mniej na węższym ekranie, 2 na telefonie (C2). Etykieta, notka, kreska
   i karta „Ułóż Start pod siebie” stoją W SIATCE na całą szerokość — doładowana porcja dokleja się
   do tej samej siatki, więc kreska „Więcej z innych działów” trafia na swoje miejsce także na
   granicy stron. */
.start {
  display: flex;
  flex-direction: column;
  gap: 14px; /* makieta */
  max-width: var(--v-w-page);
  margin: 0 auto;
  padding: var(--v-s-6) 24px var(--v-s-16);
}

.start__ostatnio { margin-bottom: var(--v-s-2); }

.start__potanialy {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  min-width: 0;
}

.start__podtytul {
  margin: 0;
  font: 800 14px/1.3 var(--v-font-body);
}

.start__potanialy-rzad {
  display: flex;
  min-width: 0;
  gap: 10px; /* makieta */
  overflow-x: auto;
  scrollbar-width: none;
}

.start__potanialy-rzad::-webkit-scrollbar { display: none; }

.start__naglowek {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v-s-3);
  padding-top: 2px; /* makieta */
}

.start__tytul {
  margin: 0;
  font: 600 20px/1.2 var(--v-font-display);
  letter-spacing: -.02em;
}

.start__meta {
  font: 700 13px/1.3 var(--v-font-body);
  color: var(--v-n-600);
  text-align: right;
}

.start__meta--nowe { color: var(--v-success); }

.start__siatka {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px 12px; /* makieta */
}

.start__pelny,
.start__etykieta { grid-column: 1 / -1; }

/* Bez zainteresowań w siatce jest tylko karta „Ułóż Start pod siebie” po 6 ofertach: przy 5 kolumnach
   zostawiałaby jeden kafelek sam w rzędzie, więc kolejne kafelki dopełniają rząd przed nią.
   Tylko w tym trybie — przy sekcjach kafelki nie mogą przeskoczyć kreski „Więcej z innych działów”. */
.start__siatka--gesta { grid-auto-flow: row dense; }

.start__etykieta {
  margin: -10px 0 -4px; /* makieta: −6 px pod nagłówkiem, 14 px nad kafelkami */
  font: 700 12.5px/1.3 var(--v-font-body);
  color: var(--v-n-600);
}

.start__stopka { margin-top: var(--v-s-2); }

.start__wiecej.v-btn {
  width: 100%;
  height: 52px; /* makieta */
  border-radius: var(--v-r-card);
  font-weight: 800;
}

@media (max-width: 1100px) {
  .start__siatka { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .start__siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .start {
    padding: var(--v-s-1) 0 var(--v-s-6);
  }

  .start__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}