.cTopicOverviewContainer{
	container-type: inline-size;
	container-name: cTopicOverview;
	overflow: hidden;
}

.cTopicOverviewContainer.ipsBox{
	margin: 1em 0;
}

/* Separate items by a border */
.cTopicOverview,
.cTopicOverview__content{
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	flex: 9999 1 auto;
}

	.cTopicOverview > *,
	.cTopicOverview__item{
		outline: 1px solid var(--i-background_3);
	}
	.cTopicOverview__item{
		padding: 1.5em;
		flex: 1 1 max(300px, 40%);
	}

/* Inlined collapsed state */
.cTopicOverview--main:not(.cTopicOverview--expanded) .cTopicOverview__content{
	flex-wrap: nowrap;
}
	.cTopicOverview--main:not(.cTopicOverview--expanded) .cTopicOverview__item{
		flex: 1 0 auto;
	}

@container cTopicOverview (min-width: 500px){
	.cTopicOverview--main:not(.cTopicOverview--expanded) .cTopicOverview__content{
		flex-wrap: nowrap;
		overflow: hidden;
		mask-image: linear-gradient(to left, transparent, #000 300px);
	}
}

/* Vertical UI when small */
@container cTopicOverview (max-width: 750px){
	.cTopicOverview{
		display: grid;
	}
}

/* Hide certain items when collapsed */
.cTopicOverview--main:not(.cTopicOverview--expanded) :is(.cTopicOverview__item--popularPosts, .cTopicOverview__item--helpfulPosts, .cTopicOverview__item--images){
	display: none;
}
/* Hide all items except for stats on small screens */
@container cTopicOverview (max-width: 499px){
	.cTopicOverview--main:not(.cTopicOverview--expanded) .cTopicOverview__item:not(.cTopicOverview__item--stats){
		display: none;
	}
}

/* Titles */
.cTopicOverview__title{
	font-weight: 600;
	margin-bottom: 1em;
	font-size: 1.2em;
	color: var(--i-color_hard);
}

/* Toggle button */
.cTopicOverview__toggle {
	flex: 1 0 auto;
	padding: .5em;
	text-align: center;
}

	.cTopicOverview__toggle i[class*=" fa-"] {
		transition: 0.2s all ease-in-out;
	}

		.cTopicOverview--expanded .cTopicOverview__toggle i[class*=" fa-"] {
			transform: rotate(180deg);
		}

	.cTopicOverview__toggle:hover {
		background: var(--i-background_2);
	}

	/* Hide toggle button in sidebar since it's always expanded */
	.ipsLayout__secondary-column .cTopicOverview__toggle{
		display: none;
	}

/* Stats */
.cTopicOverview__item--stats{
	display: flex;
	flex-wrap: wrap;
	gap: 1em 2em;
	text-align: center;
}

	.cTopicOverview--expanded .cTopicOverview__item--stats{
		flex: 1 1 100%;
	}

	.cTopicOverview__item--stats > li{
		flex: 1 0 auto;
		display: grid;
		place-content: center;
	}

/* Data lists */
.cTopicOverview__dataList{
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
}

	.cTopicOverview__dataList > *{
		flex: 1 1 170px;
	}

	/* 2 columns in sidebar */
	:is(.cTopicOverview__item--topPosters, .cTopicOverview__item--popularDays) .cTopicOverview__dataList > *{
		flex-basis: max(120px, 40%);
	}

	/* Smaller gap on collapsed */
	.cTopicOverview--main:not(.cTopicOverview--expanded) .cTopicOverview__item--topPosters .cTopicOverview__dataList{
		gap: 1em;
	}

	.cTopicOverview--main:not(.cTopicOverview--expanded) .cTopicOverview__dataList > *{
		flex: 0 0 auto;
	}

/* Minimal photo panels in collapsed view */
.cTopicOverview--main:not(.cTopicOverview--expanded) .ipsPhotoPanel__text{
	display: none;
}

.cTopicOverview__imageGrid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	gap: 15px;
}


/* Topic meta */
.ipsTopicMeta {
	margin-bottom: 1em;
	padding: .5em 1em;
	display: grid;	
	gap: .5em;
	color: var(--i-color_soft);
	font-weight: 500;
	font-size: .9em;
}

/* Automatic contrast against page background */
@supports (color: oklch(from var(--i) clamp(0, (.60 - l) * 1000, 1) c h)) and (color: oklch(from red l c h)){
	.ipsTopicMeta:not(.ipsBox *){
		color: oklch(from var(--i-body--ba-co) clamp(0, (.60 - l) * 1000, 1) c h);
	}
}

	.ipsBox .ipsTopicMeta{
		margin: 0;
		border-top: 1px solid var(--i-background_3);
		background: var(--i-background_2)
	}

	.ipsTopicMeta a{
		color: inherit;
	}

@media (min-width: 768px){
	.ipsEntry--post ~ .ipsTopicMeta {
		padding-inline-start: var(--post-column--fl-ba, 240px);
	}
}

	.ipsTopicMeta__time {
		margin-inline-end: var(--i-sp_2);
	}


/* Hide certain elements depending on traditional, minimal and first page attributes */
#ipsTopicView[data-ips-topic-ui="traditional"][data-ips-topic-first-page="true"] [data-ips-hide="traditional-first"],
#ipsTopicView[data-ips-topic-ui="minimal"] [data-ips-hide="minimal"],
#ipsTopicView[data-ips-topic-comments="helpful"] .ipsTopicMeta{
	display: none;
}

/* Improve alignment of assigned icon */
.ipsMessage--assigned .ipsMessage__icon{
	top: calc(50% - .5em);
}

/* Advertisement spacing */
[data-ips-ad="topic_view"]{
	margin-bottom: 1em;
}