/* Предотвращаем горизонтальный скролл на iOS Safari (body недостаточно) */
html {
    overflow-x: hidden;
}

@media (max-width: 1200px) {
    .articles-hero .container,
    .article-single__hero .container,
    .articles-listing .container,
    .article-single__content-wrap,
    .projects-archive-listing .container {
        padding-left: 60px;
        padding-right: 60px;
    }

    .articles-page--solutions .articles-hero .container,
    .articles-page--solutions .articles-listing .container {
        padding-left: var(--archive-pad-x);
        padding-right: var(--archive-pad-x);
    }

    .articles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cards--projects-archive {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .articles-hero,
    .article-single__hero {
        padding: 56px 0 32px;
    }

    .articles-hero h1,
    .article-single__hero h1 {
        font-size: 30px;
        line-height: 1.12;
    }

    .articles-hero p,
    .article-single__content {
        font-size: 16px;
        line-height: 1.45;
    }

    .articles-grid,
    .cards--projects-archive {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .articles-hero .container,
    .article-single__hero .container,
    .articles-listing .container,
    .article-single__content-wrap,
    .projects-archive-listing .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .articles-page--solutions .articles-hero .container,
    .articles-page--solutions .articles-listing .container {
        padding-left: var(--archive-pad-x);
        padding-right: var(--archive-pad-x);
    }

    .articles-page--solutions .article-card__meta,
    .articles-page--solutions .article-card h3,
    .articles-page--solutions .article-card__excerpt {
        margin-left: 20px;
        margin-right: 20px;
    }

    .articles-page--solutions .article-card .btn {
        left: 20px;
    }

    /* Адаптивный заголовок статьи/проекта — не вылезает за экран */
    .articles-hero h1,
    .article-single__hero h1 {
        font-size: clamp(20px, 6vw, 28px);
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Заголовки внутри контента тоже адаптивные */
    .article-single__content h1,
    .article-single__content h2,
    .article-single__content h3 {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .article-card__meta,
    .article-card h3,
    .article-card__excerpt {
        margin-left: 20px;
        margin-right: 20px;
    }

    .article-card .btn {
        left: 20px;
    }

    .articles-pagination ul {
        gap: 6px;
        flex-wrap: wrap;
    }
}

/* ============================================================
   HOMEPAGE & GLOBAL RESPONSIVE
   Брейкпоинты: 1199 / 991 / 767 / 479
   ============================================================ */

/* ── Бургер-кнопка и мобильная навигация (без медиа) ── */

.hero__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    flex-shrink: 0;
}
.hero__burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
}
body.nav-open .hero__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .hero__burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.nav-open .hero__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
body.nav-open { overflow: hidden; }

.hero__mobile-nav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 998;
    background: var(--blue, #0453f0);
    flex-direction: column;
    /* Убираем лишний top-отступ: лого и крестик уже внутри nav __top */
    padding: 0 24px 40px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
body.nav-open .hero__mobile-nav {
    transform: translateX(0);
}
/* Верхняя строка: логотип + кнопка закрытия */
.hero__mobile-nav__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0 32px;
    flex-shrink: 0;
}
.hero__mobile-nav__logo img {
    width: 160px;
    height: auto;
    display: block;
}
.hero__mobile-nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}
.hero__mobile-nav__close:hover,
.hero__mobile-nav__close:focus-visible {
    background: rgba(255, 255, 255, 0.22);
    outline: none;
}
.hero__mobile-nav__close svg { display: block; }

.hero__mobile-nav__links {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 32px;
}
.hero__mobile-nav__links .hero__nav-link {
    font-size: clamp(18px, 5vw, 26px);
    font-weight: 400;
    padding: clamp(14px, 3vw, 20px) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    text-decoration: none;
    white-space: normal;
}
.hero__mobile-nav__links .hero__nav-link:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.hero__mobile-nav__links .hero__nav-link.is-active { font-weight: 600; }
.hero__mobile-nav__links .hero__nav-link.is-active::after { display: none; }
.hero__mobile-nav__links .hero__nav-link:hover { opacity: 0.75; }
.hero__mobile-nav__contacts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 32px;
    margin-top: auto;
}
.hero__mobile-nav__contacts .hero__contacts-link {
    font-size: clamp(15px, 4vw, 20px);
    /* Явно белый — на реальных устройствах браузер иначе берёт системный цвет ссылки */
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

/* ── 1199px — планшет landscape ── */

@media (max-width: 1199px) {
    .hero__header {
        padding-left: 60px;
        padding-right: 60px;
    }
    .hero__left {
        padding-left: 60px;
    }
    .about > .container {
        padding: 80px 60px;
    }
    .about__stats {
        padding-left: 60px;
        padding-right: 60px;
    }
    .solutions > .container,
    .demo > .container,
    .projects > .container,
    .news > .container {
        padding-left: 60px;
        padding-right: 60px;
    }
    .contact__grid {
        padding-left: 60px;
        padding-right: 60px;
    }
    .footer-main .container {
        width: min(1440px, calc(100% - 120px));
    }
    .footer-main__map img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .footer-main__right {
        width: auto;
        min-width: 0;
    }
    .about__grid {
        grid-template-columns: clamp(280px, 42%, 480px) minmax(0, 1fr);
        gap: 60px;
    }
    .about__image {
        width: 100%;
    }
    .about__image img {
        width: 100%;
    }
}

/* ── 1050px — demo стекируется раньше ── */

@media (max-width: 1050px) {
    /* demo__grid: форма становится слишком узкой (< 350px) */
    .demo__grid {
        grid-template-columns: 1fr;
    }
    .demo h2 {
        width: auto;
        margin-bottom: 40px;
    }
    .demo__info {
        height: auto;
        padding: 40px 28px;
        max-width: 600px;
    }
}

/* ── 991px — планшет portrait ── */

@media (max-width: 991px) {
    /* Хедер: grid → flex, бургер вместо nav */
    .hero__header {
        display: flex;
        align-items: center;
        padding-left: 24px;
        padding-right: 24px;
        gap: 0;
    }
    .hero__header .hero__nav,
    .hero__header .hero__contacts {
        display: none;
    }
    .hero__burger {
        display: flex;
        margin-left: auto;
    }
    .hero__mobile-nav {
        display: flex;
    }

    /* Логотип: не растягивать в flex-контейнере */
    .hero__logo {
        flex-shrink: 0;
    }
    .hero__logo img {
        width: 186px;
        height: 47px;
        max-width: 186px;
        object-fit: contain;
    }

    /* Demo форма: CF7-обёртка на всю ширину */
    .demo__form-wrap,
    .demo__form-wrap .wpcf7 {
        width: 100%;
    }

    /* Hero контент */
    .hero__content {
        height: auto;
        min-height: 640px;
    }
    .hero__left {
        padding-left: 0;
        padding-top: 80px;
    }
    .hero__left h1 {
        font-size: 38px;
        line-height: 1.2;
    }

    /* About: image + text стекируются */
    .about__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .about__image {
        width: 100%;
        max-width: 480px;
        height: auto;
        aspect-ratio: 616 / 245;
        margin: 0 auto;
    }
    .about__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .about__stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Solutions: 1 колонка */
    .solutions__cols {
        grid-template-columns: 1fr;
    }

    /* Demo: дополнительные правки при 991px */
    .demo__info {
        max-width: 100%;
    }

    /* Contact: форма на весь экран, скрываем изображение */
    .contact__grid {
        grid-template-columns: 1fr;
        padding-left: 24px;
        padding-right: 24px;
    }
    .contact__image {
        display: none;
    }

    /* Карусели: чуть уже карточки, разрешаем скролл */
    .project-card,
    .card--news-item {
        width: min(320px, 80vw);
        flex: 0 0 min(320px, 80vw);
    }
    .project-card {
        height: min(320px, 80vw);
    }
    .cards--projects,
    .cards--news {
        overflow-x: scroll;
    }
    .projects > .container,
    .news > .container {
        overflow: visible;
    }
}

/* ── 767px — телефон ── */

@media (max-width: 767px) {
    /* Hero */
    .hero__header {
        padding-left: 16px;
        padding-right: 16px;
    }
    .hero__content {
        height: auto;
        min-height: 520px;
        /* Убираем боковые белые полосы: фон тянется на всю ширину */
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Тёмный градиент под текстом — текст читается на любом фоне */
    .hero__content::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            rgba(0, 10, 50, 0.72) 0%,
            rgba(0, 10, 50, 0.45) 50%,
            rgba(0, 10, 50, 0.15) 100%
        );
        pointer-events: none;
        z-index: 0;
    }
    .hero__content-inner {
        position: relative;
        z-index: 1;
    }

    .hero__left {
        padding-top: 32px;
    }
    .hero__left h1 {
        font-size: 28px;
        line-height: 1.2;
    }
    .hero__left p {
        font-size: 16px;
        line-height: 1.5;
        max-width: 100%;
    }
    .hero__mobile-nav {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Типографика */
    h2,
    .about h2,
    .solutions h2,
    .demo h2,
    .projects h2,
    .news h2,
    .contact h2,
    .clients h2 {
        font-size: 26px;
        line-height: 1.15;
    }
    .section-intro,
    .section-intro--highlight {
        font-size: 16px;
    }

    /* Паддинги секций */
    .about > .container {
        padding: 60px 20px;
    }
    .about__stats {
        padding-left: 20px;
        padding-right: 20px;
        grid-template-columns: 1fr;
    }
    .solutions > .container,
    .demo > .container,
    .projects > .container,
    .news > .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .contact__grid {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Demo форма */
    .demo__form {
        grid-template-columns: 1fr;
    }
    .contact__form {
        grid-template-columns: 1fr;
    }

    /* Footer — полный мобильный стек */
    .footer-main .container {
        width: min(1440px, calc(100% - 32px));
    }
    .footer-main__top {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .footer-main__contacts {
        gap: 0;
    }
    .footer-main__logo {
        margin-bottom: 28px;
    }
    .footer-main__contact {
        margin: 0 0 18px;
    }
    .footer-main__contact--address {
        margin-bottom: 28px;
    }
    .footer-main__social {
        gap: 24px;
        margin-bottom: 24px;
    }
    .footer-main__company-details {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.5;
    }

    /* Footer right: меню + карта в колонку */
    .footer-main__right {
        width: 100%;
        flex-direction: column;
        gap: 32px;
    }
    .footer-main__menu {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px 16px;
        white-space: normal;
        align-items: start;
    }
    .footer-main__map img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 12px;
    }
    .footer-main__bottom {
        margin-top: 32px;
    }

    /* Карусели — нативный CSS scroll-snap, браузер сам определяет направление жеста */
    .cards--projects,
    .cards--news {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 8px;
    }
    .cards--projects::-webkit-scrollbar,
    .cards--news::-webkit-scrollbar {
        display: none;
    }
    .project-card,
    .card--news-item {
        scroll-snap-align: start;
        width: 85vw;
        flex: 0 0 85vw;
    }
    .project-card {
        height: 85vw;
    }

    /* Carousel controls: 2 уровня — кнопка "Все X" сверху, стрелки + точки снизу */
    .projects__controls,
    .news__controls {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        margin-top: 24px;
    }
    .projects__all,
    .news__all {
        width: 100%;
        justify-content: center;
    }
    .projects__controls .cards__controls,
    .news__controls .cards__controls {
        justify-content: center;
    }
    .projects__spacer,
    .news__spacer {
        display: none;
    }
}

/* ── 479px — малые телефоны ── */

@media (max-width: 479px) {
    .hero__content {
        min-height: 480px;
    }
    .hero__left h1 {
        font-size: 24px;
    }
    .about > .container,
    .solutions > .container,
    .demo > .container,
    .projects > .container,
    .news > .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    .about__stats {
        padding-left: 16px;
        padding-right: 16px;
    }
    .contact__grid {
        padding-left: 16px;
        padding-right: 16px;
    }
    h2,
    .projects h2,
    .news h2,
    .demo h2,
    .contact h2 {
        font-size: 22px;
    }
    .project-card,
    .card--news-item {
        width: 88vw;
        flex: 0 0 88vw;
    }
    .project-card {
        height: 88vw;
    }
    .hero .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .demo__info {
        padding: 28px 16px;
    }
    /* Кнопка + дисклеймер — в колонку, чтобы не вылезало за экран */
    .demo__actions {
        grid-template-columns: 1fr;
        row-gap: 12px;
        column-gap: 0;
    }
    .demo__actions .btn {
        width: 100%;
        justify-self: stretch;
        text-align: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .projects__all,
    .news__all {
        min-width: 0;
    }
    .footer-main {
        padding-top: 48px;
    }
}

/* Solution landing: styles in solution-landing.css */