From c74f408f07809b6dff712e1f806ba386f5536757 Mon Sep 17 00:00:00 2001
From: Arne Moerman <info@arnemoerman.be>
Date: Sun, 3 May 2026 14:26:14 +0200
Subject: [PATCH] Refine team card layout and improve email wrapping

Updated team member email addresses for better line breaking. Enhanced CSS for `.frc-team-layout`, card content, and contact links to improve responsiveness, prevent overflow, and allow text wrapping. Reduced photo and heading sizes for a more compact design. Adjusted grid columns and icon behavior for improved layout consistency.
---
 .../Components/Sections/FrcTeam.razor         |  4 +--
 .../Components/Sections/FrcTeam.razor.css     | 34 +++++++++++++------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/For Real Consulting/For Real Consulting/Components/Sections/FrcTeam.razor b/For Real Consulting/For Real Consulting/Components/Sections/FrcTeam.razor
index df41906..66dcd8d 100644
--- a/For Real Consulting/For Real Consulting/Components/Sections/FrcTeam.razor	
+++ b/For Real Consulting/For Real Consulting/Components/Sections/FrcTeam.razor	
@@ -21,7 +21,7 @@
                 <p class="frc-team-role">Bestuurder &amp; Finance Expert</p>
                 <div class="frc-team-contact">
                     <a href="tel:0476171249"><i class="bi bi-telephone"></i>0476 17 12 49</a>
-                    <a href="mailto:Peter.Snijkers@forrealconsulting.be"><i class="bi bi-envelope"></i>Peter.Snijkers@forrealconsulting.be</a>
+                    <a href="mailto:Peter.Snijkers@forrealconsulting.be"><i class="bi bi-envelope"></i>Peter.Snijkers<wbr />@@forrealconsulting.be</a>
                 </div>
             </div>
         </article>
@@ -35,7 +35,7 @@
                 <p class="frc-team-role">Bestuurder &amp; Finance Expert</p>
                 <div class="frc-team-contact">
                     <a href="tel:0498169449"><i class="bi bi-telephone"></i>0498 16 94 49</a>
-                    <a href="mailto:Dylan.Tijsbaert@forrealconsulting.be"><i class="bi bi-envelope"></i>Dylan.Tijsbaert@forrealconsulting.be</a>
+                    <a href="mailto:Dylan.Tijsbaert@forrealconsulting.be"><i class="bi bi-envelope"></i>Dylan.Tijsbaert<wbr />@@forrealconsulting.be</a>
                 </div>
             </div>
         </article>
diff --git a/For Real Consulting/For Real Consulting/Components/Sections/FrcTeam.razor.css b/For Real Consulting/For Real Consulting/Components/Sections/FrcTeam.razor.css
index 829da2e..a872954 100644
--- a/For Real Consulting/For Real Consulting/Components/Sections/FrcTeam.razor.css	
+++ b/For Real Consulting/For Real Consulting/Components/Sections/FrcTeam.razor.css	
@@ -15,6 +15,11 @@
 .frc-team-layout {
     display: grid;
     gap: 2rem;
+    width: 100%;
+}
+
+.frc-team-layout > * {
+    min-width: 0;
 }
 
 .frc-team-intro-panel {
@@ -24,7 +29,7 @@
 .frc-team-intro-panel h2 {
     margin: 0;
     font-weight: 300;
-    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
+    font-size: clamp(1.1rem, 2.1vw, 1.45rem);
     line-height: 1.12;
     text-transform: uppercase;
     letter-spacing: -0.02em;
@@ -53,6 +58,7 @@
     background: rgba(24, 24, 27, 0.4);
     border: 1px solid rgba(255, 255, 255, 0.05);
     transition: border-color 0.5s ease;
+    min-width: 0;
 }
 
 .frc-team-card:hover {
@@ -61,7 +67,7 @@
 
 .frc-team-photo-wrap {
     width: 100%;
-    height: 16rem;
+    height: 12.96rem;
     overflow: hidden;
 }
 
@@ -79,14 +85,17 @@
 
 .frc-team-card-content {
     padding: 2rem;
+    min-width: 0;
+    overflow: hidden;
 }
 
 .frc-team-card h3 {
     margin: 0 0 0.25rem;
-    font-size: 1.25rem;
+    font-size: 1.1rem;
     font-weight: 300;
-    letter-spacing: 0.03em;
+    letter-spacing: 0.01em;
     color: #c5a368;
+    white-space: normal;
 }
 
 .frc-team-role {
@@ -106,9 +115,13 @@
 .frc-team-contact a {
     display: flex;
     align-items: center;
-    font-size: 0.6875rem;
+    font-size: 0.625rem;
     color: #6b7280;
     transition: color 0.2s ease;
+    min-width: 0;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
 }
 
 .frc-team-contact a:hover {
@@ -120,10 +133,11 @@
     color: #c5a368;
     opacity: 0.85;
     font-size: 0.8rem;
+    flex-shrink: 0;
 }
 
 .frc-nowrap {
-    white-space: nowrap;
+    white-space: normal;
 }
 
 @media (min-width: 640px) {
@@ -132,9 +146,9 @@
     }
 
     .frc-team-photo-wrap {
-        width: 12rem;
-        min-width: 12rem;
-        height: 16rem;
+        width: 9.72rem;
+        min-width: 9.72rem;
+        height: 12.96rem;
     }
 }
 
@@ -146,7 +160,7 @@
 
 @media (min-width: 1100px) {
     .frc-team-layout {
-        grid-template-columns: 1.55fr 1fr 1fr;
+        grid-template-columns: 0.75fr 1fr 1fr;
         gap: 2rem;
         align-items: start;
     }