/*!
 * FastNaija — Shared sleek post list (fn-plist)
 * Used by FN: Trending widget, FN: Hot Video widget and the single
 * post "related posts" block. Replaces the old crp_related /
 * crp-thumbs-grid markup. Thumbnails are always forced into the same
 * aspect-ratio box via object-fit, so images stay visually consistent
 * no matter what size the source image actually is.
 * ----------------------------------------------------------------- */

.fn-plist {
	display: flex;
	flex-direction: column;
}
.fn-plist-item {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .7rem 0;
	border-top: 1px solid var(--sk-line);
	text-decoration: none;
}
.fn-plist-item:first-child { border-top: none; padding-top: 0; }

.fn-plist-thumb {
	flex: 0 0 76px;
	width: 76px;
	height: 76px;
	overflow: hidden;
	border-radius: 12px; /* deliberately softer than --sk-r-frame here, to match the rounded card feel requested for post lists */
	border: 1px solid var(--sk-line);
}
.fn-plist-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	display: block;
}

.fn-plist-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.fn-plist-title {
	font-size: .92rem;
	font-weight: 700;
	line-height: 1.32;
	color: var(--sk-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.fn-plist-item:hover .fn-plist-title { color: var(--sk-primary); }
.fn-plist-meta {
	font-size: .74rem;
	color: var(--sk-faint);
	display: flex;
	align-items: center;
	gap: .3rem;
}
.fn-plist-sep { color: var(--sk-line-strong); }

/* ---------------------------------------------------------------
 * Grid variant — single post "related posts" block. Same markup as
 * the flat list, just laid out as a responsive card grid with the
 * thumbnail stacked on top instead of beside the text.
 * ----------------------------------------------------------------- */
.fn-plist-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 1.15rem;
}
.fn-plist-item-grid {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	border-top: none;
	border: 1px solid var(--sk-line);
	border-radius: 14px;
	overflow: hidden;
	background: var(--sk-surface-sunken);
	transition: border-color var(--sk-fast), transform var(--sk-fast);
}
.fn-plist-grid .fn-plist-item-grid:first-child { border-top: 1px solid var(--sk-line); }
.fn-plist-item-grid:hover {
	border-color: var(--sk-primary-line);
	transform: translateY(-3px);
}
.fn-plist-item-grid .fn-plist-thumb {
	flex: none;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	border-radius: 0;
	border: none;
	border-bottom: 1px solid var(--sk-line);
}
.fn-plist-item-grid .fn-plist-body {
	padding: .85rem .9rem .95rem;
	gap: .5rem;
}
.fn-plist-item-grid .fn-plist-title {
	font-size: .95rem;
	-webkit-line-clamp: 2;
}
@media (max-width: 560px) {
	.fn-plist-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
	.fn-plist-item-grid .fn-plist-body { padding: .7rem .75rem .8rem; }
}

/* single.php related-posts wrapper */
.fn-related-block {
	margin: 1.5rem 0 0;
	padding: 1.1rem 0 0;
	border-top: 1px solid var(--sk-line);
}
.fn-related-heading {
	font-size: 1rem;
	font-weight: 800;
	color: var(--sk-text);
	margin: 0 0 .6rem;
}

@media (max-width: 480px) {
	.fn-plist-thumb { flex-basis: 64px; width: 64px; height: 64px; }
}