/* ═══════════════════════════════════════════════════
   SECTION: audit-problem — source audit.html #sp-problem

   Six symptoms in a three-across grid. The heading block comes from
   service-page.css, declared as a dependency rather than repeated here.

   The card's top rule is drawn on hover with a transform rather than a width
   or a background change, so it animates on the compositor instead of forcing
   layout — six cards reacting at once is exactly where that shows.
═══════════════════════════════════════════════════ */

#sp-problem {
  background: var(--c-bg-2);
  padding: var(--sp-section) 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.sp-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-16);
}

.sp-pain-card {
  background: var(--c-bg-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-8) var(--sp-7, 28px);
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.sp-pain-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--c-accent-rgb), .4), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-out, cubic-bezier(.23, 1, .32, 1));
}
.sp-pain-card:hover { border-color: rgba(var(--c-accent-rgb), .25) }
.sp-pain-card:hover::before { transform: scaleX(1) }

.sp-pain-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: rgba(var(--c-accent-rgb), .08);
  border: 1px solid rgba(var(--c-accent-rgb), .18);
  font-size: var(--fs-400);
  margin-bottom: var(--sp-5);
}

.sp-pain-title {
  font-family: var(--f-display);
  font-size: var(--fs-500);
  font-weight: var(--fw-black);
  letter-spacing: -.03em;
  color: var(--c-text-1);
  line-height: 1.5;
  margin-bottom: 10px;
}

.sp-pain-body {
  font-size: var(--fs-300);
  color: var(--c-text-3);
  line-height: 1.75;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .sp-problem-grid { grid-template-columns: 1fr 1fr }
}

@media (max-width: 960px) {
  #sp-problem { padding: var(--sp-20) 0 }
}

@media (max-width: 640px) {
  .sp-problem-grid { grid-template-columns: 1fr; margin-top: var(--sp-10) }
}

/* The rule sweeping in is decoration; a hover that cannot be perceived as
   motion should simply be a state change. */
@media (prefers-reduced-motion: reduce) {
  .sp-pain-card::before { transition: none }
}