/* ===================== campfire-cards.css (save to assets/css/campfire-cards.css) =====================
:root{
  /* Brand tokens — adjust in your child theme */
  --camp-ember:#ff8c00; /* accents */
  --camp-ember-deep:#ff5300;
  --camp-ash:#3b2a1a;   /* text */
  --camp-bark:#5a4636;  /* muted */
  --camp-smoke:#eee9e4; /* card bg */
  --camp-char:#111;     /* headings */
  --camp-pill:#f2ede8;  /* chip bg */
  --camp-ring:rgba(0,0,0,.06);
  --camp-rad:16px;      /* rounding */
  --camp-pad:14px;      /* inner pad */
  --camp-gap:12px;
  --camp-shadow:0 6px 20px rgba(0,0,0,.08);
}

.cf-card{display:grid;grid-template-columns:120px 1fr;gap:var(--camp-gap);background:var(--camp-smoke);border-radius:var(--camp-rad);padding:var(--camp-pad);box-shadow:var(--camp-shadow);align-items:start}
.cf-card .cf-media img.cf-thumb{width:100%;height:100%;object-fit:cover;border-radius:12px}
.cf-card .cf-body{display:flex;flex-direction:column;gap:8px}
.cf-card .cf-head .cf-title{margin:0;color:var(--camp-char);font-weight:700;line-height:1.25}
.cf-card .cf-head .cf-date{color:var(--camp-bark);font-size:.9rem}
.cf-card .cf-excerpt{margin:.25rem 0 0;color:var(--camp-ash)}
.cf-card .cf-meta{display:flex;flex-wrap:wrap;gap:6px}
.cf-chip{display:inline-block;background:var(--camp-pill);padding:.2rem .5rem;border-radius:999px;font-size:.8rem;color:var(--camp-bark)}
.cf-chip--primary{border:1px solid var(--camp-ember)}
.cf-badge{display:inline-block;margin-left:.5rem;padding:.15rem .45rem;border-radius:6px;background:var(--camp-ember);color:white;font-size:.75rem}
.cf-actions{margin-top:auto;display:flex;gap:8px}
.cf-btn{display:inline-block;padding:.45rem .7rem;border-radius:10px;background:white;color:var(--camp-char);border:1px solid var(--camp-ring);text-decoration:none}
.cf-btn:hover{border-color:var(--camp-ember);color:var(--camp-ember-deep)}

/* Compact vs Detailed */
.cf-variant-compact{grid-template-columns:100px 1fr}
.cf-variant-detailed{grid-template-columns:140px 1fr}

/* Vertical/horizontal wrappers already exist in your CSS skeleton, but ensure spacing: */
.cf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.cf-vtimeline .cf-item,.cf-htimeline .cf-item{margin:8px 0}
*/

/* ===== Campfire tokens (override in child theme if you like) ===== */
:root {
  --cf-ember:        #ff8c00;
  --cf-ember-deep:   #ff5a00;
  --cf-ash:          #3b2a1a;  /* headings/text */
  --cf-bark:         #5a4636;  /* body text */
  --cf-sand:         #f8f5f1;  /* subtle bg */
  --cf-slate:        #eae6df;  /* borders */
  --cf-ink:          #0f1115;  /* dark text */
  --cf-muted:        #6b5b4b;
  --cf-radius:       16px;
  --cf-shadow:       0 10px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
  --cf-gap:          1rem;
}

/* grid wrapper already exists; just nicer spacing */
.cf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--cf-gap);
}

/* base card */
.cf-card {
  background: #fff;
  border: 1px solid var(--cf-slate);
  border-radius: var(--cf-radius);
  box-shadow: var(--cf-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cf-card:hover { transform: translateY(-2px); border-color: #ddd; }

/* image block (when present) */
.cf-card .cf-media {
  position: relative;
  aspect-ratio: 16 / 9;          /* tidy thumbnails */
  overflow: hidden;
}
.cf-card .cf-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* content */
.cf-card .cf-body { padding: 0.9rem 1rem; }
.cf-card .cf-title {
  font-weight: 700; color: var(--cf-ash); margin: 0 0 .25rem; line-height: 1.25;
}
.cf-card .cf-sub { color: var(--cf-muted); font-size: .92rem; margin: 0 0 .5rem; }

/* footer / buttons */
.cf-card .cf-actions {
  display:flex; gap:.5rem; align-items:center;
  padding: .75rem 1rem 1rem; margin-top: auto; flex-wrap: wrap;
}
.cf-btn {
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 999px; border:1px solid var(--cf-ember);
  padding:.45rem .75rem; font-weight:600; font-size:.9rem;
  color: var(--cf-ember-deep); background: transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.cf-btn:hover { background: var(--cf-ember); color:#fff; border-color: var(--cf-ember); }

/* compact = tighter, just title + date line */
.cf-ms-card.cf-variant-compact .cf-sub,
.cf-ev-card.cf-variant-compact .cf-sub { margin:0; }
.cf-ms-card.cf-variant-compact .cf-actions,
.cf-ev-card.cf-variant-compact .cf-actions { padding-top:.5rem; }

/* detailed = show excerpt/meta blocks */
.cf-variant-detailed .cf-excerpt { color: var(--cf-bark); font-size:.95rem; margin:.5rem 0 .25rem; }

.cf-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:.25rem 0 .5rem; }
.cf-chip {
  background: var(--cf-sand);
  border: 1px solid var(--cf-slate);
  color: var(--cf-bark);
  border-radius: 999px;
  padding: .25rem .55rem; font-size: .8rem; line-height:1;
}

/* optional severity colors for events */
.cf-chip.sev-low    { border-color:#9ad3bc; background:#edf8f3; color:#2a7f64; }
.cf-chip.sev-med    { border-color:#ffd27a; background:#fff7e6; color:#7a5a00; }
.cf-chip.sev-high   { border-color:#ff9b86; background:#fff0ed; color:#8a2a15; }

.cf-btn.ghost { border-color:#ccc; color:#444; }
.cf-btn.ghost:hover { background:#f4f4f4; border-color:#bbb; }

@media (max-width: 640px) {
  .cf-grid { grid-template-columns: 1fr; gap: .85rem; }
  .cf-card .cf-body { padding: .8rem .85rem; }
  .cf-card .cf-actions { padding: .6rem .85rem .85rem; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --cf-ash:   #f3f0ea;
    --cf-bark:  #ddd2c6;
    --cf-sand:  #171513;
    --cf-slate: #2a2723;
  }
  .cf-card { background:#141210; border-color:var(--cf-slate); }
  .cf-card .cf-title { color: var(--cf-ash); }
  .cf-card .cf-sub, .cf-excerpt { color: var(--cf-bark); }
  .cf-chip { background:#1b1916; border-color:#2a2723; color:#d6cabd; }
}