/* ==================================================
   INFOGRAPHICS
   Purpose:
   The site's visual information system. Every diagram is
   built from semantic HTML and CSS — never from an image
   alone — so the information it carries is real text that
   search engines index and screen readers announce.

   Seven composable variants share one shell:
     --flow      left-to-right process, stacks on mobile
     --timeline  numbered vertical sequence
     --stack     layered architecture, top to bottom
     --hub       central system with connected satellites
     --matrix    capability / coverage map
     --cycle     continuous loop
     --compare   side-by-side contrast

   All of them degrade to a readable vertical list at
   narrow widths, and none of them scroll the page
   sideways.
================================================== */

/* ==================================================
   SHELL
================================================== */

.infographic {
  --node-bg: var(--surface);
  --node-border: var(--color-border);
  --node-fg: var(--ink-800);
  --node-muted: var(--ink-500);
  --connector-color: var(--brand-200);
  --accent-color: var(--brand-500);

  position: relative;
  padding: clamp(1.375rem, 1.1rem + 1.4vw, 2.25rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background-color: var(--surface-muted);
  overflow: hidden;
}

/* Dark presentation, used inside .section--dark bands. */
.infographic--dark,
.section--dark .infographic {
  --node-bg: rgba(255, 255, 255, 0.05);
  --node-border: rgba(255, 255, 255, 0.13);
  --node-fg: #FFFFFF;
  --node-muted: var(--color-on-dark-muted);
  --connector-color: rgba(78, 155, 255, 0.45);
  --accent-color: var(--brand-300);

  background-color: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Plain variant that sits directly on the page with no card chrome. */
.infographic--bare {
  padding: 0;
  border: none;
  background: none;
  overflow: visible;
}

/* ---- Header / footer ------------------------------------------------- */

.infographic__header {
  margin-bottom: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  max-width: 62ch;
}

.infographic__eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: var(--s-3);
}

.infographic__title {
  font-size: var(--fs-h3);
  color: var(--node-fg);
  margin-bottom: var(--s-3);
}

.infographic__description {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--node-muted);
}

.infographic__footer {
  margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--node-border);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--node-muted);
}

/* ==================================================
   NODE
   The shared unit every variant is built from.
================================================== */

.infographic__node {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius-md);
  background-color: var(--node-bg);
  border: 1px solid var(--node-border);
  min-width: 0;
}

.infographic__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background-color: var(--brand-50);
  border: 1px solid var(--brand-100);
  margin-bottom: var(--s-1);
  flex-shrink: 0;
}

.infographic--dark .infographic__icon,
.section--dark .infographic .infographic__icon {
  background-color: rgba(22, 104, 255, 0.2);
  border-color: rgba(78, 155, 255, 0.32);
}

.infographic__icon img { width: 18px; height: 18px; }

.infographic__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--node-fg);
  letter-spacing: var(--tracking-snug);
  line-height: 1.35;
}

.infographic__content {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--node-muted);
}

/* Ordinal marker shown by the flow, timeline and cycle variants. */
.infographic__index {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--accent-color);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  flex-shrink: 0;
}

.infographic--dark .infographic__index,
.section--dark .infographic .infographic__index { color: var(--ink-900); }

/* ==================================================
   VARIANT — FLOW
   A left-to-right sequence of steps joined by arrows.
   Below 900px it becomes a vertical list with the arrows
   rotated a quarter turn, which keeps the diagram honest
   instead of shrinking it into illegibility.
================================================== */

.infographic--flow .infographic__visual {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
  align-items: stretch;
}

.infographic--flow .infographic__step {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: auto 1fr;
  align-items: center;
}

.infographic--flow .infographic__step .infographic__node { height: 100%; }

/* Connector between steps. */
.infographic__connector {
  display: grid;
  place-items: center;
  color: var(--connector-color);
  flex-shrink: 0;
}

.infographic__connector::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask: url("../assets/icons/ui/chevron-down.svg") no-repeat center / contain;
  -webkit-mask: url("../assets/icons/ui/chevron-down.svg") no-repeat center / contain;
}

/* ------------------------------------------------------------------
   Why the flow variant does not use chevron connectors.

   It used to lay the steps out with `grid-auto-flow: column` and
   `grid-auto-columns: minmax(0, 1fr)`. That sizes EVERY auto-generated
   column equally — including the columns holding the connectors. A
   six-step flow therefore produced eleven equal tracks, the five
   chevrons consumed roughly forty-five percent of the row, and the
   step cards were crushed to about ninety pixels: one word per line,
   with long words like "Development" spilling past the card edge.

   Widening the connectors only moves the problem, and forcing seven
   cards into a single row never leaves room for a description at any
   realistic container width.

   So the steps now sit in an auto-fitting grid with a genuine minimum
   width, and the sequence is carried by a numbered badge on each card
   instead of by arrows between them. The order stays unambiguous, the
   diagram reflows to two or three rows instead of overflowing, and it
   behaves identically whether it holds four steps or eight.
------------------------------------------------------------------ */

.infographic--flow .infographic__visual {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  align-items: stretch;
}

.infographic--flow .infographic__step {
  display: block;
  height: 100%;
}

.infographic--flow .infographic__node {
  height: 100%;
}

/* The ordinal badge carries the sequence. */
.infographic--flow .infographic__index {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
}

.infographic--flow .infographic__node {
  position: relative;
  padding-right: calc(var(--s-5) + 30px);
}

/* Connectors belong to the vertical stack variant, not to flow. */
.infographic--flow .infographic__connector { display: none; }

/* Compact flows — the hero panels — carry labels only, so their cards can
   be much narrower without the text suffering. */
/* Sized so a four-step compact flow settles into a balanced 2x2 inside the
   hero panel rather than an unbalanced row of three plus one. */
.infographic--flow.infographic--short .infographic__visual {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

.infographic--flow.infographic--short .infographic__node {
  padding: var(--s-3) var(--s-3);
  padding-right: var(--s-3);
}

.infographic--flow.infographic--short .infographic__index {
  position: static;
  width: 20px;
  height: 20px;
  font-size: 0.6875rem;
}

/* ==================================================
   VARIANT — TIMELINE
   Numbered vertical sequence with a continuous rail.
   Used for development process and methodology diagrams.
================================================== */

.infographic--timeline .infographic__visual {
  position: relative;
  display: grid;
  gap: var(--s-5);
  padding-left: 0;
}

.infographic--timeline .infographic__step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s-4);
  align-items: start;
}

/* The rail: a single line drawn behind the markers. */
.infographic--timeline .infographic__step::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 34px;
  bottom: calc(var(--s-5) * -1);
  width: 2px;
  background: linear-gradient(to bottom, var(--connector-color), transparent);
}

.infographic--timeline .infographic__step:last-child::before { display: none; }

.infographic--timeline .infographic__marker {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--node-bg);
  border: 2px solid var(--connector-color);
  color: var(--accent-color);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  position: relative;
  z-index: 1;
}

.infographic--timeline .infographic__node {
  padding: var(--s-4) var(--s-5);
}

.infographic--timeline .infographic__phase {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: var(--s-1);
}

/* Two-column timeline on wide screens for longer sequences. */
@media (min-width: 1040px) {
  .infographic--timeline.infographic--two-column .infographic__visual {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5) var(--s-8);
  }

  .infographic--timeline.infographic--two-column .infographic__step::before { display: none; }
}

/* ==================================================
   VARIANT — STACK
   Layered architecture read from top to bottom, each
   layer full width with a downward connector.
================================================== */

.infographic--stack .infographic__visual {
  display: grid;
  gap: var(--s-2);
}

.infographic--stack .infographic__step {
  display: grid;
  gap: var(--s-2);
}

.infographic--stack .infographic__node {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2) var(--s-4);
  align-items: center;
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--accent-color);
}

.infographic--stack .infographic__label { grid-column: 2; }
.infographic--stack .infographic__content { grid-column: 2; }

.infographic--stack .infographic__icon { grid-row: span 2; margin-bottom: 0; }

.infographic--stack .infographic__connector { height: 16px; }

/* Layer depth cue: each successive band sits slightly inset. */
.infographic--stack .infographic__step:nth-child(2) .infographic__node { margin-inline: 0 clamp(0px, 1vw, 14px); }
.infographic--stack .infographic__step:nth-child(4) .infographic__node { margin-inline: 0 clamp(0px, 2vw, 28px); }
.infographic--stack .infographic__step:nth-child(6) .infographic__node { margin-inline: 0 clamp(0px, 3vw, 42px); }

/* ==================================================
   VARIANT — HUB
   A central system surrounded by the things that connect
   to it. Uses a 3-column grid on wide screens and a
   simple stack on narrow ones.
================================================== */

.infographic--hub .infographic__visual {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
}

.infographic__hub-core {
  display: grid;
  gap: var(--s-2);
  place-items: center;
  text-align: center;
  padding: var(--s-6) var(--s-5);
  border-radius: var(--radius-md);
  background: var(--gradient-brand);
  color: #FFFFFF;
  border: none;
}

.infographic__hub-core .infographic__label { color: #FFFFFF; font-size: var(--fs-h4); }
.infographic__hub-core .infographic__content { color: rgba(255, 255, 255, 0.82); }

.infographic__hub-core .infographic__icon {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
}

@media (min-width: 860px) {
  .infographic--hub .infographic__visual {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
    align-items: stretch;
  }

  /* The core takes the middle cell of the middle row. */
  .infographic__hub-core {
    grid-column: 2;
    grid-row: 2;
  }

  .infographic--hub .infographic__node { height: 100%; }
}

/* ==================================================
   VARIANT — MATRIX
   A capability or coverage map: equal-weight tiles with
   no implied order.
================================================== */

.infographic--matrix .infographic__visual {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}

.infographic--matrix .infographic__node {
  align-items: flex-start;
  transition: border-color var(--transition-normal), transform var(--transition-normal);
}

.infographic--matrix .infographic__node:hover {
  border-color: var(--accent-color);
  transform: translateY(-2px);
}

/* ==================================================
   VARIANT — CYCLE
   A loop rather than a line: the last step feeds the
   first. Rendered as a wrapped row with a closing note.
================================================== */

.infographic--cycle .infographic__visual {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.infographic--cycle .infographic__node {
  border-top: 3px solid var(--accent-color);
}

.infographic__loop-note {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--connector-color);
  font-size: var(--fs-xs);
  color: var(--node-muted);
}

.infographic__loop-note::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: var(--accent-color);
  mask: url("../assets/icons/ui/refresh.svg") no-repeat center / contain;
  -webkit-mask: url("../assets/icons/ui/refresh.svg") no-repeat center / contain;
}

/* ==================================================
   VARIANT — COMPARE
   Two contrasting columns, used for build-vs-buy and
   similar decision aids.
================================================== */

.infographic--compare .infographic__visual {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .infographic--compare .infographic__visual { grid-template-columns: 1fr 1fr; }
}

.infographic__column {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding: var(--s-5);
  border-radius: var(--radius-md);
  background-color: var(--node-bg);
  border: 1px solid var(--node-border);
}

.infographic__column-title {
  font-size: var(--fs-h4);
  color: var(--node-fg);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--node-border);
}

.infographic__column--highlight { border-color: var(--accent-color); }

.infographic__point {
  display: flex;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--node-muted);
}

.infographic__point::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--accent-color);
}

/* ==================================================
   METRIC BAR
   Simple proportional bars for diagrams that compare
   relative effort or coverage. Widths come from a
   --bar-value custom property set in the markup's class
   list rather than an inline style.
================================================== */

.infographic__bar-row {
  display: grid;
  grid-template-columns: minmax(110px, 160px) 1fr;
  gap: var(--s-4);
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--node-muted);
}

.infographic__bar-track {
  height: 10px;
  border-radius: var(--radius-pill);
  background-color: var(--node-border);
  overflow: hidden;
}

.infographic__bar-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--gradient-brand);
  width: var(--bar-value, 50%);
  transform-origin: left center;
}

/* Preset widths so no inline style attribute is required. */
.infographic__bar-fill--25 { --bar-value: 25%; }
.infographic__bar-fill--40 { --bar-value: 40%; }
.infographic__bar-fill--55 { --bar-value: 55%; }
.infographic__bar-fill--70 { --bar-value: 70%; }
.infographic__bar-fill--85 { --bar-value: 85%; }
.infographic__bar-fill--100 { --bar-value: 100%; }

/* ==================================================
   REVEAL ANIMATION

   Nodes fade and lift in sequence as the diagram scrolls
   into view.

   Every selector below is scoped to .js-reveal, a class
   js/animations.js puts on <html> only after it has
   confirmed IntersectionObserver support. That scoping is
   not cosmetic: without it, a diagram's nodes would be
   set to opacity 0 by the stylesheet and would stay there
   for anyone without JavaScript, or if the script failed
   to load — silently hiding the information these
   diagrams exist to convey. Gated this way, the default
   state is fully visible and the animation is a pure
   enhancement.
================================================== */

@media (prefers-reduced-motion: no-preference) {
  .js-reveal .infographic[data-animate] .infographic__step,
  .js-reveal .infographic[data-animate] .infographic__node,
  .js-reveal .infographic[data-animate] .infographic__column {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 520ms var(--ease-out-expo),
                transform 520ms var(--ease-out-expo);
    transition-delay: calc(var(--reveal-index, 0) * 70ms);
  }

  .js-reveal .infographic[data-animate].is-revealed .infographic__step,
  .js-reveal .infographic[data-animate].is-revealed .infographic__node,
  .js-reveal .infographic[data-animate].is-revealed .infographic__column {
    opacity: 1;
    transform: translateY(0);
  }

  /* Connectors draw in behind the nodes. */
  .js-reveal .infographic[data-animate] .infographic__connector {
    opacity: 0;
    transition: opacity 420ms var(--ease-out-expo);
    transition-delay: calc(var(--reveal-index, 0) * 70ms + 140ms);
  }

  .js-reveal .infographic[data-animate].is-revealed .infographic__connector { opacity: 1; }
}

/* Staggering indices, applied through classes so the markup stays free of
   inline styles. */
.reveal-1  { --reveal-index: 1; }
.reveal-2  { --reveal-index: 2; }
.reveal-3  { --reveal-index: 3; }
.reveal-4  { --reveal-index: 4; }
.reveal-5  { --reveal-index: 5; }
.reveal-6  { --reveal-index: 6; }
.reveal-7  { --reveal-index: 7; }
.reveal-8  { --reveal-index: 8; }
.reveal-9  { --reveal-index: 9; }
.reveal-10 { --reveal-index: 10; }