/* [cd_forum_topics] shortcode styles */

/* The list must never be wider than whatever it is dropped into, whether that
   is a narrow Elementor column or a phone screen. */
.cd-ft-list {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.cd-ft-row {
	display: flex;
	align-items: center;
	gap: 16px;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	/* Flex items default to min-width:auto, which lets a long unbroken title
	   push the row wider than its container instead of shrinking. */
	min-width: 0;
	text-decoration: none;
	color: inherit;
}

.cd-ft-pic {
	flex: 0 0 56px;
	width: 56px !important;
	height: 56px !important;
	border-radius: 50em !important;
	border: none !important;
	object-fit: cover;
}

/* Was a hard 260px that could not shrink: with the 56px avatar, two 16px gaps
   and the 33px reply badge the row demanded 381px minimum, so it overflowed
   any container narrower than that. It now caps at 260px but can shrink. */
.cd-ft-info {
	flex: 1 1 auto;
	max-width: 260px;
	min-width: 0;
}

.cd-ft-title {
	margin: 0;
	font-family: 'Playfair Display', serif !important;
	font-weight: 500 !important;
	font-size: 18px !important;
	line-height: 120% !important;
	letter-spacing: 0%;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	/* A long URL or unbroken word in a title would otherwise refuse to wrap. */
	overflow-wrap: anywhere;
	word-break: break-word;
}

.cd-ft-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 10px;
	min-width: 0;
	margin-top: 4px;
	font-family: 'Outfit', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 28px;
}

.cd-ft-category {
	color: inherit;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cd-ft-time {
	color: inherit;
	opacity: 0.7;
}

.cd-ft-replies {
	margin-left: auto;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33px !important;
	height: 35px !important;
	border: 1px solid #4B2FC5;
	border-radius: 4px;
	color: #4B2FC5;
	font-family: 'Outfit', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1;
}

/* Was a fixed 379px, which overflowed every container narrower than that —
   the most visible cause on a phone. */
.cd-ft-separator {
	width: 100%;
	max-width: 379px;
	height: 1px;
	margin: 23px 0;
	background-color: #4B2FC559;
}

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

/* Below the avatar + badge + minimum text width, the row has nowhere left to
   shrink, so the reply badge drops under the text rather than overflowing. */
@media (max-width: 420px) {
	.cd-ft-row {
		flex-wrap: wrap;
	}

	.cd-ft-info {
		max-width: none;
		flex: 1 1 140px;
	}

	.cd-ft-replies {
		margin-left: 0;
	}
}