/* ============================================================
   Workflow diagram (.wfd) — homepage AI section
   Depends on brand tokens in styles.css :root (fallbacks included).
   Desktop ≥900px: horizontal pipeline, panel below.
   640–899px: vertical pipeline left, panel right.
   <640px: vertical pipeline, panel below.
   ============================================================ */

.wfd {
  --wfd-dot: 44px;
  --wfd-row: 56px;
  --wfd-ease: var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  --wfd-progress: 1;
  position: relative;
  width: 100%;
  max-width: var(--max-w, 1280px);
  margin: 0 auto;
  color: var(--warm-white, #F5F3EE);
  font-family: var(--font-body, 'DM Sans', sans-serif);
  box-sizing: border-box;
}
.wfd *, .wfd *::before, .wfd *::after { box-sizing: border-box; }

.wfd-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* —— Track (vertical by default — mobile first) —— */
.wfd-track {
  position: relative;
  display: flex;
  flex-direction: column;
}

.wfd-line {
  position: absolute;
  left: calc(var(--wfd-dot) / 2 - 0.5px);
  top: calc(var(--wfd-row) / 2);
  bottom: calc(var(--wfd-row) / 2);
  width: 1px;
  background: rgba(245, 243, 238, 0.18);
  pointer-events: none;
}
.wfd-line__fill {
  position: absolute;
  inset: 0;
  background: rgba(245, 243, 238, 0.5);
  transform-origin: 50% 0;
  transform: scaleY(var(--wfd-progress));
  transition: transform var(--wfd-light, 240ms) var(--wfd-ease);
}

/* —— Node —— */
.wfd-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--wfd-row);
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wfd-node__dot {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--wfd-dot);
  height: var(--wfd-dot);
  border-radius: 50%;
  background: var(--pitch-black, #0A0A0A);
  border: 0.5px solid var(--gray-light, #C8C6C0);
  color: var(--warm-white, #F5F3EE);
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.04em;
  padding-top: 2px; /* Bebas sits high — optical centering */
  transition:
    background-color 240ms var(--wfd-ease),
    border-color 240ms var(--wfd-ease),
    color 240ms var(--wfd-ease),
    opacity 240ms var(--wfd-ease),
    transform 240ms var(--wfd-ease);
}

.wfd-node__name {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(245, 243, 238, 0.62));
  transition: color 240ms var(--wfd-ease), opacity 240ms var(--wfd-ease);
}

.wfd-node:hover .wfd-node__dot { border-color: var(--warm-white, #F5F3EE); }
.wfd-node:hover .wfd-node__name { color: var(--warm-white, #F5F3EE); }

.wfd-node:focus { outline: none; }
.wfd-node:focus-visible .wfd-node__dot {
  outline: 2px solid var(--warm-white, #F5F3EE);
  outline-offset: 3px;
}

/* Selected — the single orange focal point */
.wfd--ready .wfd-node[aria-selected="true"] .wfd-node__dot {
  background: var(--blaze-orange, #FF5E1A);
  border-color: var(--blaze-orange, #FF5E1A);
  color: var(--pitch-black, #0A0A0A);
}
.wfd--ready .wfd-node[aria-selected="true"] .wfd-node__name {
  color: var(--warm-white, #F5F3EE);
}

/* —— Intro: armed (pre-scroll) state —— */
.wfd--armed .wfd-node:not(.is-lit) .wfd-node__dot {
  opacity: 0.25;
  transform: scale(0.82);
  border-color: var(--gray-mid, #383838);
}
.wfd--armed .wfd-node:not(.is-lit) .wfd-node__name { opacity: 0.25; }
.wfd--armed:not(.wfd--ready) .wfd-panel {
  opacity: 0;
  transform: translateY(8px);
}

/* —— Panel —— */
.wfd-panel {
  margin-top: 24px;
  padding: clamp(24px, 3vw, 32px);
  background: var(--surface-dark, #1E1E1E);
  border: 0.5px solid var(--gray-mid, #383838);
  transition: opacity 400ms var(--wfd-ease), transform 400ms var(--wfd-ease);
}
.wfd-panel:focus { outline: none; }
.wfd-panel:focus-visible {
  outline: 2px solid var(--warm-white, #F5F3EE);
  outline-offset: 3px;
}

.wfd-panel__inner {
  display: grid;
  gap: 24px;
  opacity: 0;
  transform: translateY(6px);
}
.wfd-panel__inner.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 280ms var(--wfd-ease), transform 280ms var(--wfd-ease);
}

.wfd-panel__title {
  margin: 0 0 12px;
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 32px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--warm-white, #F5F3EE);
}

.wfd-panel__what,
.wfd-panel__produced {
  margin: 0;
  font-size: clamp(15px, 1.2vw, 16px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-muted, rgba(245, 243, 238, 0.62));
}

.wfd-panel__label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-white, #F5F3EE);
}

.wfd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.wfd-chip {
  padding: 6px 10px;
  border: 0.5px solid var(--gray-light, #C8C6C0);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-light, #C8C6C0);
  white-space: nowrap;
}

/* —— Tablet: pipeline left, panel right —— */
@media (min-width: 640px) and (max-width: 899.98px) {
  .wfd {
    display: grid;
    grid-template-columns: minmax(220px, 260px) 1fr;
    gap: 32px;
    align-items: start;
  }
  .wfd-panel { margin-top: 0; }
}

/* —— Desktop: horizontal pipeline —— */
@media (min-width: 900px) {
  .wfd-track {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 8px;
  }
  .wfd-line {
    top: calc(var(--wfd-dot) / 2 - 0.5px);
    bottom: auto;
    /* first to last dot centre: half a column in from each edge */
    left: calc((100% - 7 * 8px) / 16);
    right: calc((100% - 7 * 8px) / 16);
    width: auto;
    height: 1px;
  }
  .wfd-line__fill {
    transform-origin: 0 50%;
    transform: scaleX(var(--wfd-progress));
  }
  .wfd-node {
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    min-height: 0;
    padding-bottom: 4px;
    text-align: center;
  }
  .wfd-node__name { max-width: 14ch; }
  .wfd-panel { margin-top: 32px; }
  .wfd-panel__inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 64px);
  }
}

/* —— Reduced motion: fully drawn, no transitions —— */
@media (prefers-reduced-motion: reduce) {
  .wfd *, .wfd-panel { transition: none !important; }
  .wfd-panel__inner { opacity: 1; transform: none; }
}