/*
 * sf-values — generic values grid styles.
 *
 * Brand values are lifted into CSS custom properties (defaults preserved from
 * the canonical values-salesfision block); override these per-site instead of
 * editing the rules. The .section-inner / .section-title typography historically
 * relied on the shared site bundle; the badge rules below make the block
 * self-contained while layering harmlessly on top of that bundle.
 */
[data-sf-block="sf-values"] {
  --sf-values-bg: #111;
  --sf-values-card-bg: #161616;
  --sf-values-accent: #e63946;
  --sf-values-text: #fff;
  --sf-values-muted: #888;
  --sf-values-border: rgba(255, 255, 255, 0.06);
  --sf-values-glow: rgba(230, 57, 70, 0.12);
}
[data-sf-block="sf-values"] .values-section { background: var(--sf-values-bg); }
[data-sf-block="sf-values"] .values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
[data-sf-block="sf-values"] .value-card {
  background: var(--sf-values-card-bg);
  border: 1px solid var(--sf-values-border);
  border-radius: 16px;
  padding: 36px;
  transition: border-color 0.3s, transform 0.3s;
}
[data-sf-block="sf-values"] .value-card:hover {
  border-color: var(--sf-values-accent);
  transform: translateY(-4px);
}
[data-sf-block="sf-values"] .value-card .val-icon {
  font-size: 28px;
  margin-bottom: 16px;
}
[data-sf-block="sf-values"] .value-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--sf-values-text);
  margin-bottom: 12px;
}
[data-sf-block="sf-values"] .value-card p {
  font-size: 14px;
  color: var(--sf-values-muted);
  line-height: 1.7;
}

/* ── Badge (self-contained; layers on shared bundle when present) ── */
[data-sf-block="sf-values"] .section-badge {
  display: inline-block;
  background: var(--sf-values-glow);
  border: 1px solid var(--sf-values-accent);
  color: var(--sf-values-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 16px;
}