/* ═══════════════════════════════════════════════════════════════
   Blueprint.gg — Use Cases Page Styles
   ═══════════════════════════════════════════════════════════════ */

/* Dark hero base styles → shared.css (.hero--dark) */

/* ── Persona Cards ── */
.usecases-personas {
  background-color: var(--color-white);
}

.usecases-personas__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.usecases-persona {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  transition: border-color var(--duration-fast) var(--ease-default);
}

.usecases-persona:hover {
  border-color: var(--color-teal);
  color: inherit;
}

.usecases-persona:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
}

.usecases-persona__icon {
  width: var(--size-icon-box-lg);
  height: var(--size-icon-box-lg);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.usecases-persona__icon svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

/* Icon color variants → components.css (.icon-box--{color}) */

.usecases-persona__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-slate-900);
  margin-bottom: var(--space-2);
}

.usecases-persona__desc {
  font-size: var(--text-sm);
  color: var(--color-slate-500);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.usecases-persona__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-teal);
}

@media (max-width: 1023px) {
  .usecases-personas__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .usecases-personas__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Use Case Detail Blocks ── */
.usecases-detail {
  border-bottom: 1px solid var(--color-slate-200);
}

.usecases-detail:last-of-type {
  border-bottom: none;
}

.usecases-detail--alt {
  background-color: var(--color-slate-50);
}

.usecases-detail__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.usecases-detail--reverse .usecases-detail__inner {
  direction: rtl;
}

.usecases-detail--reverse .usecases-detail__inner > * {
  direction: ltr;
}

.usecases-detail__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.usecases-detail__badge {
  align-self: flex-start;
}

.usecases-detail__title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--color-slate-900);
  line-height: var(--leading-tight);
}

.usecases-detail__desc {
  font-size: var(--text-xl);
  color: var(--color-slate-500);
  line-height: var(--leading-relaxed);
}

.usecases-detail__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-slate-900);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.usecases-detail__pain-points {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.usecases-pain {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-slate-600);
  line-height: var(--leading-relaxed);
}

.usecases-pain__icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex-shrink: 0;
  margin-top: 0.125rem; /* mockup-specific — optical alignment */
}

.usecases-pain__icon--danger {
  color: var(--color-danger);
}

.usecases-pain__icon--success {
  color: var(--color-teal);
}

.usecases-detail__solutions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.usecases-solution {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-slate-700);
  line-height: var(--leading-relaxed);
}

.usecases-solution__icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex-shrink: 0;
  color: var(--color-teal);
  margin-top: 0.125rem; /* mockup-specific — optical alignment */
}

.usecases-detail__results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.usecases-result {
  text-align: center;
  padding: var(--space-4);
  background-color: var(--color-teal-light);
  border-radius: var(--radius-md);
}

.usecases-result__value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-teal);
  line-height: var(--leading-tight);
}

.usecases-result__label {
  font-size: var(--text-xs);
  color: var(--color-slate-600);
  margin-top: var(--space-1);
}

/* Visual / Mockup Side */
.usecases-detail__visual {
  background-color: var(--color-slate-800);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  min-height: 20rem; /* mockup-specific — visual panel min height */
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.usecases-visual__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-slate-700);
}

.usecases-visual__dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
}

.usecases-visual__dot--red { background-color: var(--color-danger); }
.usecases-visual__dot--yellow { background-color: var(--color-warning); }
.usecases-visual__dot--green { background-color: var(--color-success); }

.usecases-visual__title {
  font-size: var(--text-xs);
  color: var(--color-slate-400);
  margin-left: auto;
}

.usecases-visual__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Mini dashboard card rows */
.usecases-visual__row {
  display: flex;
  gap: var(--space-3);
}

.usecases-visual__card {
  flex: 1;
  background-color: var(--color-slate-700);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.usecases-visual__card-label {
  font-size: var(--text-2xs);
  color: var(--color-slate-400);
  margin-bottom: var(--space-1);
}

.usecases-visual__card-value {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-white);
}

.usecases-visual__card-value--success { color: var(--color-success); }
.usecases-visual__card-value--warning { color: var(--color-warning); }
.usecases-visual__card-value--danger { color: var(--color-danger); }
.usecases-visual__card-value--teal { color: var(--color-teal); }

/* Mini bar chart */
.usecases-visual__bars {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  height: var(--space-16);
  padding-top: var(--space-2);
}

.usecases-visual__bar {
  flex: 1;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  min-height: var(--space-2);
  height: var(--bar-h, 50%);
}

.usecases-visual__bar--teal { background-color: var(--color-teal); }
.usecases-visual__bar--indigo { background-color: var(--color-indigo); }
.usecases-visual__bar--slate { background-color: var(--color-slate-600); }

/* Mini list rows */
.usecases-visual__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.usecases-visual__list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-slate-700);
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
}

.usecases-visual__list-label {
  color: var(--color-slate-300);
}

.usecases-visual__list-value {
  font-weight: var(--weight-semibold);
}

.usecases-visual__list-value--success { color: var(--color-success); }
.usecases-visual__list-value--danger { color: var(--color-danger); }
.usecases-visual__list-value--warning { color: var(--color-warning); }
.usecases-visual__list-value--teal { color: var(--color-teal); }

@media (max-width: 1023px) {
  .usecases-detail__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .usecases-detail--reverse .usecases-detail__inner {
    direction: ltr;
  }

  .usecases-detail__title {
    font-size: var(--text-3xl);
  }

  .usecases-detail__results {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 639px) {
  .usecases-detail__results {
    grid-template-columns: 1fr;
  }
}

/* CTA styles → shared.css */