Redesign news article cards with clean image-first layout and proper spacing

src/app/news/page.tsx

@@ -44,19 +44,14 @@ export default async function NewsPage() {
                 key={a.slug}
                 href={`/news/${a.slug}`}
                 className="card hover"
-                style={{ display: "flex", flexDirection: "column", textDecoration: "none" }}
-              >
-                <div
                 style={{
-                    background: "linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-navbar)), color-mix(in srgb, var(--color-primary) 5%, var(--color-navbar)))",
+                  display: "flex",
-                    borderBottom: "1px solid color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+                  flexDirection: "column",
-                    padding: "0.6rem 0.75rem",
+                  textDecoration: "none",
-                    fontSize: "0.78rem",
+                  padding: 0,
-                    color: "var(--color-text-muted)",
+                  overflow: "hidden",
                 }}
               >
-                  📰 {t("title")} &middot; {formatDate(a.createdAt)}
-                </div>
                 {a.image ? (
                   <img
                     src={a.image}
@@ -65,14 +60,19 @@ export default async function NewsPage() {
                   />
                 ) : (
                   <div
-                    style={{ width: "100%", aspectRatio: "16/9", backgroundColor: "var(--color-navbar)" }}
+                    style={{ width: "100%", aspectRatio: "16/9", backgroundColor: "color-mix(in srgb, var(--color-primary) 10%, var(--color-navbar))" }}
                   />
                 )}
-                <div style={{ padding: "0.75rem" }}>
+                <div style={{ padding: "1rem 1.1rem", flex: 1, display: "flex", flexDirection: "column" }}>
-                  <h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem", color: "var(--color-text)" }}>
+                  <h3 style={{ margin: 0, fontSize: "1.05rem", color: "var(--color-text)", lineHeight: 1.4 }}>
                     {a.title}
                   </h3>
-                  <p style={{ margin: 0, color: "var(--color-text)" }}>{excerpt(a.shortStory, 200)}</p>
+                  <p className="muted" style={{ margin: "0.35rem 0 0.6rem", fontSize: "0.78rem" }}>
+                    {formatDate(a.createdAt)}
+                  </p>
+                  <p style={{ margin: 0, color: "var(--color-text)", fontSize: "0.88rem", lineHeight: 1.55 }}>
+                    {excerpt(a.shortStory, 150)}
+                  </p>
                 </div>
               </Link>
             ))}