/* components/cards.css */
.card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.4rem; position:relative; overflow:hidden; backdrop-filter:blur(10px);
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.card::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:0; transition:.3s }
.card:hover{ transform:translateY(-4px); border-color:var(--border-strong); box-shadow:var(--glow-a) }
.card:hover::before{ opacity:1 }
.card--link{ cursor:pointer; display:flex; flex-direction:column; color:inherit }
.card__media{ flex:0 0 auto }
.card__media{ aspect-ratio:16/9; border-radius:var(--radius-sm); margin:-1.4rem -1.4rem 1.1rem;
  background:linear-gradient(135deg,var(--bg-elev),#101427); border-bottom:1px solid var(--border);
  display:grid; place-items:center; overflow:hidden; position:relative }
.card__glyph{ font-size:3rem; opacity:.85 }
.card__media::after{ content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 2px,transparent 2px 4px); pointer-events:none }
.card__title{ font-size:1.15rem; margin:0 0 .35rem }
.card__desc{ color:var(--fg-muted); font-size:.9rem; margin:0 0 1rem; flex:1 1 auto }
.card .row{ flex:0 0 auto }
.tag{ display:inline-block; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.2rem .55rem; border-radius:999px; border:1px solid var(--border-strong); color:var(--accent); margin:0 .35rem .35rem 0 }
.tag--muted{ border-color:var(--border); color:var(--fg-muted) }
.pill-status{ font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; padding:.25rem .6rem; border-radius:999px; font-weight:700 }
.pill-status[data-s="live"]{ background:color-mix(in srgb,var(--ok) 18%,transparent); color:var(--ok); border:1px solid var(--ok) }
.pill-status[data-s="dev"]{ background:color-mix(in srgb,var(--warn) 16%,transparent); color:var(--warn); border:1px solid var(--warn) }
.pill-status[data-s="archive"]{ background:color-mix(in srgb,var(--fg-muted) 12%,transparent); color:var(--fg-muted); border:1px solid var(--border) }
.card__meta{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; font-size:.75rem; color:var(--fg-muted) }