/* CoCreate · card component — Vedics glass-morphism.
   Selector names preserved so projects-render.js + index.html consumers
   are unaffected. .cc-card is the canonical primitive for net-new sections. */

/* Glass-card primitive (use for any new section) */
.cc-card {
  padding: var(--s-6);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-speed) var(--ease-smooth),
              border-color var(--transition-speed) var(--ease-smooth),
              background var(--transition-speed) var(--ease-smooth),
              box-shadow var(--transition-speed) var(--ease-smooth);
}
.cc-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  background: var(--bg-card-hover);
  box-shadow: var(--shadow-lg);
}

/* Projects grid (same name as before — used by projects.html + home) */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-5);
}

/* Project card (glass-morphism rewrite, same selectors) */
.proj-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-speed) var(--ease-smooth),
              border-color var(--transition-speed) var(--ease-smooth),
              background var(--transition-speed) var(--ease-smooth),
              box-shadow var(--transition-speed) var(--ease-smooth);
}
.proj-card:hover {
  transform: translateY(-8px) scale(1.01);
  border-color: var(--accent);
  background: var(--bg-card-hover);
  box-shadow: var(--shadow-lg);
}
.proj-card:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
}

/* Tile (image area at top of card) */
.proj-tile {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--grad-cta);
  overflow: hidden;
}
.proj-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.35) 100%);
  z-index: 1;
}
.tile-icon {
  position: absolute;
  top: 50%; left: 50%;
  width: 80px; height: 80px;
  transform: translate(-50%, -50%);
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1.5;
  z-index: 0;
}
.tile-initial {
  position: absolute;
  bottom: 8px; right: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 96px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.12);
  z-index: 0;
}
.tile-shot {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 0;
  animation: tile-shot-in var(--transition-speed) var(--ease-smooth);
}
.tile-shot--photo { object-position: center center; }

@keyframes tile-shot-in {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

/* "View details" hint on tile */
.proj-tile-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.55) 100%);
  color: #fff;
  font: 600 0.875rem var(--font-display);
  letter-spacing: var(--track-cta);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--transition-speed) var(--ease-smooth);
}
.proj-card:hover .proj-tile-hint,
.proj-card:focus-visible .proj-tile-hint { opacity: 1; }

/* Status badge (overlay top-right of tile) */
.proj-badge {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  color: #fff;
  font: 600 0.7rem var(--font-display);
  letter-spacing: var(--track-cta);
  text-transform: uppercase;
  z-index: 3;
}
.proj-badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}
.proj-badge.live { color: #22c55e; }
.proj-badge.soon { color: var(--cc-peach); }

/* Card body */
.proj-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s-5);
  gap: var(--s-2);
}
.proj-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-primary);
  letter-spacing: var(--track-tight);
}
.proj-body p {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.proj-cat-tag {
  display: inline-block;
  font: 600 0.65rem var(--font-display);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Visit Live CTA + Coming Soon variants */
.proj-visit, .proj-soon {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-pill);
  font: 600 0.85rem var(--font-display);
  letter-spacing: var(--track-cta);
  align-self: flex-start;
  transition: transform var(--transition-speed) var(--ease-smooth),
              box-shadow var(--transition-speed) var(--ease-smooth);
}
.proj-visit {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.proj-visit:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-h);
}
.proj-soon {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}