/*
 * How It Works: the dashed lines that fan one designer out to steps 01–04, and the
 * steps under them. The lines draw themselves once as they scroll into view
 * (lottie/dist/branches/branches-*.json); the steps are real text.
 * Figma "Eleken Site 2026", Services → How It Works: desktop 503:735 (lines
 * 503:738), tablet 503:2220 (lines 503:2222), mobile 503:3795 (no lines).
 *
 * This CSS lives inside the component's Shadow DOM: site classes never reach it,
 * but site variables (var(--…)) and the site's @font-face fonts do.
 * Breakpoints follow Webflow: desktop ≥992 (base), tablet ≤991, mobile ≤767.
 *
 * The component is its Figma frame (--w, in Figma pixels) at up to that width, and
 * scales down below it: 100cqw is the frame's width, so a Figma x becomes
 * calc(x / var(--w) * 100cqw). The lines scale as a whole, and the step columns
 * and their gaps keep Figma's proportions, so every line still ends on the middle
 * of its column. Type keeps its size.
 */

:host {
  display: block;
}

.hiw,
.hiw *,
.hiw *::before,
.hiw *::after {
  box-sizing: border-box;
}

/* Desktop: Main Content 503:735, 1008 wide; the lines 787 × 172 at x 110.5 */
.hiw {
  container-type: inline-size;
  width: 100%;
  max-width: 1008px;
  margin: 0 auto;
  color: var(--colors--main, #1d1e22);
  font-family: "Inter Variable Local", Inter, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: normal;
  text-align: center;
  overflow-wrap: break-word;
  --w: 1008;
  --lines-x: 110.5;
  --lines-w: 787;
  --lines-h: 172;
  /* the lottie canvas around the lines, which leaves the pen room: [left, top, width, height] */
  --canvas-x: -7;
  --canvas-y: -8;
  --canvas-w: 801;
  --canvas-h: 187;
  /* from the ends of the lines to the numbers */
  --gap: 80px;
  --columns-gap: 40;
}

.hiw-lines {
  position: relative;
  width: calc(var(--lines-w) / var(--w) * 100cqw);
  aspect-ratio: var(--lines-w) / var(--lines-h);
  margin: 0 0 var(--gap) calc(var(--lines-x) / var(--w) * 100cqw);
}

.hiw-art {
  position: absolute;
  top: calc(var(--canvas-y) / var(--lines-h) * 100%);
  left: calc(var(--canvas-x) / var(--lines-w) * 100%);
  width: calc(var(--canvas-w) / var(--lines-w) * 100%);
  height: calc(var(--canvas-h) / var(--lines-h) * 100%);
  pointer-events: none;
}

/* lottie-web's <svg> fills the box; as an inline box it would add a baseline gap */
.hiw-art > svg {
  display: block;
}

.hiw-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: calc(var(--columns-gap) / var(--w) * 100cqw);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hiw-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  min-width: 0;
}

.hiw-number {
  display: block;
  color: rgba(29, 30, 34, 0.4);
  font-family: Regolapro, "Regola Pro", sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -0.64px;
}

.hiw-text {
  width: 100%;
  margin: 0;
  color: rgba(29, 30, 34, 0.6);
  font-size: 15px;
  line-height: 25px;
  white-space: pre-line;
}

/* Tablet: Box 503:2220, 676 wide; the lines 534 × 172 at x 71 */
@media screen and (max-width: 991px) {
  .hiw {
    max-width: 676px;
    --w: 676;
    --lines-x: 71;
    --lines-w: 534;
    --canvas-w: 548;
    --gap: 32px;
    --columns-gap: 8;
  }

  .hiw-step {
    gap: 8px;
  }

  .hiw-number {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.56px;
  }

  .hiw-text {
    font-size: 12px;
    line-height: 18px;
  }
}

/* Mobile: Container 503:3795 — no lines, the steps stack 32px apart */
@media screen and (max-width: 767px) {
  .hiw {
    max-width: none;
  }

  .hiw-lines {
    display: none;
  }

  .hiw-steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }

  .hiw-step {
    padding: 0 8px;
  }

  /* Figma breaks these over two even lines (step 03 in a 196px box, 04 by hand);
     balanced wrapping in the same width gives the same lines without a break
     that would also show on desktop. */
  .hiw-text {
    max-width: 196px;
    font-size: 11px;
    line-height: 18px;
    text-wrap: balance;
  }
}