/* ============================================================================
   VK Investing — mobile app layer
   ----------------------------------------------------------------------------
   ADD-ONLY, MOBILE-ONLY. Everything here lives inside @media (max-width: 640px),
   so the desktop site is never touched. On a phone it adds an app-style bottom
   tab bar and app-like spacing, matching the native app.
   ============================================================================ */

@media (max-width: 640px) {

  /* ---- Bottom tab bar (the core app feel) -------------------------------- */
  .vk-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0);
    height: calc(58px + env(safe-area-inset-bottom, 0));
  }

  .vk-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--ink-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 2px 6px;
    position: relative;
    transition: color .18s;
  }

  .vk-tab .vk-tab-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: transparent;
    margin-bottom: 1px;
  }

  .vk-tab[aria-current="page"] {
    color: var(--gold);
  }
  .vk-tab[aria-current="page"] .vk-tab-dot {
    background: var(--gold);
  }

  /* Give page content room so the bar never covers the footer/last card. */
  body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0)) !important;
  }

  /* The desktop footer feels redundant with a tab bar; tighten its bottom gap. */
  .site-footer {
    margin-bottom: 8px;
  }

  /* Hide the old hamburger nav links on mobile — the tab bar replaces them.
     The top bar keeps just the logo + Subscribe for a clean app header. */
  .nav-links {
    display: none !important;
  }
  .nav-toggle {
    display: none !important;
  }

  /* ---- App-style top bar ------------------------------------------------- */
  /* On mobile the ticker scrolls away (not sticky), and the nav sticks to the
     very top on its own — like an app header. This avoids the two sticky bars
     overlapping (desktop keeps the ticker sticky above the nav). */
  .ticker {
    position: static !important;
  }
  nav.main-nav {
    top: 0 !important;
    position: sticky;
  }
  .nav-inner {
    padding: 12px 16px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Put a compact Subscribe pill on the right of the top bar. The desktop
     Subscribe lives in .nav-links (now hidden), so we surface a small one. */
  .vk-topbar-cta {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    background: var(--gold);
    color: #ffffff !important;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 3px;
    font-weight: 600;
  }

  /* ---- App-style content spacing ---------------------------------------- */
  /* Tighter, full-bleed feel for cards on a phone. */
  .hero {
    padding: 32px 18px 36px !important;
  }
  h1.hero-title {
    font-size: 34px !important;
    line-height: 1.08;
  }

  /* Feed cards: a touch more separation, rounded like app cards. */
  .blog-card,
  .model-card,
  .article-card,
  .news-card {
    border-radius: 10px;
  }

  /* Section headers a little tighter to feel app-native. */
  section.standard {
    padding: 40px 18px !important;
  }
  .section-head h2 {
    font-size: 27px !important;
  }

  /* ---- Kill horizontal overflow (fixes BOTH bugs) ----------------------- */
  /* Symptom: on a phone the page zooms out into a narrow left column, and the
     fixed bottom tab bar stretches so only the first 1–2 tabs (Home, News…)
     are visible. Root cause: the layout viewport is wider than the screen
     because the decorative 3D hero cluster (transform-style: preserve-3d)
     escapes body's overflow clip and pushes past the right edge. A fixed bar
     is sized to that too-wide layout viewport, so its right tabs fall off
     screen. Two-part fix: clamp the viewport width, and drop the 3D cluster
     on mobile (it's marketing eye-candy — the app-style view is cleaner
     without it, and it removes the overflow source entirely). */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }
  .hero-visual {
    display: none !important;
  }
  .hero {
    overflow: hidden !important;
    grid-template-columns: 1fr !important;
  }
}

/* The tab bar element itself is only rendered on small screens (JS adds it),
   but hide it defensively on larger screens in case of any overlap. */
@media (min-width: 641px) {
  .vk-tabbar { display: none !important; }
  /* The compact Subscribe pill is a mobile-only surface. It's injected by JS
     into .nav-inner; hide it on desktop so it never shows as an unstyled link
     (the desktop Subscribe already lives in .nav-links). */
  .vk-topbar-cta { display: none !important; }
}