/* ================================================================
   Sync Inn Digital — What We Do Section
   Used on: Main Services category pages only.

   Layout:
     .sid-wwd          — full-width section wrapper (white bg).
     .sid-wwd__header  — constrained (1400px) + left/right padding.
     .sid-wwd__stack   — full-width, no side padding; cards are sticky.
     .sid-wwd__card    — full-width coloured card (sticky, z-indexed).
     .sid-wwd__card-inner — constrained + padded inner content.
       Left 56%  → .sid-wwd__card-content (2-col: info | points)
       Right 44% → .sid-wwd__card-media (image)
   ================================================================ */

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

.sid-wwd {
  background-color: var(--sid-light-grayish-blue-bg, #F5F6FA);
  
}

/* ── Section header — constrained with side padding ─────────── */

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

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

.sid-wwd__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-wwd__heading-muted {
  color: #7E7E81;
}

/* ── Italic tagline ──────────────────────────────────────────── */

.sid-wwd__italic {
  font-family: 'Nunito', var(--sid-font-body, sans-serif);
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  color: var(--sid-black, #000);
  margin: 0;
  max-width: 70%;
}

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

.sid-wwd__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 0 16px;
  max-width: 50%;
}



/* ── Card: sticky + full-width coloured background ───────────── */

.sid-wwd__card {
  position: sticky;
  top: 80px; /* offset for fixed header — adjust if header height changes */
  overflow: hidden;
  /* background-color set via inline style from backend */
}

/* z-index ladder — later cards stack on top of earlier ones (supports up to 10) */
.sid-wwd__card:nth-child(1)  { z-index: 1;  }
.sid-wwd__card:nth-child(2)  { z-index: 2;  }
.sid-wwd__card:nth-child(3)  { z-index: 3;  }
.sid-wwd__card:nth-child(4)  { z-index: 4;  }
.sid-wwd__card:nth-child(5)  { z-index: 5;  }
.sid-wwd__card:nth-child(6)  { z-index: 6;  }
.sid-wwd__card:nth-child(7)  { z-index: 7;  }
.sid-wwd__card:nth-child(8)  { z-index: 8;  }
.sid-wwd__card:nth-child(9)  { z-index: 9;  }
.sid-wwd__card:nth-child(10) { z-index: 10; }

/* ── Card inner: constrained + outer two-column grid ─────────── */

.sid-wwd__card-inner {
  max-width: var(--sid-site-width, 1400px);
  margin: 0 auto;
  padding: 50px 20px;
  display: grid;
  grid-template-columns: 70fr 30fr;
  gap: 60px;
  align-items: flex-start;
 
}

/* ── Card content (left column) — title on top, body below ────── */

.sid-wwd__card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Card body — desc+button (left) | points (right) ─────────── */

.sid-wwd__card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* ── Card info: description + button (left inner col) ───────────  */

.sid-wwd__card-info {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ── Card title ──────────────────────────────────────────────── */

.sid-wwd__card-title {
  font-family: 'Poppins', var(--sid-font-heading, sans-serif);
  font-size: 45px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--sid-white, #fff);
  margin: 0;
}

/* ── Card description ────────────────────────────────────────── */

.sid-wwd__card-desc {
  font-family: 'Nunito', var(--sid-font-body, sans-serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--sid-white, #fff);
  margin: 0;
}

/* ── Bullet points (second inner col) ───────────────────────── */

.sid-wwd__card-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-family: 'Nunito', var(--sid-font-body, sans-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--sid-white, #fff);
}

/* ── Card image (right column of outer grid) ─────────────────── */

.sid-wwd__card-media {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.sid-wwd__card-img {
  width: 368px;
  height: 333px;
  object-fit: contain;
  display: block;
}

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

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

  .sid-wwd__card-title {
    font-size: 38px;
  }

  .sid-wwd__card-inner {
    padding: 50px 20px;
    gap: 40px;
  }
}

@media (max-width: 1023px) {
  .sid-wwd {
    padding: 80px 0 0;
  }

  .sid-wwd__heading {
    font-size: 36px;
    max-width: 100%;
  }

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

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


  .sid-wwd__card-inner {
    grid-template-columns: 1fr;
    padding: 50px 20px;
    min-height: auto;
    gap: 36px;
  }

  .sid-wwd__card-media {
    justify-content: flex-start;
  }

  .sid-wwd__card-title {
    font-size: 32px;
  }
}

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

  .sid-wwd__header {
    padding-bottom: 40px;
  }

  .sid-wwd__heading {
    font-size: 30px;
  }

  .sid-wwd__card-inner {
    padding: 50px 20px;
    gap: 28px;
  }

  .sid-wwd__card-title {
    font-size: 26px;
  }

  .sid-wwd__card-desc {
    font-size: 17px;
  }

  .sid-wwd__card-points li {
    font-size: 16px;
  }
.sid-wwd__card-body {
    display: flex;
    gap: 40px;
    align-items: start;
}

  /* Hide bullet points — image fills the role of visual anchor */
  .sid-wwd__card-points {
    display: none;
  }

  /* Image: full width, left-aligned */
  .sid-wwd__card-media {
    justify-content: flex-start;
  }

  .sid-wwd__card-img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 479px) {
  .sid-wwd__heading {
    font-size: 30px;
    line-height: 30px;
  }

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

  .sid-wwd__card-inner {
    padding: 50px 20px;
  }
}