/* =========================
   WIDESH · TESTIMONIALS
   SCOPED: .wtsm-
   ========================= */

.wtsm{position:relative;isolation:isolate;background:#fff}
.wtsm-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(14,165,233,.09), transparent 60%),
    radial-gradient(820px 460px at 0% 100%, rgba(16,185,129,.10), transparent 58%),
    linear-gradient(180deg,#ffffff 0%, #f6fffb 60%, #ffffff 100%)}
.wtsm-container{position:relative;z-index:2;max-width:1200px;margin-inline:auto;padding:38px 20px 40px}
@media (min-width:1440px){.wtsm-container{max-width:1320px}}

/* Head */
.wtsm-head{text-align:center;margin-bottom:14px}
.wtsm-title{font-family:"Lalezar",system-ui;font-weight:400;color:#0f172a;
  font-size:clamp(26px,3.6vw,40px);line-height:1.25;margin:0 0 6px}
.wtsm-subtitle{font-family:iransans,Tahoma,sans-serif;font-size:clamp(14px,1.6vw,16px);
  color:#334155;margin:0}

/* Grid base (mobile first) */
.wtsm-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:18px}

/* Card (normal) */
.wtsm-card{
  display:grid;grid-template-columns:110px 1fr;gap:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.92));
  border:1px solid #e5f2ef;border-radius:18px;padding:14px;
  box-shadow:0 12px 28px rgba(15,118,110,.10);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease
}
.wtsm-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(15,118,110,.14)}
.wtsm-card-media{width:110px;height:110px;border-radius:16px;overflow:hidden;background:#fff;border:1px solid #dbeafe}
.wtsm-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.wtsm-card-body{display:flex;flex-direction:column;gap:8px}
.wtsm-card-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.wtsm-name{font-family:iransans,Tahoma,sans-serif;font-weight:900;color:#0f172a;margin:0}
.wtsm-role{font-family:iransans,Tahoma,sans-serif;font-size:12px;color:#0f766e;
  background:#ecfeff;border:1px solid #a5f3fc;border-radius:9999px;padding:6px 10px}
.wtsm-stars{color:#f4b400;display:inline-flex;gap:2px;margin-inline-start:auto}
.wtsm-stars i{font-size:14px}
.wtsm-quote{font-family:iransans,Tahoma,sans-serif;color:#334155;line-height:2;margin:0}

/* Featured card (big one) — تصویر بالا، متن زیر */
.wtsm-card--feature{
  grid-column:1;grid-row:auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  background:linear-gradient(135deg,#ecfdf5,#e0f2fe);
  border-color:#99f6e4;box-shadow:0 16px 40px rgba(6,182,212,.22);padding:18px
}
.wtsm-card--feature .wtsm-card-media{width:160px;height:160px;border-radius:18px;margin:4px auto 8px}
.wtsm-card--feature .wtsm-card-head{justify-content:center}
.wtsm-card--feature .wtsm-name{font-size:18px}
.wtsm-card--feature .wtsm-quote{max-width:560px;text-align:justify}

/* CTA */
.wtsm-cta-wrap{display:flex;justify-content:center;margin-top:18px}
.wtsm-cta{
  display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:9999px;
  background:linear-gradient(135deg,#10b981,#22d3ee);color:#0f1027;border:1px solid rgba(0,0,0,.04);
  text-decoration:none;font-family:iransans,Tahoma,sans-serif;font-weight:900;
  box-shadow:0 8px 22px rgba(0,0,0,.14)
}
.wtsm-cta:hover{transform:translateY(-2px)}

/* ====== Desktop: Featured left, 3 cards right (zigzag) ====== */
@media (min-width:1100px){
  .wtsm-grid{
    display:grid;
    grid-template-columns: 1.35fr 1fr 1fr;  /* چپ پهن، راست دو ستون */
    grid-template-rows: auto auto;
    grid-template-areas:
      "F A B"
      "F C B";
    gap: 18px;
  }
  .wtsm-card--feature{ grid-area: F; }     /* چپ، دو ردیف */
  .wtsm-card[data-area="A"]{ grid-area: A; }     /* بالا-راست (ستون دوم) */
  .wtsm-card[data-area="B"]{ grid-area: B; align-self:center; } /* وسط-راست، عمودی وسط ستون سوم */
  .wtsm-card[data-area="C"]{ grid-area: C; }     /* پایین-راست (ستون دوم) */
}

/* Tablet / Mobile */
@media (max-width:1099px){
  .wtsm-card{grid-template-columns:90px 1fr}
  .wtsm-card--feature .wtsm-card-media{width:140px;height:140px}
  .wtsm-grid{grid-template-columns:1fr}
}

/* Tiny */
@media (max-width:420px){
  .wtsm-card{grid-template-columns:72px 1fr}
  .wtsm-card-media{width:72px;height:72px;border-radius:12px}
}

/* ===== Logos — Seamless loop built by JS (head/tail clones) ===== */
.wtsm-logos{
  margin-top:22px;
  padding-block:14px;
  border:1px solid rgba(16,185,129,.12);
  border-radius:14px;
  background:rgba(16,185,129,.04);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

/* ترک: LTR برای ثبات محاسبات در صفحات RTL */
.wtsm-logos-track{
  display:flex;
  gap:34px;                 /* این مقدار در JS خوانده می‌شود */
  align-items:center;
  direction:ltr;
  will-change:transform;
  transform:translateX(0);
  visibility:hidden;        /* تا پایان build پنهان */
  animation:none !important;/* هر انیمیشن قبلی خاموش */
}
/* آماده نمایش پس از build */
.wtsm-logos.is-ready .wtsm-logos-track{ visibility:visible }

.wtsm-logo{min-width:max-content;display:grid;place-items:center}
.wtsm-logo img{height:30px;filter:grayscale(100%) opacity(.85);transition:filter .2s ease;pointer-events:none}
.wtsm-logo img:hover{filter:grayscale(0%) opacity(1)}

@media (max-width:420px){
  .wtsm-logo img{height:26px}
}