/*
 * PureCSS.com
 * https://purecss.com/examples/sticky-sections/
 * Section headings that pin to the top of the viewport as you scroll, with no JavaScript.
 */

.demo-sticky-sections .sticky-frame {
	width: 100%;
	height: 320px;
	overflow-y: auto;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
}

.demo-sticky-sections .sticky-section {
	/* sticky range is limited to this parent, so the title unsticks when the section ends */
}

.demo-sticky-sections .sticky-section-title {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: .35rem 1rem;
	font-family: var(--font-mono);
	font-size: .62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--accent);
	background: var(--surface-2);
	border-bottom: 1px solid var(--border);
	border-top: 1px solid var(--border);
}

.demo-sticky-sections .sticky-section:first-child .sticky-section-title {
	border-top: none;
}

.demo-sticky-sections .sticky-item {
	padding: .65rem 1rem;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	gap: .75rem;
}

.demo-sticky-sections .sticky-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--surface-2);
	border: 1px solid var(--border);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: .6rem;
	font-weight: 600;
	color: var(--text-muted);
}

.demo-sticky-sections .sticky-name {
	font-size: .85rem;
	color: var(--text);
	flex: 1;
}

.demo-sticky-sections .sticky-detail {
	font-family: var(--font-mono);
	font-size: .65rem;
	color: var(--text-muted);
}

/* The card preview scrolls to pin its headers, so it keeps its pointer events
   instead of letting clicks fall through to the card link. */
.card-preview .demo-sticky-sections {
	pointer-events: auto;
}

/* ── Variant: headings that stack instead of replacing each other ── */

.demo-sticky-sections .stk-frame {
	--h: 30px;
	width: 100%;
	height: 300px;
	overflow-y: auto;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
}

/* no per-group wrappers here, so every heading's sticky range is the
   whole scroller and none of them is ever pushed out */
.demo-sticky-sections .stk-title {
	position: sticky;
	display: flex;
	align-items: center;
	height: var(--h);
	padding: 0 1rem;
	/* opaque, or the paragraphs scrolling under it show through */
	background: var(--surface-2);
	border-bottom: 1px solid var(--border);
	font-family: var(--font-mono);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent);
}

.demo-sticky-sections .stk-1 { top: 0;                    z-index: 4; }
.demo-sticky-sections .stk-2 { top: var(--h);             z-index: 3; }
.demo-sticky-sections .stk-3 { top: calc(var(--h) * 2);   z-index: 2; }
.demo-sticky-sections .stk-4 { top: calc(var(--h) * 3);   z-index: 1; }

.demo-sticky-sections .stk-frame p {
	margin: 0;
	padding: .85rem 1rem;
	font-size: .85rem;
	line-height: 1.6;
	color: var(--text-muted);
}

/* ── Variant: pinned on the horizontal axis instead ── */

.demo-sticky-sections .hz-frame {
	width: 100%;
	max-width: 520px;
	overflow-x: auto;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
}

.demo-sticky-sections .hz-track {
	display: flex;
	width: max-content;
}

/* the wrapper is back, so each label's range is its own group and it
   leaves when that group has scrolled past */
.demo-sticky-sections .hz-group {
	display: flex;
	align-items: stretch;
}

.demo-sticky-sections .hz-label {
	position: sticky;
	left: 0;
	z-index: 2;
	flex: 0 0 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--surface-2);
	border-right: 1px solid var(--border);
	font-family: var(--font-mono);
	font-size: .68rem;
	font-weight: 700;
	color: var(--accent);
}

.demo-sticky-sections .hz-item {
	flex: 0 0 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 78px;
	border-right: 1px solid var(--border);
	font-family: var(--font-mono);
	font-size: .72rem;
	color: var(--text-muted);
}