feat: overlay title and metadata on hero images

- Position title and metadata absolutely over hero images
- Add gradient background for text readability (dark at bottom)
- Use backdrop-filter blur for metadata badges
- White text with shadow for better contrast
- Maintain original layout when no image present
- Creates more immersive reading experience

src/components/ReaderHeader.tsx

@@ -17,13 +17,35 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
   hasHighlights,
   highlightCount
 }) => {
+  if (image) {
+    return (
+      <div className="reader-hero-image">
+        <img src={image} alt={title || 'Article image'} />
+        {title && (
+          <div className="reader-header-overlay">
+            <h2 className="reader-title">{title}</h2>
+            <div className="reader-meta">
+              {readingTimeText && (
+                <div className="reading-time">
+                  <FontAwesomeIcon icon={faClock} />
+                  <span>{readingTimeText}</span>
+                </div>
+              )}
+              {hasHighlights && (
+                <div className="highlight-indicator">
+                  <FontAwesomeIcon icon={faHighlighter} />
+                  <span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  }
+
   return (
     <>
-      {image && (
-        <div className="reader-hero-image">
-          <img src={image} alt={title || 'Article image'} />
-        </div>
-      )}
       {title && (
         <div className="reader-header">
           <h2 className="reader-title">{title}</h2>