/**
 * Doc Library Sections Styles
 * Блок разделов документации библиотек (вторичные разделы)
 * Аналогичен cards-section, но без иконок
 */

/* === Doc Library Sections === */
.doc-library-sections {
    background: var(--color-white);
    width: 100%;
}

.doc-library-sections__container {
    max-width: 1920px;
    margin: 0 auto;
    padding: var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
}

/* Используем общий паттерн контейнера из style.css для адаптивности */
@media (max-width: 1000px) {
    .doc-library-sections__container {
        padding: var(--container-padding-md);
    }
}

@media (max-width: 768px) {
    .doc-library-sections__container {
        padding: var(--container-padding-md);
    }
}

.doc-library-sections__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-lg);
    align-items: stretch;
}

/* === Doc Library Sections Card === */
.doc-library-sections__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--spacing-lg);
    border: 1px solid var(--color-grey-250);
    border-radius: var(--radius-lg);
    text-decoration: none;
    flex: 0 0 calc(33.333% - 16px);
    max-width: calc(33.333% - 16px);
    overflow: visible;
    transition: opacity 0.2s ease;
}

.doc-library-sections__card:hover {
    opacity: 0.9;
    text-decoration: none;
}

.doc-library-sections__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 24px;
}

/* === Doc Library Sections Title === */
.doc-library-sections__title {
    flex: 1;
    margin: 0;
    font-family: var(--font-golos-text);
    font-weight: 500;
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
    color: var(--color-dark-gray);
}

/* === Doc Library Sections Arrow === */
.doc-library-sections__arrow {
    flex-shrink: 0;
    width: var(--spacing-base);
    height: var(--spacing-base);
    color: var(--color-dark-gray);
}

/* === Карточка без разделов (раскрывает пункт в doc-sidebar) === */
.doc-library-sections__card--expand-sidebar {
    width: 100%;
    padding: var(--spacing-lg);
    margin: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    background: var(--color-white);
    border: 1px solid var(--color-grey-250);
}

.doc-library-sections__card--expand-sidebar:hover {
    opacity: 0.9;
}

.doc-library-sections__arrow--toggle {
    transition: transform 0.2s ease;
}

/* === Glowing Effect Styles === */
/* Используются общие стили из style.css (.glowing-card, .glowing-effect-*) */
/* Класс .glowing-card применяется к .doc-library-sections__card */

/* === Responsive === */
/* Адаптивность карточек: используем стандартные брейкпоинты */
/* Для 4 карточек на больших экранах (1920px+) */
@media (min-width: 1920px) {
    .doc-library-sections__card {
        flex: 0 0 calc((100% - 72px) / 4);
        max-width: calc((100% - 72px) / 4);
    }
}

/* Адаптивность для средних экранов */
@media (max-width: 1919px) and (min-width: 1200px) {
    .doc-library-sections__card {
        flex: 0 0 calc(33.333% - 16px);
        max-width: calc(33.333% - 16px);
    }
}

/* Адаптивность для планшетов */
@media (max-width: 1199px) and (min-width: 768px) {
    .doc-library-sections__card {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
}

/* Адаптивность для мобильных */
@media (max-width: 767px) {
    .doc-library-sections__card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}