/*
 * CARDS — entrada de blog y servicio. Responden a su contenedor
 * (container query del .grid-cards), no al viewport.
 */

.card {
	display: flex;
	flex-direction: column;
	background-color: var(--color-base);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition:
		box-shadow var(--duration-base) var(--ease-out),
		border-color var(--duration-base) var(--ease-out);
}

.card:hover {
	border-color: transparent;
	box-shadow: var(--shadow-card);
}

.card__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
	flex: 1;
}

.card__meta {
	font-size: var(--text-sm);
	color: var(--color-ink-soft);
}

.card__title {
	font-size: var(--text-lg);
}

.card__link {
	text-decoration: none;
}

/* Toda la card clicable sin romper la semántica. */
.card__link::after {
	content: '';
	position: absolute;
	inset: 0;
}

.card--post,
.card--service {
	position: relative;
}

.card__excerpt {
	color: var(--color-ink-soft);
	flex: 1;
}

.card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-weight: var(--weight-semibold);
	font-size: var(--text-sm);
	color: var(--color-primary);
}

.card__icon {
	display: inline-flex;
	width: 52px;
	height: 52px;
	align-items: center;
	justify-content: center;
	margin: var(--space-5) var(--space-5) 0;
	border-radius: var(--radius-md);
	background-color: var(--color-surface);
	color: var(--color-primary);
}

/* En contenedores anchos la card de servicio se vuelve horizontal. */
@container (min-width: 34rem) {
	.card--service {
		flex-direction: row;
		align-items: flex-start;
	}

	.card--service .card__icon {
		margin: var(--space-5) 0 var(--space-5) var(--space-5);
		flex-shrink: 0;
	}
}