feat: increase gallery grid from 4 to 5 columns per row on desktopfeat: increase gallery grid from 4 to 5 columns per row on desktop

resources/js/components/artwork/ArtworkBreadcrumbs.jsx

@@ -0,0 +1,88 @@
+import React from 'react'
+
+function Separator() {
+  return (
+    <svg
+      className="h-3 w-3 flex-shrink-0 text-white/15"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+      aria-hidden="true"
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+    </svg>
+  )
+}
+
+function Crumb({ href, children, current = false }) {
+  const base = 'text-xs leading-none truncate max-w-[180px] sm:max-w-[260px]'
+  if (current) {
+    return (
+      <span
+        className={`${base} text-white/30`}
+        aria-current="page"
+      >
+        {children}
+      </span>
+    )
+  }
+  return (
+    <a
+      href={href}
+      className={`${base} text-white/30 hover:text-white/60 transition-colors duration-150`}
+    >
+      {children}
+    </a>
+  )
+}
+
+export default function ArtworkBreadcrumbs({ artwork }) {
+  if (!artwork) return null
+
+  // Use the first category for the content-type + category crumbs
+  const firstCategory = artwork.categories?.[0] ?? null
+  const contentTypeSlug = firstCategory?.content_type_slug || null
+  const contentTypeName = contentTypeSlug
+    ? contentTypeSlug.charAt(0).toUpperCase() + contentTypeSlug.slice(1)
+    : null
+
+  const categorySlug = firstCategory?.slug || null
+  const categoryName = firstCategory?.name || null
+  const categoryUrl = contentTypeSlug && categorySlug
+    ? `/${contentTypeSlug}/${categorySlug}`
+    : null
+
+  return (
+    <nav aria-label="Breadcrumb" className="mt-1.5 mb-0">
+      <ol className="flex flex-wrap items-center gap-x-1 gap-y-1">
+        {/* Home */}
+        <li className="flex items-center gap-x-1.5">
+          <Crumb href="/">Home</Crumb>
+        </li>
+
+        {/* Content type e.g. Photography */}
+        {contentTypeSlug && (
+          <>
+            <li className="flex items-center"><Separator /></li>
+            <li className="flex items-center gap-x-1.5">
+              <Crumb href={`/${contentTypeSlug}`}>{contentTypeName}</Crumb>
+            </li>
+          </>
+        )}
+
+        {/* Category e.g. Landscapes */}
+        {categoryUrl && (
+          <>
+            <li className="flex items-center"><Separator /></li>
+            <li className="flex items-center gap-x-1.5">
+              <Crumb href={categoryUrl}>{categoryName}</Crumb>
+            </li>
+          </>
+        )}
+
+        {/* Current artwork title — omitted: shown as h1 above */}
+      </ol>
+    </nav>
+  )
+}