/* components/social-feed.css — split from theme.css */
.social-feed {
	--social-feed-width: min( 100%, 44rem );
}

.social-feed-hero {
	max-width: var( --social-feed-width );
	padding-bottom: clamp( 1.75rem, 4vw, 2.75rem );
}

.social-feed-hero h1 {
	max-width: 11ch;
}

.social-feed-shell {
	max-width: var( --social-feed-width );
}

.social-feed-stream {
	position: relative;
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0 0 0 1.1rem;
	list-style: none;
}

.social-feed-stream::before {
	position: absolute;
	top: 0.9rem;
	bottom: 0.9rem;
	left: 0.28rem;
	width: 2px;
	background: repeating-linear-gradient(
		to bottom,
		var( --line ) 0 0.55rem,
		transparent 0.55rem 0.95rem
	);
	content: "";
	opacity: 0.82;
}

.social-feed-post {
	position: relative;
	display: grid;
	gap: 0.85rem;
	margin: 0;
	padding: clamp( 1rem, 3vw, 1.35rem );
	border: var( --card-border-width, 1px ) solid var( --card-border );
	border-radius: var( --card-radius );
	background: var( --glass-strong );
	box-shadow: 0.28rem 0.28rem 0 var( --shadow-ink );
}

.social-feed-post::before {
	position: absolute;
	top: 1.35rem;
	left: -1.52rem;
	width: 0.8rem;
	height: 0.8rem;
	border: var( --card-border-width ) solid var( --stroke-strong );
	border-radius: 999px;
	background: var( --highlight );
	box-shadow: 0.1rem 0.1rem 0 var( --shadow-ink );
	content: "";
}

.social-feed-stream > .wp-block-post:nth-child( 3n + 2 ) .social-feed-post::before {
	background: var( --coral );
}

.social-feed-stream > .wp-block-post:nth-child( 3n + 3 ) .social-feed-post::before {
	background: var( --accent );
}

.social-feed-post__header,
.social-feed-post__footer {
	display: flex;
	align-items: center;
	gap: 0.45rem 0.8rem;
	color: var( --muted );
	font-size: 0.86rem;
	font-weight: 650;
	line-height: 1.35;
}

.social-feed-post__header {
	justify-content: space-between;
}

.social-feed-post__header .wp-block-post-author {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	margin: 0;
	gap: 0.55rem;
}

.social-feed-post__header .wp-block-post-author__avatar {
	margin: 0;
}

.social-feed-post__header .avatar {
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	border: var( --card-border-width ) solid var( --icon-ring );
	border-radius: 999px;
	background: var( --surface );
	box-shadow: 0.12rem 0.12rem 0 var( --shadow-ink );
}

.social-feed-post__header .wp-block-post-author__name {
	color: var( --ink );
	font-weight: 850;
	text-decoration: none;
}

.social-feed-post__header .wp-block-post-author__name:hover,
.social-feed-post__header .wp-block-post-author__name:focus-visible {
	color: var( --accent-rose );
}

.social-feed-post__header .wp-block-post-date {
	margin-left: auto;
	white-space: nowrap;
}

.social-feed-post__header .wp-block-post-date a {
	color: var( --muted );
	text-decoration: none;
}

.social-feed-post__header .wp-block-post-date a:hover,
.social-feed-post__header .wp-block-post-date a:focus-visible {
	color: var( --accent-strong );
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.social-feed-post__title {
	margin: 0;
	font-size: clamp( 1.2rem, 2vw, 1.55rem );
	line-height: 1.15;
}

.social-feed-post__title a {
	color: var( --ink );
	text-decoration: none;
}

.social-feed-post__title a:hover,
.social-feed-post__title a:focus-visible {
	color: var( --accent-rose );
}

.social-feed-post__content {
	margin: 0;
	color: var( --ink );
	font-size: 1.05rem;
	line-height: 1.68;
}

.social-feed-post__content .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.social-feed-post__content .wp-block-post-excerpt__more-text {
	margin: 0.8rem 0 0;
}

.social-feed-post__content .wp-block-post-excerpt__more-link {
	color: var( --accent-strong );
	font-size: 0.92rem;
	font-weight: 850;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.social-feed-post__image {
	margin: 0;
}

.social-feed-post__image img {
	display: block;
	width: 100%;
	max-height: 30rem;
	border: var( --card-border-width ) solid var( --stroke-strong );
	border-radius: var( --radius-sm );
	box-shadow: 0.18rem 0.18rem 0 var( --shadow-ink );
	object-fit: cover;
}

.social-feed-post__footer {
	padding-top: 0.15rem;
	border-top: 1px dashed color-mix( in srgb, var( --line ) 55%, transparent );
}

.social-feed-post__footer .wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0;
}

.social-feed-post__footer .wp-block-post-terms__prefix,
.social-feed-post__footer .wp-block-post-terms__separator {
	color: var( --muted );
}

.social-feed-post__footer a {
	color: var( --accent-strong );
	font-weight: 750;
	text-decoration: none;
}

.social-feed-post__footer a:hover,
.social-feed-post__footer a:focus-visible {
	color: var( --accent-rose );
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.social-feed-pagination {
	margin-top: 2rem;
}