From 3a814fdf138602e0ec37f82acd36878695ae0883 Mon Sep 17 00:00:00 2001
From: vickydotbat <vickydotbat@tutamail.com>
Date: Thu, 23 Jul 2026 23:26:47 +0200
Subject: [PATCH] Blurfill banner styles; keep news heroes full-width under 8:5
 card crop

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 scss/westgate/_pages.scss | 95 +++++++++++++--------------------------
 1 file changed, 31 insertions(+), 64 deletions(-)

diff --git a/scss/westgate/_pages.scss b/scss/westgate/_pages.scss
index 44f20bb..803519c 100644
--- a/scss/westgate/_pages.scss
+++ b/scss/westgate/_pages.scss
@@ -228,6 +228,9 @@ a.sow-card:hover {
 
 .sow-featured {
 	> .sow-banner {
+		// Fixed height + explicit width so the 8/5 card aspect-ratio
+		// doesn't shrink the hero to height * 1.6.
+		width: 100%;
 		height: 320px;
 	}
 }
@@ -605,15 +608,37 @@ a.sow-card:hover {
 	@include wg-velvet-cover;
 }
 
-// Article page: the banner renders as a small card-sized thumb beside the
-// header, so mediocre source images never get stretched full-width.
-.sow-article-thumb {
-	width: 100%;
+// Article page: full-width banner strip that stays quality-proof — the
+// backdrop is the image blurred, with the sharp 8/5 card crop seated in
+// the middle, so weak source images never render stretched.
+.sow-article-banner {
+	position: relative;
+	height: clamp(220px, 28vw, 300px);
+	overflow: hidden;
+	border: 1px solid var(--wg-border);
+	border-radius: 8px;
+}
+
+.sow-article-banner-blur {
+	position: absolute;
+	inset: -32px; // hide the blur's soft edges outside the strip
+	background-size: cover;
+	background-position: center;
+	filter: blur(24px) brightness(0.55);
+}
+
+.sow-article-banner-img {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	width: min(320px, 70%);
 	aspect-ratio: 8 / 5; // same crop as the blog-card banners
 	background-size: cover;
 	background-position: center;
-	border: 1px solid var(--wg-border);
-	border-radius: 8px;
+	border: 1px solid var(--wg-gold-soft);
+	border-radius: 6px;
+	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
 }
 
 .sow-article {
@@ -622,66 +647,8 @@ a.sow-card:hover {
 	header h1 {
 		margin: 0 0 6px;
 	}
-
-	// Thumb left with the byline tucked under it; on the right the chip row
-	// pins to the image's top edge while the title centers on the image.
-	header.has-thumb {
-		display: grid;
-		grid-template-columns: minmax(240px, 320px) 1fr;
-		column-gap: var(--wg-space-md);
-		margin-bottom: var(--wg-space-sm);
-
-		.sow-article-thumb {
-			grid-column: 1;
-			grid-row: 1;
-		}
-
-		.sow-article-headline {
-			grid-column: 2;
-			grid-row: 1;
-			position: relative;
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			align-items: flex-start;
-			// Reserve the chip row so the centered title never crowds it.
-			padding-top: 40px;
-
-			.sow-meta {
-				position: absolute;
-				top: 0;
-				margin: 0;
-			}
-
-			h1 {
-				margin: 0;
-			}
-
-			.sow-byline {
-				margin-top: var(--wg-space-sm);
-			}
-		}
-	}
 }
 
-@media (max-width: 700px) {
-	.sow-article header.has-thumb {
-		display: block;
-
-		.sow-article-thumb {
-			margin-bottom: var(--wg-space-sm);
-		}
-
-		.sow-article-headline {
-			display: block;
-
-			.sow-meta {
-				position: static;
-				margin-bottom: 12px;
-			}
-		}
-	}
-}
 
 .sow-article-date {
 	font-family: var(--wg-font-code);