/* CoCreate · card component
   Used by projects.html, projects-category.html, and the new home.html
   product-showcase block. Variants: default, .proj-card--featured. */

.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
}

.proj-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: 1.25rem;
  overflow: hidden;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.proj-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 46px var(--glow-color);
  border-color: var(--primary);
}

/* Branded gradient tile */
.proj-tile {
  position: relative;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 55%, var(--accent) 100%);
  overflow: hidden;
}
.proj-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.22), transparent 60%);
}
.proj-tile .tile-icon {
  width: 52px;
  height: 52px;
  color: rgba(255, 255, 255, 0.95);
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}
.proj-tile .tile-initial {
  position: absolute;
  right: 16px;
  bottom: 2px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
  z-index: 0;
}

/* Real live-site screenshot — covers the gradient+icon when it loads.
   Sits above the icon (z-index 1) but below the status badge (z-index 2). */
.proj-tile .tile-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 1;
  background: var(--bg-card);
  animation: tile-shot-in 0.5s ease;
}
@keyframes tile-shot-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.proj-card:hover .tile-shot { transform: scale(1.04); }
.proj-tile.has-shot .tile-shot { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
/* Themed stock photos read best centered; screenshots stay top-anchored. */
.proj-tile .tile-shot--photo { object-position: center center; }

/* Cards are clickable → open the detail modal. */
.proj-card { cursor: pointer; }
.proj-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.proj-tile-hint {
  position: absolute;
  bottom: 10px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.proj-card:hover .proj-tile-hint,
.proj-card:focus-visible .proj-tile-hint { opacity: 1; transform: translateY(0); }

/* Status badge */
.proj-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  backdrop-filter: blur(6px);
}
.proj-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.proj-badge.live { background: rgba(16, 185, 129, 0.22); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.45); }
.proj-badge.soon { background: rgba(0, 0, 0, 0.28); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); }

/* Card body */
.proj-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.2rem 1.4rem 1.4rem;
}
.proj-cat-tag {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.45rem;
}
.proj-body h3 {
  font-size: 1.18rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.proj-body p {
  flex: 1;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 1.15rem;
  font-size: 0.95rem;
}
.proj-visit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.proj-visit:hover { transform: translateY(-1px); box-shadow: 0 6px 22px var(--glow-color); }
.proj-soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border: 1px dashed var(--border-color);
}