Improve portfolio list card layout with four-column grid.

Show the English title as a low-opacity backdrop behind the Farsi title and move the category label below it.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/app/portfolio/page.tsx

@@ -143,7 +143,7 @@ export default async function PortfolioListPage({
           ) : (
             <div
               key={`${activeCategory?.slug ?? "all"}-${page}`}
-              className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3"
+              className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4"
             >
               {items.map((item, index) => {
                 const image = getPortfolioCoverImage(item);
@@ -151,15 +151,23 @@ export default async function PortfolioListPage({
                   item.categoryName,
                   allCategories,
                 );
+                const titleFa = item.titleFa || item.title;
+                const titleEn =
+                  item.titleEn ??
+                  (item.titleFa && item.title !== item.titleFa
+                    ? item.title
+                    : null);
 
                 return (
                   <article
                     key={item.id}
                     className={`reveal group overflow-hidden rounded-2xl border border-line/70 ${
-                      index % 3 === 1
+                      index % 4 === 1
                         ? "reveal-delay-1"
-                        : index % 3 === 2
+                        : index % 4 === 2
                           ? "reveal-delay-2"
+                          : index % 4 === 3
+                            ? "reveal-delay-3"
                             : ""
                     }`}
                   >
@@ -174,16 +182,24 @@ export default async function PortfolioListPage({
                         ) : null}
                       </div>
                       <div className="px-4 py-4">
-                        {categoryFa ? (
-                          <p className="mb-2 text-[11px] text-muted">
-                            {categoryFa}
+                        <div className="relative mb-2 min-h-[3.25rem] overflow-hidden">
+                          {titleEn ? (
+                            <p
+                              aria-hidden
+                              className="latin pointer-events-none absolute inset-x-0 top-1/2 z-0 line-clamp-2 -translate-y-1/2 text-[clamp(1rem,2.2vw,1.35rem)] font-light uppercase leading-none tracking-[0.12em] text-ink/[0.07]"
+                            >
+                              {titleEn}
                             </p>
                           ) : null}
-                        <h2 className="group-text-hover mb-0.5 line-clamp-2 whitespace-normal text-lg font-normal leading-7 text-ink">
-                          {item.titleFa || item.title}
+                          <h2 className="group-text-hover relative z-10 line-clamp-2 whitespace-normal text-base font-normal leading-7 text-ink">
+                            {titleFa}
                           </h2>
+                        </div>
+                        {categoryFa ? (
+                          <p className="text-[11px] text-muted">{categoryFa}</p>
+                        ) : null}
                         {item.abstract ? (
-                          <p className="line-clamp-3 text-sm leading-6 text-muted">
+                          <p className="mt-2 line-clamp-3 text-sm leading-6 text-muted">
                             {item.abstract}
                           </p>
                         ) : null}