/* ==========================================================================
   KOBIL — AI Trust — Section: From Integration to Governed Deployment
   Figma: desktop 5882:66621 (1440x784 — head 740 wide at x=80/y=80, tabs
   1280x428 at y=316: rows 578 wide, visual 527x472 at x=753/y=-22) ·
   mobile 6087:14133 (369x769 — head 337, then a full-width card carousel and
   a 3-segment progress bar).
   ========================================================================== */

.sec-ait-steps {
  display: flex;
  flex-direction: column;
  gap: var(--w20);
  width: 100%;
  padding: var(--w80) var(--w80) var(--w40);
}

.ait-steps__head {
  display: flex;
  flex-direction: column;
  gap: var(--w24);
  width: var(--w740);
  max-width: 100%;
}

.ait-steps__title {
  font-family: var(--font-serif);
  font-size: var(--w56);
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
}

.ait-steps__lead {
  margin-top: calc(var(--w12) - var(--w24));
  font-family: var(--font-sans);
  font-size: var(--w18);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy-80);
}

/* ---- Rows + visual ---- */

.ait-steps__body {
  position: relative;
  width: var(--w1280);
  max-width: 100%;
  min-height: var(--w428);
  display: flex;
  align-items: center;
}

.ait-steps__list {
  display: flex;
  flex-direction: column;
  gap: var(--w24);
  width: var(--w578);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ait-steps__row {
  display: flex;
  align-items: flex-start;
  gap: var(--w24);
  padding-bottom: var(--w20);
  border-bottom: 1px solid var(--navy-40);
  cursor: pointer;
}

.ait-steps__row-copy {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--w8);
}

.ait-steps__row-title {
  font-family: var(--font-sans);
  font-size: var(--w20);
  font-weight: 500;
  line-height: var(--w26);
  color: var(--navy);
  transition: color var(--dur) var(--ease);
}

.ait-steps__row--active .ait-steps__row-title { color: #1046cf; }

.ait-steps__row-desc {
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-70);
}

/* Both arrow states are in the markup and cross-faded, so activating a tab
   never waits on a network request. */
.ait-steps__row-icon {
  position: relative;
  flex: none;
  width: var(--w24);
  height: var(--w24);
  transition: transform var(--dur) var(--ease);
}

.ait-steps__row-icon img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity var(--dur) var(--ease);
}

.ait-steps__row-icon-on { opacity: 0; }
.ait-steps__row--active .ait-steps__row-icon-idle { opacity: 0; }
.ait-steps__row--active .ait-steps__row-icon-on { opacity: 1; }

.ait-steps__row:hover .ait-steps__row-icon,
.ait-steps__row--active .ait-steps__row-icon { transform: translateX(var(--w4)); }

.ait-steps__figure { margin: 0; }

/* The three variant visuals, stacked in the right-hand slot (rows 578 + gap
   175 = 753) and cross-faded on tab change. Scoped to the desktop range so
   the phone rules below don't have to undo the stacking. */
@media (min-width: 769px) {
  .ait-steps__figure {
    position: absolute;
    top: 50%;
    left: var(--w753);
    width: var(--w527);
    height: var(--w472);
    opacity: 0;
    transform: translateY(-50%) scale(0.98);
    transition: opacity 320ms var(--ease), transform 320ms var(--ease);
    pointer-events: none;
  }

  .ait-steps__row--active .ait-steps__figure {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

.ait-steps__visual {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.ait-steps__pagination { display: none; }

/* ==========================================================================
   Phone (Figma 6087:14133)
   ========================================================================== */

@media (max-width: 768px) {
  .sec-ait-steps {
    gap: 0;
    /* The carousel bleeds into the page gutter, so only the head keeps the
       28px inset. Figma leaves 34 under the progress bar before the
       section’s own 40 bottom padding. */
    padding: var(--m40) 0 var(--m74);
    overflow: hidden;
  }

  .ait-steps__head {
    width: 100%;
    gap: var(--m16);
    padding: 0 var(--m28);
  }
  .ait-steps__title { font-size: var(--m34); line-height: 1.2; }
  .ait-steps__lead {
    margin-top: calc(var(--m8) - var(--m24));
    font-size: var(--m14);
    line-height: var(--m20);
  }

  .ait-steps__body {
    display: block;
    width: 100%;
    min-height: 0;
    margin-top: var(--m32);
  }

  .ait-steps__list {
    flex-direction: row;
    gap: var(--m20);
    width: 100%;
    padding: 0 var(--m28);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--m28);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ait-steps__list::-webkit-scrollbar { display: none; }

  .ait-steps__row {
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: var(--m337);
    padding: 0;
    border-bottom: 0;
    scroll-snap-align: start;
    cursor: default;
  }

  .ait-steps__row-copy { flex: none; gap: var(--m8); }
  .ait-steps__row-title { font-size: var(--m20); line-height: var(--m26); }
  .ait-steps__row--active .ait-steps__row-title { color: var(--navy); }
  .ait-steps__row-desc { font-size: var(--m16); line-height: var(--m23); }

  .ait-steps__row-icon { display: none; }

  .ait-steps__figure {
    width: 100%;
    height: var(--m322);
    margin-top: var(--m24);
  }

  .ait-steps__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--m2);
    margin-top: 0;
  }

  .ait-steps__dot {
    width: var(--m32);
    height: var(--m2);
    padding: 0;
    border: 0;
    border-radius: var(--m2);
    background: var(--navy-40);
    cursor: pointer;
    transition: background var(--dur) var(--ease);
  }

  .ait-steps__dot--active { background: var(--navy); }
}

@media (prefers-reduced-motion: reduce) {
  .ait-steps__figure,
  .ait-steps__row-title,
  .ait-steps__row-icon { transition: none; }
}