/* related-posts.css -- ft.fr / ft.club / ft.es (byte-identical on the 3 parents)
 *
 * The "more articles" blocks under a single post, rendered by
 * functions/related_posts.php as COMPACT ROWS (v2, 2026-09-03): two blocks side
 * by side, each a list of rows with a 64px square thumbnail, a title on at most
 * two lines and a category + date meta line. Chosen by the user from a four
 * variant mockup after the v1 cards (photo stretched as a 260px background, date
 * in grey on the photo) were judged unusable.
 *
 * The rows use their own classes (.ft-rel*) and never .relatedarticle, so the
 * old card rules in blog.css / blog-single.css do not reach them; those rules
 * are left alone because the blog index still uses them.
 *
 * Every selector carries the .entry-content ancestor: the theme styles
 * `.entry-content ul`, `.entry-content li` and `.entry-content img` (bullets,
 * indents, `height: auto` on images), and each of those would break a row
 * without the extra specificity. The only colour decisions here are the hover
 * and the muted meta line; the title inherits the site's own link colour. A
 * site can override the hover with --ft-related-hover in its own stylesheet.
 */

.entry-content .ft-related-wrap {
	display: grid;
	/* Two columns when the article column has room for two 300px blocks,
	   otherwise one under the other. min(300px, 100%) so a track can never be
	   wider than its container. */
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 8px 36px;
	margin: 10px 0 40px;
	align-items: start;
}

.entry-content .ft-related-block {
	min-width: 0;
}

.entry-content .ft-related-block .ph3 {
	margin: 18px 0 10px;
}

.entry-content ul.ft-related {
	list-style: none;
	margin: 0;
	padding: 0;
}

.entry-content .ft-related li {
	margin: 0;
	padding: 0;
	border-top: 1px solid #e5e7eb;
}
.entry-content .ft-related li:last-child {
	border-bottom: 1px solid #e5e7eb;
}

.entry-content .ft-related a.ft-rel {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 9px 0;
	text-decoration: none;
	color: inherit;
	border: 0;
	box-shadow: none;
}

/* The square. Explicit width AND height because the theme's
   `.entry-content img { height: auto }` would otherwise turn it into a
   64px-wide, 64px-tall-at-best rectangle following the image's own ratio. */
.entry-content .ft-related .ft-rel-thumb {
	flex: 0 0 64px;
	display: block;
	width: 64px;
	height: 64px;
	max-width: none;
	margin: 0;
	object-fit: cover;
	border: 0;
	box-shadow: none;
	border-radius: 3px;
	background: #e5e7eb;
}

.entry-content .ft-related .ft-rel-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.entry-content .ft-related .ft-rel-title {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.entry-content .ft-related a.ft-rel:hover .ft-rel-title,
.entry-content .ft-related a.ft-rel:focus-visible .ft-rel-title {
	color: var(--ft-related-hover, #288dd8);
}
.entry-content .ft-related a.ft-rel:focus-visible {
	outline: 2px solid var(--ft-related-hover, #288dd8);
	outline-offset: 2px;
}

.entry-content .ft-related .ft-rel-meta {
	font-size: 12.5px;
	line-height: 1.4;
	color: #6b7280;
}
.entry-content .ft-related .ft-rel-meta i {
	font-style: normal;
	color: #b0b8c4;
	margin: 0 2px;
}