/* ============================================
   assets/css/responsive.css
   Дополнительная адаптивность
   ============================================ */

/* Планшеты */
@media (max-width: 1024px) {
    .main-wrap {
        gap: 32px;
        padding: 32px 20px 60px;
    }

    .footer-grid {
        gap: 32px;
    }
}

/* Мобильные устройства */
@media (max-width: 768px) {
    :root {
        --spacing-xl: 32px;
    }

    .hero {
        height: 380px;
    }

    .hero-content {
        padding: 24px 20px;
    }

    .article-body h2 {
        font-size: 24px;
    }

    .pullquote p {
        font-size: 18px;
    }

    .inline-img-wrap img {
        height: 240px;
    }

    .story-card blockquote {
        font-size: 17px;
    }
}

/* Маленькие телефоны */
@media (max-width: 480px) {
    .hero {
        height: 300px;
    }

    .hero h1 {
        font-size: 20px;
    }

    .hero-byline {
        font-size: 10px;
        gap: 6px;
        flex-direction: column;
    }

    .article-body p {
        font-size: 15px;
    }

    .method-block {
        padding: 16px;
    }

    .method-detail {
        font-size: 12px;
        padding: 8px 12px;
    }

    .story-card {
        padding: 16px 18px;
    }

    .story-card blockquote {
        font-size: 15px;
    }

    .data-table-wrap {
        font-size: 12px;
    }

    .data-table th,
    .data-table td {
        padding: 8px 10px;
        font-size: 11px;
    }
}

/* Высокая контрастность для Accessibility */
@media (prefers-contrast: high) {
    :root {
        --amber: #CC6A1A;
        --navy: #0A1F33;
        --ink: #000000;
    }
}

/* Темная тема (если понадобится) */
@media (prefers-color-scheme: dark) {
    /* Можно добавить темную тему, если нужно */
}