/*
 * Desktop sidebar: author card and Popular posts.
 *
 * Pinned with position: sticky. Its sticky offset is the smaller of:
 *   - its starting position (under the header, plus the layout's top
 *     padding), so when it fits on screen it never moves; and
 *   - the offset that puts its bottom a small gap above the bottom of the
 *     screen (above the footer bar on the home page), so when it is taller
 *     than the screen it scrolls with the page only until its last item is
 *     visible, then stays there.
 * No inner scrolling. At the very end of a page the footer can nudge it up
 * as the page finishes. core.js publishes --sidebar-height and
 * --header-height.
 */

.sidebar {
	--sidebar-top: calc(var(--admin-bar) + var(--header-height) + var(--layout-top));
	--sidebar-fit: calc(100vh - var(--sidebar-height, 0px) - var(--sidebar-bottom-gap));
	position: sticky;
	top: min(var(--sidebar-top), var(--sidebar-fit));
	display: flex;
	flex-direction: column;
	gap: 36px;
}
.sidebar { --sidebar-bottom-gap: 24px; }
.has-footer-bar .sidebar { --sidebar-bottom-gap: calc(var(--footer-bar-height) + 16px); }

.sidebar-box { padding-top: 20px; border-top: 1px solid var(--accent); }
.sidebar-box__title { margin: 0 0 12px; color: var(--sidebar-title); }

/*
 * Author section. The photo spans the column and keeps its own shape:
 * width is fixed, height follows the image, nothing is cropped. Corners,
 * border and fallback background match the featured and post images.
 */
.author-card__photo { margin: 0 0 16px; }
.author-card__photo img {
	width: 100%;
	height: auto;
	border: 1px solid var(--placeholder-border);
	border-radius: var(--card-radius);
	background: var(--placeholder);
}
/* No photo yet: initials tile. The only fixed shape, since there is no photo to size from. */
.author-card__photo--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--placeholder-border);
	border-radius: var(--card-radius);
	background: var(--placeholder);
	color: var(--accent);
	font-size: 64px;
	font-weight: 800;
	letter-spacing: -.04em;
}
.author-card__bio { color: var(--text-muted); font-size: 16px; line-height: 1.55; }

/* Numbered Popular posts. */
.popular-box__list { list-style: none; }
.popular-box__list a {
	display: flex;
	gap: 14px;
	padding: 13px 0;
	border-top: 1px solid var(--hairline);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	transition: color var(--speed);
}
.popular-box__list li:first-child a { border-top: 0; }
.popular-box__list b { color: var(--accent); }
.popular-box__list a:active { opacity: .7; }

/* Popular box shown inside the main column (search with no results). */
.popular-box--inline { margin-top: 28px; }


@media (hover: hover) {
	.popular-box__list a:hover { color: var(--accent); }
}