fix(insurance): unify carrier logo rows

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:

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>

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 {
+  .insurance-logo-row-wrap {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
     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">
+    <div class="insurance-logo-row-wrap">
-      {section.logos.map(({ file, alt }) => (
+      <InsuranceLogoRow logos={section.logos} />
-        <img src={`/assets/images/${file}`} alt={alt} />
-      ))}
     </div>
   </div>
 </section>

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',
+    file: 'bluecrossblueshield-logo-1.webp',
-    alt: 'bluecross blueshield logo',
+    alt: 'bluecross blueshield logo'
-    width: 200,
-    height: 120
   },
   {
-    src: '/assets/images/aetna.png',
+    file: 'aetna.png',
-    alt: 'aetna logo',
+    alt: 'aetna logo'
-    width: 300,
-    height: 169
   },
   {
-    src: '/assets/images/logo-optum.webp',
+    file: 'logo-optum.webp',
-    alt: 'optum logo',
+    alt: 'optum logo'
-    width: 200,
-    height: 120
   },
   {
-    src: '/assets/images/logo-tricare-1.webp',
+    file: 'logo-tricare-1.webp',
-    alt: 'tricare logo',
+    alt: 'tricare logo'
-    width: 200,
-    height: 120
   },
   {
-    src: '/assets/images/logo-ahcccs.webp',
+    file: 'logo-ahcccs.webp',
-    alt: 'ahcccs logo',
+    alt: 'ahcccs logo'
-    width: 200,
-    height: 120
   },
   {
-    src: '/assets/images/united-healthcare-logo-1.webp',
+    file: 'united-healthcare-logo-1.webp',
-    alt: 'united healthcare logo',
+    alt: 'united healthcare logo'
-    width: 200,
-    height: 120
   }
 ];
 
@@ -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">
+      <div class="insurance-logo-row-wrap">
-        {logos.map((logo) => (
+        <InsuranceLogoRow logos={logos} />
-          <li>
+      </div>
-            <img src={logo.src} alt={logo.alt} width={logo.width} height={logo.height} loading="lazy" />
-          </li>
-        ))}
-      </ul>
 
       <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 {
+  .insurance-logo-row-wrap {
-    align-items: center;
-    display: grid;
-    gap: 2rem;
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-    list-style: none;
     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 {
+    .insurance-logo-row-wrap {
-      gap: 5px;
-      grid-template-columns: 1fr;
       margin-block: 20px;
     }
-
-    .insurance-logos img {
-      width: auto;
-    }
   }
 
   @media (min-width: 992px) {