/* ==========================================================================
   SCALE.CSS — fluid масштабирование до 8K (7680px)
   kontur.brazya.ru

   Этот файл НЕ перезаписывает style.css — он ДОПОЛНЯЕТ его через:
   - fluid typography через clamp() (плавное масштабирование между breakpoints)
   - расширение max-width контейнеров на больших экранах
   - увеличение размеров hero/cta/grid на 2K+/4K+/8K
   - оптимизация grid для ultra-wide экранов

   Безопасность: если что-то не так — Engineer просто удаляет <link> на scale.css
   и сайт возвращается к базовому виду.
   ========================================================================== */

/* ===== Fluid typography через clamp(min, preferred, max) ===== */

/* Заголовки: плавно растут от мобилы до 8K */
:root {
    --scale-h1-min: 2rem;
    --scale-h1-max: 6rem;
    --scale-h2-min: 1.5rem;
    --scale-h2-max: 4rem;
    --scale-h3-min: 1.2rem;
    --scale-h3-max: 2.5rem;
    --scale-body-min: 0.95rem;
    --scale-body-max: 1.25rem;
    --scale-container-max: 1800px;
    --scale-container-2k: 2200px;
    --scale-container-4k: 2800px;
    --scale-container-8k: 3600px;
    --scale-section-y: clamp(48px, 6vw, 120px);
    --scale-card-pad: clamp(20px, 2.5vw, 48px);
    --scale-hero-pad-y: clamp(60px, 8vw, 160px);
}

h1, .hero-title, .page-title {
    font-size: clamp(var(--scale-h1-min), 5vw, var(--scale-h1-max)) !important;
    line-height: 1.1;
}

h2, .section-title {
    font-size: clamp(var(--scale-h2-min), 3.5vw, var(--scale-h2-max)) !important;
    line-height: 1.2;
}

h3 {
    font-size: clamp(var(--scale-h3-min), 2vw, var(--scale-h3-max)) !important;
}

body {
    font-size: clamp(var(--scale-body-min), 1.1vw, var(--scale-body-max));
}

/* ===== Container — расширяем на больших экранах ===== */

.container {
    max-width: var(--scale-container-max) !important;
    padding: 0 clamp(16px, 3vw, 48px) !important;
}

/* 2K+ (1440px+) */
@media (min-width: 1440px) {
    .container {
        max-width: var(--scale-container-max) !important;
    }
}

/* Quad HD / 2K (2560px+) */
@media (min-width: 2560px) {
    .container {
        max-width: var(--scale-container-2k) !important;
        padding: 0 clamp(24px, 4vw, 64px) !important;
    }
}

/* 4K (3840px+) */
@media (min-width: 3840px) {
    .container {
        max-width: var(--scale-container-4k) !important;
        padding: 0 clamp(32px, 5vw, 96px) !important;
    }
    body { font-size: 1.2rem; }
    h1, .hero-title, .page-title { line-height: 1.05; }
}

/* 8K (7680px+) */
@media (min-width: 7680px) {
    :root {
        --scale-h1-max: 9rem;
        --scale-h2-max: 6rem;
        --scale-h3-max: 3.5rem;
        --scale-body-max: 1.6rem;
    }
    .container {
        max-width: var(--scale-container-8k) !important;
        padding: 0 6vw !important;
    }
    .header-inner { padding: 0 6vw !important; }
}


/* ===== Hero / секции — больше воздуха на больших экранах ===== */

.hero, .page-header, section[data-animate], .cta {
    padding-top: var(--scale-hero-pad-y) !important;
    padding-bottom: var(--scale-hero-pad-y) !important;
}

.section-header { margin-bottom: clamp(32px, 4vw, 80px) !important; }


/* ===== Сетка: auto-fit, лучше работает на 2K+/4K+ ===== */

.grid, .grid-3, .cards, .steps-grid, .tech-grid, .projects-grid {
    gap: clamp(20px, 2.5vw, 48px) !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
}

@media (min-width: 1920px) {
    .grid, .grid-3, .cards, .steps-grid, .tech-grid, .projects-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)) !important;
    }
}

@media (min-width: 3840px) {
    .grid, .grid-3, .cards, .steps-grid, .tech-grid, .projects-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)) !important;
        gap: clamp(32px, 3vw, 72px) !important;
    }
}


/* ===== Карточки и контент — увеличиваем padding на больших экранах ===== */

.card, .step, .tech-badge, .blog-card {
    padding: var(--scale-card-pad) !important;
    border-radius: clamp(8px, 1vw, 24px) !important;
}

.content-text, .lead {
    font-size: clamp(1rem, 1.3vw, 1.4rem) !important;
    line-height: 1.7 !important;
    max-width: clamp(720px, 70ch, 1100px) !important;
}


/* ===== Hero stats — крупнее на больших экранах ===== */

.hero-stats > div {
    padding: clamp(16px, 2vw, 40px) !important;
}

.hero-stat-num {
    font-size: clamp(2.5rem, 5vw, 6rem) !important;
}

.hero-stat-label {
    font-size: clamp(0.85rem, 1vw, 1.2rem) !important;
    letter-spacing: 0.05em;
}


/* ===== Кнопки — крупнее на больших экранах ===== */

.btn, button[type="submit"], a.btn {
    padding: clamp(12px, 1.2vw, 20px) clamp(24px, 2.5vw, 48px) !important;
    font-size: clamp(0.95rem, 1.1vw, 1.2rem) !important;
    border-radius: clamp(6px, 0.6vw, 12px) !important;
}


/* ===== Header — увеличиваем высоту на больших экранах ===== */

.site-header {
    padding: clamp(12px, 1.5vw, 32px) 0 !important;
}

.header-inner {
    gap: clamp(16px, 2vw, 48px) !important;
}

.logo-image {
    height: clamp(40px, 4vw, 80px) !important;
    width: auto !important;
}


/* ===== Footer ===== */

.site-footer {
    padding: clamp(40px, 5vw, 96px) 0 clamp(24px, 3vw, 48px) !important;
}

.footer-inner {
    gap: clamp(32px, 4vw, 80px) !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
}

.footer-col h4 {
    font-size: clamp(1rem, 1.3vw, 1.4rem) !important;
    margin-bottom: clamp(12px, 1.5vw, 24px) !important;
}


/* ===== Sidebar — на 4K+ он тоже должен растягиваться ===== */

aside.ksb {
    width: clamp(260px, 22vw, 480px) !important;
    flex-basis: clamp(260px, 22vw, 480px) !important;
}

.ksb__link {
    padding: clamp(10px, 1vw, 20px) clamp(14px, 1.5vw, 28px) !important;
    font-size: clamp(15px, 1.1vw, 19px) !important;
}


/* ===== Demo-banner — не слишком крупный на 8K ===== */

.demo-banner {
    font-size: clamp(0.75rem, 0.9vw, 1.1rem) !important;
    padding: clamp(6px, 0.6vw, 12px) clamp(16px, 2vw, 40px) !important;
}


/* ===== Ультра-широкие (ultra-wide) — 21:9 и подобные ===== */

@media (min-aspect-ratio: 21/9) {
    .container {
        max-width: min(75vw, var(--scale-container-max)) !important;
    }
}


/* ===== 8K — финальная точка, всё крупнее и просторнее ===== */

@media (min-width: 7680px) {
    .container {
        max-width: min(70vw, 3600px) !important;
    }
    .hero-stats {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: clamp(48px, 4vw, 96px) !important;
    }
    .grid, .grid-3, .cards, .steps-grid, .tech-grid, .projects-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}


/* ===== Технологии / цифры — на больших экранах виднее ===== */

.tech-badge {
    font-size: clamp(0.9rem, 1.1vw, 1.3rem) !important;
    padding: clamp(10px, 1.2vw, 22px) clamp(18px, 2vw, 36px) !important;
}


/* ===== SVG иконки в карточках — больше на 4K+ ===== */

.card-icon, .step-num svg, svg[class*="icon"] {
    width: clamp(28px, 3vw, 64px) !important;
    height: clamp(28px, 3vw, 64px) !important;
}


/* ===== Проекты (если есть сетка) ===== */

.project-card {
    padding: var(--scale-card-pad) !important;
}

.project-card img {
    aspect-ratio: 16/10 !important;
    object-fit: cover;
}


/* ===== Гайды — content text padding ===== */

.guide-content, .content-section {
    padding: clamp(24px, 3vw, 56px) !important;
    margin-bottom: clamp(24px, 3vw, 56px) !important;
}


/* ===== Page header в гайдах ===== */

.page-header {
    padding: clamp(60px, 8vw, 160px) clamp(16px, 3vw, 48px) clamp(40px, 5vw, 96px) !important;
}


/* ===== Blog cards ===== */

.blog-card {
    padding: var(--scale-card-pad) !important;
}

.blog-card__title {
    font-size: clamp(1.1rem, 1.4vw, 1.6rem) !important;
}

.blog-card__excerpt {
    font-size: clamp(0.9rem, 1.1vw, 1.15rem) !important;
    line-height: 1.6 !important;
}


/* ===== Утилитарные fluid отступы ===== */

.gap-fluid-md { gap: clamp(16px, 2vw, 40px) !important; }
.gap-fluid-lg { gap: clamp(32px, 4vw, 80px) !important; }
.pad-fluid-md { padding: clamp(20px, 3vw, 60px) !important; }
.pad-fluid-lg { padding: clamp(40px, 5vw, 100px) !important; }


/* ===== Сохраняем мобильный breakpoint (не дать ему "сломать" fluid) ===== */

@media (max-width: 768px) {
    :root {
        --scale-container-max: 100%;
        --scale-container-2k: 100%;
        --scale-container-4k: 100%;
        --scale-container-8k: 100%;
    }
    .grid, .grid-3, .cards, .steps-grid, .tech-grid, .projects-grid {
        grid-template-columns: 1fr !important;
    }
}