/* ===== DESKTOP STICKY SIDEBAR TOC ===== */
/* Mobile: Default - Hide desktop sidebar */
.article-split-layout { display: block; }
.article-toc-sidebar { display: none; }
.article-content-wrapper { width: 100%; }

/* Desktop: Split layout with sticky sidebar */
@media (min-width: 769px) {
    .article-split-layout {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 4rem;
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 20px; /* aligned with nav-wrapper and hero-container */
        align-items: start;
        overflow: visible;
    }

    .article-toc-sidebar {
        display: block;
        padding-top: 20px;
    }

    .article-content-wrapper {
        display: block;
        min-width: 0;
    }

    /* Im Split-Layout braucht der Content keine zusätzliche max-width/margin —
       das Grid begrenzt ihn bereits. Überschreibt comparison-base.css */
    .article-split-layout .page-section-container {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .article-toc-sidebar-inner {
        display: block;
        box-sizing: border-box; /* Include padding in width calculation */
        position: relative; /* Will be controlled by JavaScript */
        width: 100%; /* Use full sidebar width */
        max-height: calc(100vh - 40px); /* Constrain height in both states to prevent jump */
        overflow-y: auto;
        overflow-x: hidden;
        background: white;
        padding: 1.125rem; /* Compact: 18px statt 20px */
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: box-shadow 0.2s ease; /* Only animate shadow, not layout properties */
        scrollbar-width: thin;
    }

    /* Fixed state when scrolled (JavaScript-controlled) */
    .article-toc-sidebar-inner.is-fixed {
        position: fixed;
        box-sizing: border-box; /* Include padding in width calculation */
        top: 20px;
        width: 300px; /* Same as grid column - no shrinking */
        z-index: 100;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }

    /* Bottom constraint - stops at content end */
    .article-toc-sidebar-inner.is-bottom {
        position: absolute;
        bottom: 0;
        top: auto;
    }

    /* Bleaching page: Wider TOC for non-grid layout */
    .bleaching-split-layout .article-toc-sidebar-inner.is-fixed {
        width: 300px;
    }

    /* Scrollbar styling for TOC */
    .article-toc-sidebar-inner::-webkit-scrollbar { width: 6px; }
    .article-toc-sidebar-inner::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 3px; }
    .article-toc-sidebar-inner::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
    .article-toc-sidebar-inner::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

    /* TOC Title Styling */
    .article-toc-sidebar-title {
        font-size: 0.875rem;
        font-weight: 700;
        color: #64748b;
        margin: 0 0 1rem 0;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e2e8f0;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* TOC Navigation */
    .article-toc-sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 0.1875rem;
    }

    /* TOC Items */
    .article-toc-sidebar-item {
        display: grid;
        grid-template-columns: 1.125rem 1fr;
        column-gap: 0.125rem;
        align-items: baseline;
        padding: 0.4375rem 0.625rem;
        color: #64748b;
        text-decoration: none;
        font-size: 0.75rem; /* 12px - compact to fit CTA card below */
        font-weight: 400;
        line-height: 1.4;
        transition: all 0.2s ease;
        border-left: 2px solid transparent;
        border-radius: 4px;
        list-style-type: none; /* Remove any inherited list styles */
    }

    .article-toc-sidebar-item:hover {
        color: #22aea1;
        background: rgba(34, 174, 161, 0.05);
        border-left-color: rgba(34, 174, 161, 0.3);
        transform: translateX(2px);
    }

    .article-toc-sidebar-item.active {
        color: #22aea1;
        background: rgba(34, 174, 161, 0.1);
        border-left-color: #22aea1;
    }

    .article-toc-sidebar-item .toc-number {
        color: #22aea1;
        font-weight: 600;
        /* Spacing to text handled by grid column-gap */
    }

    /* Hide mobile TOC on desktop */
    .article-toc-container {
        display: none !important;
    }
}