/* ==========================================================================
   Intro — "Co robimy"
   Picks up where the hero's hands touch: a thread of dots runs down from the
   hero and ends in a spark, then the page starts explaining.
   ========================================================================== */

.intro {
  --intro-top: calc(var(--section-space) + 2.5rem);

  isolation: isolate;
  padding-top: var(--intro-top);
  text-align: center;
}

/* A field of dots radiating from the spark, fading out before the text gets busy. */
.intro::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: min(48rem, 100%);
  background: radial-gradient(circle, rgb(255 255 255 / 0.11) 0 1px, transparent 1.5px) 50% 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 50% 70% at 50% 0%, #000, transparent 75%);
  pointer-events: none;
}

/* runs from the hero's bottom edge down into the eyebrow's spark */
.intro__thread {
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
  width: 2px;
  height: calc(var(--intro-top) - 0.75rem);
}

.intro .eyebrow {
  flex-direction: column;
  gap: 1rem;
}

.intro__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 54rem;
  margin-inline: auto;
}

.intro__header .section-lead {
  margin-inline: auto;
}

/* ---- What an implementation consists of ------------------------------------ */

.intro__anatomy {
  margin-top: clamp(4.5rem, 3rem + 6vw, 8rem);
}

.intro__anatomy-title {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  font-weight: 400;
  font-variation-settings: "opsz" 32;
  line-height: 1.25;
  text-wrap: balance;
}

.intro__flow {
  position: relative;
  margin-top: 3rem;
  text-align: left;
}

/* the dotted line that joins the four markers */
.intro__line {
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  height: 2px;
}

.intro__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
}

.intro__step {
  position: relative;
  padding-top: 2.25rem;
}

.intro__step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.intro__step-title {
  font-size: 1.25rem;
  font-weight: 400;
  font-variation-settings: "opsz" 32;
  line-height: 1.25;
}

.intro__step-text {
  margin-top: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---- Tablet and phone --------------------------------------------------------- */

@media (max-width: 1023.98px) {
  .intro__line {
    display: none;
  }

  .intro__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639.98px) {
  .intro__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  /* a vertical thread of dots between the markers */
  .intro__step {
    padding: 0 0 2.25rem 1.75rem;
  }

  .intro__step::after {
    content: "";
    position: absolute;
    top: 1rem;
    bottom: 0.5rem;
    left: 2px;
    width: 2px;
    background: radial-gradient(circle, rgb(255 255 255 / 0.45) 0 1px, transparent 1.4px) center top / 2px 10px
      repeat-y;
  }

  .intro__step:last-child::after {
    display: none;
  }

  .intro__step::before {
    top: 0.5em;
  }
}