/* =========================================================
   Voctos — Dev Services block
   ========================================================= */

.voctos-dev-services {
  margin-bottom: 44px;
}

/* ---------- Heading ---------- */
.voctos-dev-services .ds-heading {
  font-family: 'Unbounded', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  color: #0D172D;
  margin-bottom: 12px;
}

/* ---------- Grid (mobile-first: single column) ---------- */
.voctos-dev-services .ds-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- Card base ---------- */
.voctos-dev-services .ds-card {
  position: relative;
  border-radius: 21px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
}

.voctos-dev-services .ds-card__body {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
}

/* ---------- Card title ---------- */
.voctos-dev-services .ds-card__title {
  font-family: 'Unbounded', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  color: #0D172D;
  margin-bottom: 20px;
}

/* ---------- Card text ---------- */
.voctos-dev-services .ds-card__text {
  font-family: 'Unbounded', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 16px;
  color: #0D172D;
}
.voctos-dev-services .ds-card__text:last-child { margin-bottom: 0; }

/* ---------- Card colors ---------- */
.voctos-dev-services .ds-card--green  { background: #9BB725; }
.voctos-dev-services .ds-card--light  { background: #DBE1EE; }
.voctos-dev-services .ds-card--white  { background: #ffffff; }

/* ---------- Pills container ---------- */
.voctos-dev-services .ds-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 2;
}

/* ---------- Pill item ---------- */
.voctos-dev-services .ds-pill {
  display: flex;
  align-items: baseline;
  align-self: flex-start;
  background: #ffffff;
  border-radius: 1rem;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  color: #0D172D;
}

/* ---------- Check icon inside pill ---------- */
.voctos-dev-services .ds-pill__check {
  width: 12px;
  height: 10px;
  color: #3BA100;
  flex-shrink: 0;
  margin-right: 6px;
}

/* =========================================================
   IMAGE WRAPPERS — MOBILE
   ========================================================= */

/* Card 1 (Types of sites): smaller illustration, bottom-0 */
.voctos-dev-services .ds-card__pic--dev1 {
  flex-shrink: 0;
  display: block;
  height: 100px;
  position: relative;
}
.voctos-dev-services .ds-card__pic--dev1 img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 132px;
  height: 134px;
  max-width: none;
}

/* Card 2 (Platforms): larger illustration, -bottom-4 with translate */
.voctos-dev-services .ds-card__pic--dev2 {
  flex-shrink: 0;
  display: block;
  height: 100px;
  position: relative;
}
.voctos-dev-services .ds-card__pic--dev2 img {
  position: absolute;
  bottom: -16px;
  right: 0;
  width: 190px;
  height: 142px;
  transform: translateX(33%);
  max-width: none;
}

/* Card 3: small illustration bottom-right */
.voctos-dev-services .ds-card__pic--dev3 {
  display: flex;
  flex-shrink: 0;
}
.voctos-dev-services .ds-card__pic--dev3 img {
  width: 50px;
  margin-left: auto;
  transform: translateY(12px) translateX(4px);
}

/* Card 4: larger illustration bottom-right */
.voctos-dev-services .ds-card__pic--dev4 {
  flex-shrink: 0;
  display: flex;
  height: 187px;
}
.voctos-dev-services .ds-card__pic--dev4 img {
  width: 246px;
  height: 197px;
  margin-left: auto;
  transform: translateY(32px) translateX(28px);
  max-width: none;
}

/* =========================================================
   DESKTOP — 1024px+
   ========================================================= */
@media (min-width: 1024px) {

  .voctos-dev-services .ds-heading {
    font-size: 38px;
    margin-bottom: 28px;
  }

  /* 12-column grid */
  .voctos-dev-services .ds-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
  }

  /* Cards 1 & 2: 6/12 each, horizontal layout */
  .voctos-dev-services .ds-card--has-list {
    grid-column: span 6;
    flex-direction: row;
    padding: 24px 32px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  }

  /* Card 3: 4/12, horizontal layout */
  .voctos-dev-services .ds-card--narrow {
    grid-column: span 4;
    flex-direction: row;
    padding: 24px 32px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  }

  /* Card 4: 8/12, horizontal layout */
  .voctos-dev-services .ds-card--wide {
    grid-column: span 8;
    flex-direction: row;
    padding: 24px 32px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  }

  .voctos-dev-services .ds-card__title {
    margin-bottom: 12px;
  }

  .voctos-dev-services .ds-pills {
    gap: 12px;
  }

  /* Card 1 desktop: 149px, relative, translate-x-7 */
  .voctos-dev-services .ds-card__pic--dev1 {
    height: auto;
    /* align-self: flex-end; */
    position: static;
  }
  .voctos-dev-services .ds-card__pic--dev1 img {
    position: relative;
    width: 149px;
    height: auto;
    transform: translateX(28px) translateY(16px);
    max-width: none;
  }

  /* Card 2 desktop: 218px, static, translate-x-10 */
  .voctos-dev-services .ds-card__pic--dev2 {
    height: auto;
    align-self: flex-end;
    position: static;
    margin-right: -10%;
  }
  .voctos-dev-services .ds-card__pic--dev2 img {
    position: static;
    width: 218px;
    height: auto;
    transform: translateX(35px) translateY(10px);
    max-width: none;
  }

  /* Card 3 desktop */
  .voctos-dev-services .ds-card__pic--dev3 {
    align-self: flex-end;
  }
  .voctos-dev-services .ds-card__pic--dev3 img {
    width: 104px;
    transform: translateY(12px) translateX(16px);
  }

  /* Card 4 desktop */
  .voctos-dev-services .ds-card__pic--dev4 {
    height: 233px;
    width: 450px;
    align-self: flex-end;
  }
  .voctos-dev-services .ds-card__pic--dev4 img {
    width: 446px;
    height: 356px;
    transform: translateY(40px) translateX(44px);
    max-width: none;
  }
}