/* ==========================================================================
   DENTALINS — PROCESS JOURNEY (process-steps.css)
   "Patient Journey Map" — 4 glowing nodes on a dashed track.
   BEM: .process-journey  __list  __step  __node  __num  __icon  __body
   ========================================================================== */


/* ======================================================================
   1. WRAPPER
   ====================================================================== */

.process-journey {
  position: relative;
  margin-bottom: var(--space-10);
}

/* Faint full-width guide rail visible behind the nodes on desktop */
@media (min-width: 1024px) {
  .process-journey::before {
    content: '';
    position: absolute;
    top: 40px; /* = half of 80px node height */
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(5, 160, 214, 0.10) 15%,
      rgba(5, 160, 214, 0.18) 50%,
      rgba(5, 160, 214, 0.10) 85%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 0;
  }
}


/* ======================================================================
   2. STEP LIST
   ====================================================================== */

.process-journey__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Tablet: 2-column grid */
@media (min-width: 640px) and (max-width: 1023px) {
  .process-journey__list {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-10);
  }
}

/* Mobile: single column */
@media (max-width: 639px) {
  .process-journey__list {
    grid-template-columns: 1fr;
    gap: 0;
  }
}


/* ======================================================================
   3. STEP ITEM
   ====================================================================== */

.process-journey__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--space-6) var(--space-8);
  z-index: 1;
}

/* Mobile: horizontal layout — node on left, content on right */
@media (max-width: 639px) {
  .process-journey__step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-5);
    padding: 0 0 var(--space-8) 0;
  }
}


/* ======================================================================
   4. CONNECTORS — dashed directional lines between nodes
   ====================================================================== */

/* ---- Desktop (1024px+): rightward connector on every step except last ---- */
@media (min-width: 1024px) {
  .process-journey__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 40px;                     /* vertical center of node */
    left: calc(50% + 43px);        /* right edge of node */
    width: calc(100% - 86px);      /* gap between adjacent node edges */
    height: 2px;
    background:
      /* soft glow aura */
      linear-gradient(
        to right,
        rgba(5, 160, 214, 0.00),
        rgba(5, 160, 214, 0.09),
        rgba(5, 160, 214, 0.00)
      ) center / 100% 10px no-repeat,
      /* primary dashes */
      repeating-linear-gradient(
        to right,
        rgba(5, 160, 214, 0.48) 0 7px,
        rgba(5, 160, 214, 0.00) 7px 13px
      );
    pointer-events: none;
    z-index: 0;
  }
}

/* ---- Tablet (640-1023px, 2-col): connect 1→2 and 3→4 only ---- */
@media (min-width: 640px) and (max-width: 1023px) {
  .process-journey__step:nth-child(odd):not(:last-child)::after {
    content: '';
    position: absolute;
    top: 40px;
    left: calc(50% + 43px);
    width: calc(100% - 86px);
    height: 2px;
    background: repeating-linear-gradient(
      to right,
      rgba(5, 160, 214, 0.45) 0 7px,
      rgba(5, 160, 214, 0.00) 7px 13px
    );
    pointer-events: none;
    z-index: 0;
  }
}

/* ---- Mobile: vertical downward connector ---- */
@media (max-width: 639px) {
  .process-journey__step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 40px;                          /* node horizontal center */
    top: 82px;                           /* just below node (80px + 2px) */
    height: calc(var(--space-8) - 4px); /* span the gap between steps */
    width: 2px;
    background: repeating-linear-gradient(
      to bottom,
      rgba(5, 160, 214, 0.45) 0 7px,
      rgba(5, 160, 214, 0.00) 7px 13px
    );
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
  }
}


/* ======================================================================
   5. NODE CIRCLE — the glowing journey anchor
   ====================================================================== */

.process-journey__node {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Inner gradient */
  background: radial-gradient(
    circle at 36% 36%,
    rgba(5, 160, 214, 0.15) 0%,
    rgba(5, 160, 214, 0.04) 60%,
    transparent 100%
  );

  /* Crisp border */
  border: 1.5px solid rgba(5, 160, 214, 0.30);

  /* Layered glow: tight ring + spread + directional shadow */
  box-shadow:
    0 0 0  7px rgba(5, 160, 214, 0.050),
    0 0 0 15px rgba(5, 160, 214, 0.020),
    0 10px 36px rgba(5, 160, 214, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);

  margin-bottom: var(--space-5);
  z-index: 1;
  transition:
    border-color 0.35s ease,
    box-shadow   0.35s ease,
    background   0.35s ease;
}

/* Mobile: no bottom margin (horizontal layout) */
@media (max-width: 639px) {
  .process-journey__node {
    margin-bottom: 0;
  }
}

/* Hover: node brightens noticeably */
.process-journey__step:hover .process-journey__node {
  border-color: rgba(5, 160, 214, 0.62);
  background: radial-gradient(
    circle at 36% 36%,
    rgba(5, 160, 214, 0.22) 0%,
    rgba(5, 160, 214, 0.08) 60%,
    transparent 100%
  );
  box-shadow:
    0 0 0  7px rgba(5, 160, 214, 0.090),
    0 0 0 15px rgba(5, 160, 214, 0.036),
    0 12px 48px rgba(5, 160, 214, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}


/* ======================================================================
   7. ICON — centered in node with slight offset for num badge clearance
   ====================================================================== */

.process-journey__icon {
  width: 28px;
  height: 28px;
  margin-top: 0;
  margin-left: 0;
  color: var(--color-primary-400);
  flex-shrink: 0;
  transition:
    color     0.25s ease,
    transform 0.25s ease;
}

.process-journey__step:hover .process-journey__icon {
  color: var(--color-primary-300);
  transform: scale(1.10) translateY(-1px);
}


/* ======================================================================
   8. BODY — text container (below node on desktop, right of node on mobile)
   ====================================================================== */

.process-journey__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 639px) {
  .process-journey__body {
    align-items: flex-start;
    padding-top: var(--space-2);
  }
}


/* ======================================================================
   9. TITLE
   ====================================================================== */

.process-journey__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-neutral-0);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
  transition: color 0.25s ease;
}

.process-journey__step:hover .process-journey__title {
  color: rgba(255, 255, 255, 0.96);
}

@media (min-width: 1024px) {
  .process-journey__title {
    font-size: var(--text-xl);
  }
}


/* ======================================================================
   10. DESCRIPTION
   ====================================================================== */

.process-journey__desc {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.44);
  line-height: var(--leading-relaxed);
  max-width: 200px;
  transition: color 0.25s ease;
}

.process-journey__step:hover .process-journey__desc {
  color: rgba(255, 255, 255, 0.68);
}

@media (max-width: 639px) {
  .process-journey__desc {
    max-width: 100%;
  }
}

@media (min-width: 1024px) {
  .process-journey__desc {
    font-size: var(--text-base);
    max-width: 220px;
  }
}


/* ======================================================================
   11. SCROLL REVEAL — staggered fade-up per step
   ====================================================================== */

.process-journey__step {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   var(--transition-reveal),
    transform var(--transition-reveal);
}

.process-journey__step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Accessibility: skip animations for reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .process-journey__step {
    opacity: 1;
    transform: none;
    transition: none;
  }
}