/*
 * Card grid and pagination. Used by every listing on the site.
 */

.tdt-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: clamp(20px, 2.5vw, 32px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tdt-card {
	display: flex;
	flex-direction: column;
	background: var(--tdt-paper);
	border: 1px solid var(--tdt-line);
	border-radius: var(--tdt-radius);
	overflow: hidden;
	transition: transform .2s, box-shadow .2s, border-color .2s;
}

.tdt-card:hover {
	transform: translateY(-3px);
	border-color: #CBD0F5;
	box-shadow: var(--tdt-shadow-card);
}

/* ---------- media and category badge ---------- */

.tdt-card__media { position: relative; aspect-ratio: 3 / 2; background: var(--tdt-paper-2); }
.tdt-card__media a { display: block; height: 100%; }
.tdt-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tdt-card__media--empty { aspect-ratio: auto; padding: 16px 16px 0; }
.tdt-card__media--empty .tdt-card__badge { position: static; display: inline-block; }

.tdt-card__badge {
	position: absolute;
	top: 14px;
	right: 14px;
	max-width: calc(100% - 28px);
	padding: 7px 14px;
	background: var(--tdt-paper);
	color: var(--tdt-ink);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: 0 6px 18px -12px rgba(10, 10, 31, .6);
}

.tdt-card__badge:hover { background: var(--tdt-pink); color: #fff; }

/* ---------- body ---------- */

.tdt-card__body { display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 22px; }

.tdt-card__date {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--tdt-grey);
	font-size: 14.5px;
}

.tdt-card__date svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tdt-card__title {
	margin: 0;
	font-size: clamp(20px, 1.9vw, 24px);
	line-height: 1.2;
	letter-spacing: -.025em;
}

.tdt-card__title a { text-decoration: none; }
.tdt-card__title a:hover { color: var(--tdt-indigo); }

.tdt-card__excerpt {
	margin: 0;
	color: var(--tdt-grey);
	font-size: 15.5px;
	line-height: 1.55;
}

/* ---------- footer ---------- */

.tdt-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	padding: 16px 24px;
	border-top: 1px solid var(--tdt-line);
	color: var(--tdt-grey);
	font-size: 14.5px;
}

.tdt-card__author { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }

.tdt-card__author span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tdt-card__avatar { border-radius: 50%; flex: 0 0 auto; }

.tdt-card__stats { display: inline-flex; align-items: center; gap: 16px; flex: 0 0 auto; }

.tdt-card__stat { display: inline-flex; align-items: center; gap: 6px; }

.tdt-card__stat svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- pagination ---------- */

.tdt-pager { margin-top: clamp(36px, 6vh, 64px); }

.tdt-pager__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tdt-pager__list a,
.tdt-pager__list span {
	display: grid;
	place-items: center;
	min-width: 54px;
	height: 54px;
	padding: 0 16px;
	background: var(--tdt-paper);
	border: 1px solid var(--tdt-line);
	color: var(--tdt-ink);
	font-size: 16px;
	text-decoration: none;
	transition: background .18s, color .18s, border-color .18s;
}

.tdt-pager__list a:hover { border-color: var(--tdt-indigo); color: var(--tdt-indigo); }

.tdt-pager__list .current {
	background: var(--tdt-pink);
	border-color: var(--tdt-pink);
	color: #fff;
	font-weight: 600;
}

.tdt-pager__list .dots { border-color: transparent; background: none; }

.tdt-pager__list .prev,
.tdt-pager__list .next { display: inline-flex; align-items: center; gap: 10px; }

@media (max-width: 460px) {
	.tdt-grid { grid-template-columns: 1fr; }
	.tdt-pager__list a, .tdt-pager__list span { min-width: 46px; height: 46px; padding: 0 12px; font-size: 15px; }
}