/* responsive.css — брейкпоинты и адаптивная раскладка
   ≥1280px        — полный desktop
   1025–1279px    — широкий планшет / небольшой desktop
   769–1024px     — планшет (landscape)
   481–768px      — планшет (portrait) / большой телефон
   ≤480px         — мобильный */

/* ── 1025–1279px: сетки немного компактнее ── */
@media (max-width: 1279.98px) and (min-width: 1025px) {
    .home-slide-inner {
        padding: 0 36px 0 32px;
        gap: 40px;
    }
    .home-slide-inner > .slide-animate { /* содержимое слайда */ }
}

/* ── 900–1179px: сетки 2 колонки ── */
@media (max-width: 1179.98px) and (min-width: 900px) {
    .programs { grid-template-columns: repeat(2, 1fr); }
    .articles { grid-template-columns: 1fr 1fr; }
    .gallery  { grid-template-columns: repeat(2, 1fr); }
    .video-grid { grid-template-columns: repeat(2, 1fr); }
    .doc-row { flex-wrap: wrap; row-gap: 8px; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* ── 769–899px: планшет portrait ── */
@media (max-width: 899.98px) and (min-width: 769px) {
    .programs { grid-template-columns: 1fr 1fr; }
    .articles { grid-template-columns: 1fr; }
    .media-grid { grid-template-columns: repeat(2, 1fr); }
    .video-grid { grid-template-columns: 1fr 1fr; }
    .footer-inner { grid-template-columns: 1fr 1fr; }

    .section { padding: 64px 0; }
    .hero    { padding: 72px 0; }

    :root { --header-height: 72px; }
    .logo-slot { width: 168px; height: 38px; }
    nav.main-nav { gap: 20px; font-size: 12px; }
}

/* ── ≤768px: мобильная раскладка ── */
@media (max-width: 768px) {
    /* Шапка и навигация */
    nav.main-nav { display: none; }
    .burger { display: flex; }
    .mobile-nav { display: block; }

    /* Сетки — одна колонка */
    .programs,
    .articles,
    .media-grid,
    .video-grid,
    .gallery {
        grid-template-columns: 1fr;
    }

    /* Документы: каждая строка в столбик */
    .doc-row { flex-wrap: wrap; row-gap: 6px; padding: 14px 16px; }
    .doc-row .name    { flex: 1 0 100%; order: 1; }
    .doc-row .doc-ext { order: 0; }
    .doc-row .date    { order: 2; }
    .doc-row .dl      { order: 3; margin-left: auto; }

    /* Секции */
    .section { padding: 52px 0; }
    .hero    { padding: 56px 0 64px; }
    .section-head { margin-bottom: 32px; }

    /* Контейнер */
    .container { padding: 0 18px; }

    /* Статистика */
    .stats-row { gap: 24px; }
    .stat-value { font-size: 28px; }

    /* Карточки программ — компактнее */
    .program-card { padding: 22px 20px; }
    .article-card .body { padding: 16px 18px 18px; }

    /* Заголовки статьи */
    .page-article__title { font-size: clamp(24px, 7.5vw, 34px); }
}

/* ── ≤480px: узкий мобильный ── */
@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .section { padding: 44px 0; }

    /* Футер */
    .footer-inner {
        grid-template-columns: 1fr;
        padding: 36px 16px 28px;
        gap: 28px;
    }
    .footer-bottom { padding: 18px 16px; }

    /* Фильтр документов */
    .doc-filter { padding: 16px; gap: 12px; }
    .doc-filter__field select,
    .doc-filter__field input[type="date"] { min-width: 0; width: 100%; }
    .doc-filter__actions { width: 100%; margin-left: 0; }

    /* Lightbox / video-modal */
    .lightbox,
    .video-modal {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border: none;
    }

    /* Числа hero */
    .hero__stat-value { font-size: 20px; }
    .hero__stats { gap: 20px; margin-top: 28px; }

    /* Кнопки CTA */
    .hero-actions { flex-direction: column; gap: 12px; }
    .hero-actions .btn { width: 100%; justify-content: center; }

    /* H1 адаптив */
    .h1 { line-height: 1.1; }
    .h2 { font-size: 22px; }
}

/* ── Минимальная высота экрана: телефоны в landscape ── */
@media (max-height: 480px) and (orientation: landscape) {
    .home-slide-wrapper[data-slide-id="hero"] {
        padding: 56px 0 40px !important;
    }
    .hero__stats { display: none; }
}

/* ── Очень широкие экраны (≥1600px) ── */
@media (min-width: 1600px) {
    .home-slide-inner {
        max-width: 1440px;
        padding: 0 72px 0 64px;
    }
    .container { max-width: 1280px; }
}