fix: fetch 13 articles so Latest grid shows 12 after hero filter; hide Load More when all articles already loaded

app/[category]/page.tsx

@@ -68,7 +68,7 @@ export default async function CategoryPage({ params }: Props) {
               <ArticleCard key={article.id} article={article} />
             ))}
           </div>
-          <LoadMoreButton categorySlug={categorySlug} initialCount={articles.length} />
+          <LoadMoreButton categorySlug={categorySlug} initialCount={articles.length} hasMore={articles.length >= 24} />
         </>
       )}
     </div>

app/page.tsx

@@ -11,12 +11,12 @@ export default async function HomePage() {
   try {
     const [settings, articles] = await Promise.all([
       getSiteSettings(),
-      getArticles({ limit: 12 }),
+      getArticles({ limit: 13 }),
     ])
     heroArticle = settings.hero_article
     latestArticles = settings.hero_article
       ? articles.filter((a) => a.id !== settings.hero_article!.id)
-      : articles
+      : articles.slice(0, 12)
   } catch {
     // Directus not available yet
   }

components/article/LoadMoreButton.tsx

@@ -7,13 +7,14 @@ import ArticleCard from './ArticleCard'
 interface Props {
   categorySlug: string
   initialCount: number
+  hasMore?: boolean
 }
 
-export default function LoadMoreButton({ categorySlug, initialCount }: Props) {
+export default function LoadMoreButton({ categorySlug, initialCount, hasMore: initialHasMore = true }: Props) {
   const [articles, setArticles] = useState<Article[]>([])
   const [offset, setOffset] = useState(initialCount)
   const [loading, setLoading] = useState(false)
-  const [hasMore, setHasMore] = useState(true)
+  const [hasMore, setHasMore] = useState(initialHasMore)
 
   async function loadMore() {
     setLoading(true)