From a2cf9791ae24edf492eb94713de9dbb327da44a2 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Sat, 28 Feb 2026 10:53:00 +0100
Subject: [PATCH] fix: optimize footer layout for mobile

- Switch to grid-cols-2 on mobile (was grid-cols-1)
- Brand column: col-span-2 (full width on mobile)
- Legal + Company columns: col-span-1 each (side-by-side on mobile)
- Recent Posts column: col-span-2 (full width on mobile)
- Reduce footer padding: py-14 md:py-24 (was py-24)
- Tighten grid gap: gap-10 md:gap-16 (was gap-16)
- Bottom bar: flex-row always so copyright + language on one line
---
 components/Footer.tsx | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/components/Footer.tsx b/components/Footer.tsx
index cbb24205..53bf0c67 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -15,14 +15,14 @@ export default function Footer() {
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="bg-primary text-white py-24 relative overflow-hidden content-visibility-auto">
+    <footer className="bg-primary text-white py-14 md:py-24 relative overflow-hidden content-visibility-auto">
       <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
 
       <Container>
         <h2 className="sr-only">Footer Navigation</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-16 mb-20">
-          {/* Brand Column */}
-          <div className="lg:col-span-4 space-y-8">
+        <div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-12 gap-10 md:gap-16 mb-12 md:mb-20">
+          {/* Brand Column – full width on mobile */}
+          <div className="col-span-2 md:col-span-2 lg:col-span-4 space-y-6 md:space-y-8">
             <Link
               href={`/${locale}`}
               className="inline-block group"
@@ -67,9 +67,9 @@ export default function Footer() {
             </div>
           </div>
 
-          {/* Links Columns */}
-          <div className="lg:col-span-2">
-            <h3 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
+          {/* Legal Column */}
+          <div className="col-span-1 lg:col-span-2">
+            <h3 className="text-accent font-bold uppercase tracking-widest text-xs mb-5 md:mb-8">
               {t('legal')}
             </h3>
             <ul className="space-y-4 text-white/70 list-none m-0 p-0">
@@ -121,8 +121,9 @@ export default function Footer() {
             </ul>
           </div>
 
-          <div className="lg:col-span-2">
-            <h3 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
+          {/* Company Column */}
+          <div className="col-span-1 lg:col-span-2">
+            <h3 className="text-accent font-bold uppercase tracking-widest text-xs mb-5 md:mb-8">
               {t('company')}
             </h3>
             <ul className="space-y-4 text-white/70 list-none m-0 p-0">
@@ -189,9 +190,9 @@ export default function Footer() {
             </ul>
           </div>
 
-          {/* Recent Posts Column */}
-          <div className="lg:col-span-4">
-            <h3 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
+          {/* Recent Posts Column – full width on mobile */}
+          <div className="col-span-2 md:col-span-2 lg:col-span-4">
+            <h3 className="text-accent font-bold uppercase tracking-widest text-xs mb-5 md:mb-8">
               {t('recentPosts')}
             </h3>
             <ul className="space-y-6 list-none m-0 p-0">
@@ -242,7 +243,7 @@ export default function Footer() {
           </div>
         </div>
 
-        <div className="pt-12 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-8 text-white/70 text-xs md:text-sm font-medium">
+        <div className="pt-8 md:pt-12 border-t border-white/10 flex flex-row justify-between items-center gap-4 text-white/70 text-xs md:text-sm font-medium">
           <p>{t('copyright', { year: currentYear })}</p>
           <div className="flex gap-8">
             <Link