/* =========================
   Modern Topic Preview
========================= */

.topic_preview_content {
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}


/* ===== Card ===== */

.topic_preview_modern {
	background: #ffffff;
	border-radius: 10px;

	padding: 12px 14px;

	width: 390px;
	max-width: 390px;

	box-shadow:
		0 4px 18px rgba(0,0,0,.12);

	border: 1px solid rgba(0,0,0,.05);

	font-size: 13px;
	line-height: 1.45;
}


/* ===== Layout ===== */

.topic_preview_row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}


/* ===== Avatar ===== */

.topic_preview_avatar {
	width: 52px;
	min-width: 52px;
	flex-shrink: 0;
}

.topic_preview_avatar img,
.topic_preview_avatar .avatar {
	width: 52px !important;
	height: auto !important;

	min-width: 52px !important;
	max-width: 52px !important;

	border-radius: 6px !important;

	display: block !important;
}


/* ===== Body ===== */

.topic_preview_body {
	flex: 1;
	min-width: 0;
}


/* ===== Meta ===== */

.topic_preview_meta {
	margin-bottom: 6px;

	font-size: 12px;
	line-height: 1.3;
}

.topic_preview_author {
	font-weight: 600;
	color: #2b2b2b;
}

.topic_preview_date {
	color: #888;
	margin-left: 4px;
}


/* ===== Text ===== */

.topic_preview_text,
.topic_preview_first,
.topic_preview_last {
	color: #444;

	word-break: break-word;

	font-size: 13px;
	line-height: 1.45;
}

.topic_preview_text p,
.topic_preview_first p,
.topic_preview_last p {
	margin: 0;
}


/* ===== Label ===== */

.topic_preview_label {
	font-size: 10px;
	font-weight: 700;

	text-transform: uppercase;
	letter-spacing: .08em;

	color: #999;

	margin-bottom: 8px;
}


/* ===== Fallback avatar ===== */

.topic_preview_no_avatar {
	width: 28px;
	height: 28px;

	border-radius: 50%;

	background: #ddd;
}


/* ===== Remove phpBB old style ===== */

.topic_preview_content .postbody,
.topic_preview_content .content,
.topic_preview_content .panel,
.topic_preview_content .inner {
	background: transparent !important;

	border: 0 !important;

	box-shadow: none !important;

	padding: 0 !important;

	margin: 0 !important;
}


/* ===== Tooltip cleanup ===== */

.tooltipster-box,
.ui-tooltip {
	border-radius: 10px !important;

	border: 0 !important;

	box-shadow:
		0 6px 24px rgba(0,0,0,.18) !important;
}


/* ===== Animation ===== */

.topic_preview_modern {
	animation: tpFade .14s ease;
}

@keyframes tpFade {

	from {
		opacity: 0;
		transform: translateY(4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}