[DOCS] Fix responsive layout on phones and tablets (#2349)

The home hero image overlapped the hero title on phones: the default theme
pulls the stacked image up with negative margins (-76px -24px -48px), which
only works because it normally sits absolutely positioned inside a fixed
320px box. custom.css lets the image flow to enlarge it, so those margins
made it bleed off-screen and collide with the title. Reset them below 960px,
and hide the image entirely under 640px -- at phone size it is a wall of
unreadable logos that pushes the title, tagline and call-to-action buttons
below the fold.

Also fixes, found while sweeping every page at 360/400/900px:

- Nav bar: the shared Theengs nav has seven top-level entries and the theme
  swaps to the desktop nav bar at 768px, where it does not fit. From 768px to
  ~1180px, Shop, Sponsor, the appearance switch and the GitHub link were
  clipped or off-screen and the page scrolled sideways. Keep the hamburger +
  full-screen menu until the full menu genuinely fits.
- upload/binaries: indented (non-fenced) code blocks render as a bare <pre>,
  which the theme only makes scrollable inside a language-* wrapper, so the
  long esptool.py commands pushed the page sideways.
- use/lora: the YouTube embed is raw HTML with width="560", wider than a
  phone. Make video embeds fluid at a 16/9 ratio.
- OmgPipeline: stack below a 680px container instead of 480px -- in between,
  the "OpenMQTTGateway" label spilled out of its node and over the arrows.
  Drop the media query in index.md that meant to do this: it was scoped to
  index.md and could never match an element inside the child component.

No horizontal overflow remains on any of the 50 pages at 360px, 400px or
900px; desktop is unchanged.


Claude-Session: https://claude.ai/code/session_01Nj6xa5Mk5wi8XWtgJG7w5D

Co-authored-by: Florian <1technophile@users.noreply.github.com>
Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

docs/.vitepress/components/OmgPipeline.vue

@@ -104,8 +104,10 @@
   }
 }
 
-/* Very narrow (phones): stack vertically */
-@container (max-width: 480px) {
+/* Narrow (phones, small tablets): stack vertically. Below ~680px the four nodes
+   no longer leave room for the longest label ("OpenMQTTGateway"), which spilled
+   out of its box and over the arrows. */
+@container (max-width: 680px) {
   .omg-pipeline {
     flex-direction: column;
   }