From b683647ee5aa78910b216bee6a24f857968dfe39 Mon Sep 17 00:00:00 2001
From: MichalC <103170279+wSBMichalee@users.noreply.github.com>
Date: Fri, 4 Sep 2026 00:18:02 +0200
Subject: [PATCH] style(ui): fix Eligibility block unbalanced grid by using
 single column layout

---
 src/blocks/Eligibility/Component.tsx | 80 +++++++++++++---------------
 1 file changed, 38 insertions(+), 42 deletions(-)

diff --git a/src/blocks/Eligibility/Component.tsx b/src/blocks/Eligibility/Component.tsx
index 48f9dec..5e6597f 100644
--- a/src/blocks/Eligibility/Component.tsx
+++ b/src/blocks/Eligibility/Component.tsx
@@ -39,8 +39,8 @@ export const EligibilityBlock: React.FC<EligibilityProps> = ({ eyebrow, title,
           )}
         </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
-          {/* Kolumna 1: Kto się kwalifikuje */}
+        <div className="flex flex-col gap-6">
+          {/* 1: Kto się kwalifikuje */}
           <div className="bg-card border-2 border-border rounded-2xl p-6 sm:p-8 shadow-sm">
             <div className="flex items-center gap-3 mb-6 pb-4 border-b border-border">
               <div className="w-10 h-10 rounded-xl bg-accent/10 text-accent flex items-center justify-center shrink-0">
@@ -66,49 +66,45 @@ export const EligibilityBlock: React.FC<EligibilityProps> = ({ eyebrow, title,
             </ul>
           </div>
 
-          {/* Kolumna 2: Ograniczenia i Wykluczenia */}
-          <div className="flex flex-col gap-6">
-            {/* Limit przychodów */}
-            <div className="bg-card border border-border rounded-2xl p-6 sm:p-8 shadow-sm">
-              <div className="flex items-center gap-3 mb-4">
-                <div className="w-10 h-10 rounded-xl bg-amber-500/10 text-amber-500 flex items-center justify-center shrink-0">
-                  <AlertTriangle size={22} />
-                </div>
-                <h3 className="font-heading text-xl sm:text-2xl font-bold text-foreground">
-                  {limitationsTitle}
-                </h3>
+          {/* 2: Limit przychodów */}
+          <div className="bg-card border border-border rounded-2xl p-6 sm:p-8 shadow-sm">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-10 h-10 rounded-xl bg-amber-500/10 text-amber-500 flex items-center justify-center shrink-0">
+                <AlertTriangle size={22} />
               </div>
-              <p className="text-foreground/80 leading-relaxed text-sm sm:text-base">
-                {limitationsText}
-              </p>
+              <h3 className="font-heading text-xl sm:text-2xl font-bold text-foreground">
+                {limitationsTitle}
+              </h3>
+            </div>
+            <p className="text-foreground/80 leading-relaxed text-sm sm:text-base">
+              {limitationsText}
+            </p>
+          </div>
+
+          {/* 3: Wykluczenia - czerwony kolor ostrzegawczy dla bezpieczeństwa prawnego klienta */}
+          <div className="bg-red-500/5 border-2 border-red-500/30 rounded-2xl p-6 sm:p-8 shadow-sm">
+            <div className="flex items-center gap-3 mb-4 pb-3 border-b border-red-500/20">
+              <div className="w-10 h-10 rounded-xl bg-red-500/15 text-red-600 flex items-center justify-center shrink-0">
+                <XCircle size={22} />
+              </div>
+              <h3 className="font-heading text-xl sm:text-2xl font-bold text-red-950 dark:text-red-200">
+                {excludedTitle}
+              </h3>
             </div>
 
-            {/* Wykluczenia - świadomy wyjątek kolorystyczny (czerwony) dla bezpieczeństwa prawnego klienta */}
-            {/* Świadomy wyjątek: czerwony kolor ostrzegawczy dla wykluczeń prawnych (poza paletą motywu) */}
-            <div className="bg-red-500/5 border-2 border-red-500/30 rounded-2xl p-6 sm:p-8 shadow-sm">
-              <div className="flex items-center gap-3 mb-4 pb-3 border-b border-red-500/20">
-                <div className="w-10 h-10 rounded-xl bg-red-500/15 text-red-600 flex items-center justify-center shrink-0">
-                  <XCircle size={22} />
-                </div>
-                <h3 className="font-heading text-xl sm:text-2xl font-bold text-red-950 dark:text-red-200">
-                  {excludedTitle}
-                </h3>
-              </div>
-
-              <ul className="space-y-3">
-                {(excludedItems || []).map((item, idx) => (
-                  <li key={item.id || idx} className="flex items-start gap-3">
-                    <XCircle
-                      size={18}
-                      className="text-red-500 shrink-0 mt-0.5"
-                    />
-                    <span className="text-foreground/90 font-medium text-sm sm:text-base leading-relaxed">
-                      {item.text}
-                    </span>
-                  </li>
-                ))}
-              </ul>
-            </div>
+            <ul className="space-y-3">
+              {(excludedItems || []).map((item, idx) => (
+                <li key={item.id || idx} className="flex items-start gap-3">
+                  <XCircle
+                    size={18}
+                    className="text-red-500 shrink-0 mt-0.5"
+                  />
+                  <span className="text-foreground/90 font-medium text-sm sm:text-base leading-relaxed">
+                    {item.text}
+                  </span>
+                </li>
+              ))}
+            </ul>
           </div>
         </div>