/* =============================================================================
   LAYOUT-RESPONSIVE.CSS — единая точка управления адаптивом (audit 2026-04-19)
   =============================================================================
   Breakpoints: 480 / 768 / 1024 / 1440
   Принципы:
   - Mobile-first: base = mobile, @media min-width для больших экранов
   - Сетка 8px: отступы кратны 8 (16, 24, 32, 48, 64, 96)
   - Touch target 44px на ≤767px
   - Body ≥14px, H1 ≥22px на мобиле
   Подключается в base.html ПОСЛЕ layout-mobile.css и layout-desktop.css.
   ============================================================================= */

@layer layout {

/* =============================================================================
   MOBILE (<768px)
   ============================================================================= */
@media (max-width: 767px) {
    /* Секции: 40px top/bottom (было 48), 16px по бокам */
    .ds-section {
        padding-block: 40px;
    }
    .ds-section-sm {
        padding-block: 28px;
    }
    .ds-container {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    /* Body: минимум 14px (design-review rule) */
    body {
        font-size: 14px;
    }

    /* Сетки: 3-колоночные всегда в 1 на мобиле (если нет keep-grid opt-out) */
    .grid[class*="md:grid-cols-3"]:not(.keep-grid),
    .grid[class*="lg:grid-cols-3"]:not(.keep-grid),
    .grid[class*="md:grid-cols-2"]:not(.keep-grid),
    .grid[class*="lg:grid-cols-2"]:not(.keep-grid) {
        grid-template-columns: 1fr;
    }

    /* Таблицы: всегда горизонтальный скролл если нет явного контейнера */
    table:not(.ds-scroll-x table):not([class*="block"]) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Кнопки: 44px touch-target + горизонтальный padding ≥16px */
    :where(.btn-primary, .btn-secondary, .btn-tertiary, .btn-success, .btn-danger, button[type="submit"]) {
        min-height: 44px;
        padding-inline: 16px;
    }

    /* CTA-row: карты кнопок 100% ширины, стек */
    .ds-cta-row {
        flex-direction: column;
        align-items: stretch;
    }
    .ds-cta-row > :where(a, button) {
        width: 100%;
    }
}

/* Очень узкие экраны (<480px) — ещё компактнее */
@media (max-width: 479px) {
    .ds-section {
        padding-block: 32px;
    }
    .ds-container {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}

/* =============================================================================
   TABLET (768-1023px)
   ============================================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
    .ds-section {
        padding-block: 56px;
    }
    .ds-section-sm {
        padding-block: 40px;
    }
    .ds-container {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* 2-колоночный fallback для 3-колоночных лейаутов — компактнее и читабельнее */
    .grid[class*="lg:grid-cols-3"]:not(.keep-grid):not(.md\:grid-cols-2) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =============================================================================
   DESKTOP (≥1024px)
   ============================================================================= */
@media (min-width: 1024px) {
    .ds-section {
        padding-block: 72px;
    }
    .ds-section-sm {
        padding-block: 48px;
    }
    .ds-container {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* =============================================================================
   LARGE DESKTOP (≥1440px)
   ============================================================================= */
@media (min-width: 1440px) {
    .ds-container {
        padding-left: 48px;
        padding-right: 48px;
    }
}

} /* end @layer layout */

/* =============================================================================
   .container — алиас без префикса для новых компонентов (Claude Design)
   UNLAYERED, чтобы не конкурировал с Tailwind container preflight
   ============================================================================= */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}
@media (min-width: 768px) {
    .container {
        padding-left: 24px;
        padding-right: 24px;
    }
}
@media (min-width: 1024px) {
    .container {
        padding-left: 32px;
        padding-right: 32px;
    }
}
@media (min-width: 1440px) {
    .container {
        max-width: 1320px;
        padding-left: 48px;
        padding-right: 48px;
    }
}
.container--narrow {
    max-width: 960px;
}
.container--wide {
    max-width: 1440px;
}
.container--full {
    max-width: 100%;
}