/* ==========================================================================
   Vincent TOC — globalny sticky spis treści (mechanizm z motywu Vincent,
   osadzony w układzie treści Hanoi). Ładowany TYLKO, gdy wpis ma tag #toc.

   Kontekst: kontener .vincent-toc-container jest pierwszym dzieckiem
   .c-post-content (wpięty przez partials/components/post-content.hbs),
   a pozycjonuje się absolutnie względem .c-post-main.
   Desktop >= 1200px: sticky panel w prawym marginesie kolumny treści
   (kolumna Hanoi ma 720px, wycentrowana — po prawej jest wolne miejsce).
   Poniżej 1200px: statyczny blok nad treścią, pełna szerokość kolumny.
   ========================================================================== */

.vincent-toc-container {
    --vtoc-brand: var(--ghost-accent-color, var(--color-accent, #2f6b3c));
    --vtoc-text: var(--color-text, #1f2518);
    --vtoc-text-soft: color-mix(in srgb, var(--color-text, #1f2518) 70%, transparent);
    --vtoc-line: color-mix(in srgb, var(--color-text, #000) 10%, transparent);
    --vtoc-bg-soft: color-mix(in srgb, var(--color-text, #000) 4%, transparent);
    font-family: var(--gh-font-utility, "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

/* Kotwica pozycjonowania dla panelu absolute (nie zmienia wyglądu Hanoi) */
.c-post-main { position: relative; }

.vincent-toc-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vtoc-text);
    margin: 0 0 8px;
    padding-bottom: 8px;
}

/* --- Styl listy (tocbot generuje .toc-list / .toc-list-item / .toc-link) --- */
.vincent-toc-container .toc {
    align-self: stretch;
    padding: 1px 0 0;
    overflow-y: auto;
}
.vincent-toc-container .toc > .toc-list {
    box-shadow: inset 2px 0 0 var(--vtoc-line);
    padding-left: 0;
    overflow: hidden;
    position: relative;
    margin: 0;
}
.vincent-toc-container .toc-list { margin: 0; padding-left: 0; }
.vincent-toc-container .toc-list li { list-style: none; margin: 0; }
.vincent-toc-container .toc-list-item {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    padding: 6px 0;
    border-radius: 0 16px 16px 0;
}
.vincent-toc-container .toc-list-item ol { margin-top: 6px !important; padding-left: 0; }
.vincent-toc-container .toc > .toc-list > .toc-list-item { padding: 0.4em 0; }
.vincent-toc-container .toc > .toc-list > .toc-list-item:last-child { margin-bottom: 0; padding-bottom: 24px; }
.vincent-toc-container .toc-list-item.is-active-li {
    box-shadow: inset 2px 0 0 var(--vtoc-brand);
    background-color: color-mix(in srgb, var(--vtoc-brand) 6%, transparent);
}
.vincent-toc-container .toc-list-item a {
    color: var(--vtoc-text-soft);
    text-decoration: none;
    padding-left: 12px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 100%;
}
.vincent-toc-container .toc > .toc-list > .toc-list-item .toc-list > .toc-list-item a { padding-left: 20px; }
.vincent-toc-container .toc-list-item a:hover { color: var(--vtoc-brand); }
.vincent-toc-container .toc-list-item a.is-active-link { color: var(--vtoc-brand); }

/* --- Desktop: sticky panel w prawym marginesie treści --- */
@media (min-width: 1200px) {
    .vincent-toc-container {
        position: absolute;
        top: 0;
        bottom: 0;
        /* kolumna treści Hanoi: 720px wycentrowane -> prawy margines zaczyna się na 50% + 360px */
        left: calc(50% + 360px + 40px);
        right: var(--grid-margin, 3vw);
        width: auto;
        max-width: 280px;
        /* Hanoi ustawia .c-post-content>*{min-width:100%} — dla panelu absolute
           trzeba to wyzerowac, inaczej rozciaga sie na cala szerokosc */
        min-width: 0;
        opacity: 1;
        transition: opacity 0.2s ease-in-out;
        pointer-events: auto;
        z-index: 2;
    }
    .vincent-toc-container.toc-fade-out { opacity: 0; pointer-events: none; }
    .vincent-toc-sidebar {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 48px);
        position: sticky;
        top: 24px;
        padding: 8px 0 8px 0;
        min-width: 180px;
        mask-image: linear-gradient(180deg, #000, #000 calc(100% - 48px), transparent calc(100% - 10px));
        -webkit-mask-image: linear-gradient(180deg, #000, #000 calc(100% - 48px), transparent calc(100% - 10px));
    }
}

/* --- Poniżej 1200px: statyczny blok nad treścią (nie nachodzi na tekst) --- */
@media (max-width: 1199px) {
    .vincent-toc-container {
        position: static;
        width: 100%;
        margin: 0 0 8px;
    }
    .vincent-toc-sidebar {
        background-color: var(--vtoc-bg-soft);
        border-radius: 8px;
        padding: 20px;
        width: 100%;
    }
    .vincent-toc-container .toc > .toc-list > .toc-list-item:last-child { padding-bottom: 0; }
    .vincent-toc-container .toc-list-item { font-size: 16px; }
}