Template:Category/Post/styles.css

/* TemplateStyles for {{Category/Post}} — blog/news-style post
   masthead: hero image, Type · Date kicker, author byline, and a
   description standfirst. Shares the kicker/byline/lead idiom with
   {{Category/Document}}/styles.css but adds the hero and uses its
   own .post-* class space so the two mastheads don't couple.

   Sanitizer constraints (MW 1.44.5 / css-sanitizer 5.5.0): var() is
   accepted in `background`, `color`, and the `border` shorthand only;
   geometry stays literal. The modern `aspect-ratio` property is
   rejected (lands in 5.6+), so the hero uses the padding-bottom hack
   (height: 0 + padding-bottom: 75% for 4:3). */

.post-masthead {
	margin: 0 0 1.5em 0;
}

/* ---------- Hero ----------

   A compact card floated to the top-right, with the kicker/byline/lead
   and the post body wrapping down its left side (magazine style). The
   float is intentionally left uncleared so it influences the body that
   the dispatcher renders after this masthead, not just the masthead's
   own text — same wrap behavior as a [[File:...|right]] thumbnail.
   Resize via the `width` on .post-hero; `max-width` keeps it from
   eating the column on mid-width screens.

   The 4:3 ratio is held by the inner .post-hero-frame via the
   padding-bottom hack (the modern `aspect-ratio` property is rejected
   by css-sanitizer 5.5.0). The wrapper is required: percentage padding
   resolves against the *containing block's* width, so the frame must
   sit inside the fixed-width .post-hero for the ratio to track the
   card width rather than the full column. 4:3 matches the Has card
   image recommended source, so a 4:3 upload shows uncropped;
   object-fit: cover crops only off-ratio uploads. */
.post-hero {
	float: right;
	width: 400px;
	max-width: 50%;
	overflow: hidden;
	border-radius: 8px;
	margin: 0.2em 0 1em 1.5em;
}

.post-hero-frame {
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 75%;
}

.post-hero-frame img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* On narrow screens the float would crush the wrapping text into an
   unreadable column, so drop the float and let the hero stack full
   width above the text. */
@media (max-width: 600px) {
	.post-hero {
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 0 0 1.1em 0;
	}
}

/* ---------- Kicker (Type · Date) ---------- */

.post-kicker {
	color: var(--labki-text-muted, #5a6a7a);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.4em;
}

.post-kicker .post-type {
	color: var(--labki-accent, #2774AE);
	font-weight: 600;
}

/* ---------- Byline ---------- */

.post-byline {
	font-size: 1rem;
	color: var(--labki-text, #2c2c2c);
	margin-bottom: 0.75em;
}

/* ---------- Standfirst / lead ---------- */

.post-lead {
	font-size: 1.1rem;
	line-height: 1.55;
	color: var(--labki-text, #2c2c2c);
	margin: 0.6em 0;
	padding: 0.2em 0 0.2em 1em;
	border-left: 3px solid var(--labki-accent, #2774AE);
}

/* ---------- Comments / discussion footer ----------

   Rendered by {{Category/Post/footer}} at the bottom of a post. The
   Talk page (DiscussionTools) is transcluded read-only into
   .post-discussion-thread; the box is height-capped so a long thread
   scrolls within it rather than dominating the post. Geometry stays
   literal per the css-sanitizer constraints noted at the top. */
.post-discussion {
	clear: both;
	margin-top: 2em;
	padding-top: 0.3em;
	border-top: 1px solid var(--labki-border, #d8dde2);
}

.post-discussion-thread {
	max-height: 480px;
	overflow-y: auto;
	padding: 0.4em 1em;
	border: 1px solid var(--labki-border, #d8dde2);
	border-radius: 8px;
	background: var(--labki-bg-subtle, #f4f6f8);
}

/* The transcluded Talk page is a read-only preview, so drop the
   per-heading [edit] links MediaWiki adds to transcluded sections —
   replying happens on the Talk page, not here. */
.post-discussion-thread .mw-editsection {
	display: none;
}

/* Talk topics come through as page-level <h2>/<h3>. Inside the
   comments box they read better as light thread titles than as full
   section headings, so drop the heavy underline and trim the size. */
.post-discussion-thread h2,
.post-discussion-thread h3 {
	font-size: 1.05rem;
	font-weight: 600;
	border-bottom: 0;
	margin: 0.9em 0 0.3em 0;
	padding: 0;
}

.post-discussion-thread h2:first-child,
.post-discussion-thread h3:first-child {
	margin-top: 0.2em;
}

.post-discussion-more {
	margin-top: 0.7em;
	font-size: 0.95rem;
}

.post-discussion-empty {
	padding: 1em 1.2em;
	color: var(--labki-text-muted, #5a6a7a);
	font-style: italic;
	border: 1px dashed var(--labki-border, #d8dde2);
	border-radius: 8px;
	background: var(--labki-bg-subtle, #f4f6f8);
}