/* Simple Bluesky Feed. Every rule is scoped to .sbf so it never touches the rest of your theme. */

.sbf {
	--sbf-bg: #ffffff;
	--sbf-fg: #0f1419;
	--sbf-muted: #66727f;
	--sbf-line: #e3e8ee;
	--sbf-soft: #f4f7fa;
	--sbf-accent: #1083fe;
	--sbf-accent-fg: #ffffff;
	--sbf-radius: 16px;
	--sbf-shadow: 0 1px 2px rgba(15, 20, 25, .04), 0 4px 16px rgba(15, 20, 25, .04);

	color: var(--sbf-fg);
	font-size: var(--sbf-size, 15px);
	line-height: 1.5;
	margin: 0 0 1.5em;
	-webkit-font-smoothing: antialiased;
}

.sbf--theme-dark {
	--sbf-bg: #161e27;
	--sbf-fg: #f1f3f5;
	--sbf-muted: #8d9bab;
	--sbf-line: #2a3644;
	--sbf-soft: #1e2833;
	--sbf-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

@media (prefers-color-scheme: dark) {
	.sbf--theme-auto {
		--sbf-bg: #161e27;
		--sbf-fg: #f1f3f5;
		--sbf-muted: #8d9bab;
		--sbf-line: #2a3644;
		--sbf-soft: #1e2833;
		--sbf-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	}
}

.sbf.sbf--shadow-none { --sbf-shadow: none; }
.sbf.sbf--shadow-strong { --sbf-shadow: 0 2px 6px rgba(15, 20, 25, .08), 0 12px 32px rgba(15, 20, 25, .14); }

.sbf *, .sbf *::before, .sbf *::after { box-sizing: border-box; }
.sbf a { color: inherit; text-decoration: none; box-shadow: none; }
.sbf a:focus-visible { outline: 2px solid var(--sbf-accent); outline-offset: 2px; border-radius: 6px; }
.sbf img { max-width: 100%; height: auto; display: block; border: 0; }

/* Header */
.sbf__header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}
.sbf__header .sbf__who { flex: 1; }

/* Header on a card: same colours as the posts, so it always has contrast. */
.sbf--header-card .sbf__header {
	background: var(--sbf-bg);
	border: 1px solid var(--sbf-line);
	border-radius: var(--sbf-radius);
	box-shadow: var(--sbf-shadow);
	padding: 14px 18px;
	margin-bottom: 12px;
}

/* Plain header: sits on your page, so it uses your theme's text colour. */
.sbf--header-plain .sbf__header { color: inherit; }
.sbf--header-plain .sbf__header .sbf__handle { color: inherit; opacity: .65; }
.sbf__header .sbf__name { font-size: 1.05em; }

.sbf__follow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--sbf-accent);
	color: var(--sbf-accent-fg) !important;
	font-weight: 600;
	font-size: .93em;
	white-space: nowrap;
	transition: filter .15s ease, transform .15s ease;
}
.sbf__follow:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Post list */
.sbf__posts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.sbf__posts > li { margin: 0; padding: 0; }
.sbf__posts > li::before, .sbf__posts > li::marker { content: none; }

.sbf--grid .sbf__posts {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	align-items: start;
}

.sbf__post {
	background: var(--sbf-bg);
	border: 1px solid var(--sbf-line);
	border-radius: var(--sbf-radius);
	box-shadow: var(--sbf-shadow);
	padding: 16px 18px 12px;
	transition: border-color .15s ease;
}
.sbf__post:hover { border-color: color-mix(in srgb, var(--sbf-accent) 35%, var(--sbf-line)); }

/* Compact (sidebar) */
.sbf--compact .sbf__posts {
	gap: 0;
	background: var(--sbf-bg);
	border: 1px solid var(--sbf-line);
	border-radius: var(--sbf-radius);
	box-shadow: var(--sbf-shadow);
	padding: 0 16px;
}
.sbf--compact .sbf__post {
	border: 0;
	border-bottom: 1px solid var(--sbf-line);
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	padding: 12px 0;
}
.sbf--compact .sbf__posts > li:last-child .sbf__post { border-bottom: 0; }
.sbf--compact .sbf__text { font-size: .93em; }
.sbf--compact.sbf--header-card .sbf__header { padding: 10px 12px; }

/* Author line */
.sbf__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
.sbf__who { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sbf__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.sbf__name:hover { text-decoration: underline; }
.sbf__handle { color: var(--sbf-muted); font-size: .9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbf__time { margin-left: auto; color: var(--sbf-muted); font-size: 13px; white-space: nowrap; }
.sbf__time:hover { text-decoration: underline; }

.sbf__avatar {
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
	background: var(--sbf-soft);
}
.sbf__avatar--blank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: var(--sbf-muted);
}

.sbf__reposted {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--sbf-muted);
	font-size: 13px;
	margin: 0 0 8px;
}

/* Text */
.sbf__text { white-space: normal; overflow-wrap: anywhere; word-break: normal; }
.sbf__text a { color: var(--sbf-accent); }
.sbf__text a:hover { text-decoration: underline; }

/* Images */
.sbf__images {
	display: grid;
	gap: 4px;
	margin-top: 12px;
	border-radius: calc(var(--sbf-radius) * .75);
	overflow: hidden;
}
.sbf__images--2, .sbf__images--4 { grid-template-columns: 1fr 1fr; }
.sbf__images--3 { grid-template-columns: 1fr 1fr; }
.sbf__images--3 a:first-child { grid-row: span 2; }
.sbf__images a { display: block; background: var(--sbf-soft); }
.sbf__images--1 img { width: 100%; max-height: 520px; object-fit: cover; }
.sbf__images:not(.sbf__images--1) img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.sbf__images--3 a:first-child img { aspect-ratio: auto; }

/* Video thumbnail */
.sbf__video { position: relative; display: block; margin-top: 12px; border-radius: calc(var(--sbf-radius) * .75); overflow: hidden; background: #000; }
.sbf__video img { width: 100%; max-height: 520px; object-fit: cover; opacity: .92; }
.sbf__play {
	position: absolute; inset: 0; margin: auto;
	width: 56px; height: 56px; border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	backdrop-filter: blur(4px);
}
.sbf__play::after {
	content: ""; position: absolute; left: 22px; top: 17px;
	border-style: solid; border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #fff;
}

/* Link card */
.sbf__card {
	display: block;
	margin-top: 12px;
	border: 1px solid var(--sbf-line);
	border-radius: calc(var(--sbf-radius) * .75);
	overflow: hidden;
	transition: background .15s ease;
}
.sbf__card:hover { background: var(--sbf-soft); }
.sbf__card img { width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; border-bottom: 1px solid var(--sbf-line); }
.sbf__card-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; }
.sbf__card-domain { color: var(--sbf-muted); font-size: 12px; }
.sbf__card-title { font-weight: 600; line-height: 1.3; }
.sbf__card-desc { color: var(--sbf-muted); font-size: 13px; }

/* Quote post */
.sbf__quote {
	display: block;
	margin-top: 12px;
	border: 1px solid var(--sbf-line);
	border-radius: calc(var(--sbf-radius) * .75);
	padding: 10px 12px;
	transition: background .15s ease;
}
.sbf__quote:hover { background: var(--sbf-soft); }
.sbf__quote-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 4px; min-width: 0; }
.sbf__quote-meta .sbf__handle { font-size: 13px; }
.sbf__quote-text { display: block; font-size: 14px; overflow-wrap: anywhere; }

/* Stats */
.sbf__stats { margin-top: 10px; }
.sbf__stats a { display: inline-flex; gap: 20px; color: var(--sbf-muted); font-size: 13px; }
.sbf__stats a:hover { color: var(--sbf-accent); }
.sbf__stats span { display: inline-flex; align-items: center; gap: 5px; }
.sbf__icon { flex-shrink: 0; }

.sbf__empty { color: var(--sbf-muted); }

/* Admin-only notice (visitors never see errors) */
.sbf-notice {
	border-left: 4px solid #d63638;
	background: #fcf0f1;
	color: #1d2327;
	padding: 10px 14px;
	font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.sbf * { transition: none !important; }
	.sbf__follow:hover { transform: none; }
}

/* ------------------------------------------------------------------
 * Carousel
 * ------------------------------------------------------------------ */
.sbf--carousel .sbf__posts {
	position: relative;
	display: flex;
	gap: 14px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 4px 0 12px;
	-webkit-overflow-scrolling: touch;
}
.sbf--carousel .sbf__posts::-webkit-scrollbar { display: none; }
.sbf--carousel .sbf__posts:focus-visible { outline: 2px solid var(--sbf-accent); outline-offset: 4px; border-radius: var(--sbf-radius); }

.sbf--carousel .sbf__posts > li {
	flex: 0 0 min(88%, 440px);
	scroll-snap-align: start;
	display: flex;
}
.sbf--carousel .sbf__post {
	flex: 1;
	display: flex;
	flex-direction: column;
	transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .45s ease, border-color .15s ease;
}
.sbf--carousel .sbf__stats { margin-top: auto; padding-top: 10px; }

/* Gentle "focus" animation: the current slide is full size, neighbours ease back. */
.sbf--carousel.is-ready .sbf__posts > li .sbf__post { opacity: .55; transform: scale(.96); }
.sbf--carousel.is-ready .sbf__posts > li.is-active .sbf__post,
.sbf--carousel.is-ready .sbf__posts > li.is-active + li .sbf__post { opacity: 1; transform: none; }
@media (max-width: 700px) {
	.sbf--carousel.is-ready .sbf__posts > li.is-active + li .sbf__post { opacity: .55; transform: scale(.96); }
}

.sbf--carousel .sbf__images--1 img,
.sbf--carousel .sbf__video img { max-height: 280px; }

.sbf__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 6px;
}
.sbf__controls[hidden] { display: none; }

.sbf__nav {
	all: unset;
	box-sizing: border-box;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: var(--sbf-bg);
	color: var(--sbf-fg);
	border: 1px solid var(--sbf-line);
	box-shadow: var(--sbf-shadow);
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.sbf__nav:hover { background: var(--sbf-accent); color: var(--sbf-accent-fg); border-color: var(--sbf-accent); transform: scale(1.06); }
.sbf__nav:focus-visible { outline: 2px solid var(--sbf-accent); outline-offset: 2px; }

.sbf__dots { display: flex; gap: 6px; align-items: center; }
.sbf__dot {
	all: unset;
	box-sizing: border-box;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	cursor: pointer;
	background: var(--sbf-line);
	transition: width .3s ease, background .3s ease;
}
.sbf__dot[hidden] { display: none; }
.sbf__dot.is-active { width: 22px; background: var(--sbf-accent); }
.sbf__dot:focus-visible { outline: 2px solid var(--sbf-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.sbf--carousel .sbf__posts { scroll-behavior: auto; }
	.sbf--carousel.is-ready .sbf__posts > li .sbf__post { opacity: 1; transform: none; }
}