/* ==========================================================================
   PurOstill V2 — page sidebar
   ========================================================================== */

.v2-page-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 2.5rem;
	/* stretch, not start: the column must be full height or the sticky card
	   has no room to travel. */
	align-items: stretch;
}

.v2-page-layout .v2-page-content { min-width: 0; }

.v2-sidebar { position: relative; }

.v2-sidebar__card {
	position: sticky;
	top: calc(var(--v2-header-h) + 1.5rem);
	padding: 1.25rem;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-radius-lg);
	background: var(--v2-surface);
	display: flex; flex-direction: column; gap: 1.25rem;
}

.v2-sidebar__block + .v2-sidebar__block { padding-top: 1.25rem; border-top: 1px solid var(--v2-line); }

.v2-sidebar__title {
	margin-bottom: .7rem;
	font-size: .72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .14em;
	color: var(--v2-muted);
}

/* Related links ------------------------------------------------------------ */

.v2-sidebar__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.v2-sidebar__links a {
	display: block; padding: .45rem .6rem;
	border-radius: .55rem;
	font-size: .9rem; font-weight: 600; color: var(--v2-ink);
	transition: background .2s ease, color .2s ease;
}
.v2-sidebar__links a:hover { background: rgba(var(--v2-accent-rgb), .08); color: var(--v2-accent); }
.v2-sidebar__links a.is-current { background: rgba(var(--v2-accent-rgb), .12); color: var(--v2-accent); }

/* Contents ----------------------------------------------------------------- */

.v2-sidebar__toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }

.v2-sidebar__toc-item a {
	display: block;
	padding: .35rem .6rem .35rem .75rem;
	border-left: 2px solid transparent;
	font-size: .86rem; line-height: 1.45;
	color: var(--v2-muted);
	transition: color .2s ease, border-color .2s ease;
}
.v2-sidebar__toc-item a:hover { color: var(--v2-accent); }
.v2-sidebar__toc-item.is-level-3 a { padding-left: 1.5rem; font-size: .82rem; }
.v2-sidebar__toc-item.is-active a { color: var(--v2-accent); border-left-color: var(--v2-accent); font-weight: 600; }

/* Headings need clearance under the fixed header when jumped to. */
.v2-page-content h2,
.v2-page-content h3 { scroll-margin-top: calc(var(--v2-header-h) + 1.5rem); }

@media (max-width: 980px) {
	.v2-page-layout { grid-template-columns: minmax(0, 1fr); }
	.v2-sidebar { order: -1; }
	.v2-sidebar__card { position: static; }
}

/* --------------------------------------------------------------------------
   Mobile
   The sidebar moves above the content and collapses to a compact card, so a
   long contents list does not bury the article.
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
	.v2-page-layout { gap: 1.5rem; }
	.v2-sidebar__card { padding: 1rem; border-radius: 1rem; }

	/* Links read better as a wrapping row than as a tall column here. */
	.v2-sidebar__links { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
	.v2-sidebar__links a {
		padding: .45rem .8rem;
		border: 1px solid var(--v2-line);
		border-radius: 999px;
		font-size: .85rem;
	}

	.v2-sidebar__toc-list { max-height: 40vh; overflow-y: auto; }
}