/**
 * blog-card.css — shared post card component.
 * Used by home.php (blog index) and archive.php (category/tag/date/author
 * archives). Loaded after global.css; same spirit as product-card.css but
 * for posts, not products (no price/add-to-cart).
 */

.blog-hero {
	padding: 4.5rem 0 2rem;
	max-width: 760px;
}

.blog-hero h1 {
	font-size: clamp(2.6rem, 6vw, 4.2rem);
	margin: 1.2rem 0 1rem;
}

.blog-hero p {
	color: var(--muted);
	max-width: 58ch;
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.8rem;
}

.blog-card {
	overflow: hidden;
	transition: .55s cubic-bezier(.2, .8, .25, 1);
}

.blog-card:hover {
	transform: translateY(-8px);
	border-color: rgba(212, 175, 55, .5);
}

.blog-card__media {
	position: relative;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	background: #000;
}

.blog-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: 1.2s cubic-bezier(.2, .8, .25, 1);
}

.blog-card:hover .blog-card__media img {
	transform: scale(1.07);
}

.blog-card__body {
	padding: 1.6rem 1.7rem 1.9rem;
}

.blog-card__meta {
	font-size: .68rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: .7rem;
}

.blog-card__body h2 {
	font-size: 1.35rem;
	line-height: 1.25;
	margin-bottom: .6rem;
}

.blog-card__body h2 a:hover {
	color: var(--gold-lt);
}

.blog-card__excerpt {
	color: var(--muted);
	font-size: .9rem;
	line-height: 1.6;
}

.blog-card__link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1.2rem;
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gold);
}

.blog-card__link:hover {
	color: var(--gold-lt);
}

.blog-pagination {
	display: flex;
	justify-content: center;
	gap: .6rem;
	margin-top: 3.4rem;
}

.blog-pagination a,
.blog-pagination span {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 .6rem;
	border: 1px solid var(--line);
	border-radius: 12px;
	font-size: .8rem;
	color: var(--muted);
}

.blog-pagination a:hover {
	border-color: var(--gold);
	color: var(--gold-lt);
}

.blog-pagination .current {
	border-color: var(--gold);
	color: var(--gold-lt);
	background: rgba(212, 175, 55, .08);
}

.blog-empty {
	color: var(--muted);
	font-size: .95rem;
}