/* ================================================================
   Sync Inn Digital — Our Approach Section
   Global template section — content via theme settings.

   Layout:
     Header — label + heading + description
     Steps  — horizontal flex row; connector line drawn as ::before
              on .sid-oa__steps so it touches each icon edge directly.

   Connector technique:
     A single ::before line spans the full steps container.
     left/right = calc(100% / step-count / 2) positions the line
     so it starts and ends exactly at the centre of the end icons.
     The icon circles (position:relative; z-index:1) sit on top,
     hiding the line ends — making it appear to connect icon-to-icon.

   All colours use var(--sid-*) global CSS custom properties.
   ================================================================ */

/* ── Section wrapper ─────────────────────────────────────────── */

.sid-oa {
  background-color: var(--sid-light-grayish-blue-bg, #F5F6FA);
  padding: 110px 0;
}

/* ── Constrained inner ───────────────────────────────────────── */

.sid-oa__wrap {
  max-width: var(--sid-site-width, 1400px);
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Header ──────────────────────────────────────────────────── */

.sid-oa__header {
  margin-bottom: 60px;
}

/* ── Main heading ────────────────────────────────────────────── */

.sid-oa__heading {
  font-family: 'Poppins', var(--sid-font-heading, sans-serif);
  font-size: 60px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--sid-black, #000);
  margin: 0 0 24px;
  max-width: 70%;
}

.sid-oa__heading-muted {
  color: #7E7E81;
}

/* ── Description ─────────────────────────────────────────────── */

.sid-oa__desc {
  font-family: 'Nunito', var(--sid-font-body, sans-serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--sid-black, #000);
  margin: 0;
  max-width: 50%;
}

/* ── Steps row ───────────────────────────────────────────────── */

.sid-oa__steps {
  display: flex;
  align-items: flex-start;
  position: relative; /* stacking context for ::before connector line */
  gap: 70px;
}

/*
 * Full-width connector line drawn as a single element.
 *
 * left  = 100% / step-count / 2  →  centre of the first step
 * right = same                   →  centre of the last step
 *
 * The line therefore starts inside the first icon and ends inside
 * the last icon. Since icons are z-index:1, they paint over the
 * line ends — giving a seamless icon-to-icon connection.
 */
.sid-oa__steps::before {
  content: '';
  position: absolute;
  top: 34px; /* (72 - 4) / 2 — centres the 4 px line on the 72 px icon */
  left:  calc(100% / var(--oa-step-count, 5) / 2);
  right: calc(100% / var(--oa-step-count, 5) / 2);
  height: 4px;
  background-color: #E8ECF3;
  z-index: 0;
}

/* ── Individual step ─────────────────────────────────────────── */

.sid-oa__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1; /* sits on top of ::before connector line */
}

/* ── Step icon circle ────────────────────────────────────────── */

.sid-oa__step-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007EFF 0%, #32CCFF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
  position: relative; /* ensures icon paints over the ::before line */
  z-index: 1;
}

.sid-oa__step-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* render any uploaded SVG as white */
  display: block;
}

/* ── Step label: STEP 1 ──────────────────────────────────────── */

.sid-oa__step-label {
  font-family: 'Poppins', var(--sid-font-heading, sans-serif);
  font-size: 18px;
  font-weight: 500;
  color: #9CA3AF;
  margin: 0 0 8px;
}

/* ── Step name: Sync ─────────────────────────────────────────── */

.sid-oa__step-name {
  font-family: 'Poppins', var(--sid-font-heading, sans-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--sid-black, #000);
  margin: 0 0 10px;
}

/* ── Step description ────────────────────────────────────────── */

.sid-oa__step-desc {
  font-family: 'Nunito', var(--sid-font-body, sans-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--sid-black, #000);
  margin: 0;
  
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 1280px) {
  .sid-oa__heading {
    font-size: 52px;
  }

  .sid-oa__step-label {
    font-size: 15px;
  }

  .sid-oa__step-name {
    font-size: 20px;
  }

  .sid-oa__step-desc {
    font-size: 15px;
  }
}

@media (max-width: 1023px) {
  .sid-oa__heading {
    font-size: 44px;
    max-width: 100%;
  }

  .sid-oa__desc {
    max-width: 100%;
  }

  .sid-oa__step-icon {
    width: 56px;
    height: 56px;
  }

  .sid-oa__step-icon img {
    width: 26px;
    height: 26px;
  }

  /* Recentre the 4px line on the smaller 56px icon */
  .sid-oa__steps::before {
    top: 26px; /* (56 - 4) / 2 */
  }

  .sid-oa__step-label {
    font-size: 13px;
  }

  .sid-oa__step-name {
    font-size: 17px;
  }

  .sid-oa__step-desc {
    font-size: 13px;
  }
}

@media (max-width: 767px) {
  .sid-oa {
    padding: 60px 0;
  }

  .sid-oa__heading {
    font-size: 34px;
    margin-bottom: 18px;
  }

  .sid-oa__desc {
    font-size: 17px;
  }

  /* Steps: vertical list; spacing via per-step padding-bottom */
  .sid-oa__steps {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    counter-reset: oa-step;
  }

  /* Hide horizontal connector line */
  .sid-oa__steps::before {
    display: none;
  }

  /* Each step: 2-column grid — icon (left) | name + desc (right) */
  .sid-oa__step {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 16px;
    align-items: start;
    text-align: left;
    flex: none;
    width: 100%;
    max-width: none;
    padding-bottom: 28px;
    position: relative;
    counter-increment: oa-step;
  }

  /*
   * Vertical connector line: runs from the bottom of the icon (top: 56px)
   * to the bottom of the padding area (bottom: 0), bridging the gap to the
   * next step's icon. Mirrors the desktop horizontal-line technique.
   */
  .sid-oa__step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 27px; /* horizontal centre of the 56px icon */
    top: 56px;  /* bottom edge of the icon */
    bottom: 0;
    width: 2px;
    background: var(--sid-grey, #F5F6FA); /* grey line */
    z-index: 0;
  }

  /* Icon: grey by default on mobile; transitions to gradient on active */
  .sid-oa__step-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    margin-bottom: 0;
    z-index: 1;
    background: var(--sid-grey, #F5F6FA);
    transition: background 0.4s ease;
  }

  .sid-oa__step-icon img {
    filter: brightness(0); /* grey icon when inactive */
    transition: filter 0.4s ease;
  }

  /* Active step: blue gradient (only one step active at a time via JS) */
  .sid-oa__step.sid-oa--active .sid-oa__step-icon {
    background: linear-gradient(135deg, #007EFF 0%, #32CCFF 100%);
  }

  .sid-oa__step.sid-oa--active .sid-oa__step-icon img {
    filter: brightness(0) invert(1);
  }

  /*
   * Number badge (01 02 …) injected via CSS counter — no template change.
   * Positioned top-right of the icon circle.
   */
  .sid-oa__step-icon::after {
    content: counter(oa-step, decimal-leading-zero);
    position: absolute;
    top: -6px;
    right: -4px;
    width: 26px;
    height: 22px;
    background-color: #000000;
    color: var(--sid-white, #fff);
    border-radius: 40%;
    font-family: 'Poppins', var(--sid-font-heading, sans-serif);
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 2;
  }

  /* Hide text label — number shown via badge above */
  .sid-oa__step-label {
    display: none;
  }

  /* Step name: right column, row 1 */
  .sid-oa__step-name {
    grid-column: 2;
    grid-row: 1;
    font-size: 24px;
    align-self: center;
    margin-bottom: 4px;
    text-align: left;
  }

  /* Step description: right column, row 2 */
  .sid-oa__step-desc {
    grid-column: 2;
    grid-row: 2;
    font-size: 16px;
    text-align: left;
  }
}

@media (max-width: 479px) {
  .sid-oa {
    padding: 48px 0;
  }

  .sid-oa__heading {
    font-size: 30px;
    line-height: 30px;
  }

  .sid-oa__desc {
    font-size: 16px;
  }
}