/* Recent posts — compact thumbnail rows on phones, cards from 600px up.
   Colours come from the --mf-* tokens in the theme stylesheet; the fallback
   after each comma keeps this working if the plugin is used with another theme. */

.rv-list {
	margin: 0 0 2em 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 14px;
	max-width: 1160px;
}

.rv-item {
	margin: 0;
	padding: 0;
	/* the theme caps every li at 678px and gives everything inside #maincontent
	   auto side margins — both have to be neutralised here */
	max-width: none;
}

/* the whole card is one link */
.rv-link {
	display: grid;
	grid-template-columns: 104px 1fr;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 10px;
	border: 1px solid var(--mf-border, #d7f3fb);
	border-radius: var(--mf-radius-card, 12px);
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color var(--mf-dur-micro, .2s), box-shadow var(--mf-dur-micro, .2s), transform var(--mf-dur-micro, .2s);
}

.rv-item--nothumb .rv-link {
	grid-template-columns: 1fr;
}

.rv-link:hover,
.rv-link:focus-visible {
	border-color: var(--mf-brand-strong, #0077a8);
	box-shadow: 0 4px 14px rgba(0, 88, 116, .12);
	transform: translateY(-2px);
}

.rv-link:focus-visible {
	outline: 3px solid var(--mf-brand-strong, #0077a8);
	outline-offset: 2px;
}

.rv-item .image {
	display: block;
	overflow: hidden;
	border-radius: 8px;
	background: var(--mf-tint, #f4fcff);
	aspect-ratio: 1 / 1;
}

.rv-item .image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.rv-body {
	display: block;
	min-width: 0;
}

/* date reads as metadata instead of a badge floating over the photo */
.rv-item .date {
	display: block;
	margin-bottom: 4px;
	font-size: .78rem;
	line-height: 1.2;
	color: var(--mf-text, #666);
}

.rv-item .title {
	display: block;
}

.rv-item .title h3 {
	margin: 0;
	font-size: 1rem;
	line-height: 1.35;
	font-weight: 500;
	color: var(--mf-ink, #0b455e);
	/* long Romanian titles are the norm here — cap them so one card cannot grow
	   far taller than its neighbours */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rv-link:hover .title h3,
.rv-link:focus-visible .title h3 {
	color: var(--mf-brand-strong, #0077a8);
}

/* ---- cards from 600px up ---- */
@media screen and (min-width: 600px) {
	.rv-list {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: 20px;
	}

	.rv-link {
		grid-template-columns: 1fr;
		align-items: start;
		align-content: start;
		gap: 12px;
		padding: 12px;
	}

	.rv-item .image {
		aspect-ratio: 3 / 2;
	}

	.rv-item .title h3 {
		font-size: 1.05rem;
		-webkit-line-clamp: 4;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rv-link { transition: none; }
	.rv-link:hover,
	.rv-link:focus-visible { transform: none; }
}