/*
 * TechMart — blog
 * Post grid, cards, single post, author box.
 */

.tm-post-grid {
	display: grid;
	gap: 22px;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.tm-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.tm-post-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tm-blog-layout.has-sidebar .tm-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

.tm-post-card:hover {
	border-color: var(--tm-border-strong);
	box-shadow: var(--tm-shadow);
}

.tm-post-card__media {
	display: block;
	overflow: hidden;
}

.tm-post-card__media .tm-thumb {
	border-radius: 0;
}

.tm-post-card:hover .tm-thumb__img {
	transform: scale(1.04);
}

.tm-post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 9px;
	padding: 18px;
}

.tm-post-cat {
	align-self: flex-start;
	padding: 3px 10px;
	background: var(--tm-primary-light);
	border-radius: var(--tm-radius-pill);
	color: var(--tm-primary);
	font-size: var(--tm-fs-xs);
	font-weight: 600;
	text-decoration: none;
}

.tm-post-cat:hover {
	background: var(--tm-primary);
	color: #fff;
}

.tm-post-card__title {
	margin: 0;
	font-size: var(--tm-fs-h4);
	line-height: 1.35;
}

.tm-post-card__title a {
	color: var(--tm-text);
	text-decoration: none;
}

.tm-post-card__title a:hover {
	color: var(--tm-primary);
}

.tm-post-card__excerpt {
	margin: 0;
	font-size: var(--tm-fs-sm);
	color: var(--tm-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tm-post-card__foot {
	margin-top: auto;
	padding-top: 6px;
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: var(--tm-fs-xs);
	color: var(--tm-faint);
}

/* -------------------------------------------------------------------------
 * Single post
 * ---------------------------------------------------------------------- */

.tm-single {
	max-width: 760px;
}

.tm-single__head {
	margin-bottom: 22px;
}

.tm-single__title {
	margin: 12px 0 12px;
}

.tm-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	font-size: var(--tm-fs-sm);
	color: var(--tm-muted);
}

.tm-post-meta a {
	color: var(--tm-text);
	text-decoration: none;
}

.tm-post-meta a:hover {
	color: var(--tm-primary);
}

.tm-single__media {
	margin: 0 0 26px;
}

.tm-single__media .tm-thumb {
	border-radius: var(--tm-radius-lg);
}

.tm-single__caption {
	margin-top: 8px;
	font-size: var(--tm-fs-xs);
	color: var(--tm-muted);
}

.tm-single__content {
	max-width: none;
}

.tm-single__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--tm-border);
	font-size: var(--tm-fs-sm);
}

.tm-single__tags-label {
	color: var(--tm-muted);
}

.tm-single__tags a {
	padding: 3px 10px;
	background: var(--tm-surface);
	border-radius: var(--tm-radius-pill);
	color: var(--tm-text);
	font-size: var(--tm-fs-xs);
	text-decoration: none;
}

.tm-single__tags a:hover {
	background: var(--tm-primary);
	color: #fff;
}

/* -------------------------------------------------------------------------
 * Author box
 * ---------------------------------------------------------------------- */

.tm-author {
	display: flex;
	gap: 16px;
	margin-top: 30px;
	padding: 20px;
	background: var(--tm-surface-2);
	border-radius: var(--tm-radius-lg);
}

.tm-author__avatar {
	border-radius: 50%;
	flex: none;
}

.tm-author__name {
	margin: 0 0 4px;
	font-weight: 700;
}

.tm-author__name a {
	color: var(--tm-text);
	text-decoration: none;
}

.tm-author__bio {
	margin: 0;
	font-size: var(--tm-fs-sm);
	color: var(--tm-muted);
}

/* -------------------------------------------------------------------------
 * Sidebar
 * ---------------------------------------------------------------------- */

.tm-sidebar {
	min-width: 0;
}

@media (min-width: 1024px) {
	.tm-sidebar {
		position: sticky;
		top: calc(var(--tm-header-main) + 20px);
	}
}

.tm-page-links {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 22px;
	font-size: var(--tm-fs-sm);
}

.tm-page-links a,
.tm-page-links > span:not(:first-child) {
	display: grid;
	place-items: center;
	min-width: 32px;
	height: 32px;
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-sm);
	text-decoration: none;
}