/* ==========================================================================
   MASH TRADE DESIGN SYSTEM — MODULE: services (scope: .m-services)
   PDF পেজ ৪ — What We Do: Split Capabilities & Interactive Numbered Deck
   ========================================================================== */

.m-services__split{
  display:grid;
  gap:clamp(1.2rem, 2.2vw, 2.2rem);
  grid-template-columns:1fr;
  align-items:stretch;
}

@media (min-width:1080px){
  .m-services__split{
    grid-template-columns:310px 1fr;
  }
  .m-services__spotlight{
    position:sticky;
    top:calc(var(--mash-nav-h, 72px) + 20px);
  }
}

/* ---------------- Left: Spotlight Card ---------------- */
.m-services__spotlight{
  height:100%;
}

.m-services__spotlight-card{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:linear-gradient(150deg, #071b15 0%, #0d2c22 100%);
  color:#ffffff;
  border:1px solid rgba(164, 204, 60, 0.25);
  border-radius:18px;
  padding:clamp(1.2rem, 1.8vw, 1.5rem);
  box-shadow:0 16px 40px -16px rgba(7, 27, 21, 0.45);
  position:relative;
  overflow:hidden;
}

.m-services__spotlight-card::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:radial-gradient(circle at 80% 20%, rgba(164, 204, 60, 0.16) 0%, transparent 60%);
  pointer-events:none;
}

.m-services__spotlight-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--mash-lime, #a4cc3c);
  background:rgba(164, 204, 60, 0.14);
  border:1px solid rgba(164, 204, 60, 0.28);
  padding:3px 9px;
  border-radius:999px;
  margin-bottom:0.75rem;
}

.m-services__dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--mash-lime, #a4cc3c);
  box-shadow:0 0 8px var(--mash-lime, #a4cc3c);
}

.m-services__spotlight-title{
  font-family:var(--mash-font-display);
  font-size:clamp(1.18rem, 1.5vw, 1.4rem);
  font-weight:800;
  color:#ffffff;
  line-height:1.24;
  margin:0 0 0.5rem;
}

.m-services__spotlight-text{
  font-size:0.84rem;
  color:#cfe0d6;
  line-height:1.52;
  margin:0 0 0.9rem;
}

.m-services__spotlight-checklist{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  margin-bottom:1rem;
  padding-bottom:0.85rem;
  border-bottom:1px solid rgba(255, 255, 255, 0.1);
}

.m-services__check-item{
  display:flex;
  align-items:center;
  gap:0.55rem;
  font-size:0.82rem;
  color:#e2ece6;
  font-weight:500;
}

.m-services__check-item svg{
  color:var(--mash-lime, #a4cc3c);
  flex-shrink:0;
}

.m-services__spotlight-action .btn{
  width:100%;
  justify-content:center;
  padding:0.7rem 1.2rem;
  font-size:0.88rem;
  font-weight:700;
}

/* ---------------- Right: Numbered Service Deck (3 Columns) ---------------- */
.m-services__deck{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(0.75rem, 1.2vw, 1rem);
}

@media (min-width:600px) and (max-width:1079px){
  .m-services__deck{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (min-width:1080px){
  .m-services__deck{
    grid-template-columns:repeat(3, 1fr);
  }
}

.m-services__row{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:0.75rem;
  background:#ffffff;
  border:1px solid rgba(13, 44, 34, 0.08);
  border-radius:18px;
  padding:1.15rem 1.15rem 1rem;
  box-shadow:0 4px 16px rgba(0, 0, 0, 0.02);
  transition:all 0.3s var(--mash-ease);
  position:relative;
  overflow:hidden;
}

.m-services__row::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height:3px;
  background:var(--mash-lime, #a4cc3c);
  opacity:0;
  transition:opacity 0.25s ease;
}

.m-services__row:hover{
  transform:translateY(-4px);
  border-color:rgba(164, 204, 60, 0.55);
  box-shadow:0 12px 28px -6px rgba(7, 27, 21, 0.09);
}

.m-services__row:hover::before{
  opacity:1;
}

.m-services__row-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.5rem;
}

.m-services__row-num{
  font-family:var(--mash-font-display);
  font-size:1.45rem;
  font-weight:800;
  color:transparent;
  -webkit-text-stroke:1.3px rgba(13, 44, 34, 0.24);
  line-height:1;
  flex-shrink:0;
  transition:all 0.3s ease;
}

.m-services__row:hover .m-services__row-num{
  color:var(--mash-lime, #a4cc3c);
  -webkit-text-stroke-color:var(--mash-lime, #a4cc3c);
}

.m-services__row-tag{
  font-size:0.65rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--mash-green-700, #1a5a44);
  background:rgba(18, 62, 47, 0.06);
  padding:2px 8px;
  border-radius:999px;
  flex-shrink:0;
}

.m-services__row-body{
  flex:1;
}

.m-services__row-title{
  font-family:var(--mash-font-display);
  font-size:1.02rem;
  font-weight:700;
  color:var(--mash-ink, #0f1613);
  margin:0 0 0.35rem;
  line-height:1.28;
}

.m-services__row-desc{
  margin:0;
  font-size:0.83rem;
  color:var(--mash-muted, #5d6b63);
  line-height:1.5;
}

.m-services__row-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-top:0.25rem;
  padding-top:0.4rem;
  border-top:1px dashed rgba(13, 44, 34, 0.06);
}

.m-services__row-arrow{
  color:rgba(13, 44, 34, 0.25);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all 0.3s ease;
}

.m-services__row:hover .m-services__row-arrow{
  color:var(--mash-lime, #a4cc3c);
  transform:translateX(3px);
}