/*
 * Витрина на телефоне (до 760 px) — общий слой для всех страниц сайта
 * (макеты Claude Design, одобрены Мариной 11.10; ТЗ docs/design/sajt-telefon-i-kabinet).
 * Шапка с «Заявкой» и меню, золотой блик, «вдавливание» при нажатии,
 * появление блоков снизу вверх. Меню и разметку шапки строит /site-m.js.
 * Цвета — токены [data-mode="site"] из rm-ui.css. Компьютер этот файл не трогает.
 */

/* Мобильная шапка и меню есть только на телефоне. */
.mh-cta, .mh-burger, .mh-menu { display: none; }

@media (max-width: 760px) {
  /* ── Шапка: логотип 44 · «Заявка» 44 · меню 44 ─────────────── */
  .mh-on .hdr__nav, .mh-on .hdr__cta-m, .mh-on .hdr__burger,
  .mh-on .nav-links, .mh-on .nav-cta { display: none !important; }
  .mh-on .hdr, .mh-on > nav > .nav-in, .mh-on .nav-in {
    flex-wrap: nowrap !important; gap: 10px !important; padding: 12px 20px !important; position: relative; }
  .mh-on .brand img, .mh-on .hdr__logo img { width: 44px; height: 44px; }
  .mh-cta { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; min-height: 44px; padding: 0 16px;
    background: var(--rm-btn-main-bg); color: var(--rm-btn-main-fg) !important; font-weight: 800; font-size: 12px; letter-spacing: .12em;
    text-transform: uppercase; text-decoration: none; position: relative; overflow: hidden; }
  .mh-burger { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; cursor: pointer;
    background: none; border: 1px solid var(--rm-line-dash); border-radius: 50%; color: var(--rm-text); }
  .mh-burger svg { width: 20px; height: 20px; }
  .mh-burger .i-x, .mh-open .mh-burger .i-menu { display: none; }
  .mh-open .mh-burger .i-x { display: block; }
  /* «Войти» (site-me.js) — кружок 44 px между «Заявкой» и меню, без подписи. */
  .mh-on .mh-cta { order: 1; margin-left: auto; }
  .mh-cta--none { visibility: hidden; padding: 0; min-width: 0; }
  .mh-on .rmme { order: 2; margin-left: 0 !important; }
  .mh-on .mh-burger { order: 3; }
  .mh-on .rmme__btn { width: 44px; height: 44px; min-width: 44px; padding: 0; }
  .mh-on .rmme__btn > span { display: none; }
  .mh-menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; background: var(--rm-bg);
    border-bottom: 1px solid var(--rm-line); padding: 4px 20px 18px; flex-direction: column; box-shadow: 0 24px 40px -20px rgba(0,0,0,.8); }
  .mh-open .mh-menu { display: flex; animation: mh-drop .25s ease-out; }
  .mh-menu > a { display: flex; justify-content: space-between; align-items: center; min-height: 54px; border-bottom: 1px solid var(--rm-line);
    color: var(--rm-text); text-decoration: none; font-weight: 600; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; }
  .mh-menu > a svg { width: 18px; height: 18px; flex: none; color: var(--rm-gold); }
  .mh-menu > a[aria-current="page"] { color: var(--rm-gold-text); }
  .mh-tg { display: flex; gap: 10px; padding-top: 16px; }
  .mh-tg a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 1px solid var(--rm-line-dash);
    color: var(--rm-text); font-weight: 700; font-size: 14px; text-decoration: none; }
  .mh-tg a svg { width: 18px; height: 18px; }

  /* ── Нажатие: «вдавливание» вместо наведения ─────────────────── */
  .rm-btn, .mh-cta, .mh-tg a, .card, .fcard, .kadr, .tap { transition: transform .15s; }
  .rm-btn:active, .mh-cta:active, .mh-tg a:active, .card:active, .fcard:active, .kadr:active, .tap:active { transform: scale(.97); }
  .card:hover { transform: none; }

  /* ── Главные кнопки на всю ширину, высота 54 ─────────────────── */
  .rm-btn--main { min-height: 54px; }

  /* ── Золотая кнопка: пробегающий блик раз в 5 с ──────────────── */
  .rm-btn--main, .mh-cta { position: relative; overflow: hidden; }
  .rm-btn--main::after, .mh-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,240,225,.55), transparent); transform: skewX(-18deg); opacity: 0;
    animation: mh-shine 5s ease-in-out 1.5s infinite; }
  /* Светлая витрина (Марина 12.10): «меньше бликов» — блик слабее и реже. */
  [data-mode="site-light"] .rm-btn--main::after, [data-mode="site-light"] .mh-cta::after {
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent); animation-duration: 10s; }

  /* ── Появление блоков снизу вверх (класс ставит site-m.js по IntersectionObserver) ── */
  .mh-rv { opacity: 0; transform: translateY(22px); }
  .mh-rv.mh-in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1);
    transition-delay: var(--mh-d, 0s); }
}

@keyframes mh-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes mh-shine { 0%, 70% { left: -40%; opacity: 0; } 75% { opacity: 1; } 100% { left: 120%; opacity: 0; } }
@keyframes mh-kb { from { transform: scale(1.12) translate(-2%, -1%); } to { transform: scale(1) translate(0, 0); } }
@keyframes mh-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mh-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(207,156,118,.45); } 50% { box-shadow: 0 0 0 10px rgba(207,156,118,0); } }

@media (prefers-reduced-motion: reduce) {
  .mh-open .mh-menu { animation: none; }
  .rm-btn--main::after, .mh-cta::after { animation: none !important; }
  .mh-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}