/*
Blog grid + card, shared by the homepage's "latest articles" section,
home.php (the designated posts page), and archive.php (category/tag/date/
author archives).
*/

.blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	padding-block: var(--space-2) var(--space-8);
}

@media (min-width: 640px) {
	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.blog-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Homepage magazine section shows 4 cards in a row instead of 3. */
@media (min-width: 1024px) {
	.blog-grid--home {
		grid-template-columns: repeat(4, 1fr);
	}
}

.blog-card {
	position: relative;
	background: var(--color-bg);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.blog-card:hover {
	box-shadow: var(--shadow-sm);
	border-color: color-mix(in srgb, var(--color-border) 40%, var(--color-ink));
}

.blog-card__media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--color-surface);
}

.blog-card__media img {
	width: 100%;
	height: 100%; 
	object-fit: cover;
	transition: transform var(--transition-fast);
}

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

.blog-card__badge {
	position: absolute;
	inset-block-start: var(--space-3);
	inset-inline-end: var(--space-3);
	background: var(--color-primary);
	color: #fff;
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	padding-inline: var(--space-3);
	padding-block: var(--space-1);
	border-radius: var(--radius-full);
	white-space: nowrap;
}

.blog-card__title {
	font-size: var(--text-lg);
	font-weight: var(--font-semibold);
	line-height: 1.4;
	margin-block-end: var(--space-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-card__title-link::after {
	content: '';
	position: absolute;
	inset: 0;
}

.blog-card__title-link:hover {
	color: var(--color-primary);
}

.blog-card__excerpt {
	color: var(--color-muted);
	font-size: var(--text-sm);
	margin-block-end: var(--space-3);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 640px) {
	h3.blog-card__title {
		font-size: var(--text-md);
	}

	.blog-card__excerpt {
		font-size: var(--text-xs);
	}
}

.blog-card__footer {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-xs);
	color: var(--color-muted);
}

.blog-card__footer .icon {
	width: 1em;
	height: 1em;
}

/* Separator between reading time and category name in the footer --
   shared by the regular card and the "rest of posts" list-row card. */
.blog-card__footer-sep {
	color: var(--color-border);
}

/* Magazine homepage (home.php) ------------------------------------------------- */

.blog-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.blog-header .page-header {
	padding-block: 0;
}

.blog-stats {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding-block-end: var(--space-4);
	color: var(--color-muted);
	font-size: var(--text-sm);
}

.blog-stats__item {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.blog-stats__item .icon {
	width: 1em;
	height: 1em;
}

.blog-section-heading {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-xl);
	margin-block-end: var(--space-5);
}

.blog-section-heading .icon {
	color: var(--color-primary);
}

.blog-magazine__hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	padding-block: var(--space-2) var(--space-8);
}

@media (min-width: 1024px) {
	.blog-magazine__hero-grid {
		/* Fixed to match the sidebar column below (.blog-magazine__aside),
		   not proportional -- both read as "the sidebar", same width. */
		grid-template-columns: 1fr 320px;
		align-items: stretch;
	}
}

/* Featured card: title/excerpt sit on the image itself, under a dark
   gradient, rather than in a body block below it (see card-featured.php). */
.blog-card--featured .blog-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
}

.blog-card__overlay-body {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: var(--space-6) var(--space-5) var(--space-5);
	background: linear-gradient(0deg, rgb(0 0 0 / 85%), rgb(0 0 0 / 0%) 80%);
}

.blog-card--featured .blog-card__title {
	color: #fff;
	font-size: var(--text-2xl);
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.blog-card--featured .blog-card__excerpt {
	color: rgb(255 255 255 / 80%);
	font-size: var(--text-base);
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.blog-card--featured .blog-card__footer {
	color: rgb(255 255 255 / 70%);
}

/* Special-feel gradient band for the on-sale product carousel. Light text
   throughout since it sits on a dark-ish gradient, not the usual surface. */
.blog-magazine__hero-aside {
	background: linear-gradient(135deg, #2c00ca, #2d005b);
	border-radius: var(--radius-md);
	padding: var(--space-5);
}

.blog-magazine__hero-aside .spotlight-carousel__heading {
	color: #fff;
}

/* Product card text is unstyled/inherited by default (no card background
   of its own -- see product-card.css) so it reads as dark-on-white
   normally; needs to flip light for this gradient background specifically. */
.blog-magazine__hero-aside .product-card__title,
.blog-magazine__hero-aside .product-card__price,
.blog-magazine__hero-aside .product-card__price-sale {
	color: #fff;
}

.blog-magazine__hero-aside .product-card__price-label,
.blog-magazine__hero-aside .product-card__price-regular {
	color: rgb(255 255 255 / 70%);
}

.blog-magazine__hero-aside .product-card__price-regular {
	text-decoration-color: rgb(255 255 255 / 40%);
}

.blog-magazine__split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	padding-block-end: var(--space-8);
}

@media (min-width: 1024px) {
	.blog-magazine__split {
		grid-template-columns: 1fr 320px;
		align-items: start;
	}
}

/* Simple list -- each row is one post, image beside title/excerpt/meta,
   instead of the stacked grid card. */
.blog-list {
	display: flex;
	flex-direction: column;
}

.blog-list-item {
	display: flex;
	gap: var(--space-4);
	padding-block: var(--space-5);
	border-bottom: 1px solid var(--color-border);
}

.blog-list-item:first-child {
	padding-block-start: 0;
}

.blog-list-item:last-child {
	padding-block-end: 0;
	border-bottom: none;
}

.blog-list-item__media {
	display: block;
	flex-shrink: 0;
	width: 160px;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-surface);
}

.blog-list-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-fast);
}

.blog-list-item:hover .blog-list-item__media img {
	transform: scale(1.04);
}

.blog-list-item__body {
	position: relative;
	flex: 1;
	min-width: 0;
}

.blog-list-item__title {
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	line-height: 1.4;
	margin-block-end: var(--space-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-list-item__title-link::after {
	content: '';
	position: absolute;
	inset: 0;
}

.blog-list-item__title-link:hover {
	color: var(--color-primary);
}

.blog-list-item__excerpt {
	color: var(--color-muted);
	font-size: var(--text-sm);
	margin-block-end: var(--space-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-list-item__footer {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-xs);
	color: var(--color-muted);
}

.blog-list-item__footer .icon {
	width: 1em;
	height: 1em;
}

@media (max-width: 480px) {
	.blog-list-item {
		flex-direction: column;
	}

	.blog-list-item__media {
		width: 100%;
		aspect-ratio: 16 / 9;
	}
}

.blog-magazine__aside {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: var(--space-5);
}

/* Recent comments -- under the newest-products carousel in the sidebar. */

.blog-recent-comments {
	margin-block-start: var(--space-6);
	padding-block-start: var(--space-6);
	border-block-start: 1px solid var(--color-border);
}

.blog-recent-comments__heading {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	margin-block-end: var(--space-4);
}

.blog-recent-comments__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	list-style: none;
}

.blog-recent-comments__link {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
}

.blog-recent-comments__avatar {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.blog-recent-comments__content {
	min-width: 0;
}

.blog-recent-comments__meta {
	font-size: var(--text-xs);
	color: var(--color-muted);
	margin-block-end: var(--space-2);
}

.blog-recent-comments__author {
	font-weight: var(--font-semibold);
	color: var(--color-ink);
}

.blog-recent-comments__link:hover .blog-recent-comments__author {
	color: var(--color-primary);
}

.blog-recent-comments__post {
	color: var(--color-primary);
}

/* Quote-style treatment for the comment text itself -- a colored bar at
   the leading edge, same idea as a blockquote. */
.blog-recent-comments__excerpt {
	font-size: var(--text-sm);
	color: var(--color-ink);
	padding-inline-start: var(--space-3);
	border-inline-start: 2px solid var(--color-border);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: border-color var(--transition-fast);
}

.blog-recent-comments__link:hover .blog-recent-comments__excerpt {
	border-inline-start-color: var(--color-primary);
}

/* Archive header (category/tag/date/author description) --------------------------- */

.archive-description {
	color: var(--color-muted);
	max-width: 65ch;
	margin-block-end: var(--space-2);
}

.blog-empty {
	padding-block: var(--space-6);
	color: var(--color-muted);
}

/* Search results --------------------------------------------------------------------- */

.search-page__query {
	color: var(--color-primary);
}

.search-page__section {
	padding-block-end: var(--space-8);
}

.search-page__empty {
	padding-block: var(--space-6);
	color: var(--color-muted);
}

.search-page__empty form {
	margin-block-start: var(--space-4);
	max-width: 420px;
}