/* ═══════════════════════════════════════════════════════════════════
   Related Posts CSS — v6.1.6+, tag-aware matching added 7.0
   Adapted from the Recent Posts widget styling (.fl-recent-posts-*,
   see style.css) so both sections share one consistent visual language
   — dark flat surface, same typography, same hover behavior — instead
   of Related Posts using its own separate light-card design.
   ═══════════════════════════════════════════════════════════════════ */

.fl-related-posts {
	margin: 3em 0 0;
	padding: 24px;
	background: var(--color-dark);
}

.fl-related-posts-title {
	font-family: var(--font-heading);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-muted-on-dark);
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--color-darker);
}

/* Recent Posts is a single-column sidebar list; Related Posts sits at
   full article width, so the same row pattern is laid out as a
   responsive grid of cards instead of one stacked column. */
.fl-related-posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
}

.fl-related-posts-item {
	min-width: 0;
}

.fl-related-posts-link,
.fl-related-posts-link:link,
.fl-related-posts-link:visited {
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: #ddd;
	transition: color var(--transition);
}

.fl-related-posts-link:hover,
.fl-related-posts-link:focus {
	color: #fff;
}

.fl-related-posts-thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 2px;
	display: block;
}

.fl-related-posts-thumb-placeholder {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--color-mid);
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	color: var(--color-muted-on-dark);
}

.fl-related-posts-info {
	min-width: 0;
}

.fl-related-posts-post-title {
	font-family: var(--font-heading);
	font-size: 0.88rem;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 4px;
}

.fl-related-posts-date {
	display: block;
	font-size: 0.72rem;
	color: var(--color-muted-on-dark);
}

/* Fallback group ("You Might Also Like") — renders only when genuine
   tag/category matches don't fill the requested count. Deliberately
   de-emphasized relative to .fl-related-posts-title: smaller, no
   border-bottom rule, slightly reduced opacity on the whole grid — so
   the section stays honest that these are recency-only suggestions,
   not topical matches, without looking broken or neglected. */
.fl-related-posts-fallback-title {
	font-family: var(--font-heading);
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted-on-dark);
	opacity: 0.75;
	margin: 20px 0 14px;
}

.fl-related-posts-grid--fallback {
	opacity: 0.85;
}

@media (max-width: 600px) {
	.fl-related-posts {
		padding: 18px;
	}

	.fl-related-posts-grid {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		gap: 14px;
	}
}

@media (max-width: 420px) {
	.fl-related-posts-grid {
		grid-template-columns: 1fr;
	}
}