/* ============================================================================
   entity-card.css — responsive card grids and the entity-card block used by
   list-of-things views (upgrade paths, upsell services, segments, templates).
   Builds on the .card surface; adds header/media/body/footer regions and a
   criteria-row builder (segments).
   ============================================================================ */

/* ---- Responsive card grid ------------------------------------------------ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}
.card-grid.cols-2 { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

/* ---- Inline stat card (icon left, value + label right) ------------------- */
.stat-inline { display: flex; align-items: center; gap: var(--space-3); }
.stat-inline-value { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); line-height: 1.1; }
.stat-inline-label { font-size: var(--text-sm); color: var(--muted-foreground); }

/* ---- Card media (image preview + optional hover overlay + corner badge) --- */
.card-media { position: relative; overflow: hidden; }
.card-media img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: var(--secondary);
}
.card-media-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--overlay);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.card-media:hover .card-media-overlay,
.card-media:focus-within .card-media-overlay { opacity: 1; }
.card-media-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 1;
}

/* ---- Service card meta (price + unit, conversion + rating) --------------- */
.service-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.service-price { font-size: var(--text-lg); font-weight: var(--font-weight-bold); color: var(--primary); }
.service-unit { font-size: var(--text-sm); color: var(--muted-foreground); }
.service-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}
.service-meta .icon { width: 0.9rem; height: 0.9rem; vertical-align: -0.15em; }

/* ---- Chart category totals (row under a chart) --------------------------- */
.chart-totals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
  text-align: center;
}
.chart-total-value { font-size: var(--text-lg); font-weight: var(--font-weight-bold); }
.chart-total-label { font-size: var(--text-xs); color: var(--muted-foreground); }
@media (max-width: 640px) { .chart-totals { grid-template-columns: repeat(2, 1fr); } }

/* ---- Entity card --------------------------------------------------------- */
.entity-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.entity-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.entity-card-title { font-weight: var(--font-weight-semibold); font-size: var(--text-md); }
.entity-card-sub { font-size: var(--text-xs); color: var(--muted-foreground); margin-top: 2px; }
.entity-card-icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--primary-tint);
  color: var(--primary);
}
.entity-card-body { padding: var(--space-5); flex: 1; }
.entity-card-body p { color: var(--muted-foreground); font-size: var(--text-sm); }
.entity-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--secondary);
}

/* ---- Stat rows inside a card (label left, value right) ------------------- */
.stat-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.stat-row-label { color: var(--muted-foreground); }
.stat-row-value { font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }

/* ---- Upgrade path card (room from → to with imagery) --------------------- */
.uplift-badge {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-md);
}
.upgrade-path {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-sm);
}
.upgrade-from { color: var(--muted-foreground); }
.upgrade-arrow { display: inline-flex; color: var(--primary); }
.upgrade-arrow .icon { width: 1rem; height: 1rem; }
.upgrade-to { font-weight: var(--font-weight-bold); font-size: var(--text-md); }
.upgrade-metrics { display: flex; gap: var(--space-6); margin-top: var(--space-3); }
.upgrade-metric-value { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.upgrade-metric-label { font-size: var(--text-xs); color: var(--muted-foreground); }

/* ---- Progress meter ------------------------------------------------------ */
.meter {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--secondary);
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--primary);
}

/* ---- Member engagement score --------------------------------------------- */
.engagement-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (max-width: 900px) { .engagement-grid { grid-template-columns: 1fr; } }
.engagement-overall {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.engagement-score { font-size: var(--text-3xl); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; }
.engagement-score span { color: var(--muted-foreground); font-size: var(--text-lg); font-weight: var(--font-weight-medium); }
.engagement-overall .meter { width: 100%; max-width: 320px; height: 16px; }
.engagement-overall-label { font-weight: var(--font-weight-semibold); }
.engagement-components h3 { font-size: var(--text-md); margin-bottom: var(--space-1); }
.engagement-components > p { color: var(--muted-foreground); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.engagement-row { margin-bottom: var(--space-3); }
.engagement-row-head { display: flex; justify-content: space-between; font-size: var(--text-sm); margin-bottom: var(--space-1); }
.engagement-row-score { font-size: var(--text-xs); color: var(--muted-foreground); margin-top: 2px; }

/* ---- Criteria builder rows (segments) ------------------------------------ */
.criteria-list { display: flex; flex-direction: column; gap: var(--space-2); }
.criteria-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--space-2);
  align-items: center;
}
.criteria-row .select,
.criteria-row .input { font-size: var(--text-sm); }

@media (max-width: 640px) {
  .criteria-row { grid-template-columns: 1fr 1fr; }
}

/* ---- Segments list view (full-width stacked cards) ----------------------- */
.segment-item {
  padding: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.segment-item:last-child { border-bottom: none; }
.segment-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.segment-item-head h3 { font-size: var(--text-lg); }
.segment-desc { color: var(--muted-foreground); font-size: var(--text-sm); margin-bottom: var(--space-3); }

/* horizontal criteria columns (field / operator / value stacked per column) */
.segment-criteria {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding: var(--space-4);
  margin: var(--space-3) 0;
  background: var(--secondary);
  border-radius: var(--radius-md);
}
.criteria-col { min-width: 0; }
.criteria-field { font-weight: var(--font-weight-semibold); font-size: var(--text-sm); }
.criteria-op { font-size: var(--text-xs); color: var(--muted-foreground); margin: 2px 0; }
.criteria-val { font-size: var(--text-sm); }

/* stats row (size / campaigns / last updated) */
.segment-stats { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-3); }
.segment-stat-label { font-size: var(--text-xs); color: var(--muted-foreground); }
.segment-stat-value { font-weight: var(--font-weight-semibold); }

/* sample-guests preview footer */
.segment-preview {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.segment-preview-header {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
}
.segment-preview-list { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.segment-preview-item { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.segment-preview-name { font-size: var(--text-sm); font-weight: var(--font-weight-medium); line-height: 1.2; }
.segment-preview-email { font-size: var(--text-xs); color: var(--muted-foreground); }