/*
 * Frontend styles for the TYPO3 extension "socialnews".
 *
 * Theme: DARC-inspired (darc.de) — navy #273D5E + light blue #2AA6DA,
 * Open Sans, white cards with soft shadow and colored left accent,
 * timeline stream with dots, pill filters/badges — modernized.
 * Fully themable via custom properties. No framework, no external assets.
 * GPL-2.0-or-later
 */

.socialnews {
	--sn-color-text: #273d5e;
	--sn-color-muted: #5f7189;
	--sn-color-accent: #2aa6da;
	--sn-color-accent-dark: #1e7fae;
	--sn-color-accent-contrast: #ffffff;
	--sn-color-navy: #273d5e;
	--sn-color-news: #273d5e;
	--sn-color-status: #2aa6da;
	--sn-color-border: #dbe3ec;
	--sn-color-surface: #ffffff;
	--sn-color-surface-alt: #f2f6fa;
	--sn-radius: 6px;
	--sn-shadow: 0 2px 10px -4px rgba(39, 61, 94, 0.35);
	--sn-shadow-hover: 0 6px 18px -6px rgba(39, 61, 94, 0.35);
	--sn-gap: 1.5rem;
	/* The stream follows the content column of the site. A fixed cap made
	   the plugin look narrower than everything around it (notice boxes,
	   link lists), which reads like a broken layout rather than a design
	   decision. Set a length here to cap it again. */
	--sn-maxwidth: none;
	/* The detail view keeps a comfortable reading measure for its body
	   text — set to "none" to let articles fill the column as well. */
	--sn-detail-maxwidth: 46rem;
	font-family: "Open Sans", Verdana, -apple-system, "Segoe UI", sans-serif;
	color: var(--sn-color-text);
	line-height: 1.6;
}

.socialnews a {
	color: var(--sn-color-accent);
}

.socialnews a:hover,
.socialnews a:focus {
	color: var(--sn-color-accent-dark);
}

.socialnews img {
	max-width: 100%;
	height: auto;
}

/* Mastodon markup helpers (kept by the sanitizer) */
.socialnews .invisible {
	display: none;
}

.socialnews .ellipsis::after {
	content: '\2026';
}

.socialnews img.emoji {
	width: 1.2em;
	height: 1.2em;
	vertical-align: -0.2em;
	display: inline-block;
}

/* ---------- badges (type pills, DARC style) ---------- */

.socialnews-badge {
	display: inline-block;
	border-radius: 999px;
	padding: 0.1rem 0.65rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	vertical-align: middle;
	line-height: 1.5;
}

.socialnews-badge--news {
	background: var(--sn-color-news);
}

.socialnews-badge--status {
	background: var(--sn-color-status);
}

.socialnews-badge--boost {
	background: var(--sn-color-muted);
}

.socialnews-badge--top {
	background: #fff;
	color: var(--sn-color-navy);
	border: 1px solid var(--sn-color-navy);
}

/* ---------- stream ---------- */

.socialnews-stream__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sn-gap);
}

.socialnews-stream--cards .socialnews-stream__list {
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
	align-items: start;
}

/* list layout = DARC timeline: vertical line + dots */

.socialnews-stream--list .socialnews-stream__list {
	max-width: var(--sn-maxwidth);
	position: relative;
	padding-left: 2rem;
}

.socialnews-stream--list .socialnews-stream__list::before {
	content: '';
	position: absolute;
	left: 8px;
	top: 10px;
	bottom: 10px;
	width: 3px;
	border-radius: 2px;
	background: var(--sn-color-accent);
	opacity: 0.45;
}

.socialnews-stream--list .socialnews-stream__item {
	position: relative;
}

.socialnews-stream--list .socialnews-stream__item::before {
	content: '';
	position: absolute;
	left: calc(-2rem + 2.5px);
	top: 1.1rem;
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--sn-color-accent);
	z-index: 1;
}

.socialnews-stream--list .socialnews-stream__item--news::before {
	border-color: var(--sn-color-news);
}

.socialnews-stream__empty {
	color: var(--sn-color-muted);
}

/* filter as pills (like the DARC newsletter filter) */

.socialnews-stream__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	margin: 0 0 var(--sn-gap);
}

.socialnews-stream__filter-label {
	display: inline-block;
	background: var(--sn-color-accent);
	color: var(--sn-color-accent-contrast);
	border-radius: 999px;
	padding: 0.35rem 1.1rem;
	font-weight: 600;
	font-size: 0.9rem;
}

.socialnews-stream__filter-label strong {
	font-weight: 700;
}

.socialnews-stream__filter-reset {
	display: inline-block;
	background: #fff;
	border: 1px solid var(--sn-color-border);
	border-radius: 999px;
	padding: 0.35rem 1.1rem;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--sn-color-navy);
}

.socialnews-stream__filter-reset:hover,
.socialnews-stream__filter-reset:focus {
	border-color: var(--sn-color-accent);
	color: var(--sn-color-accent-dark);
}

/* ---------- cards ---------- */

.socialnews-card {
	background: var(--sn-color-surface);
	border: 1px solid var(--sn-color-border);
	border-left: 4px solid var(--sn-color-accent);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow);
	overflow: hidden;
	transition: box-shadow 0.15s ease;
}

.socialnews-card:hover {
	box-shadow: var(--sn-shadow-hover);
}

.socialnews-card--news {
	border-left-color: var(--sn-color-news);
}

.socialnews-card--status {
	border-left-color: var(--sn-color-status);
}

.socialnews-card--top {
	border-left-width: 6px;
}

/* unified media block — news images and status media get the IDENTICAL
   treatment (inset, rounded, same max height): one visual language */

.socialnews-card__media {
	display: block;
	margin: 0.85rem 0 0.35rem;
	border-radius: var(--sn-radius);
	overflow: hidden;
	text-decoration: none;
	text-align: center;
	background: #eef2f6;
}

/* never crop: the image scales DOWN to the height cap instead of being
   cover-cropped — portrait shots sit centered on the soft backdrop */
.socialnews-card__image {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 420px;
	vertical-align: middle;
	transition: transform 0.2s ease;
}

.socialnews-card__media:hover .socialnews-card__image,
.socialnews-card__media:focus .socialnews-card__image {
	transform: scale(1.02);
}

/* news without image: slim DARC gradient banner in the same position */

.socialnews-card--placeholder .socialnews-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 130px;
	background: linear-gradient(135deg, var(--sn-color-navy) 0%, var(--sn-color-accent) 100%);
	color: rgba(255, 255, 255, 0.85);
}

.socialnews-card__placeholdericon {
	display: block;
	opacity: 0.9;
	transition: transform 0.2s ease;
}

.socialnews-card__media:hover .socialnews-card__placeholdericon,
.socialnews-card__media:focus .socialnews-card__placeholdericon {
	transform: scale(1.1);
}

.socialnews-card__body {
	padding: 1rem 1.25rem 1.15rem;
}

.socialnews-card__meta {
	margin: 0 0 0.45rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

.socialnews-card__date,
.socialnews-status__time time,
.socialnews-detail__meta time {
	color: var(--sn-color-accent-dark);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.socialnews-card__title {
	margin: 0 0 0.4rem;
	font-size: 1.2rem;
	line-height: 1.4;
}

/* !important: site themes color content links with high-specificity
   selectors — headlines must stay uniform navy for news AND statuses */
.socialnews-card__title a {
	text-decoration: none;
	color: var(--sn-color-navy) !important;
	font-weight: 700;
}

.socialnews-card__title a:hover,
.socialnews-card__title a:focus {
	color: var(--sn-color-accent-dark) !important;
	text-decoration: underline;
}

.socialnews-card__teaser {
	margin: 0 0 0.75rem;
	color: var(--sn-color-muted);
}

.socialnews-card__morewrap {
	margin: 0.6rem 0 0;
}

.socialnews-card__more {
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
}

.socialnews-card__more::after {
	content: ' \2192';
}

/* ---------- status ---------- */

.socialnews-card--status .socialnews-card__body,
.socialnews-card--status {
	padding: 0;
}

.socialnews-card--status {
	padding: 1rem 1.25rem 1.1rem;
}

.socialnews-status__header {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.7rem;
}

/* fixed dimensions in CSS — site themes with generic rules like
   img { width: 100%; height: auto; } must never blow avatars up */
.socialnews .socialnews-status__avatar {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 50%;
	flex: 0 0 auto;
	border: 2px solid var(--sn-color-surface-alt);
}

.socialnews-status__authorwrap {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 0.1rem;
}

.socialnews-status__author {
	font-weight: 700;
	color: var(--sn-color-navy);
}

.socialnews-status__acct {
	color: var(--sn-color-muted);
	font-size: 0.82rem;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.socialnews-status__time {
	margin-left: auto;
	text-decoration: none;
	white-space: nowrap;
	align-self: flex-start;
}

.socialnews-status__headline {
	margin: 0 0 0.5rem;
}

.socialnews-status__headline a {
	color: var(--sn-color-navy);
	font-weight: 700;
	text-decoration: none;
}

.socialnews-status__headline a:hover,
.socialnews-status__headline a:focus {
	color: var(--sn-color-accent-dark);
	text-decoration: underline;
}

.socialnews-status__content p {
	margin: 0 0 0.7rem !important;
}

.socialnews-status__content p:last-child {
	margin-bottom: 0 !important;
}

.socialnews-status__footer {
	margin-top: 0.85rem;
	font-size: 0.9rem;
}

.socialnews-status__permalink {
	font-weight: 700;
	text-decoration: none;
}

.socialnews-status__permalink::after {
	content: ' \2192';
}

/* content warnings & sensitive media — native <details>, works without JS */

.socialnews-cw,
.socialnews-sensitive {
	border: 1px solid var(--sn-color-border);
	border-left: 3px solid var(--sn-color-accent);
	border-radius: var(--sn-radius);
	padding: 0.55rem 0.9rem;
	margin: 0 0 0.6rem;
	background: var(--sn-color-surface-alt);
}

.socialnews-cw__summary,
.socialnews-sensitive__summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--sn-color-navy);
}

.socialnews-cw__hint {
	font-weight: 400;
	color: var(--sn-color-muted);
	font-size: 0.85rem;
	margin-left: 0.4rem;
}

.socialnews-cw[open] > .socialnews-cw__summary,
.socialnews-sensitive[open] > .socialnews-sensitive__summary {
	margin-bottom: 0.6rem;
}

/* blur fill: the letterbox areas around a contained image show a blurred,
   zoomed cover version of the image itself (the Mastodon/Twitter pattern)
   instead of flat gray bars. The element carries the image as inline
   background-image; the ::before layer blurs it, the real content sits
   above. Browsers without filter support show the sharp cover image —
   still better than gray. */

.socialnews .socialnews-blurfill {
	display: block;
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}

.socialnews .socialnews-blurfill::before {
	content: '';
	position: absolute;
	top: -10%;
	left: -10%;
	right: -10%;
	bottom: -10%;
	background: inherit;
	background-size: cover;
	background-position: center;
	/* the source is a ~40px thumbnail: upscaling already smooths it, so a
	   small radius suffices — a large one only costs GPU paint time */
	filter: blur(8px);
}

.socialnews .socialnews-blurfill > * {
	position: relative;
}

/* status media grid */

.socialnews-media {
	display: grid;
	gap: 4px;
	border-radius: var(--sn-radius);
	overflow: hidden;
	margin: 0.85rem 0 0.35rem;
}

/* single status image: same cap as the news card image */
/* never crop status media — social posts carry information IN the image
   (flyers, screenshots, tables). Single images scale down to the height
   cap like the news cards; grid tiles get a fixed height and letterbox
   the full image on the soft backdrop instead of cover-cropping.
   The ".socialnews" prefix is required: the generic ".socialnews img"
   reset (height: auto) would out-rank plain single-class selectors. */

.socialnews-media--count2,
.socialnews-media--count4 {
	grid-template-columns: 1fr 1fr;
}

.socialnews-media--count3 {
	grid-template-columns: 1fr 1fr 1fr;
}

.socialnews .socialnews-media__item {
	margin: 0;
	background: #eef2f6;
}

.socialnews .socialnews-media__image,
.socialnews .socialnews-media__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.socialnews .socialnews-media--count2 .socialnews-media__item,
.socialnews .socialnews-media--count4 .socialnews-media__item {
	height: 240px;
}

.socialnews .socialnews-media--count3 .socialnews-media__item {
	height: 190px;
}

.socialnews-media--count1 {
	/* single full-width track — the implicit auto column would shrink to
	   the image width and stick to the left */
	grid-template-columns: 1fr;
}

.socialnews .socialnews-media--count1 .socialnews-media__item {
	text-align: center;
	height: auto;
}

.socialnews .socialnews-media--count1 .socialnews-media__image {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 420px;
	vertical-align: middle;
}

.socialnews .socialnews-media--count1 .socialnews-media__video {
	width: 100%;
	height: auto;
	max-height: 420px;
}

/* status images open in the same PhotoSwipe lightbox as the detail
   gallery (multi-image posts become a swipeable gallery) — but inside
   the media tiles the gallery link loses its card chrome */
.socialnews .socialnews-media .socialnews-gallery__link {
	display: block;
	height: 100%;
	box-shadow: none;
	border-radius: 0;
	background: none;
}

.socialnews .socialnews-media--count1 .socialnews-gallery__link {
	height: auto;
	text-align: center;
}

/* ---------- tags ---------- */

.socialnews-tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.7rem 0 0;
	padding: 0;
}

.socialnews-tags__link,
.socialnews-tag {
	display: inline-block;
	background: var(--sn-color-surface-alt);
	border: 1px solid var(--sn-color-border);
	border-radius: 999px;
	padding: 0.12rem 0.75rem;
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--sn-color-accent-dark);
}

.socialnews-tags__link:hover,
.socialnews-tags__link:focus,
.socialnews-tag--link:hover {
	background: var(--sn-color-accent);
	border-color: var(--sn-color-accent);
	color: var(--sn-color-accent-contrast);
}

/* hashtags INSIDE flowing status text: compact variant so the pills
   don't inflate the line height */
.socialnews-status__content .socialnews-tag {
	padding: 0 0.5rem;
	font-size: 0.85em;
	font-weight: 600;
	vertical-align: baseline;
}

/* ---------- newsletter ---------- */

/* Secondary to the filled "Newsletter" pill next to it: same shape, outlined,
   so the pair reads as "kind of post" + "who it went to" rather than as two
   competing labels. Audience names are proper nouns, so no uppercasing. */
.socialnews-badge--audience {
	background: transparent;
	color: var(--sn-color-navy);
	border: 1px solid var(--sn-color-border);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.72rem;
}

.socialnews-badge--newsletter {
	background: var(--sn-color-navy);
	color: #fff;
}

.socialnews-card--newsletter {
	border-left: 3px solid var(--sn-color-navy);
}

/* A newsletter issue is mail, so it is presented as one: an envelope with
   Von/An/Gesendet/Betreff, then the message body. The header is a two column
   definition list — label column fixed, value column fluid — which collapses
   to stacked rows on narrow screens. */

.socialnews-mail {
	margin: 0 0 1.4rem;
	border: 1px solid var(--sn-color-border);
	border-radius: var(--sn-radius);
	background: var(--sn-color-surface);
	box-shadow: var(--sn-shadow);
	overflow: hidden;
}

.socialnews-mail__envelope {
	position: relative;
	padding: 1rem 1.1rem;
	background: var(--sn-color-surface-alt);
	border-bottom: 1px solid var(--sn-color-border);
}

.socialnews-mail__stamp {
	position: absolute;
	top: 0.85rem;
	right: 1rem;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--sn-color-navy);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.socialnews-mail__fields {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.28rem 0.9rem;
	margin: 0;
	padding-right: 7rem;
	font-size: 0.94em;
	line-height: 1.45;
}

.socialnews-mail__fields dt {
	margin: 0;
	font-weight: 600;
	color: var(--sn-color-muted, #5a6b80);
}

.socialnews-mail__fields dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: break-word;
}

.socialnews-mail__from {
	font-variant-numeric: tabular-nums;
}

.socialnews-mail__subject {
	font-weight: 700;
	color: var(--sn-color-navy);
}

/* the inbox preview line: what a reader would have seen before opening */
.socialnews-mail__preview {
	margin: 0 !important;
	padding: 0.85rem 1.1rem;
	color: var(--sn-color-muted, #5a6b80);
	font-style: italic;
}

@media (max-width: 34rem) {
	.socialnews-mail__fields {
		grid-template-columns: 1fr;
		gap: 0 0.9rem;
		padding-right: 0;
	}

	.socialnews-mail__fields dd {
		margin-bottom: 0.5rem;
	}

	.socialnews-mail__stamp {
		position: static;
		display: inline-block;
		margin-bottom: 0.6rem;
	}
}

/* ---------- newsletter archive (layout "archive") ---------- */

.socialnews-stream--archive .socialnews-archive__year + .socialnews-archive__year {
	margin-top: 2rem;
}

.socialnews-archive__heading {
	margin: 0 0 0.6rem;
	padding-bottom: 0.3rem;
	border-bottom: 2px solid var(--sn-color-border);
	font-size: 1.15em;
	color: var(--sn-color-navy);
}

.socialnews-archive__list {
	list-style: none !important;
	margin: 0;
	padding: 0 !important;
}

.socialnews-archive__item {
	margin: 0;
	list-style: none !important;
	border-bottom: 1px solid var(--sn-color-border);
}

.socialnews-archive__entry {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	flex-wrap: wrap;
	padding: 0.7rem 0;
}

.socialnews-archive__date {
	flex: 0 0 9.5rem;
	font-variant-numeric: tabular-nums;
	color: var(--sn-color-muted, #5a6b80);
	font-size: 0.92em;
}

.socialnews-archive__body {
	flex: 1 1 18rem;
	min-width: 0;
}

.socialnews-archive__title {
	margin: 0;
	font-size: 1.02em;
	line-height: 1.4;
}

.socialnews-archive__teaser {
	margin: 0.2rem 0 0;
	color: var(--sn-color-muted, #5a6b80);
	font-size: 0.95em;
}

.socialnews-archive__audience {
	flex: 0 0 auto;
	padding: 0.1rem 0.6rem;
	border: 1px solid var(--sn-color-border);
	border-radius: 999px;
	font-size: 0.82em;
	color: var(--sn-color-muted, #5a6b80);
}

@media (max-width: 34rem) {
	.socialnews-archive__date {
		flex-basis: 100%;
	}
}

/* ---------- detail ---------- */

.socialnews-detail {
	max-width: var(--sn-detail-maxwidth);
}

/* only rendered when settings.hideContentTitle = 0 — by default the
   article title lives solely in the site's page header (PageTitleHook).
   margins carry !important: the live theme zeroes h1 margins. */
.socialnews-detail__title {
	margin: 0 0 0.9rem !important;
	line-height: 1.3 !important;
	color: var(--sn-color-navy);
	font-weight: 700;
}

.socialnews-detail__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 1.4rem !important;
}

/* lead paragraph as a tinted intro box — body-text size (px on purpose:
   rem depends on the site's root font-size), but visually clearly set
   apart from the article body. !important guards against theme rules
   for intro paragraphs. */
.socialnews-detail__teaser {
	font-size: 17px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1.6 !important;
	color: #33475e !important;
	margin: 0 0 1.6rem !important;
	padding: 14px 18px !important;
	background: #eef5fb !important;
	border-left: 4px solid var(--sn-color-accent) !important;
	border-radius: 0 var(--sn-radius) var(--sn-radius) 0;
}

.socialnews-detail__body {
	font-size: 1rem;
	line-height: 1.7;
}

/* The live theme carries a bare "p { font-size: 14px; line-height: 1.5;
   margin-bottom: 1px !important }". Inside our rendered article that produced
   two different type sizes on one page — paragraphs at 14px, table cells and
   list items at 16px, because the rule only targets p — and no spacing at all
   between paragraphs. Hence the explicit reset, and hence the !important: the
   declaration we are overriding carries one itself. */
.socialnews-detail__body p,
.socialnews-detail__body li,
.socialnews-detail__body td,
.socialnews-detail__body th {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.socialnews-detail__body p {
	margin: 0 0 1.1em !important;
}

.socialnews-detail__body > *:last-child {
	margin-bottom: 0 !important;
}

.socialnews-detail__body ul,
.socialnews-detail__body ol {
	margin: 0 0 1.1em;
	padding-left: 1.4em;
}

.socialnews-detail__body li {
	margin: 0 0 0.3em;
}

.socialnews-detail__body h2,
.socialnews-detail__body h3,
.socialnews-detail__body h4 {
	color: var(--sn-color-navy);
	line-height: 1.3;
	/* generous space above, tight below: the heading belongs to the text
	   that follows it, not to the paragraph it trails */
	margin: 1.8em 0 0.45em !important;
}

.socialnews-detail__body > h2:first-child,
.socialnews-detail__body > h3:first-child,
.socialnews-detail__body > h4:first-child {
	margin-top: 0 !important;
}

.socialnews-detail__body h2 {
	font-size: 1.28em;
}

.socialnews-detail__body h3 {
	font-size: 1.12em;
}

/* No uppercase here: "###" demotes to h4, and German section headings
   ("Früher anreisen und beim Aufbau helfen?") turn into shouting. */
.socialnews-detail__body h4 {
	font-size: 1.02em;
}


.socialnews-detail__body blockquote {
	border-left: 3px solid var(--sn-color-accent);
	margin: 1em 0;
	padding: 0.2em 0 0.2em 1em;
	color: var(--sn-color-muted);
	background: var(--sn-color-surface-alt);
	border-radius: 0 var(--sn-radius) var(--sn-radius) 0;
}

.socialnews-detail__body pre {
	background: var(--sn-color-surface-alt);
	padding: 0.8rem 1rem;
	overflow-x: auto;
	border-radius: var(--sn-radius);
}

.socialnews-detail__body table {
	border-collapse: collapse;
	width: 100%;
	margin: 1em 0;
}

.socialnews-detail__body th {
	background: var(--sn-color-navy);
	color: #fff;
	border: 1px solid var(--sn-color-navy);
	padding: 0.45rem 0.65rem;
	text-align: left;
}

.socialnews-detail__body td {
	border: 1px solid var(--sn-color-border);
	padding: 0.45rem 0.65rem;
	text-align: left;
}

.socialnews-body-image {
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow);
	margin: 1rem 0;
}

.socialnews-detail__subheadline {
	font-size: 1.15rem;
	color: var(--sn-color-navy);
}

.socialnews-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.socialnews-links__item {
	border: 1px solid var(--sn-color-border);
	border-left: 3px solid var(--sn-color-accent);
	border-radius: var(--sn-radius);
	padding: 0.6rem 0.95rem;
	background: var(--sn-color-surface);
	box-shadow: var(--sn-shadow);
}

.socialnews-links__link {
	font-weight: 700;
	text-decoration: none;
}

.socialnews-links__link::after {
	content: ' \2192';
}

.socialnews-links__description {
	margin: 0.2rem 0 0;
	color: var(--sn-color-muted);
	font-size: 0.9rem;
}

.socialnews-detail__mastodon {
	margin: 1.5rem 0;
}

.socialnews-button {
	display: inline-block;
	background: var(--sn-color-accent);
	color: var(--sn-color-accent-contrast);
	border-radius: 4px;
	padding: 0.55rem 1.3rem;
	text-decoration: none;
	font-weight: 700;
	box-shadow: var(--sn-shadow);
}

.socialnews-button:hover,
.socialnews-button:focus {
	background: var(--sn-color-accent-dark);
}

.socialnews .socialnews-button {
	color: var(--sn-color-accent-contrast);
}

.socialnews-detail__back {
	margin-top: 2rem;
}

.socialnews-detail__back a {
	font-weight: 600;
	text-decoration: none;
}

/* ---------- gallery ---------- */

.socialnews-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: 0.6rem;
	margin: 1.5rem 0 1.75rem;
}

/* a single gallery image is the article hero — full width, same visual
   language as the stream card media. Like there: scale down instead of
   cropping, centered on the soft backdrop. Multi-image GRID thumbnails
   keep their cover-crop (the lightbox shows the full image). */
.socialnews-gallery__item:only-child {
	grid-column: 1 / -1;
}

.socialnews-gallery__item:only-child .socialnews-gallery__link {
	text-align: center;
	background: #eef2f6;
}

.socialnews-gallery__item:only-child .socialnews-gallery__thumb {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 480px;
	object-fit: contain;
	vertical-align: middle;
}

.socialnews-gallery__item {
	margin: 0;
}

.socialnews-gallery__link {
	display: block;
	position: relative;
	border-radius: var(--sn-radius);
	overflow: hidden;
	box-shadow: var(--sn-shadow);
	cursor: zoom-in;
}

/* zoom badge — signals that the image opens a lightbox (inline SVG data
   URI, no external request) */
.socialnews-gallery__link::after {
	content: '';
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(23, 37, 56, 0.55) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2.2'%20stroke-linecap='round'%3E%3Ccircle%20cx='10.5'%20cy='10.5'%20r='6.5'/%3E%3Cline%20x1='15.5'%20y1='15.5'%20x2='20.5'%20y2='20.5'/%3E%3Cline%20x1='10.5'%20y1='8'%20x2='10.5'%20y2='13'/%3E%3Cline%20x1='8'%20y1='10.5'%20x2='13'%20y2='10.5'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
	opacity: 0.85;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

.socialnews-gallery__link:hover::after,
.socialnews-gallery__link:focus::after {
	opacity: 1;
}

.socialnews-gallery__thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease;
}

.socialnews-gallery__link:hover .socialnews-gallery__thumb,
.socialnews-gallery__link:focus .socialnews-gallery__thumb {
	transform: scale(1.04);
}

.socialnews-gallery__caption {
	font-size: 0.85rem;
	color: var(--sn-color-muted);
	padding: 0.3rem 0.1rem 0;
}

/* ---------- latest widget ---------- */

.socialnews-latest__headline {
	color: var(--sn-color-navy);
}

.socialnews-latest__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.socialnews-latest__item {
	display: flex;
	justify-content: space-between;
	gap: 0.8rem;
	align-items: baseline;
	border-bottom: 1px solid var(--sn-color-surface-alt);
	padding-bottom: 0.5rem;
}

.socialnews-latest__link {
	text-decoration: none;
	min-width: 0;
	font-weight: 600;
	color: var(--sn-color-navy);
}

.socialnews-latest__link:hover,
.socialnews-latest__link:focus {
	color: var(--sn-color-accent-dark);
}

.socialnews-latest__date {
	color: var(--sn-color-muted);
	font-size: 0.85rem;
	white-space: nowrap;
}

/* ---------- pagination (f:widget.paginate markup) ---------- */

/* the paginate widget renders core ul/li markup — !important is deliberate
   here: site themes style content lists with high-specificity selectors */
.socialnews .f3-widget-paginator {
	list-style: none !important;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	padding: 0 !important;
	margin: var(--sn-gap) 0 0;
}

.socialnews-stream--list .f3-widget-paginator {
	margin-left: 2rem;
}

.socialnews .f3-widget-paginator li {
	margin: 0;
	list-style: none !important;
}

/* a single page needs no pager — hide the lone "1" chip the core widget
   renders when everything fits on one page */
.socialnews .f3-widget-paginator li.current:only-child {
	display: none;
}

.socialnews .f3-widget-paginator li a,
.socialnews .f3-widget-paginator li.current {
	display: inline-block;
	padding: 0.3rem 0.85rem;
	border: 1px solid var(--sn-color-border);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	background: #fff;
	color: var(--sn-color-navy);
}

.socialnews .f3-widget-paginator li a:hover,
.socialnews .f3-widget-paginator li a:focus {
	border-color: var(--sn-color-accent);
	color: var(--sn-color-accent-dark);
}

.socialnews .f3-widget-paginator li.current {
	background: var(--sn-color-accent);
	border-color: var(--sn-color-accent);
	color: var(--sn-color-accent-contrast);
}

/* ---------- small screens ---------- */

@media (max-width: 30rem) {
	.socialnews-stream--list .socialnews-stream__list {
		padding-left: 1.4rem;
	}

	.socialnews-stream--list .socialnews-stream__item::before {
		left: calc(-1.4rem + 1px);
	}

	.socialnews-status__header {
		flex-wrap: wrap;
	}

	.socialnews-status__time {
		margin-left: 0;
	}

	.socialnews-media--count3 {
		grid-template-columns: 1fr 1fr;
	}
}