.card-media {
  width: 100%;
  height: 15rem; /* controls card image height */
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 0.75rem;
  background: radial-gradient(
    circle at top,
    rgba(255,255,255,0.06),
    transparent 70%
  );
}

/* lock image behavior */
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== App Card Media: keep screenshots inside the card ===== */

.card-v3{
  display:flex;
  flex-direction:column;

  overflow: visible;   /* ✅ allow badge row + tags to render normally */
}
.card-head{
  display:flex;
  flex-direction:column;
  gap:10px;            /* ✅ creates clear separation between badge row + tags */
}



.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge{
  flex: 0 0 auto;            /* don’t shrink */
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}


/* Core */
.badge-featured {
  background: linear-gradient(135deg, #ffd700, #ffb300);
  color: #000;
}

/* Categories (examples) */
.badge-health { background: #0ea5e9; color: #fff; }
.badge-creative { background: #a855f7; color: #fff; }
.badge-saas { background: #22c55e; color: #003; }
.badge-web3 { background: #6366f1; color: #fff; }
.badge-data { background: #14b8a6; color: #002; }
.badge-brand { background: #64748b; color: #fff; }
.badge-experimental { background: #f97316; color: #000; }

/* Tags */
.badge-tag {
  background: rgba(255,255,255,0.08);
  color: #ddd;
  border: 1px solid rgba(255,255,255,0.12);
}

.badge-row{
  display:flex;
  gap:8px;
  align-items:center;

  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;

  padding-bottom: 2px;    /* ✅ prevents visual overlap with next line */
  scrollbar-width:none;
}
.badge-row::-webkit-scrollbar{ display:none; }

.card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-width:100%;
  min-width:0;          /* ✅ important in flex layouts */
}

.card-tags .tag{
  padding:5px 9px;
  font-size:0.7rem;
}
@media (max-width: 520px){
  .card-tags{
    max-height: 2.4em; /* ~2 rows */
    overflow:hidden;
    position:relative;
  }

  .card-tags::after{
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    width:40%;
    height:1.2em;
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.6));
    pointer-events:none;
  }
}