/**
 * GRO Solution TOC styles — Figma node 6632-59589
 *
 * Tokens:
 *   text_001: #303030 (active text + roman numerals + collapse arrows)
 *   text_002: #525252 (inactive items)
 *   text_003: #AAA8A8 (title)
 *   border:   #C4C2BC (vertical lines)
 *
 * Typography:
 *   title:           Golos Medium 28px lh 128% ls -0.04em
 *   section-roman:   Golos Medium 20px lh 140%
 *   section-title:   Golos Medium 20px lh 140%
 *   item-current:    Golos Medium 16px lh 140% (root + current sibling)
 *   item-inactive:   Golos Regular 16px lh 140%
 */

.gro-solution-toc {
    position: relative;
    padding: 40px;
    padding-bottom: 52px;
    border-radius: 24px;
    overflow: hidden;
    font-family: 'Golos Text', system-ui, sans-serif;
}

/* Top close/back button (≫) */
.gro-solution-toc__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 56px;
    height: 56px;
    background: #fff;
    border: 0;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 8px 24px;
    transition: background-color 0.15s ease;
}

.gro-solution-toc__close:hover {
    background: #f5f5f5;
}

.gro-solution-toc__close svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* Title «Содержание серии» */
.gro-solution-toc__title {
    margin: 0 0 8px;
    padding: 8px 0;
    font-family: inherit;
    font-weight: 500;
    font-size: 28px;
    line-height: 128%;
    letter-spacing: -0.04em;
    color: var(--light-mode-text-003, #aaa8a8);
}

/* Section (I / II / III) */
.gro-solution-toc__section {
    margin-top: 24px;
}

.gro-solution-toc__section:first-of-type {
    margin-top: 0;
}

.gro-solution-toc__section-header {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 8px 0;
}

.gro-solution-toc__roman {
    flex-shrink: 0;
    min-width: 8px;
    font-family: inherit;
    font-weight: 500;
    font-size: 20px;
    line-height: 140%;
    color: var(--light-mode-text-001, #303030);
    text-align: center;
}

.gro-solution-toc__section-title {
    margin: 0;
    flex: 1;
    font-family: inherit;
    font-weight: 500;
    font-size: 20px;
    line-height: 140%;
    color: var(--light-mode-text-001, #303030);
}

.gro-solution-toc__collapse {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.gro-solution-toc__collapse svg {
    width: 16px;
    height: 16px;
    display: block;
}

.gro-solution-toc__collapse[aria-expanded="false"] {
    transform: rotate(180deg);
}

/* List */
.gro-solution-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gro-solution-toc__section[aria-collapsed="true"] .gro-solution-toc__list {
    display: none;
}

/* Item */
.gro-solution-toc__item {
    display: flex;
    align-items: stretch;
}

.gro-solution-toc__link {
    display: flex;
    gap: 16px;
    align-items: center;
    flex: 1;
    padding: 8px 0;
    text-decoration: none;
    color: var(--light-mode-text-002, #525252);
    font-family: inherit;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    transition: color 0.15s ease;
}

.gro-solution-toc__link:hover {
    color: var(--light-mode-text-001, #303030);
}

/* Current article (root section + current sibling) */
.gro-solution-toc__item--root .gro-solution-toc__link,
.gro-solution-toc__item--current .gro-solution-toc__link {
    font-weight: 500;
    color: var(--light-mode-text-001, #303030);
}

/* Marker container */
.gro-solution-toc__marker {
    flex-shrink: 0;
    width: 8px;
    height: 100%;
    min-height: 32px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Vertical line above + below marker (создаёт «connected» visual) */
.gro-solution-toc__marker--bullet::before,
.gro-solution-toc__marker--bullet::after {
    content: '';
    width: 1px;
    background: var(--light-mode-border, #c4c2bc);
    flex-shrink: 0;
}

.gro-solution-toc__marker--bullet::before {
    height: 12px;
}

.gro-solution-toc__marker--bullet::after {
    flex: 1;
    min-height: 1px;
}

/* First item в секции — нет line сверху */
.gro-solution-toc__list .gro-solution-toc__item:first-child .gro-solution-toc__marker--bullet::before {
    opacity: 0;
}

/* Last item в секции — нет line снизу */
.gro-solution-toc__list .gro-solution-toc__item:last-child .gro-solution-toc__marker--bullet::after {
    opacity: 0;
}

/* Bullet dot (•) */
.gro-solution-toc__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--light-mode-border, #c4c2bc);
    flex-shrink: 0;
    margin: 4px 0;
}

.gro-solution-toc__item--current .gro-solution-toc__dot {
    background: var(--light-mode-text-001, #303030);
}

/* Polygon marker (▸) для root current */
.gro-solution-toc__marker--polygon {
    margin: 4px 0;
}

.gro-solution-toc__marker--polygon svg {
    width: 8px;
    height: 8px;
    display: block;
}

/* Section spacing — bottom margin */
.gro-solution-toc__section + .gro-solution-toc__section {
    margin-top: 24px;
}

/* Hide on mobile (handled via mobile modal) */
@media (max-width: 768px) {
    .gro-solution-toc {
        display: none;
    }
}