feat(comparisons): refine structured article comparison layouts

Give comparison articles clearer side identities and responsive layouts. Render backticked article text as inline code.

Co-Authored-By: Hagicode <noreply@hagicode.com>
Signed-off-by: newbe36524 <newbe36524@hotmail.com>

Author: newbe36524

src/components/InlineText.astro

@@ -0,0 +1,23 @@
+---
+// Plain text with `backtick` segments rendered as <code>. Renders inline, no wrapper element.
+import { splitInlineCode } from '@/lib/comparison-layout.mjs';
+
+const { text = '' } = Astro.props;
+const segments = splitInlineCode(text);
+---
+
+{segments.map((segment) => (segment.code ? <code class="inline-code">{segment.text}</code> : segment.text))}
+
+<style is:global>
+  /* Global on purpose: this component is used from several article components that all share the one look. */
+  .inline-code {
+    padding: 0.08em 0.38em;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 0.3rem;
+    background: var(--sl-color-bg-inline-code, var(--sl-color-gray-6));
+    font-family: var(--sl-font-mono);
+    font-size: 0.88em;
+    line-height: 1.2;
+    overflow-wrap: anywhere;
+  }
+</style>