/* Jeden spis treści: poziomy na mobile, pionowy na desktopie. */
.c-section-nav { display: flex; flex-direction: column; gap: var(--space-3); padding-block: var(--space-5) var(--space-3); border-block-end: var(--border-width-sm) solid var(--color-border-strong); background: var(--color-surface-page); margin-inline: calc(-1 * var(--container-gutter)); padding-inline: var(--container-gutter); }
.c-section-nav__items { display: flex; gap: var(--space-5); overflow-x: auto; list-style: none; margin: 0; padding: 0 var(--container-gutter); margin-inline: calc(-1 * var(--container-gutter)); scroll-padding-inline: var(--container-gutter); scrollbar-width: thin; scrollbar-color: var(--color-scroll-thumb) var(--color-scroll-track); }
.c-section-nav__items li { flex: none; }
.c-section-nav__items a { display: block; padding-block: var(--space-3); color: var(--color-text-inactive); text-decoration: none; white-space: nowrap; }
.c-section-nav__items a[aria-current="location"], .c-section-nav__items a:hover { color: var(--color-text); }
.c-section-nav--scrollable .c-section-nav__items { scrollbar-width: none; }
.c-section-nav--scrollable .c-section-nav__items::-webkit-scrollbar { display: none; }
/* Osobny suwak mieści się pomiędzy gutterami; lista nadal obsługuje gesty i focus. */
.c-section-nav__scroll { --section-nav-thumb-size: 3rem; appearance: none; display: block; inline-size: 100%; min-inline-size: 0; block-size: var(--space-5); margin: 0; padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-scroll-thumb); cursor: pointer; }
.c-section-nav__scroll[hidden] { display: none; }
.c-section-nav__scroll::-webkit-slider-runnable-track { block-size: var(--space-1); border-radius: var(--radius-full); background: var(--color-scroll-track); }
.c-section-nav__scroll::-webkit-slider-thumb { appearance: none; inline-size: var(--section-nav-thumb-size); block-size: var(--space-2); margin-block-start: calc(-1 * var(--space-1) / 2); border: 0; border-radius: var(--radius-full); background: var(--color-scroll-thumb); }
.c-section-nav__scroll::-moz-range-track { block-size: var(--space-1); border-radius: var(--radius-full); background: var(--color-scroll-track); }
.c-section-nav__scroll::-moz-range-thumb { inline-size: var(--section-nav-thumb-size); block-size: var(--space-2); border: 0; border-radius: var(--radius-full); background: var(--color-scroll-thumb); }
.c-section-nav__scroll:hover::-webkit-slider-thumb { background: var(--color-action-hover); }
.c-section-nav__scroll:hover::-moz-range-thumb { background: var(--color-action-hover); }
@media (min-width: 70rem) {
 .c-section-nav { position: sticky; top: calc(var(--space-6) + var(--section-nav-top, 0px)); max-block-size: calc(100dvh - var(--space-6) - var(--space-6) - var(--section-nav-top, 0px)); padding-block: var(--space-6); border: 0; gap: var(--space-5); margin-inline: 0; padding-inline: 0; }
 .c-section-nav__items { flex-direction: column; gap: 0; min-block-size: 0; overflow-y: auto; margin-inline: 0; padding-inline: 0; }
 .c-section-nav__items a { border-inline-start: 2px solid var(--color-border-card); padding-inline-start: var(--space-4); white-space: normal; }
 .c-section-nav__items a[aria-current="location"] { border-color: var(--color-text); }
 .c-section-nav__scroll { display: none; }
}