/* ===== حضور در وندور – ریدیزاین پایدار و ریسپانسیو ===== */
#vendors{
  --navy:#0b1b35; --gold:#d9b36b; --gold2:#b79254;
  --bg:#eff2f4; --card:#fff; --text:#334155;
  background: var(--bg);
}

/* ظرف اصلی صفحه این سکشن را کمی محدود کنیم */
#vendors .container{ max-width:1200px; }

/* گرید سه‌ستونه: چپ / مرکز / راست */
.vendors-grid{
  display:grid;
  grid-template-columns: 1fr minmax(16px, 100px) 1fr;
  gap: clamp(12px, 2.5vw, 28px);
  align-items:start;
  margin:0 auto;
}

/* ستون‌ها */
.v-col{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:stretch;   /* کارت‌ها تمام عرض ستون شوند */
}

/* هدر مرکزی (به‌جای دونات) */
.v-hub{
  background: var(--card);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  text-align:center;
  padding: 18px 16px;
  color: var(--navy);
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
  max-width:360px;            /* هاب کمی عریض‌تر و وسط‌چین */
  margin-inline:auto;
}
.v-hub .m-0{ margin:0; }

/* ستون اتصال وسط: خط کوتاه طلایی با دو نقطه */
.v-center{ position:relative; }
.v-spine{
  margin: 14px auto 0;
  width: 6px; min-height: 100%;
  background: linear-gradient(180deg, var(--gold), var(--gold2));
  border-radius: 8px;
  position: relative;
}
.v-spine::before, .v-spine::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:14px; height:14px; border-radius:50%;
  background:#fff; box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.v-spine::before{ top: -10px; }
.v-spine::after { bottom: -10px; }

/* کارت‌های وندور */
.v-card{
  background: var(--card);
  color: var(--text);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  display:flex; align-items:center; gap:12px;
  width:100%;                 /* تمام عرض ستون */
  min-width:280px;            /* از خیلی باریک شدن جلوگیری */
  z-index:3;
}

/* میله‌ی اتصال کوتاه از ستون میانی به کارت‌ها */
.v-card::before{
  content:""; flex:0 0 22px; height:6px; border-radius:6px;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
}
.v-left  .v-card::before{ order: 2; transform: scaleX(-1); } /* چپ */
.v-right .v-card::before{ order: 0; }                        /* راست */

/* آیکن دایره‌ای کوچک (اختیاری) */
.v-ico{
  flex:0 0 36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:#f3f4f6; color: var(--navy);
  font-size: 16px;
}

/* عنوان کارت – اجبار نمایش افقی و چندخطی */
.v-title{
  margin:0;
  writing-mode: horizontal-tb !important; /* جلوگیری از عمودی‌شدن متن‌ها */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.9;
  font-size: .98rem;
}

/* هاور لطیف */
.v-card{ transition: transform .18s ease, box-shadow .18s ease; }
.v-card:hover{ transform: translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.10); }

/* ===== ریسپانسیو ===== */
@media (max-width: 991.98px){
  .vendors-grid{ grid-template-columns: 1fr; }
  .v-center{ order:-1; }       /* هدر بیاید بالا */
  .v-spine{ display:none; }    /* ستون اتصال حذف شود */
  .v-card{ min-width:unset; width:100%; }
}


/* ===== موبایل: همه کارت‌ها یک‌شکل ===== */
@media (max-width: 991.98px){
  .vendors-grid{ grid-template-columns: 1fr; }

  /* هدر بیاید بالا و ستون اتصال حذف شود */
  .v-center{ order:-1; }
  .v-spine{ display:none; }

  /* کارت‌ها یکنواخت، تمام‌عرض، بدون میله‌ی اتصال */
  .v-card{
    min-width: unset;
    width: 100%;
    min-height: 72px;
    justify-content: center;          /* محتوا در مرکز */
    gap: 12px;
  }
  .v-card::before{ display:none !important; }  /* خط طلایی اتصال حذف */

  /* آیکن و متن هم‌راستا و یکسان */
  .v-ico{
    width: 36px; height: 36px;        /* اندازه ثابت */
    margin: 0;                         /* هیچ حاشیه اضافی */
  }
  .v-title{
    text-align: center;                /* متن وسط‌چین */
    writing-mode: horizontal-tb !important;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.9;
    font-size: .98rem;
  }

  /* فاصله یکنواخت بین کارت‌ها */
  .v-col{ gap: 12px; }
}