/* Article cards */
.card {
	background: var(--color-bg-white);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-base);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.card__image-link {
	flex-shrink: 0;
}

.card__image {
	flex: 1;
}

.card__body {
	flex: 1;
}

.card:hover {
	box-shadow: var(--shadow-md);
}

.card__image-link {
	display: block;
	overflow: hidden;
}

.card__image {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-base);
}

.card:hover .card__img {
	transform: scale(1.03);
}

.card__img--placeholder {
	background: var(--color-border-light);
}

.card__body {
	padding: var(--space-md);
}

.card__title {
	font-family: var(--font-serif);
	font-size: var(--font-size-lg);
	font-weight: 700;
	line-height: 1.3;
	margin-top: var(--space-sm);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card__title a {
	color: var(--color-text);
}

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

.card__excerpt {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	margin-top: var(--space-sm);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.5;
}

.card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-top: var(--space-sm);
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
}

.card__meta-sep {
	color: var(--color-border);
}

/* Category badge */
.category-badge {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: var(--font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-primary);
	background: transparent;
	padding: 2px 0;
}

.category-badge:hover {
	text-decoration: underline;
}

/* Byline */
.byline {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
}

.byline__avatar {
	border-radius: 50%;
	width: 24px;
	height: 24px;
}

.byline__name {
	font-weight: 600;
	color: var(--color-text-secondary);
}

.byline__name:hover {
	color: var(--color-primary);
}

/* Reading time */
.reading-time {
	color: var(--color-text-muted);
}

/* Hero card */
.card--hero {
	height: 100%;
}

.card--hero .card__image-link {
	flex: 1;
}

.card--hero .card__image {
	aspect-ratio: 16 / 9;
	height: 100%;
	min-height: 0;
}

.card--hero .card__title {
	font-size: var(--font-size-2xl);
	-webkit-line-clamp: 4;
}

@media (min-width: 768px) {
	.card--hero .card__title {
		font-size: var(--font-size-3xl);
	}
}

@media (min-width: 1024px) {
	.card__title--hero {
		font-size: var(--font-size-4xl);
	}
}

/* Horizontal card */
.card--horizontal {
	display: flex;
	flex-direction: column;
}

@media (min-width: 480px) {
	.card--horizontal {
		flex-direction: row;
	}

	.card--horizontal .card__image-link {
		flex: 0 0 40%;
		max-width: 40%;
	}

	.card--horizontal .card__image {
		aspect-ratio: auto;
		height: 100%;
	}

	.card--horizontal .card__body {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* Horizontal card - image right */
.card--horizontal-reverse {
	display: flex;
	flex-direction: column;
}

@media (min-width: 480px) {
	.card--horizontal-reverse {
		flex-direction: row-reverse;
	}

	.card--horizontal-reverse .card__image-link {
		flex: 0 0 40%;
		max-width: 40%;
	}

	.card--horizontal-reverse .card__image {
		aspect-ratio: auto;
		height: 100%;
	}

	.card--horizontal-reverse .card__body {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* In archive grid, first horizontal card spans full width */
.grid--3 > .card--horizontal {
	grid-column: 1 / -1;
}

/* Small card */
.card--small {
	display: flex;
	gap: var(--space-sm);
	box-shadow: none;
	border-radius: 0;
	border-bottom: 1px solid var(--color-border-light);
	padding-bottom: var(--space-sm);
	background: transparent;
}

.card--small:hover {
	box-shadow: none;
}

.card--small .card__image-link {
	flex: 0 0 80px;
}

.card__image--small {
	aspect-ratio: 1;
	width: 80px;
	height: 80px;
	border-radius: 4px;
}

.card--small .card__body {
	padding: 0;
	flex: 1;
	min-width: 0;
}

.card__title--small {
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	font-weight: 600;
	-webkit-line-clamp: 2;
	margin-top: 0;
}