/* ==========================================================================
   MASH TRADE DESIGN SYSTEM — MODULE: commitment (scope: .m-commitment)
   PDF পেজ ১৭ — The SIX-H Commitment: 6-H Brand Philosophy Showcase
   ========================================================================== */

.m-commitment__showcase{
  display:flex;
  flex-direction:column;
  gap:clamp(1.5rem, 2.8vh, 2.5rem);
}

/* ---------------- Centerpiece Brand Seal ---------------- */
.m-commitment__seal{
  display:flex;
  justify-content:center;
  margin-bottom:0.5rem;
}

.m-commitment__seal-badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:8px 20px 8px 14px;
  border-radius:999px;
  background:#ffffff;
  border:1px solid rgba(13, 44, 34, 0.12);
  box-shadow:0 6px 24px rgba(0, 0, 0, 0.04);
  max-width:100%;
}

.m-commitment__seal-glow{
  position:absolute;
  inset:-8px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(164, 204, 60, 0.28) 0%, transparent 70%);
  filter:blur(8px);
  z-index:-1;
  pointer-events:none;
}

.m-commitment__seal-mark{
  font-family:var(--mash-font-display);
  font-size:1.05rem;
  font-weight:800;
  color:#ffffff;
  background:linear-gradient(135deg, var(--mash-green-950, #071b15) 0%, var(--mash-green-800, #123e2f) 100%);
  padding:4px 12px;
  border-radius:999px;
  letter-spacing:0.04em;
  box-shadow:0 2px 8px rgba(7, 27, 21, 0.3);
  white-space:nowrap;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1.2;
}

.m-commitment__seal-title{
  font-size:clamp(0.72rem, 2.5vw, 0.82rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--mash-green-900, #0d2c22);
  line-height:1.3;
}

@media (max-width: 480px){
  .m-commitment__seal-badge{
    gap:8px;
    padding:6px 14px 6px 8px;
  }
  .m-commitment__seal-mark{
    font-size:0.92rem;
    padding:3px 10px;
  }
  .m-commitment__seal-title{
    font-size:0.7rem;
    letter-spacing:0.04em;
  }
}

/* ---------------- 6-H Interactive Matrix (3x2) ---------------- */
.m-commitment__matrix{
  display:grid;
  gap:clamp(0.65rem, 2.5vw, 1.5rem);
  grid-template-columns:repeat(2, 1fr);
}

@media (max-width:340px){
  .m-commitment__matrix{
    grid-template-columns:1fr;
  }
}

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

.m-commitment__token{
  position:relative;
  background:#ffffff;
  border:1px solid rgba(13, 44, 34, 0.08);
  border-radius:20px;
  padding:clamp(1.3rem, 1.9vw, 1.7rem);
  box-shadow:0 4px 20px rgba(0, 0, 0, 0.03);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:all 0.35s var(--mash-ease);
}

.m-commitment__token:hover{
  transform:translateY(-6px);
  border-color:rgba(164, 204, 60, 0.55);
  box-shadow:0 18px 40px -12px rgba(7, 27, 21, 0.12);
}

.m-commitment__token-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1.1rem;
}

.m-commitment__h-shield{
  width:44px;
  height:44px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(164, 204, 60, 0.18) 0%, rgba(18, 62, 47, 0.08) 100%);
  border:1px solid rgba(164, 204, 60, 0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.3s ease;
}

.m-commitment__h-shield span{
  font-family:var(--mash-font-display);
  font-size:1.35rem;
  font-weight:800;
  color:var(--mash-green-800, #123e2f);
  line-height:1;
}

.m-commitment__token:hover .m-commitment__h-shield{
  background:var(--mash-lime, #a4cc3c);
  border-color:var(--mash-lime, #a4cc3c);
  transform:scale(1.08) rotate(3deg);
  box-shadow:0 4px 14px rgba(164, 204, 60, 0.4);
}

.m-commitment__token:hover .m-commitment__h-shield span{
  color:var(--mash-green-950, #071b15);
}

.m-commitment__token-num{
  font-size:0.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--mash-green-700, #1a5a44);
  background:rgba(18, 62, 47, 0.06);
  padding:3px 9px;
  border-radius:999px;
}

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

.m-commitment__token-title{
  font-family:var(--mash-font-display);
  font-size:clamp(1.15rem, 1.4vw, 1.3rem);
  font-weight:700;
  color:var(--mash-green-950, #071b15);
  margin:0 0 0.5rem;
  line-height:1.24;
}

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

.m-commitment__token-bar{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, var(--mash-green-700, #1a5a44), var(--mash-lime, #a4cc3c));
  opacity:0;
  transition:opacity 0.35s ease;
}

.m-commitment__token:hover .m-commitment__token-bar{
  opacity:1;
}

@media (max-width: 640px){
  .m-commitment{
    padding-block:clamp(1.8rem, 4vh, 2.6rem);
  }
  .m-commitment .section-head{
    margin-bottom:1.1rem;
  }
  .m-commitment .section-head .eyebrow{
    margin-bottom:0.35rem;
    font-size:0.75rem;
  }
  .m-commitment .section-head .section-title{
    font-size:clamp(1.48rem, 5.2vw, 1.85rem);
    margin-bottom:0.4rem;
  }
  .m-commitment .section-head .section-lead{
    font-size:0.84rem;
    line-height:1.5;
    margin-bottom:0;
  }
  .m-commitment__showcase{
    gap:1.1rem;
  }
  .m-commitment__seal{
    margin-bottom:0.3rem;
  }
  .m-commitment__seal-badge{
    gap:8px;
    padding:6px 16px 6px 8px;
  }
  .m-commitment__seal-mark{
    font-size:0.95rem;
    padding:3px 11px;
  }
  .m-commitment__seal-title{
    font-size:0.72rem;
    letter-spacing:0.05em;
  }
  .m-commitment__matrix{
    gap:clamp(10px, 2.8vw, 14px);
  }
  .m-commitment__token{
    padding:clamp(13px, 3.2vw, 16px);
    border-radius:16px;
  }
  .m-commitment__token-head{
    margin-bottom:0.6rem;
  }
  .m-commitment__h-shield{
    width:36px;
    height:36px;
    border-radius:11px;
  }
  .m-commitment__h-shield span{
    font-size:1.15rem;
  }
  .m-commitment__token-num{
    font-size:0.62rem;
    padding:2px 8px;
  }
  .m-commitment__token-title{
    font-size:clamp(0.98rem, 3.4vw, 1.14rem);
    margin:0 0 0.25rem;
  }
  .m-commitment__token-desc{
    font-size:0.78rem;
    line-height:1.45;
  }
}