Improve nearest hubs layout and show distance

app/components/catalog/InfoPanel.vue

@@ -190,14 +190,41 @@
           <div v-if="!loadingHubs && relatedHubs.length === 0" class="text-white/50 text-sm py-2">
             {{ $t('catalog.info.noHubs') }}
           </div>
-          <div v-else-if="!loadingHubs" class="flex flex-col gap-2">
-            <HubCard
-              v-for="(hub, index) in relatedHubs"
-              :key="hub.uuid ?? index"
-              :hub="hub"
-              selectable
-              @select="onHubSelect(hub)"
-            />
+          <div v-else-if="!loadingHubs" class="space-y-2">
+            <div v-if="nearestRailHub || nearestSeaHub" class="grid grid-cols-2 gap-2">
+              <Card v-if="nearestRailHub" padding="small" class="border border-white/10 bg-white/5">
+                <div class="flex items-center justify-between">
+                  <div class="flex items-center gap-2">
+                    <div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center">
+                      <Icon name="lucide:train-front" size="16" class="text-white/80" />
+                    </div>
+                    <div class="text-sm text-white/80">Ближайший ЖД хаб</div>
+                  </div>
+                  <div class="text-xs text-white/60">{{ formatDistance(nearestRailHub.distanceKm) }}</div>
+                </div>
+              </Card>
+              <Card v-if="nearestSeaHub" padding="small" class="border border-white/10 bg-white/5">
+                <div class="flex items-center justify-between">
+                  <div class="flex items-center gap-2">
+                    <div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center">
+                      <Icon name="lucide:ship" size="16" class="text-white/80" />
+                    </div>
+                    <div class="text-sm text-white/80">Ближайший морской хаб</div>
+                  </div>
+                  <div class="text-xs text-white/60">{{ formatDistance(nearestSeaHub.distanceKm) }}</div>
+                </div>
+              </Card>
+            </div>
+
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+              <HubCard
+                v-for="(hub, index) in relatedHubs"
+                :key="hub.uuid ?? index"
+                :hub="hub"
+                selectable
+                @select="onHubSelect(hub)"
+              />
+            </div>
           </div>
         </section>
 
@@ -311,6 +338,19 @@ const formatPrice = (price: number | string) => {
   return new Intl.NumberFormat('ru-RU').format(num)
 }
 
+const formatDistance = (km?: number | null) => {
+  if (!km && km !== 0) return ''
+  return `${Math.round(km).toLocaleString('ru-RU')} км`
+}
+
+const nearestRailHub = computed(() => {
+  return relatedHubs.value.find(h => h.transportTypes?.includes('rail'))
+})
+
+const nearestSeaHub = computed(() => {
+  return relatedHubs.value.find(h => h.transportTypes?.includes('sea'))
+})
+
 // Mock KYC teaser data (will be replaced with real data later)
 const kycTeaser = computed(() => {
   if (props.entityType !== 'supplier') return null