/*
 * Audit Steps: "1. Expert review → 2. Clear priorities → 3. Designer walkthrough",
 * with the audit steps lottie (lottie/dist/audit-steps/audit-steps-*.json) scrubbed
 * by the page scroll. Figma "Eleken Site 2026": desktop 673:6017, tablet 673:6090,
 * mobile 673:6189.
 *
 * 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.
 *
 * As in Process Steps, every breakpoint is its Figma frame scaled to the component's
 * width: 100cqw is the frame's width (--w, in Figma pixels), so a Figma x or y
 * becomes calc(x / var(--w) * 100cqw). Only positions and widths scale. Type keeps
 * its size, and each text block keeps its Figma offset from its dot (--dx, --dy).
 */

:host {
  display: block;
}

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

/* Desktop: Container / Visualization 673:6017, 1008 × 316 */
.as {
  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: left;
  overflow-wrap: break-word;
  --w: 1008;
  /* the lottie canvas in the frame: [left, top, width, height] */
  --art-x: 0;
  --art-y: 39;
  --art-w: 1010;
  --art-h: 95;
  /* a text block's top-left, from its dot's centre */
  --dx: 25px;
  --dy: -12px;
  --block: 251;
  /* Figma's frame runs on below the lowest text block */
  --after: 40px;
}

.as-stage {
  position: relative;
}

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

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

/* All steps share one grid cell, each pushed to its dot by its margins, so the
   list is as tall as its lowest step. */
.as-steps {
  display: grid;
  margin: 0;
  padding: 0 0 var(--after);
  list-style: none;
}

.as-step {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  width: calc(var(--block) / var(--w) * 100cqw);
  margin: calc(var(--y) / var(--w) * 100cqw + var(--dy)) 0 0 calc(var(--x) / var(--w) * 100cqw + var(--dx));
}

/* The dots' centres in the frame */
.as-step[data-step="1"] { --x: 64; --y: 123; }
.as-step[data-step="2"] { --x: 361; --y: 123; }
.as-step[data-step="3"] { --x: 658; --y: 123; }

.as-title {
  margin: 0;
  color: var(--colors--main, #1d1e22);
  font-family: Regolapro, "Regola Pro", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.18px;
}

.as-text {
  max-width: calc(var(--text, var(--block)) / var(--w) * 100cqw);
  margin: 16px 0 0;
  color: rgba(29, 30, 34, 0.6);
  font-size: 15px;
  line-height: 25px;
  white-space: pre-line;
}

/* Tablet: 673:6090, 682 × 502 — two steps under the top line, the third below */
@media screen and (max-width: 991px) {
  .as {
    max-width: none;
    --w: 682;
    --art-x: 0;
    --art-y: -14;
    --art-w: 697;
    --art-h: 384;
    --block: 240;
  }

  .as-step[data-step="1"] { --x: 62; --y: 55; }
  .as-step[data-step="2"] { --x: 350; --y: 55; }
  .as-step[data-step="3"] { --x: 230; --y: 359; }
}

/* Mobile: 673:6189, 288 × 782 — one step per row */
@media screen and (max-width: 767px) {
  .as {
    max-width: 400px;
    --w: 288;
    --art-x: -12;
    --art-y: 14;
    --art-w: 314;
    --art-h: 658;
    --dx: 24px;
    --dy: -11px;
    --block: 198;
  }

  .as-step[data-step="1"] { --x: 51; --y: 90; }
  .as-step[data-step="2"] { --x: 51; --y: 386; }
  .as-step[data-step="3"] { --x: 51; --y: 661; }

  .as-title {
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.15px;
  }

  .as-text {
    margin-top: 10px;
    font-size: 13px;
    line-height: 20px;
  }
}