/*==============================================================================
 * iChess News (.ic-news)
 * Card list. Spacing and line-height use the shared type scale.
 * Stored HTML often carries pasted margin / line-height; the body resets those.
 *============================================================================*/

.ic-news,
.ic-news * {
	box-sizing: border-box;
}

#news_div.ic-news,
.ic-news {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: visible !important;
}

.ic-news-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ic-space-sm) 1rem;
	margin: 0 0 var(--ic-space-sm);
	padding: 0 calc(var(--bs-gutter-x, 1rem) * 0.5) var(--ic-space-sm);
	border-bottom: 1px solid var(--ic-border, #e2dfda);
}

.ic-news-header .ic-form-page-title {
	margin: 0;
	line-height: var(--ic-line-height-snug);
}

.ic-news-header .btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ic-space-xs);
	white-space: nowrap;
	line-height: var(--ic-line-height-snug);
}

.ic-news-list {
	display: flex;
	flex-direction: column;
	gap: var(--ic-space-sm);
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0 calc(var(--bs-gutter-x, 1rem) * 0.5);
}

.ic-news-card {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: var(--ic-space-sm) 1rem;
	background: var(--ic-surface, #ffffff);
	border: 1px solid var(--ic-border, #e2dfda);
	border-radius: 0.5rem;
	border-inline-start: 3px solid var(--ic-teal, #2f87a9);
	overflow: visible;
}

.ic-news-card-title {
	margin: 0;
	font-size: var(--ic-font-size-h2);
	font-weight: var(--ic-font-weight-bold);
	line-height: var(--ic-line-height-heading);
	color: var(--ic-text, #1a1a1a);
	overflow-wrap: anywhere;
}

.ic-news-card-meta {
	margin: var(--ic-space-2xs) 0 var(--ic-space-sm);
	padding: 0;
	font-size: var(--ic-font-size-body);
	line-height: var(--ic-line-height-body);
	color: var(--ic-teal-dark, #4b6a71);
	overflow-wrap: anywhere;
}

.ic-news-card-meta .user_icon {
	display: inline-flex;
	align-items: center;
	gap: var(--ic-space-2xs);
	line-height: var(--ic-line-height-icon);
	vertical-align: middle;
}

.ic-news-body {
	margin: 0;
	line-height: var(--ic-line-height-body);
	color: var(--ic-text, #1a1a1a);
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Pasted editor HTML sets its own margin, font-size, and line-height. */
.ic-news-body :where(p, div, span, li, a, blockquote) {
	margin: 0 !important;
	font-size: var(--ic-font-size-body) !important;
	line-height: var(--ic-line-height-body) !important;
}

.ic-news-body :where(h1) {
	margin: 0 !important;
	font-size: var(--ic-font-size-h1) !important;
	line-height: var(--ic-line-height-heading) !important;
}

.ic-news-body :where(h2) {
	margin: 0 !important;
	font-size: var(--ic-font-size-h2) !important;
	line-height: var(--ic-line-height-heading) !important;
}

.ic-news-body :where(h3) {
	margin: 0 !important;
	font-size: var(--ic-font-size-h3) !important;
	line-height: var(--ic-line-height-heading) !important;
}

.ic-news-body :where(h4, h5, h6) {
	margin: 0 !important;
	line-height: var(--ic-line-height-heading) !important;
}

.ic-news-body.ic-prose > * + *,
.ic-news-body p + p,
.ic-news-body :where(p, h1, h2, h3, h4, ul, ol) + :where(p, h1, h2, h3, h4, ul, ol) {
	margin-top: var(--ic-space-xs) !important;
}

.ic-news-body ul,
.ic-news-body ol {
	margin-block: var(--ic-space-xs) !important;
	margin-inline: var(--ic-space-xs) !important;
}

.ic-news-body li {
	margin-block: var(--ic-space-2xs) !important;
}

.ic-news-body img {
	max-width: 100% !important;
	height: auto !important;
}

@media (max-width: 575.98px) {
	.ic-news-header {
		flex-direction: column;
		align-items: stretch;
	}

	.ic-news-header .btn {
		width: 100%;
		justify-content: center;
	}

	.ic-news-card {
		padding: var(--ic-space-sm);
	}
}