/* Per-page hero preview mocks: Industries */

/* ======================================================
   Industry: Enterprise (hpi-ent-)
   Multi-team pipeline with status badge + count + progress.
   ====================================================== */

.hpi-ent-meta {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.hpi-ent-badge {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.hpi-ent-count {
  flex: none;
  font-size: 10px;
  font-weight: 600;
  color: #9aa6c4;
  white-space: nowrap;
}

.hpi-ent-prog {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: #eef3fb;
  overflow: hidden;
  min-width: 30px;
}

.hpi-ent-prog span {
  display: block;
  height: 100%;
  border-radius: 999px;
}

/* ======================================================
   Industry: Financial Services (hpi-fin-)
   Compliance checklist with filled check circles.
   ====================================================== */

.hpi-fin-check {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d1fae5;
  border: 1.5px solid #6ee7b7;
}

.hpi-fin-check--done {
  background: #10b981;
  border-color: #059669;
}

/* ======================================================
   Industry: Government (hpi-gov-)
   Policy & communications pipeline with stage badges + progress.
   ====================================================== */

.hpi-gov-meta {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.hpi-gov-badge {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.hpi-gov-count {
  flex: none;
  font-size: 10px;
  font-weight: 600;
  color: #9aa6c4;
  white-space: nowrap;
}

.hpi-gov-prog {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: #eef3fb;
  overflow: hidden;
  min-width: 30px;
}

.hpi-gov-prog span {
  display: block;
  height: 100%;
  border-radius: 999px;
}

/* ======================================================
   Industry: Healthcare (hpi-hc-)
   PHI / medical accuracy badge inside the item card,
   plus row-level stage badges + progress.
   ====================================================== */

.hpi-hc-badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  font-size: 10px;
  font-weight: 700;
  color: #059669;
  white-space: nowrap;
}

.hpi-hc-meta {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.hpi-hc-tag {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.hpi-hc-count {
  flex: none;
  font-size: 10px;
  font-weight: 600;
  color: #9aa6c4;
  white-space: nowrap;
}

.hpi-hc-prog {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: #eef3fb;
  overflow: hidden;
  min-width: 30px;
}

.hpi-hc-prog span {
  display: block;
  height: 100%;
  border-radius: 999px;
}

/* ======================================================
   Industry: Higher Education (hpi-edu-)
   Department content calendar with stage badges + progress.
   ====================================================== */

.hpi-edu-meta {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.hpi-edu-badge {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.hpi-edu-count {
  flex: none;
  font-size: 10px;
  font-weight: 600;
  color: #9aa6c4;
  white-space: nowrap;
}

.hpi-edu-prog {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: #eef3fb;
  overflow: hidden;
  min-width: 30px;
}

.hpi-edu-prog span {
  display: block;
  height: 100%;
  border-radius: 999px;
}

/* ======================================================
   Industry: Non-Profit (hpi-np-)
   Campaign content pipeline with stage badges + progress.
   ====================================================== */

.hpi-np-meta {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.hpi-np-badge {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.hpi-np-count {
  flex: none;
  font-size: 10px;
  font-weight: 600;
  color: #9aa6c4;
  white-space: nowrap;
}

.hpi-np-prog {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: #eef3fb;
  overflow: hidden;
  min-width: 30px;
}

.hpi-np-prog span {
  display: block;
  height: 100%;
  border-radius: 999px;
}

/* ─── marketing-agencies (hpi-ag-) ──────────────────────────────────────── */

.hpi-ag-meta {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.hpi-ag-badge {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.hpi-ag-count {
  flex: none;
  font-size: 10px;
  font-weight: 600;
  color: #9aa6c4;
  white-space: nowrap;
}

.hpi-ag-prog {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: #eef3fb;
  overflow: hidden;
  min-width: 30px;
}

.hpi-ag-prog span {
  display: block;
  height: 100%;
  border-radius: 999px;
}

/* ======================================================
   Responsive — hide decorative chips on narrow viewports
   (global .lhp-chip already hidden at <=900px; these rules
   handle any industry-specific layout adjustments).
   ====================================================== */

@media (max-width: 900px) {
  .hpi-ent-count,
  .hpi-gov-count,
  .hpi-hc-count,
  .hpi-edu-count,
  .hpi-np-count,
  .hpi-ag-count {
    display: none;
  }
}

/* ======================================================
   Reduced-motion — stop any industry-specific animations
   (global reduced-motion block covers .lhp-mock, .lhp-chip,
   .lhp-move-arrow, .lhp-pill--to; nothing extra needed here).
   ====================================================== */

@media (prefers-reduced-motion: reduce) {
  .hpi-fin-check {
    transition: none;
  }
}