/**
 * Blog Styles
 *
 * Styles for blog posts, archives, and post cards
 */

/* ========================================
   POST GRID
   ======================================== */
.bp-posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--space-xl);
}

/* ========================================
   POST CARD
   ======================================== */
.bp-post-card {
	background: var(--color-white);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: all var(--transition-speed) var(--transition-easing);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.bp-post-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-hover);
}

/* Featured Image */
.bp-post-featured-image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.bp-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-speed) var(--transition-easing);
}

.bp-post-card:hover .bp-post-featured-image img {
	transform: scale(1.05);
}

/* Post Content */
.bp-post-content {
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Post Meta */
.bp-post-meta {
	font-size: var(--text-sm);
	color: var(--color-gray);
	margin-bottom: var(--space-md);
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.meta-separator {
	opacity: 0.5;
}

/* Post Title */
.bp-post-title {
	font-size: var(--text-h4);
	margin-bottom: var(--space-md);
	line-height: var(--line-height-tight);
}

.bp-post-title a {
	color: var(--color-charcoal);
	text-decoration: none;
	transition: color var(--transition-speed) var(--transition-easing);
}

.bp-post-title a:hover {
	color: var(--color-pink-primary);
}

/* Post Excerpt */
.bp-post-excerpt {
	color: var(--color-gray);
	margin-bottom: var(--space-lg);
	flex: 1;
	line-height: var(--line-height-relaxed);
}

/* Read More Link */
.bp-read-more {
	color: var(--color-teal-fresh);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	transition: all var(--transition-speed) var(--transition-easing);
	margin-top: auto;
}

.bp-read-more:hover {
	color: var(--color-pink-primary);
	gap: var(--space-sm);
}

/* ========================================
   SINGLE POST
   ======================================== */

/* Single Post Hero */
.bp-single-hero {
	position: relative;
	min-height: 400px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.bp-hero-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.bp-hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bp-hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--gradient-overlay);
	z-index: 1;
}

.bp-hero-content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: var(--space-2xl) var(--container-padding);
	color: var(--color-white);
}

.bp-hero-content .entry-title {
	color: var(--color-white);
	margin-bottom: var(--space-md);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.bp-hero-content .bp-category-badge {
	position: static;
	display: inline-block;
	margin-bottom: var(--space-md);
}

.bp-hero-content .entry-meta {
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--text-body);
}

/* Entry Header (when no featured image) */
.entry-header {
	margin-bottom: var(--space-2xl);
}

.entry-title {
	line-height: var(--line-height-tight);
}

.entry-meta {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	color: var(--color-gray);
	font-size: var(--text-sm);
	flex-wrap: wrap;
}

/* Entry Content */
.entry-content {
	margin-bottom: var(--space-2xl);
}

/* Entry Footer */
.entry-footer {
	padding-top: var(--space-xl);
	border-top: 2px solid var(--color-cream);
}

.post-tags {
	margin-bottom: var(--space-xl);
}

.post-tags strong {
	display: block;
	margin-bottom: var(--space-md);
	font-size: var(--text-body);
}

.post-tags .bp-list-inline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

/* ========================================
   RELATED POSTS
   ======================================== */
.related-posts {
	background: var(--color-cream);
}

/* ========================================
   COMMENTS SECTION
   ======================================== */
.comments-section {
	background: var(--color-white);
}

.comments-title {
	font-size: var(--text-h3);
	margin-bottom: var(--space-xl);
}

.comment-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.comment {
	margin-bottom: var(--space-xl);
	padding-bottom: var(--space-xl);
	border-bottom: 1px solid var(--color-cream);
}

.comment:last-child {
	border-bottom: none;
}

.comment-author {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin-bottom: var(--space-sm);
}

.comment-author img {
	border-radius: 50%;
}

.comment-metadata {
	font-size: var(--text-sm);
	color: var(--color-gray);
	margin-bottom: var(--space-md);
}

.comment-content {
	margin-bottom: var(--space-md);
}

.reply {
	margin-top: var(--space-md);
}

.comment-reply-link {
	color: var(--color-teal-fresh);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
}

/* ========================================
   ARCHIVE PAGES
   ======================================== */
.page-header {
	margin-bottom: var(--space-2xl);
}

.page-title {
	margin-bottom: var(--space-md);
}

.archive-description {
	color: var(--color-gray);
	font-size: var(--text-body-lg);
	max-width: 700px;
	margin: 0 auto;
}

/* Category Filters */
.category-filters {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-bottom: var(--space-xl);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 768px) {
	.bp-posts-grid {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.bp-single-hero {
		min-height: 300px;
	}

	.bp-hero-content {
		padding: var(--space-xl) var(--container-padding);
	}

	.bp-hero-content .entry-title {
		font-size: var(--text-h3);
	}

	.bp-post-title {
		font-size: var(--text-h5);
	}
}

@media (max-width: 480px) {
	.bp-post-content {
		padding: var(--space-md);
	}

	.entry-meta {
		font-size: var(--text-xs);
	}
}