/* ============================================================
   MOBILE BUILD — landbound.mov
   Loaded LAST on every page (after each page's inline <style>), so these
   rules win without !important on equal-specificity selectors. A few high-
   specificity desktop rules still need !important; those are marked.
   Active under 820px (phones + small tablets in portrait).
   ============================================================ */
@media (max-width: 820px) {

  /* ---------- NAV: left sidebar → bottom tab bar ---------- */
  .nav {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; height: auto; min-height: 54px;
    flex-direction: row; padding: 0; padding-bottom: env(safe-area-inset-bottom);
    border-right: none; border-top: 1px solid var(--line);
    background: var(--bg-2); /* fully opaque so page content can't show through */
    z-index: 200;
  }
  /* Solid backing that extends BELOW the bar only (never over page content above
     it), so the strip beneath the bar can't show the page through it. */
  .nav::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 320px; background: var(--bg-2); z-index: -1; }
  .nav-brand, .nav-socials, .nav-bottom { display: none !important; }
  .nav-items {
    flex-direction: row; flex: 1; gap: 0; padding: 0; margin: 0; height: 54px;
    justify-content: space-around; align-items: stretch;
  }
  .nav-item {
    flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px;
    justify-content: center; align-items: center; text-align: center;
    padding: 8px 2px; font-size: 9px; letter-spacing: 0.03em; border-radius: 0;
  }
  .nav-item.active { background: transparent; color: var(--amber); box-shadow: inset 0 2px 0 var(--amber); }

  /* ---------- MAIN: full width, clear the bottom bar ---------- */
  .main, .main-page {
    margin-left: 0 !important; max-width: 100% !important;
    padding: 14px 12px calc(74px + env(safe-area-inset-bottom)) !important;
  }
  /* Hire's wrapper — drop the sidebar gap; the rotunda stage stays full-bleed */
  .hire-main { margin-left: 0 !important; max-width: 100% !important; }

  /* HIRE hero: size to the DYNAMIC viewport (100dvh) so in-app browsers like
     Instagram, which have shorter chrome-collapsed viewports, can't squeeze the
     CTAs into the scroll cue. Lay the pitch out with flexbox and reserve room at
     the bottom for the cue + the tab bar, instead of absolute-centering it
     against 100vh (which overflowed on short viewports and overlapped). */
  .stage {
    height: 100dvh !important; min-height: 100dvh !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    padding: 54px 14px calc(104px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }
  .pitch {
    position: static !important; transform: none !important;
    left: auto !important; top: auto !important;
    width: 100% !important; max-width: 460px !important;
  }
  .kick { margin-bottom: 12px !important; }
  .pitch-stats { gap: 18px !important; margin: 16px auto 18px !important; padding: 11px 16px !important; }
  /* Cue drops into the reserved bottom band, clearly below the buttons and above
     the tab bar. */
  .scrollcue { bottom: calc(58px + env(safe-area-inset-bottom)) !important; }

  /* ---------- HOME: profile / hero card ---------- */
  .hero-card { border-radius: 12px; }
  .hero-body { padding: 16px !important; }
  /* Kill the desktop sidebar theme switcher on mobile — it was injected into
     .nav and collided with the bottom tab bar. */
  .theme-switcher { display: none !important; }

  /* Profile: compact avatar-left / info-right (the proportional "hybrid" look),
     just sized down for the phone so it reads balanced, not oversized. */
  .profile { flex-direction: row !important; align-items: flex-start !important; gap: 13px !important; }
  .profile-avatar { width: 60px !important; height: 60px !important; padding: 2px !important; flex-shrink: 0 !important; }
  .profile-info { flex: 1 !important; min-width: 0 !important; }
  .profile-name { font-size: 20px !important; }
  .profile-handle { font-size: 11.5px !important; }
  .profile-bio { font-size: 12px !important; line-height: 1.5 !important; margin-bottom: 9px !important; }
  .profile-bio .lane-ai { font-size: 11px !important; }
  .profile-proof { font-size: 10px !important; margin-top: 7px !important; }
  /* Stats: single horizontal row, left-grouped with even gaps (the compact
     "all-on-one-line" look Jacob's reference shows). Content-width cells so the
     numbers never collide. */
  .profile-stats { display: flex !important; flex-wrap: nowrap !important; gap: 10px !important; justify-content: flex-start !important; padding-top: 13px !important; }
  .profile-stats .stat { flex: 0 0 auto !important; min-width: 0 !important; padding: 0 !important; border-right: none !important; }
  .profile-stats .num { font-size: 15px !important; }
  .profile-stats .lbl { font-size: 6px !important; letter-spacing: 0.02em !important; margin-top: 3px !important; white-space: nowrap !important; }
  /* Actions: keep all three on one row (Hire me wider), still big + tappable.
     Smaller icon/text + nowrap so "Book a call" and the rotating Hire label
     stay on one line. */
  .profile-actions { grid-template-columns: 1.4fr 1fr 1fr !important; gap: 6px !important; margin-top: 14px !important; }
  .pa-btn { padding: 15px 6px !important; font-size: 12.5px !important; gap: 4px !important; white-space: nowrap !important; }
  .pa-btn .ic { width: 13px !important; height: 13px !important; }
  .pa-btn .ic svg { width: 12px !important; height: 12px !important; }
  .pa-rot-item { height: 18px !important; line-height: 18px !important; font-size: 12.5px !important; gap: 4px !important; }
  .pa-rot-item .pa-ic { width: 13px !important; height: 13px !important; }
  .pa-rot-item .pa-ic svg { width: 12px !important; height: 12px !important; }
  .pa-rot-window { height: 18px !important; }

  /* Stories + verticals + any horizontal strip: edge-to-edge, momentum scroll */
  .stories, .shorts-row, .verticals-strip, .vfx-strip, .shorts-strip { -webkit-overflow-scrolling: touch; }
  /* Client-story circles: compact so ~5 fit and the next one half-peeks at the
     right edge (a clear "scroll for more" cue). */
  .story { width: 60px !important; }
  .story-ring { width: 54px !important; height: 54px !important; }
  .story-avatar { font-size: 14px !important; }
  .story-name { max-width: 60px !important; font-size: 10.5px !important; }
  /* Verticals row: size tiles so ~2.5 show — a clear "scroll right for more" cue. */
  .shorts-strip .short, .shorts-strip .short-cta { flex: 0 0 38% !important; }

  /* ---------- HOME FEED: single column + filters as a top scroll bar ---------- */
  .feed-layout { display: flex !important; flex-direction: column !important; gap: 0 !important; max-width: 100% !important; margin: 6px 0 24px !important; }
  .home-feed, .feed-posts { max-width: 100% !important; width: 100%; }
  /* Keep the hashtag filters — move the rail ABOVE the posts as horizontal pills */
  .feed-rail { display: flex !important; position: static !important; order: -1; flex-direction: column; gap: 8px; margin-bottom: 14px; top: auto !important; }
  .rail-h { padding: 0 2px; }
  .rail-cats { flex-direction: row !important; overflow-x: auto; gap: 8px; padding: 4px 0 6px; scrollbar-width: none; }
  .rail-cats::-webkit-scrollbar { display: none; }
  .rail-cat { flex: 0 0 auto !important; flex-direction: row; align-items: center; gap: 7px; margin: 0 !important; padding: 7px 13px !important; border: 1px solid var(--line); border-radius: 100px; background: var(--bg-2); }
  .rail-cat.active { margin: 0 !important; padding: 7px 13px !important; }
  .rail-cat-hash { width: 20px !important; height: 20px !important; font-size: 12px !important; border-radius: 6px !important; }
  .rail-cat-info { display: flex; align-items: baseline; gap: 6px; }
  .rail-cat-name { font-size: 12px !important; }
  .rail-cat-sub { margin-top: 0 !important; font-size: 10px !important; }
  .rail-cat-action { display: none !important; }

  /* Back-to-top: above the bottom nav, out of the way */
  .feed-jump-top { left: auto !important; right: 14px !important; top: auto !important; bottom: calc(70px + env(safe-area-inset-bottom)) !important; }

  /* ---------- GENERIC: any two-column page layout → single column ---------- */
  .page-hero { grid-template-columns: 1fr !important; gap: 10px !important; margin-bottom: 14px !important; padding-bottom: 12px !important; }
  .page-hero h1 { font-size: 23px !important; line-height: 1.15 !important; }
  .page-hero .lede { font-size: 12.5px !important; }
  .feed-layout, .work-layout { display: block !important; }
  .yt { display: flex !important; flex-direction: column !important; }
  .side, .recs, .feed-rail-col { width: 100% !important; max-width: 100% !important; }

  /* ---------- WORK page → mobile-YouTube layout ---------- */
  /* The inner Work column is ALSO class="main" — strip the page-wrapper padding
     it wrongly inherited (that 74px bottom padding was the huge mystery gap). */
  .yt > .main, .yt > .side { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0 !important; }
  /* Full-bleed 16:9 player pinned to the top, edge-to-edge like the YouTube app */
  .player { max-height: none !important; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important;
    margin: 0 -12px !important; width: calc(100% + 24px) !important; }
  .meta { padding: 12px 0 2px !important; }
  .meta .title { font-size: 17px !important; line-height: 1.3 !important; margin-bottom: 6px !important; }
  .meta .sub { font-size: 12.5px !important; }
  /* Role chips become a smaller horizontal scroll strip (YouTube's action row) */
  .actions { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; padding-bottom: 2px; gap: 6px !important; }
  .actions::-webkit-scrollbar { display: none; }
  .actions .chip { flex: 0 0 auto; font-size: 9.5px !important; padding: 5px 11px !important; letter-spacing: 0.08em !important; }
  /* Up Next: full-width list of thumbnail-left / title-right rows */
  .side { position: static !important; max-height: none !important; overflow: visible !important; padding-right: 0 !important; margin-top: 10px !important; }
  .rec { grid-template-columns: 150px 1fr !important; gap: 10px !important; }
  .rec-title { font-size: 13px !important; line-height: 1.3 !important; }
  .rec-meta { font-size: 11px !important; }
  /* Floating "Open Verticals" pill — keep it, but pin it clearly ABOVE the bottom
     tab bar (with a higher z-index than the nav) so it can't dip behind it. */
  .toggle-btn { display: inline-block !important; bottom: calc(72px + env(safe-area-inset-bottom)) !important; right: 14px !important; z-index: 210 !important; }
  /* Tighten + even out the spacing between the player, Work Featured, the
     verticals promo, and Up Next so they read as one connected flow, and shrink
     the verticals card so it's not a giant separator. */
  #workFeatured, .related-verticals, .episode-drawer { margin-top: 18px !important; padding-top: 16px !important; }
  .verticals-card { margin: 18px 0 !important; padding: 10px !important; gap: 10px !important; }
  .vc-thumb { flex: 0 0 78px !important; }
  .side { margin-top: 18px !important; }
  .side-h { margin-bottom: 10px !important; }
  .recs { gap: 12px !important; }
  /* Horizontal-scroll affordance: size Work-Featured / related-vertical tiles so
     the NEXT one clearly peeks in from the right edge ("one and a bit" visible). */
  .ed-list .ed-tile { flex: 0 0 74% !important; }
  .rv-strip { padding-right: 30px !important; }

  /* ---------- VERTICAL FEED (shorts): tap-to-reveal overlay + slide-in list ---------- */
  /* Back-to-Work + the menu button stay hidden until the user taps the video. */
  .shorts-topbar { opacity: 0 !important; transition: opacity .25s ease; }
  .shorts.ui-open .shorts-topbar { opacity: 1 !important; }
  .shorts-menu { display: inline-flex !important; }
  /* The clip list slides in from the right (it was cropped off-screen). */
  .shorts-rail {
    position: fixed !important; top: 0; right: 0; bottom: 0;
    width: min(88%, 360px) !important; max-width: 88% !important;
    transform: translateX(101%); transition: transform .3s cubic-bezier(.7,0,.2,1);
    z-index: 30 !important; box-shadow: -14px 0 44px rgba(0,0,0,0.65);
  }
  .shorts.rail-open .shorts-rail { transform: translateX(0); }
  /* FILTER TAKEOVER (mobile only): when a category filter is active, hide the
     player/credits/featured and surface just that category's videos as a list
     pulled to the top — so the filter gives immediate, visible feedback. */
  body.work-filter-active .yt > .main { display: none !important; }
  body.work-filter-active .yt > .side { order: -1 !important; margin-top: 6px !important; }
  body.work-filter-active .verticals-card { display: none !important; }

  /* Reduce big desktop headings site-wide on phones */
  .id-block .name { font-size: 26px !important; }
}