feat: мобильная версия + поиск + SEO-инфраструктура

Мобилка:
- Header: hide-on-scroll, мобильный burger-menu, тонкая адаптация
- Hero: текст и кнопки оптимизированы под узкие экраны (full-width buttons)
- ArticleCard featured: на мобилке в столбик, картинка сверху
- Stats: компактная сетка 2x2 с уменьшенным шрифтом
- Глобально: scroll-behavior smooth, safe-area-inset, tap targets 40px+
- prefers-reduced-motion respected

Страница статьи:
- ReadingProgress: прогресс-бар сверху при скролле
- ScrollToTop: круглая кнопка наверху после 800px скролла
- ShareButton: Web Share API на мобилках, копирование URL на десктопе
- Related articles: подбираем по пересечению тегов (max 3)
- Мобильная типографика: prose-base sm:prose-lg, leading-relaxed

SEO/инфра:
- /api/search: простой поиск по title/excerpt/tags с подсветкой и скорингом
- SearchBox: оверлей с / хоткеем, дебаунс 250ms, мобиле-friendly
- /rss.xml: полноценный RSS-фид
- sitemap.xml: динамический через next sitemap()
- robots.txt: динамический
- viewport metadata + theme-color для светлой/тёмной темы
- alternates rel=alternate type=application/rss+xml

components/ArticleCard.js

@@ -4,10 +4,9 @@ import { Clock } from 'lucide-react';
 
 function imageUrl(article) {
   if (!article.cover_url) return null;
-  return article.cover_url; // /uploads/... проксируется через next.config rewrites
+  return article.cover_url;
 }
 
-// Детерминированный градиент-фоллбек, чтобы у каждой статьи был свой узнаваемый цвет
 function gradientFor(article) {
   const seed = (article.id || 0) * 31 + (article.title?.length || 0);
   const variants = [
@@ -21,14 +20,13 @@ function gradientFor(article) {
   return variants[seed % variants.length];
 }
 
-function CoverPlaceholder({ article, featured = false }) {
+function CoverPlaceholder({ article, featured = false, className = '' }) {
   const gradient = gradientFor(article);
   return (
     <div
-      className={`relative overflow-hidden ${featured ? 'aspect-[16/8]' : 'aspect-[16/9]'} rounded-xl`}
+      className={`relative overflow-hidden ${featured ? 'aspect-[16/9] sm:aspect-[16/10]' : 'aspect-[16/9]'} rounded-xl ${className}`}
       style={{ background: gradient }}
     >
-      {/* геометрические декорации */}
       <div className="absolute -top-10 -right-10 w-40 h-40 rounded-full opacity-30" style={{ background: 'rgba(255,255,255,0.3)' }} />
       <div className="absolute -bottom-12 -left-8 w-32 h-32 rounded-full opacity-20" style={{ background: 'rgba(0,0,0,0.2)' }} />
       <div className="absolute inset-0 flex items-end p-4">
@@ -46,25 +44,31 @@ export default function ArticleCard({ article, featured = false }) {
   if (featured) {
     return (
       <Link href={`/blog/${article.slug}`} className="article-card block group overflow-hidden p-0">
-        <div className="grid sm:grid-cols-2 gap-0">
-          <div className="p-4 sm:p-5">
+        <div className="flex flex-col sm:grid sm:grid-cols-5 sm:gap-0">
+          {/* Image: full-width на мобиле, 2/5 на десктопе */}
+          <div className="p-3 sm:p-5 sm:col-span-2">
             {img ? (
-              <img src={img} alt={article.title} className="w-full aspect-[16/9] object-cover rounded-xl" loading="eager" />
+              <img
+                src={img}
+                alt={article.title}
+                className="w-full aspect-[16/9] sm:aspect-square object-cover rounded-xl"
+                loading="eager"
+              />
             ) : (
-              <CoverPlaceholder article={article} featured />
+              <CoverPlaceholder article={article} className="sm:aspect-square" />
             )}
           </div>
-          <div className="p-6 sm:p-8 flex flex-col justify-center">
+          <div className="p-5 sm:p-8 sm:col-span-3 flex flex-col justify-center">
             <div className="flex flex-wrap items-center gap-2 mb-3">
               {(article.tags || []).slice(0, 3).map(t => (
                 <span key={t} className="tag">#{t}</span>
               ))}
             </div>
-            <h2 className="text-2xl sm:text-3xl font-bold mb-3 leading-tight ink group-hover:accent transition-colors">
+            <h2 className="text-xl sm:text-3xl font-bold mb-3 leading-tight ink group-hover:accent transition-colors">
               {article.title}
             </h2>
             {article.excerpt && (
-              <p className="mute leading-relaxed line-clamp-3 mb-4">
+              <p className="mute text-sm sm:text-base leading-relaxed line-clamp-3 mb-4">
                 {article.excerpt}
               </p>
             )}
@@ -91,13 +95,13 @@ export default function ArticleCard({ article, featured = false }) {
           <CoverPlaceholder article={article} />
         )}
       </div>
-      <div className="p-5 pt-2">
+      <div className="p-4 sm:p-5 pt-2">
         <div className="flex flex-wrap items-center gap-2 mb-2">
           {(article.tags || []).slice(0, 2).map(t => (
             <span key={t} className="tag">#{t}</span>
           ))}
         </div>
-        <h3 className="text-lg font-semibold mb-2 ink group-hover:accent transition-colors leading-snug line-clamp-2">
+        <h3 className="text-base sm:text-lg font-semibold mb-2 ink group-hover:accent transition-colors leading-snug line-clamp-2">
           {article.title}
         </h3>
         {article.excerpt && (