/* mobile.css — overrides only (<=768px)
   Цель: НИКАКИХ конфликтов со style.css.
   Принцип: style.css = базовая типографика/компоненты + desktop fixed header (>=769)
             mobile.css = только мобильная геометрия: fixed header + drawer + мобильные сетки.
*/

/* =========================================================
   [A0] GLOBAL — SAFETY / iOS (NO HORIZONTAL SCROLL)
   ========================================================= */
@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }

    /* режем редкие вылеты из-за внутренних трансформов/100vw */
    .page {
        overflow-x: clip;
    }

    /* фоновые линии (layer) — iOS-safe */
    .page::before {
        left: 0;
        right: 0;
        width: auto;
        transform: none;
    }

    img,
    svg,
    video,
    canvas {
        max-width: 100%;
        height: auto;
    }
}

/* =========================================================
   [A1] MOBILE TOKENS (ONLY MOBILE)
   ========================================================= */
@media (max-width: 768px) {
    :root {
        /* header */
        --m-header-h: 64px;
        --m-header-safe-top: env(safe-area-inset-top);
        --m-header-total-h: calc(var(--m-header-h) + var(--m-header-safe-top));
        --m-content-top: calc(var(--m-header-total-h) + 16px);
        
        /* logo position (X) */
        --m-logo-x: -30px; /* ← двигай логотип по X */
        --m-logo-y: -2px; /* ← по Y (вверх = минус, вниз = плюс) */

        --m-header-pad-x: 12px;
        /* боковые поля */
        --m-header-gap: 10px;
        /* расстояние между слотами */

        /* drawer */
        --m-drawer-top-gap: 8px;
        /* зазор под шапкой */
        --m-drawer-radius: 18px;

        /* + локальный оффсет ТОЛЬКО для главной */
        --m-index-top-extra: 18px; /* крути это значение */
    }
}

/* =========================================================
   [A2] MOBILE HEADER — LOCKED 3-SLOT LAYOUT
   Структура: [menu-btn] [logo centered] [header-right]
   ========================================================= */
@media (max-width: 768px) {

    /* 0) На мобилке не даём .page добавлять верхний воздух,
        потому что header становится fixed */
    body>.page {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* 1) фиксируем header */
    header.site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;

        z-index: 1000;

        height: var(--m-header-total-h);
        min-height: var(--m-header-total-h);

        padding-top: var(--m-header-safe-top);
        padding-left: calc(var(--m-header-pad-x) + env(safe-area-inset-left));
        padding-right: calc(var(--m-header-pad-x) + env(safe-area-inset-right));

        margin: 0 !important;

        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: var(--m-header-gap);

        /* важно: никакие transform/tuners не должны трогать header */
        transform: none !important;
        will-change: auto !important;

        background: none;
        border: none;
        box-shadow: none;
    }

    /* liquid glass слой */
    header.site-header::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: -1;

        background: rgba(13, 14, 19, 0.62);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        backdrop-filter: blur(16px) saturate(140%);
    }

    /* тонкий низ */
    header.site-header::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 100vw;
        height: 1px;
        transform: translateX(-50%);
        pointer-events: none;

        background: linear-gradient(90deg,
                transparent,
                rgba(255, 255, 255, 0.14),
                rgba(245, 193, 91, 0.18),
                rgba(255, 255, 255, 0.14),
                transparent);
        opacity: 0.6;
    }

    /* 2) СЛОТ 1 — burger */
    .menu-btn {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;

        background: transparent;
        border: none;
        padding: 0;
        margin: 0;

        flex: 0 0 44px;

        /* стабильно поверх стекла */
        position: relative;
        z-index: 2;
    }

    /* JS на мобилке снимает hidden, но иногда он может быть при ресайзе */
    .menu-btn[hidden] {
        display: inline-flex !important;
    }

    .menu-btn:focus-visible {
        outline: none;
    }

    .menu-icn {
        width: 18px;
        height: 2px;
        background: rgba(255, 255, 255, 0.75);
        border-radius: 999px;
        position: relative;
        display: block;
        transition: background 0.18s ease;
    }

    .menu-icn::before,
    .menu-icn::after {
        content: "";
        position: absolute;
        left: 0;
        width: 18px;
        height: 2px;
        background: rgba(255, 255, 255, 0.75);
        border-radius: 999px;
        transition: transform 0.18s ease, top 0.18s ease;
    }

    .menu-icn::before {
        top: -6px;
    }

    .menu-icn::after {
        top: 6px;
    }

    .menu-btn[aria-expanded="true"] .menu-icn {
        background: transparent;
    }

    .menu-btn[aria-expanded="true"] .menu-icn::before {
        top: 0;
        transform: rotate(45deg);
    }

    .menu-btn[aria-expanded="true"] .menu-icn::after {
        top: 0;
        transform: rotate(-45deg);
    }

    /* 3) СЛОТ 2 — logo строго по центру */
    header.site-header .logo {
    flex: 1 1 auto;
    min-width: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    transform: translate(var(--m-logo-x), var(--m-logo-y)) !important;
        will-change: transform !important;
    }

    header.site-header .logo a {
        display: inline-flex;
        align-items: baseline;
        gap: 6px;
        white-space: nowrap;
        line-height: 1;
    }

    /* 4) СЛОТ 3 — right */
    header.site-header .header-right {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 10px;

        width: auto !important;
        margin: 0 !important;

        transform: none !important;
        will-change: auto !important;
    }

    /* 5) ВАЖНО: desktop nav на мобилке скрыт, иначе он начнёт жить своей жизнью */
    header.site-header .site-nav {
        display: none !important;
    }
}

/* =========================================================
   [A3] DRAWER (BOTTOM SHEET) + BACKDROP
   drawer/backdrop ВСЕГДА в DOM (JS снимает hidden), но закрыты трансформом.
   ========================================================= */
@media (max-width: 768px) {
    .drawer-backdrop {
        position: fixed;
        top: var(--m-header-total-h);
        left: 0;
        right: 0;
        bottom: 0;

        z-index: 40;
        background: transparent;

        pointer-events: none;
    }

    .drawer-backdrop.is-open {
        pointer-events: auto;
    }

    .drawer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;

        /* старт под шапкой, с небольшим зазором */
        top: calc(var(--m-header-total-h) + var(--m-drawer-top-gap));

        z-index: 50;

        background: #0b0e14;
        border-top-left-radius: var(--m-drawer-radius);
        border-top-right-radius: var(--m-drawer-radius);

        padding: 22px 16px 16px;
        overflow: auto;

        display: flex;
        flex-direction: column;

        transform: translateY(105%);
        transition: transform 0.55s cubic-bezier(.2, .9, .2, 1);
        will-change: transform;

        pointer-events: none;
    }

    .drawer.is-open {
        transform: translateY(0);
        pointer-events: auto;
    }

    .drawer-link {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 16px 4px;
        color: rgba(255, 255, 255, 0.78);

        border-bottom: 1px solid rgba(255, 255, 255, 0.08);

        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        font-size: 12px;
    }

    .drawer-link::after {
        content: "";
        width: 7px;
        height: 7px;
        border-right: 2px solid rgba(255, 255, 255, 0.35);
        border-bottom: 2px solid rgba(255, 255, 255, 0.35);
        transform: rotate(-45deg);
        margin-left: 12px;
        flex: 0 0 auto;
    }

    .drawer-link:active {
        opacity: 0.6;
    }

    .drawer-link.is-active {
        color: #f5c15b;
        opacity: 1;
    }

    /* lock scroll when drawer open */
    html.drawer-open {
        overflow: hidden;
    }
}

/* =========================================================
   [A4] GLOBAL MOBILE LAYOUT TWEAKS (CONTENT, NOT HEADER)
   ========================================================= */
@media (max-width: 768px) {

    /* В style.css hero = grid на десктопе, на мобилке нужна колонка */
    .hero {
        grid-template-columns: 1fr;
    }

    /* карточка "что уже умеет" — вверх на мобилке (общая логика) */
    .hero-card {
        order: -1;
    }

    /* features — в столбец */
    .features {
        grid-template-columns: 1fr;
    }

    /* account grid — в столбец */
    .account-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   [B] PAGE: / (index) — MOBILE ONLY
   ========================================================= */
@media (max-width: 768px) {

    /* только перенос "что уже умеет" вниз на /index, если нужно */
    body[data-page="index"] .hero-card {
        order: 99;
        margin-top: 32px;
    }

    body[data-page="index"] .hero-title-balanced {
        text-align: center;
        width: 100%;
        font-size: clamp(22px, 7vw, 32px);
        line-height: 1.08;
    }

    body[data-page="index"] .hero-title-balanced .h1-line {
        display: block;
        white-space: nowrap;
    }

    body[data-page="index"] .hero-note {
        margin-top: 22px;
        font-size: 12px;
        line-height: 1.45;
        letter-spacing: 0.02em;
        text-align: center;
        color: rgba(255, 255, 255, 0.55);
    }

    /* ultra small: не ломаем вьюпорт */
    @media (max-width: 360px) {
        body[data-page="index"] .hero-title-balanced .h1-line {
            white-space: normal;
        }
    }
}

/* =========================================================
   [C] PAGE: /hello — MOBILE ONLY (оставил только безопасную базу)
   Если у тебя /hello уже отдельно стилизован — можно смело вырезать весь блок.
   ========================================================= */
@media (max-width: 768px) {
    body[data-page="hello"] .hero-sub {
        margin-top: -22px;
    }
}

/* =========================================================
   [A5] SITE FOOTER — MOBILE (ONE COLUMN, STABLE)
   ========================================================= */
@media (max-width: 768px) {
    footer.site-footer {
        margin: 56px 0 0 !important;
        padding: 28px 0 34px !important;
        text-align: center !important;
    }

    footer.site-footer .sf-wrap {
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        gap: 16px !important;

        padding-left: calc(16px + env(safe-area-inset-left)) !important;
        padding-right: calc(16px + env(safe-area-inset-right)) !important;
        box-sizing: border-box !important;
    }

    footer.site-footer .sf-col {
        width: 100% !important;
        max-width: 360px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        text-align: center !important;
    }

    footer.site-footer .sf-right {
        text-align: center !important;
    }

    footer.site-footer .sf-phone {
        font-weight: 800 !important;
        font-size: clamp(22px, 7.2vw, 28px) !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    footer.site-footer .sf-mail {
        max-width: 320px !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }
}

/* =========================================================
   [A6] BREADCRUMBS — MOBILE DEFAULT (обычно скрываем, чтобы не мешали)
   ========================================================= */
@media (max-width: 768px) {
    .breadcrumbs {
        display: none !important;
    }
}

/* =========================================================
   HARD OVERRIDE (MUST BE LAST) — MOBILE HEADER FIX
   ========================================================= */
@media (max-width: 768px) {

    /* на всякий: если где-то есть header{} — перебиваем максимально конкретно */
    body>.page>header.site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;

        z-index: 1000;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 10px !important;
        margin: 0 !important;

        height: var(--m-header-total-h) !important;
        min-height: var(--m-header-total-h) !important;

        padding-top: var(--m-header-safe-top) !important;
        padding-left: calc(var(--m-header-pad-x) + env(safe-area-inset-left)) !important;
        padding-right: calc(var(--m-header-pad-x) + env(safe-area-inset-right)) !important;

        transform: none !important;
    }

    /* слоты + порядок */
    body>.page>header.site-header .menu-btn {
        order: 0 !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        align-self: center !important;

        transform: none !important;
    }

body>.page>header.site-header .logo {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    transform: translate(var(--m-logo-x), var(--m-logo-y)) !important;
        will-change: transform !important;
    }

    body>.page>header.site-header .header-right {
        order: 2 !important;
        flex: 0 0 auto !important;

        width: auto !important;
        margin: 0 !important;

        display: flex !important;
        align-items: center !important;
        gap: 10px !important;

        transform: none !important;
    }

    /* на мобилке desktop-nav всегда скрыт */
    body>.page>header.site-header .site-nav {
        display: none !important;
    }

/* контент ниже fixed header — дефолт */
body>.page>main {
    padding-top: var(--m-content-top) !important;
}

/* контент ниже fixed header — ТОЛЬКО главная (если hero залезает под шапку) */
body[data-page="index"]>.page>main {
    padding-top: calc(var(--m-content-top) + var(--m-index-top-extra)) !important;
}
}