feat: optimize mobile action bar layout with percentage-based widths

PROBLEM:
- Mobile action bar using equal width distribution (1fr auto 1fr)
- Not optimal space utilization on small screens
- Action buttons and center controls taking unnecessary space

SOLUTION @ 540px breakpoint:
.action-bar-content:
- Changed grid: 1fr auto 1fr → 50% 30%
- Hamburger menu + title area: 50% width
- Language selector area: 30% width
- Reduced gap: 2rem → 0.5rem
- Reduced padding: auto → 0.5rem horizontal

Hidden elements on mobile:
- .view-controls-center: display: none (moved to hamburger menu)
- .action-buttons-right: display: none (PDF/Print in hamburger menu)

RESULT:
Mobile layout distribution:
✓ Hamburger + CV title: ~50% (more breathing room)
✓ Language selector (EN/ES): ~30% (adequate space)
✓ Remaining 20%: natural spacing/padding
✓ Center controls hidden (accessible via hamburger menu)
✓ Action buttons hidden (accessible via hamburger menu)

BENEFITS:
- Better space utilization on small screens
- Clearer visual hierarchy
- More touch-friendly target areas
- All functionality still accessible via hamburger menu

static/css/main.css

@@ -3347,6 +3347,18 @@ html {
    ======================================== */
 
 @media (max-width: 540px) {
+    /* Adjust action bar grid for mobile: 50% hamburger/title, 30% language */
+    .action-bar-content {
+        grid-template-columns: 50% 30%;
+        gap: 0.5rem;
+        padding: 0 0.5rem;
+    }
+
+    /* Hide center controls on mobile (moved to hamburger menu) */
+    .view-controls-center {
+        display: none;
+    }
+
     /* Hide year from title in mobile view */
     .site-title-year {
         display: none;
@@ -3373,6 +3385,11 @@ html {
         margin-right: 0rem;
     }
 
+    /* Hide action buttons on small screens (available in hamburger menu) */
+    .action-buttons-right {
+        display: none;
+    }
+
     /* ========== Language Selector - Show Short Names Only ========== */
     .language-selector .selector-btn {
         position: relative;