/* =====================================================
   Service Cases – Area 2
===================================================== */

body.mt.service-cases.service #area-2{
  display:block !important;
  background:var(--clr-primary-light,#F2F2F2) !important;
  padding:3rem 0 !important;
}

body.mt.service-cases.service #content {
    padding-bottom: 5rem !important;
}

/* wrapper */
body.mt.service-cases.service #area-2 .group_service_case{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:24px !important;
}

/* cards grid */
body.mt.service-cases.service #area-2 .collection_list.col-serv-cases{
  width:calc(50% - 12px) !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
}

@media (max-width:900px){
  body.mt.service-cases.service #area-2 .collection_list.col-serv-cases{
    width:100% !important;
  }
}

/* card */
body.mt.service-cases.service #area-2 .collection_container{
  background:#fff !important;
  border-radius:var(--br-keyfact) !important;
  box-shadow:0 10px 22px rgb(0 0 0 / 8%) !important;
  padding:26px !important;
  width:100% !important;
  min-height:220px !important;
  display:flex !important;
  flex-direction:column !important;
  box-sizing:border-box !important;
  transition:transform .2s ease, box-shadow .2s ease !important;
}

body.mt.service-cases.service #area-2 .collection_container:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 14px 28px rgb(0 0 0 / 12%) !important;
}

/* title */
body.mt.service-cases.service #area-2 .col-serv-cases-title{
  font-size: var(--fs-18) !important;
  font-weight:700 !important;
  color:#222 !important;
  margin:0 0 6px 0 !important;
}

body.mt.service-cases.service #area-2 .col-serv-cases-title::after{
  content:"" !important;
  display:block !important;
  width:80px !important;
  height:3px !important;
  margin-top:8px !important;
  background:var(--clr-accent,#339933) !important;
  border-radius:999px !important;
}

/* description */
body.mt.service-cases.service #area-2 .col-serv-cases-desc{
  font-size: var(--fs-14) !important;
  color:#666 !important;
  line-height: var(--lh-1-55) !important;
  margin-top:6px !important;
  margin-bottom:6px !important;
}

body.mt.service-cases.service #area-2 .col-serv-cases-desc .textcontent{
  margin:0 !important;
}

/* highlights wrapper */
body.mt.service-cases.service #area-2 .col-serv-cases-highlights-wrap{
  margin-top:auto !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
}

/* highlight item */
body.mt.service-cases.service #area-2 .col-serv-cases-highlights{
  font-size: var(--fs-14) !important;
  color:var(--clr-accent,#339933) !important;
  white-space:nowrap !important;
  display:flex !important;
  align-items:center !important;
  line-height: var(--lh-1) !important;
}

/* green dot separator */
body.mt.service-cases.service #area-2
.col-serv-cases-highlights:not(:last-child)::after{
  content:"•" !important;
  display:inline-block !important;
  margin-left:6px !important;
  color:var(--clr-accent,#339933) !important;
  line-height: var(--lh-1) !important;
}

/* filter – background only */
body.mt.service #area-2 .button_filter{
  background:#fff ;
}


/* 1 card per row from 1200px and below */
@media (max-width:1200px){
  body.mt.service-cases.service #area-2 .collection_list.col-serv-cases{
    width:100% !important;
  }
}

/* responsive fixes for overflow (cards + tags) */
@media (max-width:1050px){
  body.mt.service-cases.service #area-2 .group_service_case{
    gap:20px !important;
  }

  body.mt.service-cases.service #area-2 .collection_container{
    padding:22px !important;
  }

  body.mt.service-cases.service #area-2 .col-serv-cases-desc{
    margin-bottom:3px !important;
  }
}

@media (max-width:520px){
  body.mt.service-cases.service #area-2{
    padding:4rem 0 !important;
  }

  body.mt.service-cases.service #area-2 .group_service_case{
    gap:16px !important;
  }

  body.mt.service-cases.service #area-2 .collection_container{
    padding:20px !important;
  }

  /* prevent tags from going outside the card on very small widths */
  body.mt.service-cases.service #area-2 .col-serv-cases-highlights-wrap{
    flex-wrap:wrap !important;
    row-gap:6px !important;
  }

  body.mt.service-cases.service #area-2 .col-serv-cases-highlights{
    white-space:normal !important;
  }
}