/* ========= Voice Sidebar (uses your token system) ========= */
:root {
  /* Tokens are assumed already declared in core.css; these lines are safe fallbacks */
  --camp-ember:        var(--camp-ember, #ff8c00);
  --camp-ember-deep:   var(--camp-ember-deep, #ff4500);
  --camp-ash:          var(--camp-ash, #3b2a1a);
  --camp-bark:         var(--camp-bark, #5a4636);
  --camp-smoke:        var(--camp-smoke, #efe9e3);
  --camp-char:         var(--camp-char, rgba(0,0,0,.08));
}

.cf-voice-sidebar {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(var(--cf-voice-cols, 3), minmax(0, 1fr));
}

.cf-voice-sidebar[data-columns] {
  --cf-voice-cols: attr(data-columns number);
}

/* Tile */
.cf-voice-tile {
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: start;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.6));
  border: 1px solid var(--camp-char);
  border-radius: 14px;
  padding: 10px;
  text-decoration: none;
  color: var(--camp-ash);
  box-shadow: inset 0 0 10px rgba(0,0,0,.04), 0 4px 10px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  min-height: 120px; /* helps equalize heights */
}

.cf-voice-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.15);
  box-shadow: inset 0 0 14px rgba(0,0,0,.05), 0 8px 18px rgba(0,0,0,.08);
}

.cf-voice-tile.is-overseer {
  outline: 2px solid var(--camp-ember);
  outline-offset: 2px;
  background: linear-gradient(180deg, rgba(255,140,0,.12), rgba(255,255,255,.6));
}

/* Thumb */
.cf-voice-thumb {
  height: 72px;
  width: 72px;
  border-radius: 12px;
  background: radial-gradient(circle at 60% 40%, rgba(255,140,0,.18), rgba(0,0,0,.04));
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 8px;
  border: 1px solid rgba(0,0,0,.08);
}
.cf-voice-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cf-voice-placeholder {
  font-weight: 700;
  font-size: 28px;
  color: var(--camp-bark);
}

/* Text */
.cf-voice-meta { display: grid; gap: 2px; }
.cf-voice-name {
  font-weight: 700;
  line-height: 1.2;
}
.cf-voice-tagline {
  font-size: .9rem;
  opacity: .85;
  color: var(--camp-bark);
}
/* Responsive */
@media (max-width: 860px) {
  .cf-voice-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
  .cf-voice-sidebar { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* TAG and CATEGORY SIDEBARS: Make the sidebar title span the full width of the grid */
.cf-voice-sidebar .cf-sidebar__title {
  grid-column: 1 / -1;
  margin: 0 0 8px;   /* optional spacing under the title */
}

/* TAG and CATEGORY SIDEBARS: Coloring and Images */
/* Accent color support for tax/voice tiles */
.cf-voice-tile { --cf-accent: var(--cf-accent, transparent); }

.cf-voice-thumb img,
.cf-voice-thumb .cf-voice-placeholder {
  box-shadow: 0 0 0 2px var(--cf-accent);
  border-radius: 12px;
}