/* _continuum.css — Engagement Continuum stages */

.continuum {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .continuum {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .continuum {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}

.continuum__stage {
  text-align: center;
  padding: 1rem;
  border-radius: 0.25rem;
  border: 1px solid;
  transition: transform 0.3s ease;
}

.continuum__stage:hover {
  transform: scale(1.05);
}

/* Stages 0-2 : gris */
.continuum__stage--0,
.continuum__stage--1,
.continuum__stage--2 {
  background: var(--color-stone-100);
  border-color: var(--color-stone-300);
}

/* Stage 3: very light teal */
.continuum__stage--3 {
  background: rgba(20, 184, 166, 0.10);
  border-color: var(--color-teal-500);
}

/* Stage 4: medium teal */
.continuum__stage--4 {
  background: rgba(20, 184, 166, 0.25);
  border-color: var(--color-teal-500);
}

/* Stage 5: solid dark teal, white text */
.continuum__stage--5 {
  background: var(--color-teal-700);
  border-color: var(--color-teal-500);
}

.continuum__label {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-stone-700);
  margin-bottom: 0.25rem;
}

.continuum__stage--5 .continuum__label {
  color: #ffffff;
}

.continuum__subtext {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--color-stone-500);
}

.continuum__stage--5 .continuum__subtext {
  color: var(--color-teal-100);
}