/* =========================================================================
   MO Global — Success Stories / Case Studies  ([mo_stories])
   Light band, elevated cards, Anton transformation stat, lime avatar chips.
   Depends on the design tokens defined on :root in style.css.
   ========================================================================= */

.mo-stories .mo-head--split{align-items:flex-end;}
.mo-stories .mo-head .mo-lede{max-width:44ch;margin-bottom:.35rem;}

/* ---- Grid -------------------------------------------------------------- */
.mo-stories__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.15rem,2.4vw,1.9rem);
}

/* ---- Card -------------------------------------------------------------- */
.mo-story{
  display:flex;
  flex-direction:column;
  gap:1rem;
  height:100%;
  margin:0;
  padding:clamp(1.4rem,2.4vw,1.9rem);
  background:var(--paper-2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  transition:transform var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease),
             border-color var(--dur) var(--ease);
  will-change:transform;
}
.mo-story:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:var(--lime-600);
}

/* ---- Top meta pills ---------------------------------------------------- */
.mo-story__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  flex-wrap:wrap;
}
.mo-story__goal,
.mo-story__time{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  line-height:1;
  padding:.5em .8em;
  border-radius:var(--r-pill);
}
.mo-story__goal{
  background:var(--ink);
  color:var(--on-ink);
}
.mo-story__goal i{color:var(--lime);font-size:.95em;}
.mo-story__time{
  background:transparent;
  color:var(--fg-muted);
  border:1.5px solid var(--border);
}
.mo-story__time i{color:var(--lime-600);font-size:.95em;}

/* ---- Transformation stat (Anton) --------------------------------------- */
.mo-story__result{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.15em .55em;
  padding-bottom:1rem;
  border-bottom:1px solid var(--border);
}
.mo-story__num{
  font-family:var(--font-impact);
  font-weight:400;
  font-size:clamp(3rem,6vw,4.25rem);
  line-height:.86;
  letter-spacing:-.01em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.mo-story__unit{
  font-size:.34em;
  margin-left:.12em;
  color:var(--fg-muted);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.mo-story__cap{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--lime-600);
  align-self:center;
}

/* ---- Before → After ---------------------------------------------------- */
.mo-story__ba{
  display:flex;
  align-items:center;
  gap:.7rem;
}
.mo-story__ba-item{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  flex:1 1 0;
  min-width:0;
}
.mo-story__ba-label{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--fg-dim);
}
.mo-story__ba-val{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:1.15rem;
  line-height:1;
  color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.mo-story__ba-item--after .mo-story__ba-val{color:var(--ink,#0B0F0A);}
.mo-story__ba-arrow{
  color:var(--fg-dim);
  font-size:1.1rem;
  flex:0 0 auto;
}

/* ---- Headline + quote -------------------------------------------------- */
.mo-story__headline{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(1.3rem,1.9vw,1.6rem);
  line-height:1;
  letter-spacing:-.005em;
  color:var(--fg);
}
.mo-story__quote{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:.97rem;
  line-height:1.55;
  color:var(--fg-muted);
}
.mo-story__quote::before{content:"\201C";}
.mo-story__quote::after{content:"\201D";}

/* ---- Stars ------------------------------------------------------------- */
.mo-story__stars{
  display:inline-flex;
  gap:.15rem;
  color:var(--star);
  font-size:.9rem;
}

/* ---- Person ------------------------------------------------------------ */
.mo-story__person{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-top:auto;
  padding-top:1rem;
  border-top:1px solid var(--border);
}
.mo-story__avatar{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:var(--r-pill);
  background:var(--lime);
  color:var(--on-lime);
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:.02em;
  line-height:1;
}
.mo-story__id{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  min-width:0;
}
.mo-story__name{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.95rem;
  color:var(--fg);
  line-height:1.1;
}
.mo-story__city{
  display:inline-flex;
  align-items:center;
  gap:.3em;
  font-size:.8rem;
  color:var(--fg-muted);
  line-height:1;
}
.mo-story__city i{color:var(--lime-600);font-size:.9em;}

/* =========================================================================
   Dark-band support — if the shortcode is placed inside a .mo-dark section
   ========================================================================= */
.mo-dark .mo-story{
  background:var(--ink-800);
  border-color:var(--border-dark);
  box-shadow:none;
}
.mo-dark .mo-story:hover{border-color:var(--lime);}
.mo-dark .mo-story__num{color:var(--on-ink);}
.mo-dark .mo-story__unit{color:var(--on-ink-muted);}
.mo-dark .mo-story__result,
.mo-dark .mo-story__person,
.mo-dark .mo-story__time{border-color:var(--border-dark);}
.mo-dark .mo-story__headline,
.mo-dark .mo-story__ba-val,
.mo-dark .mo-story__name{color:var(--on-ink);}
.mo-dark .mo-story__quote{color:var(--on-ink-muted);}
.mo-dark .mo-story__goal{background:var(--lime);color:var(--on-lime);}
.mo-dark .mo-story__goal i{color:var(--on-lime);}
.mo-dark .mo-story__cap{color:var(--lime);}
.mo-dark .mo-story__ba-item--after .mo-story__ba-val{color:var(--lime);}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:992px){
  .mo-stories__grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .mo-stories__grid{grid-template-columns:1fr;}
  .mo-stories .mo-head--split{flex-direction:column;align-items:flex-start;}
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .mo-story{transition:none;}
  .mo-story:hover{transform:none;}
}