Enhance post cards with date, reading time, and comment count metadata

front-page.php

@@ -32,15 +32,26 @@ $hero_bg = get_theme_mod( 'hero_background_image', get_template_directory_uri()
 					<article id="post-<?php the_ID(); ?>" <?php post_class( 'insight-card' ); ?>>
 						<?php if ( has_post_thumbnail() ) : ?>
 							<div class="post-thumbnail">
+								<a href="<?php the_permalink(); ?>">
 									<?php the_post_thumbnail( 'large' ); ?>
+								</a>
 							</div>
 						<?php endif; ?>
 						
 						<header class="entry-header">
 							<div class="entry-meta">
-								<?php echo get_the_category_list( ', ' ); ?>
+								<span class="cat-links"><?php echo get_the_category_list( ', ' ); ?></span>
 							</div>
+							
 							<?php the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' ); ?>
+							
+							<div class="post-card-info">
+								<span class="post-date"><?php echo get_the_date(); ?></span>
+								<span class="dot-separator">•</span>
+								<span class="reading-time"><?php echo wisdom1_reading_time(); ?></span>
+								<span class="dot-separator">•</span>
+								<span class="comments-count"><?php comments_number( '0 comments', '1 comment', '% comments' ); ?></span>
+							</div>
 						</header>
 
 						<div class="entry-summary">

functions.php

@@ -39,6 +39,17 @@ function wisdom1_scripts() {
 }
 add_action( 'wp_enqueue_scripts', 'wisdom1_scripts' );
 
+/**
+ * Calculate estimated reading time.
+ */
+function wisdom1_reading_time() {
+	$content = get_post_field( 'post_content', get_the_ID() );
+	$word_count = str_word_count( strip_tags( $content ) );
+	$reading_time = ceil( $word_count / 200 ); // Average 200 words per minute
+
+	return $reading_time . ' min read';
+}
+
 /**
  * Customizer additions.
  */

style.css

@@ -240,6 +240,23 @@ img {
 	color: var(--wp--preset--color--hover);
 }
 
+.post-card-info {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 11px;
+	color: var(--wp--preset--color--primary);
+	opacity: 0.6;
+	margin-top: 10px;
+	text-transform: uppercase;
+	font-weight: 700;
+	letter-spacing: 0.05em;
+}
+
+.dot-separator {
+	color: var(--wp--preset--color--accent);
+}
+
 .entry-meta {
 	font-size: 12px;
 	text-transform: uppercase;