/* ============================================
   THE PROBLEM — Cinematic Warehouse at Night
   ============================================ */

.problem {
  position: relative;
  z-index: 2;
  padding: var(--space-32) var(--space-6);
  overflow: hidden;
}

.problem::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg-deepest) 0%, var(--bg-deep) 30%, var(--bg-deep) 70%, var(--bg-deepest) 100%);
  z-index: 0;
}

.problem__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-16);
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ── Left: Content ── */
.problem__content {
  position: relative;
}

.problem__desc {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 460px;
  margin-bottom: var(--space-8);
}

/* ── Right: Warehouse Scene + Warnings ── */
.problem__visual {
  position: relative;
  height: 520px;
  perspective: 1000px;
}

/* Warehouse scene background */
.problem__warehouse {
  position: absolute;
  inset: 0;
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.problem__warehouse-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 163, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 163, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.5;
}

/* Shelving units */
.problem__shelf {
  position: absolute;
  bottom: 40px;
  width: 60px;
  background: linear-gradient(180deg, rgba(0, 163, 255, 0.08), rgba(0, 163, 255, 0.03));
  border: 1px solid rgba(0, 163, 255, 0.1);
  border-radius: var(--radius-sm);
}

.problem__shelf--1 { left: 10%; height: 200px; }
.problem__shelf--2 { left: 25%; height: 260px; }
.problem__shelf--3 { left: 40%; height: 180px; }
.problem__shelf--4 { left: 55%; height: 240px; }
.problem__shelf--5 { left: 70%; height: 200px; }

/* Scanning laser */
.problem__scan-laser {
  position: absolute;
  bottom: 40px;
  left: 20%;
  width: 2px;
  height: 300px;
  background: linear-gradient(180deg, rgba(0, 163, 255, 0.6) 0%, transparent 100%);
  animation: scan-line 4s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(0, 163, 255, 0.3);
}

.problem__scan-laser--2 {
  left: 60%;
  animation-delay: 2s;
}

/* ── Floating Warning Cards ── */
.problem__warning {
  position: absolute;
  z-index: 10;
  background: rgba(7, 17, 30, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 71, 87, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 220px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 71, 87, 0.08);
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.problem__warning.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.problem__warning.visible:hover {
  transform: translateY(-2px) scale(1);
}

.problem__warning-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--warning-red-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  color: var(--warning-red);
}

.problem__warning-icon svg {
  width: 14px;
  height: 14px;
}

.problem__warning-text h4 {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.problem__warning-text p {
  font-size: 10px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* Warning positions — varied to look organic, some peek outside the visual */
.problem__warning--1 { top: 3%;     right: -3%;  transition-delay: 0.1s; }
.problem__warning--2 { top: 27%;    right: 7%;   transition-delay: 0.3s; }
.problem__warning--3 { top: 55%;    right: 0%;   transition-delay: 0.5s; }
.problem__warning--4 { bottom: 16%; right: 9%;   transition-delay: 0.7s; }
.problem__warning--5 { bottom: 5%;  left: 3%;    transition-delay: 0.9s; }
.problem__warning--6 { top: 10%;    left: -4%;   transition-delay: 1.1s; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .problem__inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .problem__visual {
    height: 400px;
  }

  .problem__warning {
    max-width: 180px;
    padding: var(--space-3) var(--space-4);
  }

  /* Pull negative-inset cards inside visible bounds */
  .problem__warning--1 { right: 4%; }
  .problem__warning--6 { left: 4%; }

  /* Switch all right-side cards to top-only to prevent bottom: overlap */
  .problem__warning--2 { top: 25%; right: 7%;  }
  .problem__warning--3 { top: 50%; right: 0%;  }
  .problem__warning--4 { top: 73%; right: 9%; bottom: auto; }

  .problem__warning--5,
  .problem__warning--6 {
    display: none;
  }
}

@media (max-width: 640px) {
  .problem {
    padding: var(--space-20) var(--space-4);
  }

  .problem__visual {
    height: 350px;
  }

  .problem__warning {
    max-width: 160px;
  }

  /* Evenly space all four cards top-to-bottom, no bottom anchor */
  .problem__warning--1 { top: 2%;  right: 4%; }
  .problem__warning--2 { top: 24%; right: 4%; }
  .problem__warning--3 { top: 47%; right: 4%; }
  .problem__warning--4 { top: 71%; right: 4%; bottom: auto; }
}