/* ==========================================================================
   KOBIL — Homepage: "KOBIL Recognized by Gartner as a Sample Vendor"
   Figma: D-Homepage → 6019:111711 (mobile 6213:48772)

   Replaces the previous gartner section. A centred two-line headline, a
   mono sub-line, and a four-milestone timeline: horizontal on desktop
   (gradient hairline, dots, year, white card), vertical on the phone
   (line down the left, year pill + card per row).

   Sits on the homepage's `.page--flush` wrapper — full 1440, own inset.
   ========================================================================== */

.sec-gartner {
  /* The Figma frame has no fill of its own — it sits on the page white. */
  background: var(--white);
  padding: var(--w96) 0 var(--w104);
}

.sec-gartner__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--w80);
}

.sec-gartner__head {
  text-align: center;
}

.sec-gartner__title {
  font-family: var(--font-sans);
  font-size: var(--w40);
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
}

.sec-gartner__title-accent {
  background-image: linear-gradient(90deg, #1046cf 22%, #696ef5 53%, #ca80f4 82%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #696ef5;
  -webkit-text-fill-color: transparent;
}

.sec-gartner__title-muted {
  color: #7e8a9f;
}

.sec-gartner__sub {
  margin-top: var(--w14);
  font-family: var(--font-mono);
  font-size: var(--w14);
  font-weight: 400;
  line-height: var(--w23);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #7e8a9f;
}

/* ---- Timeline ---- */

.sec-gartner__timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--w54);
  max-width: var(--w1010);
  margin: var(--w64) auto 0;
}

/* The gradient hairline runs behind the dots, dot-centre height. */
.sec-gartner__timeline::before {
  content: "";
  position: absolute;
  top: var(--w8);
  left: var(--w88);
  right: var(--w88);
  height: 1px;
  background: linear-gradient(90deg, #3ebffc 0%, #1046cf 22%, #696ef5 53%, #ca80f4 82%);
}

.sec-gartner__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sec-gartner__dot {
  position: relative;
  z-index: 1;
  width: var(--w17);
  height: var(--w17);
  border-radius: 50%;
  background: var(--white);
  border: 1px solid rgba(105, 110, 245, 0.45);
  box-shadow: 0 1px 4px rgba(17, 36, 74, 0.14);
}

.sec-gartner__dot::after {
  content: "";
  position: absolute;
  inset: var(--w4);
  border-radius: 50%;
  background: #696ef5;
}

.sec-gartner__year {
  margin-top: var(--w12);
  font-family: var(--font-ui);
  font-size: var(--w13);
  font-weight: 600;
  line-height: var(--w18);
  color: #1046cf;
}

.sec-gartner__card {
  width: 100%;
  margin-top: var(--w20);
  padding: var(--w18) var(--w20);
  background: var(--white);
  border-radius: var(--w14);
  box-shadow: 0 2px 6px rgba(17, 36, 74, 0.06), 0 12px 28px rgba(17, 36, 74, 0.08);
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 400;
  line-height: var(--w20);
  color: #475569;
  text-align: left;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Phone — Figma 6213:48772: vertical timeline, the gradient line down the
   left, per row a dot + blue year pill and the card beside it. */
@media (max-width: 768px) {
  .sec-gartner {
    padding: var(--m56) 0 var(--m60);
  }

  .sec-gartner__inner {
    padding: 0 var(--m24);
  }

  .sec-gartner__title {
    font-size: var(--m28);
  }

  .sec-gartner__sub {
    font-size: var(--m12);
    letter-spacing: 1.6px;
  }

  .sec-gartner__timeline {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--m36);
    margin-top: var(--m40);
    padding-left: var(--m8);
  }

  .sec-gartner__timeline::before {
    top: var(--m8);
    bottom: var(--m8);
    left: var(--m16);
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, #3ebffc 0%, #1046cf 22%, #696ef5 53%, #ca80f4 82%);
  }

  .sec-gartner__item {
    display: grid;
    grid-template-columns: var(--m17) var(--m56) minmax(0, 1fr);
    align-items: start;
    gap: var(--m12);
    text-align: left;
  }

  .sec-gartner__year {
    margin-top: 0;
    padding: var(--m8) 0;
  }

  .sec-gartner__card {
    margin-top: 0;
  }
}