/**
 * Doc Libraries Styles
 * Блок библиотек документации согласно макету Figma
 * Использует структуру и стили из cards-section
 */

/* === Doc Libraries === */
.doc-libraries {
    width: 100%;
    min-height: calc(100vh - 80px);
    background: var(--color-white);
}

.doc-libraries__container {
    max-width: 1920px;
    margin: 0 auto;
    padding: var(--container-padding);
    min-height: calc(100vh - 80px);
    
    @media (max-width: 375px) {
        padding:var(--container-padding-md);
        
    }
}

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

/* === Doc Libraries Card === */
/* Для 4 карточек: (100% - 3*gap) / 4 = (100% - 72px) / 4 = 25% - 18px */
.doc-libraries__card {
    flex: 0 0 calc((100% - 72px) / 4);
    max-width: calc((100% - 72px) / 4);
}

/* Переопределяем стили card-item для doc-libraries на больших экранах (1920px+) */
@media (min-width: 1920px) {
    .doc-libraries__grid .doc-libraries__card {
        flex: 0 0 calc((100% - 72px) / 4);
        max-width: calc((100% - 72px) / 4);
    }
}

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

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

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

/* Иконка в карточке библиотек - использует стили из cards-section.css */