/*
 * card.css — 글 카드 (목록·카테고리·검색 공유)
 */

.c4-cards {
	display: flex;
	flex-direction: column;
	gap: var(--c4-card-gap);
}

/* stretched link 의 기준이 된다. */
.c4-card {
	position: relative;
	display: flex;
	gap: var(--c4-card-media-gap);
}

/*
 * 썸네일 칸은 항상 자리를 차지한다 — 비면 카드 높이가 흔들린다.
 * 대표 이미지도, 기본 썸네일도, 빈 박스도 같은 5:3 비율·같은 radius 라 높이가 일정하다.
 */
.c4-card__media {
	flex: 0 0 var(--c4-card-media-w);
	width: var(--c4-card-media-w);
	aspect-ratio: var(--c4-card-ratio);
	overflow: hidden;
	border-radius: var(--c4-radius-img);
	background: var(--c4-color-img-placeholder);
}

.c4-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c4-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--c4-card-text-gap);
	min-width: 0;
	padding-top: var(--c4-card-text-pt);
}

/* 카테고리 라벨 — 카드와 상세는 줄간격이 다르다. 통일하지 말 것. */
.c4-card__cat {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	font-size: var(--c4-fz-body2);
	line-height: var(--c4-lh-body);
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-accent);
	text-decoration: none;
}

.c4-card__title {
	font-size: var(--c4-fz-post-title);
	line-height: var(--c4-lh-post-title);
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-text);
	/* 2줄 클램프 + 말줄임 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.c4-card__title a {
	text-decoration: none;
	color: inherit;
}

/*
 * stretched link — 카드 전체를 <a> 로 감싸면 카테고리 링크와 중첩 <a> 가 되어
 * HTML 파서가 마크업을 무너뜨린다. 제목 링크를 카드 전체로 늘리는 방식을 쓴다.
 */
.c4-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

/* 상세 화면의 날짜와는 크기·굵기·색이 모두 다르다. 같은 토큰을 쓰지 말 것. */
.c4-card__date {
	font-size: var(--c4-fz-body4);
	line-height: var(--c4-lh-body);
	font-weight: var(--c4-fw-regular);
	color: var(--c4-color-text-faint);
}

/* ─────────────────────────────────────────────────────────
   768 미만 — 썸네일이 위로 올라간다
   ───────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
	.c4-card {
		flex-direction: column;
	}

	.c4-card__media {
		flex: 0 0 auto;
		width: 100%;
	}
}