// =============================================================================
// components/_card.scss
// Post card component.
// =============================================================================

.post-card {
	border-radius: var(--card-radius);
	overflow: hidden;
	background: var(--color-background);
	border: 1px solid var(--color-border);
	box-shadow: var(--card-shadow);
	margin-bottom: var(--space-4);
	transition:
		transform  var(--transition-base),
		box-shadow var(--transition-base);

	&:hover {
		transform: translateY(-4px);
		box-shadow: var(--card-shadow-hover);
	}

	// Featured image wrapper.
	&__image {
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.5s ease;
		}
	}

	&:hover &__image img {
		transform: scale(1.03);
	}

	// Gradient placeholder when no featured image.
	&__gradient-placeholder {
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, var(--color-primary), var(--color-info));
		display: flex;
		align-items: center;
		justify-content: center;
	}

	&__category-initial {
		font-size: 2.5rem;
		font-weight: 700;
		color: rgba(255, 255, 255, 0.6);
	}

	// Categories.
	&__categories {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-1);
		margin-bottom: var(--space-2);
	}

	&__category-badge {
		font-size: 0.75rem;
		text-decoration: none;
		border-radius: 4px;
		transition: opacity var(--transition-base);

		&:hover {
			opacity: 0.8;
		}
	}

	// Title.
	&__title {
		margin-bottom: var(--space-2) !important;

		a {
			color: var(--color-text);
			text-decoration: none;
			transition: color var(--transition-base);

			&:hover {
				color: var(--color-primary);
			}
		}
	}

	// Meta row.
	&__meta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3);
		color: #6b7280;
		font-size: 0.85rem;
		margin-bottom: var(--space-3) !important;

		a {
			color: #6b7280;

			&:hover {
				color: var(--color-primary);
			}
		}

		i {
			margin-right: 0.25rem;
		}
	}

	// Footer row.
	&__footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--space-2);
		margin-top: var(--space-3);
	}

	// "Continue reading" button arrow animation.
	&__read-more {
		display: inline-flex;
		align-items: center;
		gap: 0.25rem;
		text-decoration: none;
		transition:
			background-color var(--transition-base),
			color var(--transition-base);
	}

	&__read-more-arrow {
		display: inline-block;
		transition: transform var(--transition-base);
	}

	&__read-more:hover &__read-more-arrow {
		transform: translateX(4px);
	}

	// Hero variant (sticky posts).
	&--hero {
		.post-card__image {
			max-height: 400px;
		}

		.post-card__title {
			font-size: 1.75rem;
		}
	}

	// Skeleton loading state.
	&--loading {
		pointer-events: none;

		.post-card__image,
		.post-card__title,
		.post-card__meta,
		.post-card__content {
			border-radius: 4px;
			@include skeleton-shimmer;
			color: transparent;
		}

		.post-card__image {
			height: 180px;
		}
	}
}