/* Problem cards — scroll-linked red border glow */

.problem.problem-aura-enhanced {
  overflow: visible;
}

.problem.problem-aura-enhanced .landing-container {
  overflow: visible;
}

.problem.problem-aura-enhanced .problem-grid {
  overflow: visible;
  position: relative;
}

.problem.problem-aura-enhanced .problem-card {
  position: relative;
  isolation: isolate;
  --card-aura: 0;
  overflow: visible;
  z-index: 0;
}

.problem.problem-aura-enhanced .problem-card.is-aura-hot {
  z-index: 2;
}

.problem.problem-aura-enhanced .problem-card::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--radius-lg, 16px) + 3px);
  pointer-events: none;
  z-index: -1;
  opacity: var(--card-aura, 0);
  transition: opacity 0.12s linear;
  box-shadow:
    0 0 0 1px rgba(185, 28, 28, 0.85),
    0 0 18px 2px rgba(220, 38, 38, 0.55),
    0 0 36px 6px rgba(153, 27, 27, 0.32),
    inset 0 0 22px rgba(127, 29, 29, 0.14);
}

@media (max-width: 768px) {
  .problem.problem-aura-enhanced .problem-grid {
    overflow: visible;
    padding: 6px;
    margin: -6px;
  }

  .problem.problem-aura-enhanced .problem-card::after {
    inset: -1px;
    border-radius: inherit;
  }

  .problem.problem-aura-enhanced .problem-grid .problem-card:first-child::after {
    border-radius: calc(var(--radius-lg, 16px) - 1px)
      calc(var(--radius-lg, 16px) - 1px) 0 0;
  }

  .problem.problem-aura-enhanced .problem-grid .problem-card:last-child::after {
    border-radius: 0 0 calc(var(--radius-lg, 16px) - 1px)
      calc(var(--radius-lg, 16px) - 1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .problem.problem-aura-enhanced .problem-card::after {
    opacity: 0 !important;
  }
}