Zakladki wyszukiwarki nie zaslaniaja juz korzysci w hero

Sekcja hero miala sztywna wysokosc 700 px, a naglowek skaluje sie z szerokoscia okna
(clamp do 78 px). Na monitorach od ok. 1860 px rzad korzysci schodzil nizej i wchodzil
pod panel wyszukiwarki, podciagany o stale 194 px od dolnej krawedzi hero.

Wysokosc hero wynika teraz z tresci (min-height zamiast height) plus dolny odstep
210 px = 194 px podciagniecia panelu i 16 px przeswitu. Odstep jest staly niezaleznie
od szerokosci okna; ponizej 1760 px nic sie nie zmienia.

Test mierzy nachodzenie na siedmiu szerokosciach od 1280 do 2560 px.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

frontend/src/styles.css

@@ -602,11 +602,15 @@ svg {
   position: absolute;
 }
 
+/* Wysokosc rosnie z trescia, a nie stoi na sztywno: naglowek skaluje sie z szerokoscia okna
+   (clamp do 78 px), wiec na szerokich monitorach lista korzysci schodzila nizej i wchodzila pod
+   panel wyszukiwarki, ktory jest podciagany do gory o 194 px. Dolny odstep musi byc wiekszy niz
+   to podciagniecie - roznica to odstep miedzy trescia a panelem. */
 .hero-inner {
-  height: 620px;
   margin: 0 auto;
   max-width: 1760px;
-  padding: 68px 48px 0;
+  min-height: 620px;
+  padding: 68px 48px 210px;
   position: relative;
 }
 

frontend/tests/routing.spec.ts

@@ -1013,3 +1013,35 @@ test.describe('Kalkulator zdolnosci kredytowej', () => {
     await expect(page.locator('.credit-details, .credit-detail-row, .credit-detail').first()).toContainText('próg');
   });
 });
+
+// Panel wyszukiwarki jest podciagany na zdjecie hero, a naglowek skaluje sie z szerokoscia okna.
+// Na szerokich monitorach zakladki "Kup / Wynajem" wchodzily na podpisy korzysci.
+test.describe('Strona glowna - panel wyszukiwarki', () => {
+  for (const width of [2560, 1920, 1880, 1760, 1600, 1440, 1280]) {
+    test(`zakladki nie zaslaniaja korzysci przy szerokosci ${width}`, async ({ page }) => {
+      await page.setViewportSize({ width, height: 1000 });
+      await goto(page, ROUTES.home);
+
+      const collisions = await page.evaluate(() => {
+        const box = (el: Element) => {
+          const rect = el.getBoundingClientRect();
+          return { top: rect.top + window.scrollY, bottom: rect.bottom + window.scrollY, left: rect.left, right: rect.right };
+        };
+        const panel = document.querySelector('.search-wrap');
+        if (!panel) {
+          return ['brak panelu wyszukiwarki'];
+        }
+        const search = box(panel);
+        return [...document.querySelectorAll('.benefit')]
+          .filter((item) => {
+            const rect = box(item);
+            return rect.bottom > search.top && rect.top < search.bottom
+              && rect.right > search.left && rect.left < search.right;
+          })
+          .map((item) => (item.textContent ?? '').replace(/\s+/g, ' ').trim().slice(0, 40));
+      });
+
+      expect(collisions, 'korzysci zaslaniane przez panel').toEqual([]);
+    });
+  }
+});