fix(i18n): use block/hidden pattern to prevent both selectors showing on desktop

Issue Confirmed by User:
- After F12 cache clear, initial load works
- BUT on desktop, both dropdown AND icons are rendering together
- Expected: Desktop shows ONLY dropdown, Mobile shows ONLY icons

Previous Attempt Failed:
- Desktop: `hidden md:flex md:relative`
- Mobile: `flex gap-1 md:hidden`
- Problem: `flex` as base class on mobile container created specificity conflict
- Both containers showed on desktop despite `md:hidden`

Root Cause:
- Mixing layout classes (flex) with visibility classes (hidden) on same element
- Tailwind applies base styles first, then responsive modifiers
- `flex` set display:flex, then `md:hidden` tried to override
- CSS specificity and cascade caused unpredictable behavior

Solution - Separate Display Control from Layout:

Desktop Container:
```html
<div class="hidden md:block">        <!-- Display control -->
  <div class="relative">             <!-- Layout/positioning -->
    <select>...</select>
  </div>
</div>
```

Mobile Container:
```html
<div class="block md:hidden">        <!-- Display control -->
  <div class="flex gap-1">           <!-- Layout -->
    ...buttons...
  </div>
</div>
```

Why This Works:
1. Parent divs ONLY control visibility (hidden/block/md:hidden/md:block)
2. Child divs ONLY control layout (relative/flex/gap)
3. No conflicting display properties on same element
4. Clean separation of concerns
5. Predictable Tailwind cascade behavior

Behavior:
- Mobile (<768px):
  - Desktop container: `hidden` (not visible) ✓
  - Mobile container: `block` (visible) ✓

- Desktop (≥768px):
  - Desktop container: `md:block` (visible) ✓
  - Mobile container: `md:hidden` (not visible) ✓

Technical Notes:
- `hidden` = display: none !important (base)
- `md:block` = display: block at ≥768px
- `md:hidden` = display: none !important at ≥768px
- No flex/relative on visibility-controlling elements
- Nested structure ensures proper cascade

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

public/js/components/language-selector.js

@@ -18,8 +18,9 @@
     const currentLang = (window.I18n && window.I18n.currentLang) || 'en';
 
     const selectorHTML = `
-      <!-- Desktop: Dropdown with text (md and up) - Hidden on mobile, Block on desktop -->
+      <!-- Desktop: Dropdown only (visible md and up) -->
-      <div class="hidden md:flex md:relative">
+      <div class="hidden md:block">
+        <div class="relative">
           <label for="language-selector-desktop" class="sr-only">Select Language</label>
           <select
             id="language-selector-desktop"
@@ -42,9 +43,11 @@
             </svg>
           </div>
         </div>
+      </div>
 
-      <!-- Mobile: Icon buttons (below md) - Flex on mobile, Hidden on desktop -->
+      <!-- Mobile: Icon buttons only (visible below md) -->
-      <div class="flex gap-1 md:hidden">
+      <div class="block md:hidden">
+        <div class="flex gap-1">
           ${supportedLanguages.filter(lang => !lang.disabled).map(lang => `
             <button
               data-lang="${lang.code}"
@@ -60,6 +63,7 @@
             </button>
           `).join('')}
         </div>
+      </div>
     `;
 
     container.innerHTML = selectorHTML;