From d127309a1306bdba28911486fb2edcc4c27f0231 Mon Sep 17 00:00:00 2001
From: Jeffrey Hales <committable@bluechip.icu>
Date: Wed, 19 Aug 2026 18:12:18 +0000
Subject: [PATCH] fix(insurance): unify carrier logo rows

---
 www/reports/migration-summary.md             |   8 ++
 www/src/components/InsuranceLogoRow.astro    | 119 +++++++++++++++++++
 www/src/components/home/HomeInsurance.astro  |  47 +-------
 www/src/components/pages/InsurancePage.astro |  77 +++---------
 4 files changed, 149 insertions(+), 102 deletions(-)
 create mode 100644 www/src/components/InsuranceLogoRow.astro

diff --git a/www/reports/migration-summary.md b/www/reports/migration-summary.md
index ae2398f..c21a5a8 100644
--- a/www/reports/migration-summary.md
+++ b/www/reports/migration-summary.md
@@ -58,6 +58,14 @@ Implemented fidelity work includes:
 - Corrected material live-source discrepancies found during the pass,
   including current homepage ESA copy, testimonial content, and ABA copy.
 
+### Intentional visual deviations
+
+- The homepage and `/insurance` carrier-logo rows intentionally share one
+  responsive layout. The first and last logos sit flush with the row edges,
+  and the Blue Cross Blue Shield mark is emphasized at 125% of the standard
+  desktop logo width, following its treatment on the live homepage rather
+  than preserving the live pages' differing row spacing.
+
 ## URLs and Redirects
 
 Clean public URLs are preserved, including:
diff --git a/www/src/components/InsuranceLogoRow.astro b/www/src/components/InsuranceLogoRow.astro
new file mode 100644
index 0000000..b02dcbf
--- /dev/null
+++ b/www/src/components/InsuranceLogoRow.astro
@@ -0,0 +1,119 @@
+---
+interface InsuranceLogo {
+  file: string;
+  alt: string;
+}
+
+interface Props {
+  logos: InsuranceLogo[];
+}
+
+const { logos } = Astro.props;
+const dimensions: Record<string, { width: number; height: number }> = {
+  'bluecrossblueshield-logo-1.webp': { width: 200, height: 120 },
+  'aetna.png': { width: 300, height: 169 },
+  'logo-optum.webp': { width: 200, height: 120 },
+  'logo-tricare-1.webp': { width: 200, height: 120 },
+  'logo-ahcccs.webp': { width: 200, height: 120 },
+  'united-healthcare-logo-1.webp': { width: 200, height: 120 }
+};
+---
+
+<ul class="insurance-logo-row" aria-label="Accepted insurance carriers">
+  {logos.map(({ file, alt }) => {
+    const size = dimensions[file] || { width: 200, height: 120 };
+    return (
+      <li>
+        <img
+          src={`/assets/images/${file}`}
+          alt={alt}
+          width={size.width}
+          height={size.height}
+          loading="lazy"
+        />
+      </li>
+    );
+  })}
+</ul>
+
+<style>
+  .insurance-logo-row {
+    align-items: center;
+    display: grid;
+    gap: 5px;
+    grid-template-columns: 1fr;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .insurance-logo-row li {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-width: 0;
+  }
+
+  .insurance-logo-row img {
+    display: block;
+    height: auto;
+    max-width: 100%;
+    width: 200px;
+  }
+
+  .insurance-logo-row li:first-child img {
+    width: 250px;
+  }
+
+  .insurance-logo-row li:nth-child(2) img {
+    width: 300px;
+  }
+
+  @media (min-width: 640px) and (max-width: 1023px) {
+    .insurance-logo-row {
+      gap: 2rem;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .insurance-logo-row li:nth-child(3n + 1) {
+      justify-content: flex-start;
+    }
+
+    .insurance-logo-row li:nth-child(3n) {
+      justify-content: flex-end;
+    }
+
+    .insurance-logo-row img,
+    .insurance-logo-row li:nth-child(2) img {
+      width: 120px;
+    }
+
+    .insurance-logo-row li:first-child img {
+      width: 150px;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .insurance-logo-row {
+      gap: 2rem;
+      grid-template-columns: minmax(0, 1.25fr) repeat(5, minmax(0, 1fr));
+    }
+
+    .insurance-logo-row li:first-child {
+      justify-content: flex-start;
+    }
+
+    .insurance-logo-row li:last-child {
+      justify-content: flex-end;
+    }
+
+    .insurance-logo-row img,
+    .insurance-logo-row li:nth-child(2) img {
+      width: 107px;
+    }
+
+    .insurance-logo-row li:first-child img {
+      width: 134px;
+    }
+  }
+</style>
diff --git a/www/src/components/home/HomeInsurance.astro b/www/src/components/home/HomeInsurance.astro
index 1cde0b0..a1278a7 100644
--- a/www/src/components/home/HomeInsurance.astro
+++ b/www/src/components/home/HomeInsurance.astro
@@ -1,60 +1,21 @@
 ---
+import InsuranceLogoRow from '../InsuranceLogoRow.astro';
 import type { InsuranceSection } from '../../types/home-sections';
 interface Props { section: InsuranceSection }
 const { section } = Astro.props;
 ---
 <style>
-  .insurance-section .logo-row {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+  .insurance-logo-row-wrap {
     margin-top: 2rem;
   }
-
-  .insurance-section .logo-row img {
-    flex: 0 1 auto;
-    max-width: 200px;
-  }
-
-  @media (min-width: 640px) {
-    .insurance-section .logo-row {
-      display: grid;
-      gap: var(--space-lg);
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      align-items: center;
-      justify-items: center;
-    }
-
-    .insurance-section .logo-row img {
-      flex: 0 1 auto;
-      max-width: 25vw;
-    }
-  }
-
-  @media (min-width: 1024px) {
-    .insurance-section .logo-row {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: nowrap;
-    }
-
-    .insurance-section .logo-row img {
-      flex-basis: 0;
-      flex-grow: 1;
-      max-width: 120px;
-    }
-  }
 </style>
 
 <section class="section insurance-section">
   <div class="container">
     <h2>{section.heading}</h2>
     <p>{section.body}</p>
-    <div class="logo-row">
-      {section.logos.map(({ file, alt }) => (
-        <img src={`/assets/images/${file}`} alt={alt} />
-      ))}
+    <div class="insurance-logo-row-wrap">
+      <InsuranceLogoRow logos={section.logos} />
     </div>
   </div>
 </section>
diff --git a/www/src/components/pages/InsurancePage.astro b/www/src/components/pages/InsurancePage.astro
index d09e8ad..749d6ee 100644
--- a/www/src/components/pages/InsurancePage.astro
+++ b/www/src/components/pages/InsurancePage.astro
@@ -1,42 +1,31 @@
 ---
 import FAQAccordion from '../FAQAccordion.astro';
+import InsuranceLogoRow from '../InsuranceLogoRow.astro';
 
 const logos = [
   {
-    src: '/assets/images/bluecrossblueshield-logo-1.webp',
-    alt: 'bluecross blueshield logo',
-    width: 200,
-    height: 120
+    file: 'bluecrossblueshield-logo-1.webp',
+    alt: 'bluecross blueshield logo'
   },
   {
-    src: '/assets/images/aetna.png',
-    alt: 'aetna logo',
-    width: 300,
-    height: 169
+    file: 'aetna.png',
+    alt: 'aetna logo'
   },
   {
-    src: '/assets/images/logo-optum.webp',
-    alt: 'optum logo',
-    width: 200,
-    height: 120
+    file: 'logo-optum.webp',
+    alt: 'optum logo'
   },
   {
-    src: '/assets/images/logo-tricare-1.webp',
-    alt: 'tricare logo',
-    width: 200,
-    height: 120
+    file: 'logo-tricare-1.webp',
+    alt: 'tricare logo'
   },
   {
-    src: '/assets/images/logo-ahcccs.webp',
-    alt: 'ahcccs logo',
-    width: 200,
-    height: 120
+    file: 'logo-ahcccs.webp',
+    alt: 'ahcccs logo'
   },
   {
-    src: '/assets/images/united-healthcare-logo-1.webp',
-    alt: 'united healthcare logo',
-    width: 200,
-    height: 120
+    file: 'united-healthcare-logo-1.webp',
+    alt: 'united healthcare logo'
   }
 ];
 
@@ -67,13 +56,9 @@ const faqItems = [
       <h2 id="accepted-insurance-heading">Accepted Insurance Carriers</h2>
       <p>We proudly partner with most major insurance carriers providing autism treatment benefits in Arizona. Our team regularly works with insurance plans such as the following.</p>
 
-      <ul class="insurance-logos" aria-label="Accepted insurance carriers">
-        {logos.map((logo) => (
-          <li>
-            <img src={logo.src} alt={logo.alt} width={logo.width} height={logo.height} loading="lazy" />
-          </li>
-        ))}
-      </ul>
+      <div class="insurance-logo-row-wrap">
+        <InsuranceLogoRow logos={logos} />
+      </div>
 
       <p>Our team continually strives to expand this list, increasing access to affordable Applied Behavior Analysis (ABA) therapy coverage. If you do not see your insurance provider listed here, please contact our office. Our staff is always happy to help determine your specific coverage and options.</p>
     </div>
@@ -129,28 +114,8 @@ const faqItems = [
     margin-bottom: 20px;
   }
 
-  .insurance-logos {
-    align-items: center;
-    display: grid;
-    gap: 2rem;
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-    list-style: none;
+  .insurance-logo-row-wrap {
     margin: 30px 0;
-    padding: 0;
-  }
-
-  .insurance-logos li {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    min-width: 0;
-  }
-
-  .insurance-logos img {
-    display: block;
-    height: auto;
-    max-width: 100%;
-    width: 106px;
   }
 
   @media (max-width: 767px) {
@@ -171,15 +136,9 @@ const faqItems = [
       line-height: 1.25;
     }
 
-    .insurance-logos {
-      gap: 5px;
-      grid-template-columns: 1fr;
+    .insurance-logo-row-wrap {
       margin-block: 20px;
     }
-
-    .insurance-logos img {
-      width: auto;
-    }
   }
 
   @media (min-width: 992px) {