/*
 * Линейная (скролльная) версия главной для телефонов (<=767px).
 * Переопределяет слайдовый каркас из main.css; JS-часть переключателя —
 * isLinear() в functions.js. Подключать строго ПОСЛЕ main.css.
 */

@media (max-width: 767px) {

    /* ===== каркас: слайды становятся обычным потоком документа ===== */

    html {
        overflow-x: hidden;
    }

    .perspective {
        height: auto;
        overflow: visible;
    }

    .container {
        outline: none;
        background-image: none;
    }

    /* background-attachment: fixed не работает в мобильных браузерах,
       поэтому фон живёт на fixed-псевдоэлементе. Высота задана жёстко
       (100lvh — максимальный viewport), а не через bottom: 0 — иначе
       элемент меняет размер при скрытии адресной строки и cover
       перемасштабирует картинку (фон «пляшет» при скролле) */
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100lvh;
        background: url("../img/new-background-v1.png") center center no-repeat;
        background-size: cover;
        z-index: -1;
    }

    .l-viewport {
        height: auto;
        overflow: visible;
        /* Hammer вешает inline touch-action: pan-x и блокирует нативный скролл */
        touch-action: pan-y !important;
    }

    .l-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .l-main-content {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    /* контакты показываем после «написать мне в telegram»;
       в DOM порядок прежний, навигация по индексам не затронута */
    .l-main-content > .l-section:has(.contact) {
        order: 1;
    }

    .l-section {
        position: relative;
        height: auto;
        padding: 0 18px;
        box-sizing: border-box;
        scroll-margin-top: 66px;
    }

    .section {
        opacity: 1;
        visibility: visible;
        transition: none;
    }

    .section--next,
    .section--prev {
        transform: none !important;
    }

    /* линейная версия работает в любой ориентации —
       заглушка «поверните устройство» не нужна */
    .device-notification {
        display: none !important;
    }

    /* ===== хедер: sticky, логотип ===== */

    .header {
        position: sticky;
        top: 0;
        height: 56px;
        padding: 0 18px;
        box-sizing: border-box;
        background-color: rgba(7, 6, 12, 0.8);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .logo-wrap {
        margin-top: 0;
    }

    .logo-wrap .logo {
        font-size: 20px;
    }

    .logo-wrap .logo::after {
        font-size: 12px;
        transform: translate(-25px, 20px) rotate(-20deg);
    }

    /* ===== секции ===== */

    .intro,
    .work,
    .blog-teaser,
    .hire {
        width: 100%;
        max-width: 100%;
        height: auto;
        justify-content: flex-start;
    }

    /* главная остаётся «хиро»-экраном на всю высоту */
    .intro {
        min-height: calc(100vh - 56px);
        min-height: calc(100svh - 56px);
        justify-content: center;
    }

    .intro--banner {
        height: auto;
    }

    .work,
    .blog-teaser {
        padding: 40px 0 24px;
    }

    .work h2,
    .blog-teaser h2 {
        font-size: 38px;
        margin-bottom: 18px;
    }

    .work h3 {
        font-size: 19px;
        margin-top: 16px;
    }

    .work ul {
        margin: 6px 0 0;
        padding-left: 2px;
        font-size: 15px;
        line-height: 1.55;
    }

    .blog-teaser-list {
        gap: 12px;
        margin-bottom: 24px;
    }

    .blog-teaser-item a {
        padding: 14px 16px;
    }

    .blog-teaser-preview {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .contact {
        position: relative;
        height: auto;
    }

    .contact--lockup {
        height: auto;
        max-width: 100%;
        padding: 40px 0;
    }

    .contact--lockup .modal {
        width: 100%;
        padding: 36px 24px;
        box-sizing: border-box;
    }

    .hire {
        margin: 0 auto;
        padding: 40px 0 72px;
    }

    /* ===== бургер-меню: плоский fullscreen-оверлей вместо 3D-поворота ===== */

    .outer-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        background-color: rgba(7, 6, 12, 0.96);
        z-index: 100;
    }

    .outer-nav > li {
        transform: none;
        font-size: 30px;
    }

    .outer-nav > li.is-vis {
        transform: none;
    }
}