Template:UI/latest posts/styles.css

/* TemplateStyles for {{UI/latest_posts}} — compact "Latest news" card
   grid for a landing page. Heading, a row of hero-thumb cards (default
   3), and an optional "See all →" footer. Shares the 4:3 hero-thumb
   idiom with {{UI/posts_library}}/styles.css but lives in its own
   .latest-posts-* class space so the landing widget and the full
   directory don't couple.

   Sanitizer constraints (MW 1.44.5 / css-sanitizer 5.5.0): var() in
   `background`, `color`, and the `border` shorthand only; geometry
   stays literal. `display: -webkit-box` and `aspect-ratio` are
   rejected — teaser clamps via max-height + overflow, image area via
   the padding-bottom hack. */

.latest-posts {
	margin: 16px 0;
}

/* ---------- Card grid ----------

   Explicit 3 columns rather than auto-fit/minmax so a single post
   doesn't stretch a lone card to full width (same rationale as
   posts_library). Collapses to 1 column on narrow viewports — on a
   landing page the news widget often shares a row with other content,
   so it goes single-column early. */
.latest-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 8px;
}

@media (max-width: 900px) {
	.latest-posts-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Card ---------- */

.latest-posts-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--labki-border, #d8dde2);
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* Literal #2774AE matches --labki-accent — sanitizer rejects var() for
   border-color longhand. */
.latest-posts-card:hover {
	border-color: #2774AE;
	box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.10);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.latest-posts-card {
		transition: border-color 0.15s ease, box-shadow 0.15s ease;
	}
	.latest-posts-card:hover {
		transform: none;
	}
}

/* ---------- Image area (4:3) ----------

   4:3 (padding-bottom: 75%) to match the Has card image recommended
   source and the other post surfaces, so a 4:3 upload shows uncropped. */
.latest-posts-card-image {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 75%;
	overflow: hidden;
}

.latest-posts-card-image img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.latest-posts-card-image-fallback {
	background: linear-gradient(135deg, #2774AE 0%, #003B5C 100%);
}

/* ---------- Card body ---------- */

.latest-posts-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	padding: 0.7em 0.85em 0.85em 0.85em;
	flex: 1;
}

.latest-posts-card-title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

.latest-posts-card-title a,
.latest-posts-card-title a:visited {
	color: var(--labki-text, #2c2c2c);
	text-decoration: none;
}

.latest-posts-card-title a:hover {
	text-decoration: underline;
}

.latest-posts-card-date {
	font-size: 0.8rem;
	color: var(--labki-text-muted, #5a6a7a);
	line-height: 1.4;
}

/* Teaser — clamped at 2 lines (compact landing surface). At
   line-height 1.5 and 0.88rem, 3em ≈ 2 lines. */
.latest-posts-card-description {
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--labki-text, #2c2c2c);
	max-height: 3em;
	overflow: hidden;
}

/* ---------- See-all footer ---------- */

.latest-posts-see-all {
	margin: 10px 0 0;
	font-size: 0.88em;
	text-align: right;
}

.latest-posts-see-all a {
	color: var(--labki-text-muted, #5a6a7a);
}

.latest-posts-see-all a:hover {
	color: var(--labki-accent, #2774AE);
}

/* ---------- Empty state ---------- */

.latest-posts-empty {
	padding: 14px 12px;
	color: var(--labki-text-muted, #5a6a7a);
	font-style: italic;
	text-align: center;
	border: 1px dashed var(--labki-border, #d8dde3);
	border-radius: 4px;
	background: var(--labki-bg-subtle, #f8f9fa);
	grid-column: 1 / -1;
}