/* Post cards (template-parts/cards/*.php). */

.card { position: relative; margin-bottom: 20px; }
.card:last-child { margin-bottom: 0; }

.card__image { position: relative; }
.card__media {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--c-panel);
	padding-top: var(--ratio, 70%);
}
.card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.card:hover .card__media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
	.card__media img { transition: none; }
	.card:hover .card__media img { transform: none; }
}

/* Play icon on video-format posts */
.card__media--video::after {
	content: '';
	position: absolute;
	left: 50%; top: 50%;
	width: 30px; height: 30px;
	margin: -15px 0 0 -15px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 7v10l8-5z'/%3E%3C/svg%3E") center / 70% no-repeat;
	border: 2px solid #fff;
}

.card__image .cat-chip { position: absolute; left: 0; bottom: 0; }

.card__body { padding-top: 10px; }
.card__body > .cat-chip { margin-bottom: 7px; }

.card__title {
	margin: 0 0 7px;
	font-family: var(--f-ui);
	font-weight: 400;
	line-height: 1.2;
	word-wrap: break-word;
}
.card__title a { color: var(--c-text); }
.card__title a:hover { color: var(--c-accent); }
.card__title--xs { font-size: 13px; }
.card__title--sm { font-size: 15px; }
.card__title--md { font-size: 17px; }
.card__title--lg { font-size: 22px; font-weight: 700; }
.card__title--xl { font-size: 29px; font-weight: 700; }

@media (max-width: 1140px) {
	.card__title--md { font-size: 15px; }
	.card__title--lg { font-size: 18px; }
	.card__title--xl { font-size: 22px; }
}
@media (max-width: 1018px) {
	.card__title--sm, .card__title--md { font-size: 13px; }
	.card__title--lg { font-size: 15px; font-weight: 400; }
	.card__title--xl { font-size: 18px; }
}
@media (max-width: 767px) {
	.card__title--sm, .card__title--md { font-size: 15px; }
	.card__title--lg, .card__title--xl { font-size: 18px; font-weight: 700; }
}

.card__excerpt {
	margin-top: 6px;
	color: #767676;
	font-size: 12px;
	line-height: 1.5;
}

/* Side layout: thumbnail left, text right */
.card--side { display: flex; align-items: flex-start; gap: 16px; }
.card--side .card__image { flex: 0 0 var(--img-w, 30%); }
.card--side .card__body { flex: 1; min-width: 0; padding-top: 0; }

/* Card grids */
.cards { display: grid; gap: 20px; }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cards > .card { margin-bottom: 0; }
@media (max-width: 767px) {
	.cards--2, .cards--3, .cards--5 { grid-template-columns: 1fr; }
}
.cards--list { gap: 20px; }