From 9f5cc92ec643ec25385f4ca39e48bcef427dd1cb Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Mon, 1 Dec 2025 12:19:23 -0600
Subject: [PATCH] fix: Add critical CSS for featured-image and post-content to
 prevent CLS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- .featured-image-container: aspect-ratio 16/9 reserves space before image loads
- .post-content: min-height prevents layout shift
- Targets PageSpeed CLS issues: main-content 0.121, container 0.099

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 Assets/Css/critical-bootstrap.css | 38 +++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/Assets/Css/critical-bootstrap.css b/Assets/Css/critical-bootstrap.css
index 48905be8..4b1cdbb1 100644
--- a/Assets/Css/critical-bootstrap.css
+++ b/Assets/Css/critical-bootstrap.css
@@ -1066,3 +1066,41 @@ article ins.adsbygoogle {
         min-height: 100px;
     }
 }
+
+/* ==========================================================================
+   CLS PREVENTION - Featured Image
+   PageSpeed Issue: main-content y container CLS 0.121 + 0.099
+   Solución: Reservar espacio para imagen con aspect-ratio
+   ========================================================================== */
+.featured-image-container {
+    aspect-ratio: 16 / 9;
+    position: relative;
+    background-color: #f0f0f0;
+    border-radius: 12px;
+    overflow: hidden;
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+}
+.featured-image-container img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+/* ==========================================================================
+   CLS PREVENTION - Post Content
+   PageSpeed Issue: article.post-content CLS 0.028
+   Solución: min-height para contenido principal
+   ========================================================================== */
+.post-content {
+    min-height: 300px;
+}
+@media (max-width: 767.98px) {
+    .post-content {
+        min-height: 200px;
+    }
+}