/* Tablo — Mobile shim
   Подключается ПОСЛЕ newsstand.css. Правила для ≤720px.
   Десктоп не трогаем. */

/* Гамбургер скрыт на десктопе */
.nav-toggle { display: none; }
.mob-menu { display: none; }

/* Мобильный поиск скрыт на десктопе */
.home-top-mob { display: none; }

@media (max-width: 720px) {

  /* ── Глобальная страховка от горизонтального скролла ── */
  html, body { overflow-x: hidden; max-width: 100vw; }
  img, video, iframe, svg { max-width: 100%; height: auto; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
  a { word-break: break-word; }
  table { display: block; overflow-x: auto; max-width: 100%; }

  /* ── Layout shell ── */
  .ns-page { padding: 0 16px !important; }

  /* ── Header → compact с гамбургером ── */
  .header {
    position: sticky; top: 0; z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .header .container { padding: 0 20px; }
  .header-inner { padding: 12px 0; gap: 12px; }
  .ns-logo { gap: 0; }
  .ns-logo-mark { font-size: 22px; }
  .ns-logo-tag { display: none !important; }
  .header-search { display: none; }

  /* nav скрываем, показываем гамбургер */
  .ns-nav { display: none !important; }
  .nav-toggle {
    display: inline-flex !important;
    width: 40px; height: 40px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface);
    align-items: center; justify-content: center;
    margin-left: auto;
    cursor: pointer;
    flex-shrink: 0;
  }
  .nav-toggle:hover { border-color: var(--ink); }
  .nav-toggle .bars {
    width: 18px; height: 12px; position: relative;
  }
  .nav-toggle .bars::before,
  .nav-toggle .bars::after {
    content: ""; position: absolute; left: 0; right: 0; height: 2px;
    background: var(--ink); border-radius: 2px;
  }
  .nav-toggle .bars::before { top: 0; }
  .nav-toggle .bars::after  { bottom: 0; }

  /* Полноэкранное мобильное меню */
  .mob-menu {
    position: fixed; inset: 0; z-index: 100;
    background: var(--bg);
    padding: 18px 20px 32px;
    display: none;
    flex-direction: column;
    overflow-y: auto;
  }
  .mob-menu.open { display: flex; }
  .mob-menu .mm-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 18px; margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
  }
  .mob-menu .mm-logo {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 22px; font-weight: 800; letter-spacing: -0.03em;
    color: var(--ink); text-decoration: none;
  }
  .mob-menu .mm-logo .dot { color: var(--accent); }
  .mob-menu .mm-close {
    width: 40px; height: 40px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 20px; line-height: 1; color: var(--ink);
  }
  .mob-menu .mm-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column;
  }
  .mob-menu .mm-list li { border-bottom: 1px solid var(--line); }
  .mob-menu .mm-list a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 4px;
    font-size: 22px; font-weight: 600; letter-spacing: -0.015em;
    color: var(--ink); text-decoration: none;
  }
  .mob-menu .mm-list .mm-arr {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 14px; color: var(--muted); font-weight: 400;
  }
  .mob-menu .mm-cta {
    margin-top: auto; padding-top: 24px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .mob-menu .mm-cta .ns-btn {
    width: 100%; padding: 16px 20px; font-size: 15px;
    text-align: center; justify-content: center;
    display: flex; align-items: center;
  }
  .mob-menu .mm-foot {
    padding-top: 22px; margin-top: 22px;
    border-top: 1px dashed var(--line);
    display: flex; justify-content: space-between;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted);
  }

  /* Тач-таргеты */
  .ns-btn { min-height: 44px; }

  /* ── Footer compact ── */
  .ns-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px;
    padding-top: 28px;
  }
  .ns-footer-grid > div:first-child { grid-column: 1 / -1; }
  .ns-colophon {
    flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 16px 0 calc(24px + env(safe-area-inset-bottom));
    grid-column: 1 / -1;
  }

  /* ── Typography reset ── */
  .legal-hero h1,
  .about-hero h1,
  .page-head h1 {
    font-size: clamp(34px, 9vw, 44px) !important;
  }
  .legal-hero .meta-row,
  .meta-strip { gap: 8px 18px; font-size: 11px; }

  /* ── MOB-2: Auth pages (login, registration, lostpassword) ── */
  .auth-side { padding: 28px 20px 32px; min-height: 0; gap: 24px; }
  .auth-side .brand { flex-wrap: wrap; gap: 8px 14px; }
  .auth-side .brand .mark { white-space: nowrap; flex: 0 0 100%; }
  .auth-side .brand .tag { flex: 0 0 100%; border-left: none; padding-left: 0; padding-top: 4px; }
  .auth-side .pitch h2 { font-size: 36px; }
  .auth-side .pitch p { font-size: 14px; margin-top: 14px; }
  .auth-side .stats { display: none; }
  .auth-form { padding: 24px 20px calc(72px + env(safe-area-inset-bottom)); }
  .auth-form .top { margin-bottom: 24px; font-size: 12px; }
  .auth-form h1 { font-size: 32px; }
  .auth-form .lede { font-size: 14px; }
  .sso { margin-top: 24px; flex-direction: column; }
  .sso-btn { padding: 12px 14px; }
  .sso-btn .lbl-row .t { font-size: 13px; }
  .sso-btn .lbl-row .s { font-size: 11px; }
  .field-row { grid-template-columns: 1fr !important; }
  .auth-form .submit { padding: 16px 20px; font-size: 15px; }
  .auth-form .footnote { font-size: 12px; }

  /* ── MOB-3: Legal pages ── */
  .legal-body { display: block; }
  .legal-body aside.toc {
    position: static !important; width: 100% !important;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: 12px;
    padding: 14px 16px; margin-bottom: 24px;
  }
  .legal-body aside.toc ol { font-size: 12px; }
  .legal-content section { margin-bottom: 36px; }
  .legal-content h2 {
    font-size: 19px; gap: 8px;
    flex-wrap: wrap; overflow-wrap: break-word; word-break: break-word; hyphens: auto;
  }
  .legal-content h2 .n { font-size: 12px; }
  .legal-content h3 { font-size: 15px; margin-top: 18px; }
  .legal-content p,
  .legal-content li { font-size: 15px; line-height: 1.55; }
  .gloss .row { padding: 14px 0; }
  .gloss .term,
  .gloss .def { font-size: 14px; }
  .end-note { flex-direction: column; gap: 10px; align-items: flex-start; font-size: 11px; }

  /* ── MOB-4: About page ── */
  .about-hero { padding: 28px 0 24px; }
  .about-hero .lede { font-size: 16px; }
  .meta-strip { padding: 14px 0; margin-bottom: 28px; }
  .meta-strip .k { font-size: 10px; }
  .meta-strip .v { font-size: 12px; }
  .about-body section + section { margin-top: 32px; }
  .about-body h2 { font-size: 22px; }
  .about-body p { font-size: 15px; }
  .principles,
  .team,
  .docs { grid-template-columns: 1fr !important; }
  .principles .p { padding: 16px 18px; }
  .team .t { padding: 18px 20px; }
  .pull {
    margin: 24px 0; padding: 28px 24px 30px 28px;
    font-size: 22px; border-radius: 14px;
  }
  .pull::before { font-size: 80px; left: 8px; top: -4px; }
  .end-cta { grid-template-columns: 1fr !important; gap: 16px; padding: 28px 0 32px; }
  .end-cta h2 { font-size: 26px; }
  .end-cta .btns { flex-direction: column; width: 100%; }
  .end-cta .btns .btn,
  .end-cta .btns .ns-btn { width: 100%; padding: 14px; text-align: center; justify-content: center; }

  /* ── MOB-7: Main page — hero, filters, grid ── */

  /* Hero */
  .ns-hero { padding: 32px 0 24px; }
  .ns-hero-title { font-size: clamp(40px, 11vw, 56px) !important; }
  .ns-hero-lede { font-size: 15px; }
  .ns-hero-side { display: none; }

  /* Mobile search bar (hidden on desktop, shown on mobile) */
  .home-top-mob { display: block !important; padding: 10px 0 0; }
  .menu-mob-search {
    display: flex; align-items: center;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); overflow: hidden;
    padding: 0 12px; gap: 8px;
  }
  .menu-mob-search-input {
    flex: 1; border: none; outline: none; background: transparent;
    padding: 12px 0; font: inherit; font-size: 14px; color: var(--ink);
  }
  .menu-mob-search-submit {
    width: 32px; height: 32px; border: none; background: transparent;
    cursor: pointer; display: grid; place-items: center; color: var(--muted);
    padding: 0; flex-shrink: 0;
  }
  .menu-mob-search-submit::before { content: "⌕"; font-size: 20px; line-height: 1; }

  /* Filters → horizontal scroll strip */
  .filters { top: 56px !important; }
  .filters-inner { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 10px 0 !important; }
  .filters-inner::-webkit-scrollbar { display: none; }
  .filter-crumbs { display: none; }
  .filters-select-items { display: flex !important; gap: 8px; flex-wrap: nowrap; }
  .filters-select-items .select2-container { min-width: 130px !important; }

  /* Cards grid — 1 column (reinforce, newsstand handles from 600px) */
  .ns-grid { grid-template-columns: 1fr !important; }
  .alm-listing .alm-reveal { grid-template-columns: 1fr !important; }
  .home-profiles-ssr { grid-template-columns: 1fr !important; }

  /* Section head */
  .ns-section-head { padding: 22px 0 14px; }
  .ns-section-head h2 { font-size: 22px; }

  /* Home about section */
  .home-about { padding: 28px 0; }
  .home-about__lead { font-size: 22px; }
  .home-about__cols { grid-template-columns: 1fr !important; }

  /* ── MOB-8: Vacancy pages ── */

  /* Page head */
  .vak-page-head { padding: 28px 0 20px; }
  .vak-page-head h1 { font-size: clamp(34px, 10vw, 48px) !important; }
  .vak-page-head .lede { font-size: 15px; }
  .vak-page-head .head-grid { grid-template-columns: 1fr; gap: 16px; }
  .vak-page-head .head-actions { flex-direction: column; }
  .vak-page-head .head-actions .ns-btn { width: 100%; justify-content: center; }

  /* Vacancy card grid → 1 column */
  .vac-grid { grid-template-columns: 1fr !important; }

  /* Index grid → 1 column */
  .vak-index-grid { grid-template-columns: 1fr !important; }
  .ix-card.featured { grid-column: span 1 !important; }

  /* Post-vacancy CTA → stack */
  .vak-post-cta { flex-direction: column; padding: 24px 22px; }
  .vak-post-cta h3 { font-size: 22px; }
  .vak-post-cta-actions { flex-direction: column; width: 100%; }
  .vak-post-cta-actions .ns-btn { width: 100%; justify-content: center; }

  /* Tabs → horizontal scroll */
  .vak-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; }
  .vak-tabs::-webkit-scrollbar { display: none; }
  .vak-tab { white-space: nowrap; }

  /* Single vacancy */
  .vac-shell { padding: 16px 0 80px; }
  .vac-title { font-size: clamp(28px, 8vw, 40px) !important; }
  .vac-meta-grid { grid-template-columns: 1fr 1fr !important; }
  .vac-actions { flex-direction: column; gap: 8px; }
  .vac-actions .ns-btn { width: 100%; justify-content: center; }

  /* Add vacancy form */
  .add-vac-shell { padding: 16px 0 80px; }
  .vac-form-grid { grid-template-columns: 1fr !important; }
  .add-vac-save-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
    background: var(--bg); border-top: 1px solid var(--line);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    display: flex; gap: 8px;
  }
  .add-vac-save-bar .ns-btn { flex: 1; justify-content: center; }
}

/* ── MOB-2: Auth grid collapse (≤1000px) ── */
@media (max-width: 1000px) {
  main.auth-shell { grid-template-columns: 1fr !important; }
  .auth-side { min-height: 280px; padding: 40px 32px; }
  .auth-form { padding: 40px 32px; }
}

/* ── MOB-3: Legal TOC collapse (≤900px) ── */
@media (max-width: 900px) {
  .legal-body aside.toc {
    position: static !important; width: 100% !important;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: 12px;
    padding: 14px 16px; margin-bottom: 24px;
  }
  .legal-body { display: block; }
}