/* ==========================================================================
   29-process-flow.css — "How a Project Runs, Step by Step" as a pipeline diagram

   Same DOM, two diagrams: five nodes on a horizontal rail at desktop width, and
   the same nodes on a vertical rail below 1100px. The connectors are drawn by
   the <li> pseudo-elements, so no extra markup and no JS are involved.

   Selector note: the list keeps `k-geo-steps` (GEO layer, used only here) and
   adds `k-flow-steps`. `.k-geo .k-geo-steps.k-flow-steps` scores 0,3,0 against
   20-geo.css's 0,2,0, and every property that stylesheet set on `li` / `li::before`
   is restated here explicitly so nothing leaks.
   ========================================================================== */

.k-flow {
  --k-flow-gap: 14px;
  --k-flow-node: 34px;
  position: relative;
  margin: 1.5rem 0 0;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(255, 38, 56, .06), transparent 55%),
    #0a0a0c;
  overflow: hidden;
}

/* ---- frame chrome ------------------------------------------------------- */
.k-flow-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-family: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--wp--preset--color--k-muted);
}
.k-flow-dots { display: flex; gap: 6px; flex: 0 0 auto; }
.k-flow-dots i {
  width: 9px; height: 9px; border-radius: 50%; display: block;
  background: var(--wp--preset--color--k-muted);
}
.k-flow-dots i:nth-child(1) { background: var(--wp--preset--color--k-red); }
.k-flow-dots i:nth-child(2) { background: var(--wp--preset--color--k-red-bright); }
.k-flow-file { text-transform: lowercase; }
.k-flow-tag {
  margin-left: auto;
  opacity: .72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- the list becomes the diagram grid --------------------------------- */
.k-geo .k-geo-steps.k-flow-steps {
  counter-reset: none;
  list-style: none;
  margin: 0;
  padding: 26px 22px 24px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--k-flow-gap);
}

.k-geo .k-geo-steps.k-flow-steps > li {
  counter-increment: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}

/* the connector to the next node — horizontal by default */
.k-geo .k-geo-steps.k-flow-steps > li::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: var(--k-flow-node);
  top: calc(var(--k-flow-node) / 2 - 1px);
  width: calc(100% + var(--k-flow-gap) - var(--k-flow-node) - 12px);
  height: 2px;
  border-radius: 2px;
  /* restated so the old counter rule cannot bleed through */
  font: inherit;
  letter-spacing: normal;
  color: inherit;
  background: linear-gradient(
    90deg,
    rgba(255, 38, 56, .55) 0%,
    rgba(255, 38, 56, .18) 72%,
    rgba(255, 38, 56, .05) 100%
  );
}

/* arrowhead sitting at the end of the connector */
.k-geo .k-geo-steps.k-flow-steps > li::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: calc(100% + var(--k-flow-gap) - var(--k-flow-node) - 16px);
  top: calc(var(--k-flow-node) / 2 - 4px);
  width: 6px;
  height: 6px;
  border-top: 2px solid rgba(255, 38, 56, .6);
  border-right: 2px solid rgba(255, 38, 56, .6);
  transform: rotate(45deg);
}
.k-geo .k-geo-steps.k-flow-steps > li:last-child::before,
.k-geo .k-geo-steps.k-flow-steps > li:last-child::after { display: none; }

/* ---- node --------------------------------------------------------------- */
.k-flow-node {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--k-flow-node);
  height: var(--k-flow-node);
  border-radius: 50%;
  border: 1px solid rgba(255, 38, 56, .45);
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 38, 56, .22), rgba(10, 10, 12, .92) 70%);
  box-shadow: 0 0 0 4px rgba(10, 10, 12, .9);
  font-family: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--wp--preset--color--k-red-bright);
  transition: border-color .25s ease, color .25s ease, background .25s ease, box-shadow .25s ease;
}

/* ---- card --------------------------------------------------------------- */
.k-flow-card {
  position: relative;
  width: 100%;
  margin-top: 14px;
  padding: 12px 13px 13px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  transition: border-color .25s ease, transform .25s ease;
}

/* the drop from the node down to its card */
.k-flow-card::before {
  content: "";
  position: absolute;
  left: calc(var(--k-flow-node) / 2 - 1px);
  top: -14px;
  width: 2px;
  height: 14px;
  background: linear-gradient(to bottom, rgba(255, 38, 56, .5), rgba(255, 38, 56, .08));
}

.k-flow-title {
  margin: 0 0 6px;
  font-size: .84rem;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--wp--preset--color--k-white);
}
.k-flow-desc {
  margin: 0;
  font-size: .76rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, .66);
}

/* ---- interaction -------------------------------------------------------- */
.k-geo .k-geo-steps.k-flow-steps > li:hover .k-flow-node {
  border-color: var(--wp--preset--color--k-red);
  color: var(--wp--preset--color--k-white);
  background: radial-gradient(circle at 50% 32%, rgba(255, 38, 56, .55), rgba(10, 10, 12, .92) 72%);
  box-shadow: 0 0 0 4px rgba(10, 10, 12, .9), 0 0 18px rgba(255, 38, 56, .45);
}
.k-geo .k-geo-steps.k-flow-steps > li:hover .k-flow-card {
  border-color: rgba(255, 38, 56, .4);
  transform: translateY(-3px);
}

/* ==========================================================================
   Vertical rail — the same diagram, turned on its side
   ========================================================================== */
@media (max-width: 1099px) {
  .k-flow {
    --k-flow-gap: 0px;
  }

  .k-geo .k-geo-steps.k-flow-steps {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 18px 4px;
  }

  .k-geo .k-geo-steps.k-flow-steps > li {
    display: grid;
    grid-template-columns: var(--k-flow-node) minmax(0, 1fr);
    column-gap: 16px;
    padding-bottom: 20px;
  }

  /* connector runs down the rail instead of across */
  .k-geo .k-geo-steps.k-flow-steps > li::before {
    left: calc(var(--k-flow-node) / 2 - 1px);
    top: var(--k-flow-node);
    width: 2px;
    height: calc(100% - var(--k-flow-node));
    background: linear-gradient(
      to bottom,
      rgba(255, 38, 56, .55) 0%,
      rgba(255, 38, 56, .18) 72%,
      rgba(255, 38, 56, .05) 100%
    );
  }

  .k-geo .k-geo-steps.k-flow-steps > li::after { display: none; }

  .k-flow-node { align-self: start; }
  .k-flow-card { margin-top: 0; }
  .k-flow-card::before { display: none; }
  .k-flow-desc { font-size: .8rem; }
  .k-flow-title { font-size: .88rem; }
}

@media (max-width: 600px) {
  .k-flow-head { font-size: .64rem; letter-spacing: .06em; }
  .k-flow-tag { display: none; }
  .k-geo .k-geo-steps.k-flow-steps { padding: 18px 14px 2px; }
  .k-geo .k-geo-steps.k-flow-steps > li { column-gap: 12px; padding-bottom: 18px; }
  .k-flow-card { padding: 11px 12px 12px; }
  .k-flow-desc { font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .k-flow-node,
  .k-flow-card { transition: none; }
  .k-geo .k-geo-steps.k-flow-steps > li:hover .k-flow-card { transform: none; }
}