/**
 * weave-card-polish-v1 (2026-08-09)
 * Comfortable inset cards — breathing room, hierarchy, no edge-flush content.
 * Loads after alignment + nuclear media so layout wins over full-bleed hacks.
 */

/* ── Card shell ─────────────────────────────────────────────── */
.weave-card,
.weave-card[data-nuclear-enhanced="1"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
  /* Real internal margin so nothing kisses the border */
  padding: 0.85rem !important;
  min-height: 20rem;
  border-radius: 18px !important;
  overflow: hidden;
  background:
    linear-gradient(165deg, rgba(32, 24, 52, 0.92) 0%, rgba(14, 10, 28, 0.96) 100%) !important;
  /* Neutral border — avoid violet “stripe” artifacts with accent box-shadows */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 28px rgba(0, 0, 0, 0.28) !important;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.weave-card:hover,
.weave-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 14px 36px rgba(0, 0, 0, 0.38) !important;
}

/* Type accent: left edge only (never a horizontal band across the photo) */
.weave-card--relic {
  border-left: 3px solid rgba(255, 215, 0, 0.65) !important;
}
.weave-card--thread {
  border-left: 3px solid rgba(0, 255, 255, 0.55) !important;
}
.weave-card--weave {
  border-left: 3px solid rgba(157, 107, 255, 0.55) !important;
}
.weave-card--character {
  border-left: 3px solid rgba(255, 0, 255, 0.45) !important;
}

/* ── Media: inset photo well (not full-bleed to card edge) ──── */
.weave-card__media,
.weave-card__media[data-nuclear-media="1"] {
  position: relative !important;
  height: 200px !important;
  min-height: 200px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: rgba(8, 6, 20, 0.95) !important;
  /* No inset ring / no ::after veil — those read as a line across photos */
  box-shadow: none !important;
  border: none !important;
}

.weave-card__media .weave-card__media-bg,
.weave-card__media[data-nuclear-media="1"] .weave-card__media-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
  transition: transform 0.35s ease;
}

.weave-card:hover .weave-card__media-bg,
.weave-card:focus-visible .weave-card__media-bg {
  transform: scale(1.04);
}

/* Kill any media::after veil from prior polish versions */
.weave-card__media::after,
.weave-card__media[data-nuclear-media="1"]::after {
  content: none !important;
  display: none !important;
}

/* Alignment overlay: keep subtle darken only — no violet horizontal wash */
.weave-card__media-overlay {
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 62%,
    rgba(8, 6, 16, 0.35) 100%
  ) !important;
  border: none !important;
  box-shadow: none !important;
}

.weave-card--relic .weave-card__media-overlay,
.weave-card--thread .weave-card__media-overlay,
.weave-card--weave .weave-card__media-overlay {
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 62%,
    rgba(8, 6, 16, 0.35) 100%
  ) !important;
}

/* Type chip sits in the photo well with inset from media edges.
   Opaque dark pill so labels stay readable on white/light object photos. */
.weave-card .weave-card__type,
.weave-card__type {
  position: absolute !important;
  top: 1.15rem !important; /* card pad 0.85 + media inset ~0.3 */
  left: 1.15rem !important;
  z-index: 3 !important;
  margin: 0 !important;
  max-width: calc(100% - 2.5rem);
  pointer-events: none;
  /* Soft translucent ground — readable on white, still a bit of photo show-through */
  background: rgba(12, 10, 22, 0.72) !important;
  color: #e8fbfc !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  font-weight: 750 !important;
  letter-spacing: 0.06em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Type-specific label colors: richer than pale cyan, on slightly translucent pills */
.weave-card--relic .weave-card__type {
  background: rgba(22, 16, 6, 0.7) !important;
  color: #f0c85a !important;
  border-color: rgba(240, 200, 90, 0.5) !important;
}

.weave-card--thread .weave-card__type {
  background: rgba(6, 20, 24, 0.7) !important;
  color: #5ad4de !important;
  border-color: rgba(90, 212, 222, 0.48) !important;
}

.weave-card--weave .weave-card__type {
  background: rgba(16, 12, 30, 0.7) !important;
  color: #d0b4ff !important;
  border-color: rgba(208, 180, 255, 0.48) !important;
}

.weave-card--character .weave-card__type {
  background: rgba(24, 10, 24, 0.7) !important;
  color: #e8a4ee !important;
  border-color: rgba(232, 164, 238, 0.48) !important;
}

/* Auth / meta chips — matching soft translucency */
.weave-card__auth {
  background: rgba(16, 14, 28, 0.68) !important;
  color: #ecd48e !important;
  border-color: rgba(236, 212, 142, 0.42) !important;
  font-weight: 700 !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.weave-card__auth[data-auth="real"] {
  color: #7ddea0 !important;
  border-color: rgba(125, 222, 160, 0.5) !important;
}
.weave-card__auth[data-auth="lore"] {
  color: #9bb8e8 !important;
  border-color: rgba(155, 184, 232, 0.5) !important;
}
.weave-card__auth[data-auth="mythic"] {
  color: #e8c56a !important;
  border-color: rgba(232, 197, 106, 0.5) !important;
}

/* ── Text block ─────────────────────────────────────────────── */
.weave-card__body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  gap: 0.55rem !important;
  /* Body lives inside card padding — only light inner pad */
  padding: 0.1rem 0.2rem 0.15rem !important;
  min-height: 0 !important;
}

.weave-card__title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em;
  color: #f4f0ff !important;
  /* Clamp long titles cleanly */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.weave-card__desc {
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(200, 190, 230, 0.78) !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  overflow: hidden !important;
  min-height: 0 !important; /* don’t force empty space when short */
  flex: 0 1 auto;
}

/* Meta chips row — breathing room above actions */
.weave-card__meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.45rem 0.65rem !important;
  margin: 0.15rem 0 0 !important;
  padding: 0.35rem 0 0 !important;
  font-size: 0.78rem !important;
  color: rgba(180, 168, 220, 0.75) !important;
}

.weave-card__auth {
  margin-right: 0 !important;
}

/* Actions footer — clear separation from body, inset from edges */
.weave-card__actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  margin: 0.25rem 0 0 !important;
  padding: 0.75rem 0.15rem 0.1rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-top: auto !important; /* pin footer to bottom of card */
}

.weave-card__open {
  font-size: 0.8rem !important;
  letter-spacing: 0.02em;
}

.weave-card .upvote-btn {
  padding: 0.4rem 0.85rem !important;
}

/* Grid: a bit more air between cards */
.weave-results-grid {
  gap: 1.45rem !important;
}

/* Mobile: slightly tighter but still padded */
@media (max-width: 640px) {
  .weave-card,
  .weave-card[data-nuclear-enhanced="1"] {
    padding: 0.75rem !important;
    gap: 0.7rem !important;
    min-height: 18rem;
  }
  .weave-card__media,
  .weave-card__media[data-nuclear-media="1"] {
    height: 180px !important;
    min-height: 180px !important;
  }
  .weave-card .weave-card__type {
    top: 1rem !important;
    left: 1rem !important;
  }
}