/*
  AI Timeline Section — Digital Aacharya's — Styles
  ====================================================
  Same 3 brand variables as your other sections — swap to your
  exact hex codes whenever you have them.

  FONT: using Poppins (linked via Google Fonts in the HTML file)
  as a placeholder since I couldn't pull your site's real font —
  swap the font-family below and the Google Fonts link in the
  HTML head if your site uses something else.
*/

#ai-timeline {
  --da-navy: #10254A;
  --da-orange: #F7941D;
  --da-text: #5A6474;
  --da-bg: #F7F8FB;
  --da-border: #E7E9F0;
}

#ai-timeline {
  background: var(--da-bg);
  padding: 100px 20px;
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
}

#ai-timeline .at-inner {
  max-width: 980px;
  margin: 0 auto;
}

/* ---------- Header ---------- */
#ai-timeline .at-header {
  text-align: center;
  margin-bottom: 70px;
}

#ai-timeline .at-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--da-orange);
  background: rgba(247, 148, 29, 0.1);
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 18px;
}

#ai-timeline .at-title {
  font-size: 38px;
  font-weight: 700;
  color: var(--da-navy);
  margin: 0 0 14px;
  line-height: 1.25;
}

#ai-timeline .at-title span {
  color: var(--da-orange);
}

#ai-timeline .at-subtitle {
  font-size: 16px;
  color: var(--da-text);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ---------- Timeline ---------- */
#ai-timeline .at-line {
  position: relative;
}

#ai-timeline .at-line::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: repeating-linear-gradient(
    to bottom,
    var(--da-border) 0,
    var(--da-border) 8px,
    transparent 8px,
    transparent 16px
  );
}

/* Each item is a flex row of exactly 3 equal-purpose slots:
   [side-a] [num] [side-b] — only one side ever holds the card,
   the other stays an empty flex-1 spacer, which is what keeps
   the number perfectly centered on the line either way. */
#ai-timeline .at-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 44px;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#ai-timeline .at-item:last-child {
  margin-bottom: 0;
}

#ai-timeline .at-side {
  flex: 1 1 0;
  min-width: 0;
}

/* Hidden/animated state is only ever added by JS (progressive
   enhancement) — items are fully visible by default so content
   never disappears if JS fails to load or run. */
#ai-timeline .at-item.at-pending {
  opacity: 0;
  transform: translateY(24px);
}

#ai-timeline .at-item.at-pending.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#ai-timeline .at-num {
  position: relative;
  z-index: 2;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--da-navy);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  border: 5px solid var(--da-bg);
  box-shadow: 0 6px 16px rgba(16, 37, 74, 0.18);
}

#ai-timeline .at-item:hover .at-num {
  background: var(--da-orange);
}

#ai-timeline .at-card {
  background: #ffffff;
  border: 1px solid var(--da-border);
  border-radius: 16px;
  padding: 26px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#ai-timeline .at-item:hover .at-card {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(16, 37, 74, 0.08);
}

#ai-timeline .at-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--da-navy);
  margin: 0 0 10px;
}

#ai-timeline .at-card-text {
  font-size: 14.5px;
  color: var(--da-text);
  line-height: 1.75;
  margin: 0;
}

#ai-timeline .at-side-left {
  text-align: left;
}

#ai-timeline .at-side-right {
  text-align: left;
}

/* ---------- Responsive: stack single column ---------- */
@media (max-width: 760px) {
  #ai-timeline { padding: 60px 16px; }
  #ai-timeline .at-title { font-size: 28px; }

  #ai-timeline .at-line::before { left: 26px; margin-left: 0; }

  #ai-timeline .at-item {
    gap: 18px;
    margin-bottom: 28px;
  }

  #ai-timeline .at-num {
    width: 52px;
    height: 52px;
    font-size: 17px;
  }

  /* on mobile every card sits to the right of its number, and the
     empty spacer side is simply removed from flow */
  #ai-timeline .at-item .at-side.at-empty {
    display: none;
  }

  #ai-timeline .at-side-left,
  #ai-timeline .at-side-right {
    text-align: left;
  }
}