/* ============================================================
   Blok DL TOC — anchor navigation
   3 warianty: chips / inline / vertical
============================================================ */
.dl-toc {
	background: var(--cream-50);
	padding: clamp(20px, 2.5vw, 32px) 0;
	border-top: 1px solid color-mix(in srgb, var(--karmel) 18%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--karmel) 18%, transparent);
}

.dl-toc-inner {
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 48px);
	flex-wrap: wrap;
}

.dl-toc-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-shrink: 0;
}

.dl-toc-num {
	font-family: var(--display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(32px, 4vw, 56px);
	color: var(--karmel);
	opacity: 0.5;
	line-height: 1;
}

.dl-toc-label {
	font-family: var(--body);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--karmel);
	font-weight: 500;
}

.dl-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	counter-reset: dl-toc-counter;
}

.dl-toc-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--body);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--espresso);
	transition: color .2s ease, background .2s ease, border-color .2s ease;
	text-decoration: none;
}

.dl-toc-link:hover {
	color: var(--karmel);
}

/* ── Variant: chips ── */
.dl-toc--chips .dl-toc-link {
	padding: 8px 16px;
	border: 1px solid color-mix(in srgb, var(--karmel) 30%, transparent);
	border-radius: 999px;
}

.dl-toc--chips .dl-toc-link:hover {
	background: var(--karmel);
	color: var(--paper);
	border-color: var(--karmel);
}

/* ── Variant: inline ── */
.dl-toc--inline .dl-toc-list {
	gap: clamp(16px, 2vw, 28px);
}

.dl-toc--inline .dl-toc-link {
	padding: 4px 0;
	border-bottom: 1px solid transparent;
}

.dl-toc--inline .dl-toc-link:hover {
	border-bottom-color: var(--karmel);
}

/* ── Variant: vertical ── */
.dl-toc--vertical .dl-toc-list {
	flex-direction: column;
	gap: 6px;
}

.dl-toc--vertical .dl-toc-item {
	counter-increment: dl-toc-counter;
}

.dl-toc--vertical .dl-toc-link {
	padding: 6px 0;
}

.dl-toc--vertical .dl-toc-link::before {
	content: counter(dl-toc-counter, decimal-leading-zero);
	font-family: var(--display);
	font-style: italic;
	font-size: 13px;
	color: var(--karmel);
	margin-right: 4px;
}

@media (max-width: 720px) {
	.dl-toc-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}