From 5090c0f7437db310da72da197f4042cfd1ee1690 Mon Sep 17 00:00:00 2001
From: Jeffrey <jeffrey@Jeffreys-MacBook-Pro.local>
Date: Mon, 2 Mar 2026 10:45:08 +0100
Subject: [PATCH] fix: FAQ answer alignment + font size, ServicesGrid button

---
 src/app/(frontend)/globals.css               | 45 +++++++++++++++++---
 src/blocks/FDFaqBlock/Component.tsx          |  2 +-
 src/blocks/FDServicesGridBlock/Component.tsx | 23 +++++-----
 3 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/src/app/(frontend)/globals.css b/src/app/(frontend)/globals.css
index c14e823..4944945 100644
--- a/src/app/(frontend)/globals.css
+++ b/src/app/(frontend)/globals.css
@@ -891,11 +891,46 @@ html:not([data-theme]) {
   margin: 2.5rem 0;
 }
 
-/* Reset Payload's default padding on the richtext container
-   so it aligns with the parent block's layout.
-   Two selectors: descendant (blocks) and same-element (posts page) */
+/* ── Payload Lexical Rich Text — Global Indentation Reset ──────────────
+   Strips ALL padding/margin from the .payload-richtext wrapper AND its
+   direct children that Lexical's serialiser may inject. Uses !important
+   to override any inline styles Payload adds to the container.
+   The fd-prose-scoped selectors are kept as a fallback.
+   ─────────────────────────────────────────────────────────────────────── */
+.payload-richtext {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  padding-inline-start: 0 !important;
+  padding-inline-end: 0 !important;
+}
+
+/* First paragraph inside richtext: kill top margin so text sits flush
+   against whichever heading or label appears above */
+.payload-richtext > p:first-child,
+.payload-richtext > div:first-child > p:first-child {
+  margin-top: 0;
+}
+
+/* Lexical sometimes wraps content in an inner div — strip that too */
+.payload-richtext > div {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  padding-inline-start: 0 !important;
+}
+
+/* Ensure paragraphs inside richtext don't carry stray padding or indent */
+.payload-richtext p {
+  padding-inline-start: 0 !important;
+  text-indent: 0 !important;
+}
+
+/* Legacy scoped selectors (posts wrapped in fd-prose) */
 .fd-prose .payload-richtext,
 .fd-prose.payload-richtext {
-  padding-left: 0;
-  padding-right: 0;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
 }
diff --git a/src/blocks/FDFaqBlock/Component.tsx b/src/blocks/FDFaqBlock/Component.tsx
index 0cb0eb8..99a5d52 100644
--- a/src/blocks/FDFaqBlock/Component.tsx
+++ b/src/blocks/FDFaqBlock/Component.tsx
@@ -87,7 +87,7 @@ export const FDFaqBlockComponent: React.FC<FDFaqBlockProps> = ({
                   }`}
                 >
                   <div className="overflow-hidden">
-                    <div className={`pl-7 md:pl-9 font-joey text-fd-body fd-prose ${proseColor}`}>
+                    <div className={`font-joey text-fd-body-lg fd-prose ${proseColor}`}>
                       <RichText data={(item.answer) as any} enableGutter={false} enableProse={false} />
                     </div>
                   </div>
diff --git a/src/blocks/FDServicesGridBlock/Component.tsx b/src/blocks/FDServicesGridBlock/Component.tsx
index 9217c78..a8dab22 100644
--- a/src/blocks/FDServicesGridBlock/Component.tsx
+++ b/src/blocks/FDServicesGridBlock/Component.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import type { FDServicesGridBlock as FDServicesGridBlockProps, Media } from '@/payload-types'
 import { FDImage } from '@/components/FDImage'
+import { FDButton } from '@/components/FDButton'
 
 const columnClasses: Record<string, string> = {
   '2': 'grid-cols-1 md:grid-cols-2',
@@ -28,8 +29,8 @@ export const FDServicesGridBlockComponent: React.FC<FDServicesGridBlockProps> =
           {services?.map((service, index) => {
             const media = service.image as Media
 
-            const content = (
-              <div className="flex flex-col gap-4 md:gap-6 lg:gap-[30px]">
+            return (
+              <div key={index} className="flex flex-col gap-4 md:gap-6 lg:gap-[30px]">
                 <h3 className="font-joey-bold text-fd-navy dark:text-white text-fd-h2">
                   {service.title}
                 </h3>
@@ -47,18 +48,16 @@ export const FDServicesGridBlockComponent: React.FC<FDServicesGridBlockProps> =
                 <p className="font-joey text-fd-navy dark:text-white/80 text-fd-body px-3">
                   {service.description}
                 </p>
+
+                {service.link && (
+                  <div className="px-3 mt-auto">
+                    <FDButton href={service.link} variant="outline" className="py-2 px-5 text-fd-small">
+                      Läs mer
+                    </FDButton>
+                  </div>
+                )}
               </div>
             )
-
-            if (service.link) {
-              return (
-                <a key={index} href={service.link} className="group hover:opacity-90 transition-opacity">
-                  {content}
-                </a>
-              )
-            }
-
-            return <div key={index}>{content}</div>
           })}
         </div>
       </div>