/* Card Primitive */
.c-card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-5);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.c-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.c-card--accent {
  background: var(--grad-accent-gold);
  color: var(--color-text-inverse);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35);
}
.c-card--accent a { color: var(--color-text-inverse); }
.c-card--accent a:hover { color: var(--color-text-inverse); filter: brightness(1.1); }

/* Bridge existing classes to primitive (incremental adoption) */
.feature, .topic-card, .guide-card { /* Legacy classes will inherit card styles when combined with .c-card */ }
.feature.c-card, .topic-card.c-card, .guide-card.c-card { padding: var(--space-5); }

/* Legacy generic .card normalization (video + guide resource cards) */
.card {
  --card-bg: linear-gradient(180deg,#ffffff,#fbfdfb);
  --card-border: var(--color-border, #e2e9e4);
  --card-radius: 20px;
  --card-pad-y: 1.15rem; --card-pad-x: 1.25rem;
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-pad-y) var(--card-pad-x) calc(var(--card-pad-y) + .35rem);
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 14px -6px rgba(22,44,28,.18);
  position:relative; overflow:hidden; transition: box-shadow .35s, transform .35s, background .4s;
  display:flex; flex-direction:column; gap:.6rem;
}
.card:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 28% 0%,rgba(51,119,68,.12),transparent 65%);opacity:0;transition:.6s;}
.card:hover{transform:translateY(-6px);box-shadow:0 4px 6px -2px rgba(0,0,0,.12),0 18px 34px -14px rgba(22,44,28,.28);} 
.card:hover:before{opacity:1;}
.card .title{font-weight:600;font-size:1.05rem;line-height:1.3;text-decoration:none;color:var(--kg-green,#2d5a27);}
.card .title:hover{text-decoration:underline;}
.card .author{font-size:.7rem;letter-spacing:.12em;font-weight:600;text-transform:uppercase;color:var(--kg-muted,#546158);margin-top:-.25rem;}
.card .desc{font-size:.8rem;line-height:1.4;color:var(--kg-muted,#4b5a52);margin:0 0 .4rem;}
.card ul.outcomes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem;}
.card ul.outcomes li{font-size:.72rem;line-height:1.25;position:relative;padding-left:1rem;color:#31463a;}
.card ul.outcomes li:before{content:"➜";position:absolute;left:0;top:0;color:var(--kg-green,#2d5a27);font-size:.65rem;transform:translateY(2px);} 

/* Unified meta-line + badge tokens (previously on variant pages) */
.card .meta-line{display:flex;flex-wrap:wrap;gap:4px;margin:.3rem 0 .55rem}
.card .badge-small{background:var(--color-accent-soft);color:var(--color-accent);font-size:.55rem;padding:3px 6px;border-radius:var(--radius-pill);font-weight:600;letter-spacing:.4px;border:1px solid var(--color-accent-soft-border);line-height:1}
.card .badge-small[data-tone="official"]{background:var(--color-gold-soft);color:#4a3b00;border-color:var(--color-gold-soft)}

/* Compact grid spacing adjustments where .grid wraps cards */
.grid { --grid-gap:1.25rem; display:grid; gap:var(--grid-gap); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }

@media (prefers-reduced-motion: reduce){
  .card, .card:before{transition:none !important;}
}