From 6b6bfea220c8800b4b54ef3b63b5e3ddfaa3728f Mon Sep 17 00:00:00 2001
From: olsch01 <olson2cm@icloud.com>
Date: Thu, 2 Apr 2026 07:45:49 -0400
Subject: [PATCH] Fix carousel height jumping by stacking slides with CSS grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace display:none/flex slide toggling with CSS grid stacking so all
slides always occupy the same layout cell. The container height is now
fixed at the tallest image height — no more text jumping below the
carousel as slides change. Also enables the existing opacity fade
transition which was previously blocked by display:none.

Affects: index.html, articles/why-we-built-hoa-ledgeriq.html,
         articles/hoa-financial-blind-spots.html, and all future articles.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 styles.css | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/styles.css b/styles.css
index 825aac0..9423030 100644
--- a/styles.css
+++ b/styles.css
@@ -902,13 +902,19 @@ body {
 .carousel-slides {
   position: relative;
   width: 100%;
+  display: grid; /* stack all slides — prevents height jump on slide change */
 }
 .carousel-slide {
-  display: none;
+  grid-area: 1 / 1; /* all slides share the same grid cell */
+  display: flex;
   flex-direction: column;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.4s ease;
 }
 .carousel-slide.active {
-  display: flex;
+  opacity: 1;
+  pointer-events: auto;
 }
 .carousel-slide img {
   width: 100%;
@@ -972,15 +978,6 @@ body {
   border-radius: 4px;
 }
 
-/* Fade transition */
-.carousel-slide {
-  opacity: 0;
-  transition: opacity 0.4s ease;
-}
-.carousel-slide.active {
-  opacity: 1;
-}
-
 /* ---- Request Quote pricing ---- */
 .price-amount--quote {
   font-size: 32px;