fix(website): wrap mobile navigation at enlarged text sizes (#3598)

* fix(website): keep header navigation on one row and grid it on phones

The header grid gave the navigation only the space left beside the brand
caption and social controls, so six links wrapped onto a second line in
Greek, German, Spanish, Portuguese, Vietnamese and English at common
desktop widths.

- Size the navigation to its content and let the brand column absorb the
  remaining width; a container query hides the caption only when it no
  longer fits, replacing the fixed 851-1250px breakpoint.
- Move the navigation to its own row at 1100px and below, before one
  line can no longer hold it in any edition.
- On phones, lay the six links out as two rows of three content-sized
  columns, with a tighter gap below 340px.

* fix(website): wrap mobile navigation at narrow widths

---------

Co-authored-by: Kaoru0822 <208281322+kaoru0822-kitauji@users.noreply.github.com>
Co-authored-by: morluto <76467478+morluto@users.noreply.github.com>

website/public/assets/styles.css

@@ -2619,9 +2619,18 @@ pre code {
     width: calc(100% - 2.5rem);
   }
   .navigation {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    justify-content: space-between;
     gap: 0.5rem 0.8rem;
     font-size: 0.875rem;
   }
+  .navigation a {
+    min-width: 0;
+    min-height: 40px;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
   .hero {
     padding-block: 3.5rem 3rem;
   }
@@ -2933,6 +2942,11 @@ html[dir="rtl"] .brand-name {
     white-space: normal;
   }
 }
+@media (max-width: 340px) {
+  .navigation {
+    column-gap: 0.6rem;
+  }
+}
 @media (max-width: 400px) {
   .header-inner {
     column-gap: 1rem;