/* [cd_latest_topics] shortcode styles */

.cd-lt-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cd-lt-card {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	padding: 26px;
	background: #FEFCFD;
	border: 1px solid #F9F7F4;
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
}

.cd-lt-card:hover,
.cd-lt-card:focus {
	text-decoration: none;
	color: inherit;
}

/* --- Forum icon (inherited from the top-level ancestor forum) ---------- */

.cd-lt-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 87px;
	width: 87px;
	height: 87px;
	border-radius: 50em;
}

.cd-lt-icon svg,
.cd-lt-icon img {
	display: block;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

/* --- Forum name / title / excerpt -------------------------------------- */

.cd-lt-main {
	flex: 1 1 auto;
	min-width: 0;
	margin-left: 17px;
	/* Holds the right-hand section in place regardless of title length. */
	margin-right: 151px;
}

.cd-lt-forum {
	display: block;
	font-family: 'Outfit', sans-serif !important;
	font-weight: 500 !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #F6599C;
}

.cd-lt-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 8px 0 0 0 !important;
	padding: 0;
	font-family: 'Playfair Display', serif !important;
	font-weight: 400 !important;
	font-size: 30px !important;
	line-height: 36px !important;
	color: #0B0B0B !important;
	text-transform: none;
}

/* Shown only when the title fits on a single line — see assets/js/latest-topics.js */
.cd-lt-excerpt {
	display: none;
	margin: 8px 0 0 0 !important;
	padding: 0;
	font-family: 'Outfit', sans-serif !important;
	font-weight: 400 !important;
	font-size: 17px !important;
	line-height: 21px !important;
	color: #1E1E1EB2;
}

.cd-lt-card.cd-lt-single-line .cd-lt-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Right-hand section ------------------------------------------------ */

.cd-lt-side {
	position: relative;
	box-sizing: border-box;
	flex: 0 0 534px;
	width: 534px;
	height: 104px;
	display: flex;
	align-items: center;
	border-left: 1px solid #00000033;
}

.cd-lt-cols {
	display: flex;
	align-items: flex-start;
	flex: 1 1 auto;
	min-width: 0;
	padding-left: 30px;
	/* Keeps the activity text clear of the absolutely positioned arrow. */
	padding-right: 50px;
}

.cd-lt-stats {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 0 0 auto;
}

.cd-lt-stat {
	display: flex;
	align-items: flex-start;
}

.cd-lt-stat-icon {
	display: block;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin-top: 4px;
}

.cd-lt-stat-icon img {
	display: block;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 0;
}

.cd-lt-stat-text {
	display: flex;
	flex-direction: column;
	margin-left: 22px;
}

.cd-lt-stat-num {
	font-family: 'Outfit', sans-serif !important;
	font-weight: 400 !important;
	font-size: 17px !important;
	/* Matches the 22px icon box so the two tops sit on the same line. */
	line-height: 22px !important;
	color: #1E1E1EE5;
}

.cd-lt-stat-label {
	margin-top: 4px;
	font-family: 'Outfit', sans-serif !important;
	font-weight: 300 !important;
	font-size: 15px !important;
	line-height: 15px !important;
	color: #1E1E1E80;
	white-space: nowrap;
}

.cd-lt-sep {
	display: block;
	flex: 0 0 1px;
	align-self: center;
	width: 1px;
	height: 104px;
	margin-left: 59px;
	background: #00000033;
}

.cd-lt-activity {
	flex: 1 1 auto;
	min-width: 0;
	margin-left: 30px;
}

.cd-lt-activity-label {
	display: block;
	font-family: 'Outfit', sans-serif !important;
	font-weight: 400 !important;
	font-size: 15px !important;
	line-height: 20px !important;
	color: #1E1E1EB2;
	white-space: nowrap;
}

.cd-lt-activity-user {
	display: flex;
	align-items: center;
	margin-top: 20px;
}

/* !important guards against the site-wide avatar border in dashboard.css. */
.cd-lt-activity-pic {
	flex: 0 0 46px;
	width: 46px !important;
	height: 46px !important;
	border: 0 !important;
	border-radius: 50em !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	object-fit: cover;
}

.cd-lt-activity-pic-empty {
	display: block;
	background: #4B2ACA;
}

.cd-lt-activity-text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	margin-left: 11px;
}

.cd-lt-activity-name {
	font-family: 'Outfit', sans-serif !important;
	font-weight: 400 !important;
	font-size: 15px !important;
	line-height: 15px !important;
	color: #1E1E1EE5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cd-lt-activity-time {
	font-family: 'Outfit', sans-serif !important;
	font-weight: 300 !important;
	font-size: 15px !important;
	line-height: 15px !important;
	color: #1E1E1E80;
	white-space: nowrap;
}

.cd-lt-arrow {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
}

.cd-lt-arrow img {
	display: block;
	width: 14px;
	height: 27px;
	border: 0;
	border-radius: 0;
}

.cd-lt-empty {
	font-family: 'Outfit', sans-serif;
	font-size: 15px;
	color: #666;
}

/* --- Responsive -------------------------------------------------------- */

/* Narrow desktop: tighten the fixed gaps before anything has to stack. */
@media (max-width: 1280px) {
	.cd-lt-main {
		margin-right: 40px;
	}

	.cd-lt-side {
		flex-basis: 470px;
		width: 470px;
	}

	.cd-lt-sep {
		margin-left: 32px;
	}

	.cd-lt-activity {
		margin-left: 24px;
	}
}

/* Tablet: the right-hand section drops below the title block. */
@media (max-width: 1024px) {
	.cd-lt-card {
		flex-wrap: wrap;
	}

	.cd-lt-main {
		flex: 1 1 240px;
		margin-right: 0;
	}

	.cd-lt-side {
		flex: 1 1 100%;
		width: auto;
		height: auto;
		margin-top: 22px;
		padding-top: 22px;
		border-left: 0;
		border-top: 1px solid #00000033;
	}

	.cd-lt-cols {
		width: 100%;
		padding-left: 0;
	}

	.cd-lt-sep {
		align-self: stretch;
		height: auto;
		margin-left: 40px;
	}
}

/* Mobile: one column throughout. */
@media (max-width: 680px) {
	.cd-lt-card {
		padding: 20px;
	}

	.cd-lt-icon {
		flex-basis: 64px;
		width: 64px;
		height: 64px;
	}

	.cd-lt-icon svg,
	.cd-lt-icon img {
		width: 30px;
		height: 30px;
	}

	.cd-lt-main {
		margin-left: 14px;
	}

	.cd-lt-title {
		font-size: 22px !important;
		line-height: 28px !important;
	}

	.cd-lt-excerpt {
		font-size: 15px !important;
		line-height: 19px !important;
	}

	.cd-lt-side {
		flex-direction: column;
		align-items: stretch;
	}

	.cd-lt-cols {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		padding-right: 0;
	}

	.cd-lt-stats {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 16px 32px;
	}

	.cd-lt-sep {
		display: none;
	}

	.cd-lt-activity {
		margin-left: 0;
	}

	.cd-lt-arrow {
		position: static;
		transform: none;
		align-self: flex-end;
		margin-top: 16px;
	}
}