.weblabs-hero-info{
  --whi-gap:40px;

  --whi-title:#0f2b33;
  --whi-subtitle:#7b848a;
  --whi-body:#4b5563;

  --whi-btn-gap:16px;

  /* پیش‌فرض عمومی (برای بک‌وارد) */
  --whi-btn-bg:#d4bc8a;
  --whi-btn-color:#ffffff;
  --whi-btn-icon-bg:#c8a85a;
  --whi-btn-icon-color:#ffffff;

  --whi-btn-bg-hover:#0f2b33;
  --whi-btn-color-hover:#ffffff;
  --whi-btn-icon-bg-hover:#0f2b33;
  --whi-btn-icon-color-hover:#ffffff;

  /*
    متغیرهای اختصاصی هر دکمه (اختیاری)
    اگر ست نشوند، از مقادیر عمومی بالا استفاده می‌شود
  */
  --whi-btn1-bg:initial;
  --whi-btn1-color:initial;
  --whi-btn1-icon-bg:initial;
  --whi-btn1-icon-color:initial;

  --whi-btn1-bg-hover:initial;
  --whi-btn1-color-hover:initial;
  --whi-btn1-icon-bg-hover:initial;
  --whi-btn1-icon-color-hover:initial;

  --whi-btn2-bg:initial;
  --whi-btn2-color:initial;
  --whi-btn2-icon-bg:initial;
  --whi-btn2-icon-color:initial;

  --whi-btn2-bg-hover:initial;
  --whi-btn2-color-hover:initial;
  --whi-btn2-icon-bg-hover:initial;
  --whi-btn2-icon-color-hover:initial;

  --whi-media-ratio:56%;

  width:100%;
  position:relative;
  border:0;
}

/* لایه اصلی: تصویر چپ، متن راست – بدون left-align اجباری */
.weblabs-hero-info__layout{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:var(--whi-gap);
  align-items:stretch;
}

/* تصویر سمت چپ */
.weblabs-hero-info__media{
  position:relative;
  padding-bottom:var(--whi-media-ratio);
  overflow:hidden;
  border:0;
}

.weblabs-hero-info__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border:0;
}

/* متن سمت راست */
.weblabs-hero-info__content{
  text-align:right;
}

.weblabs-hero-info__title{
  margin:0 0 10px;
  font-size:22px;
  font-weight:800;
  color:var(--whi-title);
}

.weblabs-hero-info__subtitle{
  margin:0 0 16px;
  font-size:14px;
  color:var(--whi-subtitle);
}

.weblabs-hero-info__body{
  font-size:13px;
  line-height:2;
  color:var(--whi-body);
  margin-bottom:22px;
}

.weblabs-hero-info__body p{
  margin:0 0 10px;
}

.weblabs-hero-info__body p:last-child{
  margin-bottom:0;
}

/* دکمه‌ها */
.weblabs-hero-info__buttons{
  display:flex;
  flex-wrap:wrap;
  gap:var(--whi-btn-gap);
}

/* ===========================
   مپ کردن استایل اختصاصی هر دکمه
   (این بخش جدید است و بقیه را خراب نمی‌کند)
=========================== */
.weblabs-hero-info__btn--primary{
  --whi-btn-bg: var(--whi-btn1-bg, var(--whi-btn-bg));
  --whi-btn-color: var(--whi-btn1-color, var(--whi-btn-color));
  --whi-btn-icon-bg: var(--whi-btn1-icon-bg, var(--whi-btn-icon-bg));
  --whi-btn-icon-color: var(--whi-btn1-icon-color, var(--whi-btn-icon-color));

  --whi-btn-bg-hover: var(--whi-btn1-bg-hover, var(--whi-btn-bg-hover));
  --whi-btn-color-hover: var(--whi-btn1-color-hover, var(--whi-btn-color-hover));
  --whi-btn-icon-bg-hover: var(--whi-btn1-icon-bg-hover, var(--whi-btn-icon-bg-hover));
  --whi-btn-icon-color-hover: var(--whi-btn1-icon-color-hover, var(--whi-btn-icon-color-hover));
}

.weblabs-hero-info__btn--secondary{
  --whi-btn-bg: var(--whi-btn2-bg, var(--whi-btn-bg));
  --whi-btn-color: var(--whi-btn2-color, var(--whi-btn-color));
  --whi-btn-icon-bg: var(--whi-btn2-icon-bg, var(--whi-btn-icon-bg));
  --whi-btn-icon-color: var(--whi-btn2-icon-color, var(--whi-btn-icon-color));

  --whi-btn-bg-hover: var(--whi-btn2-bg-hover, var(--whi-btn-bg-hover));
  --whi-btn-color-hover: var(--whi-btn2-color-hover, var(--whi-btn-color-hover));
  --whi-btn-icon-bg-hover: var(--whi-btn2-icon-bg-hover, var(--whi-btn-icon-bg-hover));
  --whi-btn-icon-color-hover: var(--whi-btn2-icon-color-hover, var(--whi-btn-icon-color-hover));
}

/* لینک/دکمه – بدون border */
.weblabs-hero-info__btn{
  display:inline-flex;
  flex-direction:row-reverse; /* آیکن سمت راست، متن سمت چپ ولی راست‌چین */
  align-items:center;
  gap:10px;
  padding:10px 18px;
  background:var(--whi-btn-bg);
  color:var(--whi-btn-color);
  text-decoration:none;
  border:0;
  cursor:pointer;
}

.weblabs-hero-info__btn:focus-visible{
  outline:2px solid rgba(0,0,0,.18);
  outline-offset:2px;
}

.weblabs-hero-info__btn-label{
  font-size:13px;
  font-weight:600;
}

/* آیکن لوزی */
.weblabs-hero-info__btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.weblabs-hero-info__btn-diamond{
  width:22px;
  height:22px;
  background:var(--whi-btn-icon-bg);
  color:var(--whi-btn-icon-color);
  transform:rotate(45deg);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
}

.weblabs-hero-info__btn-diamond svg{
  transform:rotate(-45deg); /* فلش صاف بایستد */
  display:block;
}

/* حالت هاور */
.weblabs-hero-info__btn:hover{
  background:var(--whi-btn-bg-hover);
  color:var(--whi-btn-color-hover);
}

.weblabs-hero-info__btn:hover .weblabs-hero-info__btn-diamond{
  background:var(--whi-btn-icon-bg-hover);
  color:var(--whi-btn-icon-color-hover);
}

/* ریسپانسیو – موبایل: اول عکس، بعد متن، آخر دکمه‌ها */
@media (max-width: 767px){
  .weblabs-hero-info__layout{
    grid-template-columns:1fr;
    gap:20px;
  }

  .weblabs-hero-info__media{
    order:0;
  }

  .weblabs-hero-info__content{
    order:1;
  }

  .weblabs-hero-info__buttons{
    justify-content:flex-start; /* در موبایل نزدیک متن می‌ماند */
  }
}