/* Design gallery — extends the catalog grid primitive (catalog.css)
   with gallery-specific layered styles. The card primitives
   (.product-card, .card-visual, .card-name, .card-sku, .card-divider,
   .empty-state, .loading-card) come from catalog.css. The stage
   badge styles are duplicated from public/css/admin-designs.css
   verbatim so the public card and the owner-only /design/:id
   detail page render the same badge byte-for-byte without
   pulling admin-only CSS into the public storefront. */

/* ── Stage badge — Concept (FLUX) → Vectoring → Print-Ready.
       Verbatim mirror of .stage-badge / .stage-* in
       public/css/admin-designs.css (lines 211-226) so the public
       gallery badge matches the owner-only detail badge without
       runtime differences. */
.stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.stage-pending     { background: var(--bg-3); color: var(--fg-muted); border: 1px solid var(--border); }
.stage-concept     { background: rgba(240, 160, 48, 0.15); color: var(--amber); border: 1px solid rgba(240, 160, 48, 0.35); }
.stage-vectoring   { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.35); }
.stage-print-ready { background: rgba(45, 182, 125, 0.15); color: var(--green); border: 1px solid rgba(45, 182, 125, 0.35); }

/* Gallery grid uses the same auto-fill 280px columns so layout is
   visually identical to the catalog page at every breakpoint —
   no horizontal scroll on a mobile viewport. */
.gallery-grid {
  padding: 2.5rem 3rem;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

/* The card itself inherits .product-card from catalog.css. */

/* Pin a 4:3 aspect ratio on the visual area so the thumbnail reserves
   space even when the image is still loading or absent. Background
   uses --bg-3 so PDF / SVG thumbnails stay legible against the layout
   without rescaling or cropping. */
.gallery-card .card-visual {
  height: auto;
  aspect-ratio: 4 / 3;
  background: var(--bg-3);
}
.gallery-card .card-visual-icon {
  font-size: 3rem;
}

/* Thumbnail is contained (not cropped) so unusual PDF / SVG previews
   stay fully legible. The .card-img class from catalog.css defaults
   to object-fit: cover + height: 140px; we override it here for the
   gallery card so the image honoring aspect-ratio is the visual's
   anchor. */
.gallery-thumb {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  background: var(--bg-3);
  border-radius: 0;
}

/* Stage badge sits in the upper-left of the card visual, layered over
   the thumbnail. The same .stage-badge / .stage-pending /
   .stage-concept / .stage-vectoring / .stage-print-ready classes are
   used on /design/:id, so the visual contract stays identical
   between public gallery and owner-only detail. */
.gallery-card .stage-badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 3;
}

/* Footer "updated on" line — sits under the card-divider, in muted
   typography distinguishable from the catalog card's pricing rows. */
.card-meta-line {
  font-size: 0.72rem;
  color: var(--fg-muted);
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.02em;
}

/* Mobile breakpoints mirror catalog.css so the gallery collapses to
   one column without overflowing the viewport. */
@media (max-width: 768px) {
  .gallery-grid { padding: 1.5rem; }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

/* Stage-filter tab strip above the gallery — reuses the .filter-bar /
   .filter-btn visual contract from catalog.css so the tab style
   stays consistent with /catalog. The 1280px / 3rem padding wrapper
   matches the .gallery-grid below. The mobile-breakpoint padding
   collapses to 1.5rem like the grid. */
.designs-filter-bar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.25rem 3rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  background: transparent;
  border-bottom: 0;
  position: static;
  top: auto;
}
.designs-filter-bar .filter-btn[data-stage="all"] { margin-right: 0.25rem; }
@media (max-width: 768px) {
  .designs-filter-bar { padding: 1.25rem 1.5rem 0; }
}

/* Sort-tab strip — same .filter-bar / .filter-btn visual contract as
   the stage strip above so the two rows feel like one strip. The
   smaller top padding tightens the gap between the stage and sort
   rows; no border-bottom / sticky behaviour so the strip stays a
   pure inline tab row, and flex-wrap + gap keep the same wrap
   behaviour as the stage strip on narrow viewports. */
.designs-sort-bar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.75rem 3rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  background: transparent;
  border-bottom: 0;
  position: static;
  top: auto;
}
@media (max-width: 768px) {
  .designs-sort-bar { padding: 0.75rem 1.5rem 0; }
}

/* Empty-state — reuses .empty-state from catalog.css; the public
   gallery is the same visual contract so no override needed. */