/**
 * Process Steps Widget Styles
 *
 * @package BongoHive
 */

.bh-process-steps {
  --bh-ps-font-heading: "PT Sans", "Lato", Arial, sans-serif;
  --bh-ps-font-body: "Noto Sans", "Ubuntu", Arial, sans-serif;
  --bh-ps-gold: #f0af24;
  --bh-ps-shark: #1d2229;
  --bh-ps-muted: #606469;
  --bh-ps-divider: #e5e5e5;

  counter-reset: bh-process-step;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bh-process-steps__item {
  align-items: flex-start;
  border-top: 1px solid transparent;
  display: flex;
  gap: 32px;
  padding: 20px 0;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.bh-process-steps__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
}

.bh-process-steps__item + .bh-process-steps__item {
  border-top-color: var(--bh-ps-divider);
}

.bh-process-steps__number {
  color: var(--bh-ps-gold);
  flex-shrink: 0;
  font-family: var(--bh-ps-font-heading);
  font-size: clamp(28px, 2.5vw + 12px, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  min-width: 64px;
}

.bh-process-steps__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 6px;
  min-width: 0;
}

.bh-process-steps__title {
  color: var(--bh-ps-shark);
  font-family: var(--bh-ps-font-heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}

.bh-process-steps__desc {
  color: var(--bh-ps-muted);
  font-family: var(--bh-ps-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 640px) {
  .bh-process-steps__item {
    gap: 16px;
  }

  .bh-process-steps__number {
    min-width: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bh-process-steps__item {
    transition: none;
    transform: none;
  }
  .bh-process-steps__item:hover {
    transform: none;
  }
}