.lu-lead{
  --lu-lead-bar-color: var(--lu-sage);
  --lu-lead-tint-bg: var(--lu-sage-light);
  --lu-lead-bar-width: 5px;

  --lu-lead-title-size: 22px;
  --lu-lead-text-size: 19px;
  --lu-lead-text-lh: 1.6;
}

/* =========================================================
   Внешний блок: сурфейс карточки + полоса слева
   ========================================================= */
.lu-lead{
  position: relative;
  margin-bottom: var(--lu-card-margin, 20px);

  background: var(--lu-card-bg, #f5f5f5);
  border-radius: var(--lu-card-radius, 28px);

  /* место под полосу — чтобы текст не наезжал на неё */
  padding-left: 0;
  overflow: hidden;
}

/* Вертикальная цветная полоса на всю высоту */
.lu-lead::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--lu-lead-bar-width);
  background: var(--lu-lead-bar-color);
  border-radius: var(--lu-lead-bar-width);
}

/* Внутренний контейнер с отступами карточки */
.lu-lead__inner{
  padding: var(--lu-card-padding-y, 22px) var(--lu-card-padding-x, 36px);
  /* небольшой доп. отступ слева, чтобы текст отступал от полосы */
  padding-left: calc(var(--lu-card-padding-x, 36px) + 4px);
}

/* =========================================================
   Типографика
   ========================================================= */
.lu-lead__title{
  margin: 0 0 12px;
  font-weight: var(--lu-title-weight, 700);
  font-size: var(--lu-lead-title-size);
  line-height: var(--lu-title-lh, 1.15);
  color: #111;
}

.lu-lead__text{
  margin: 0;
  font-size: var(--lu-lead-text-size);
  line-height: var(--lu-lead-text-lh);
  color: #111;
}

/* Несколько абзацев внутри текста */
.lu-lead__text p{
  margin: 0 0 14px;
}
.lu-lead__text p:last-child{
  margin-bottom: 0;
}

/* Мягкий акцент на первом предложении/строке (опционально):
   оберни вступительную фразу в <b> или <strong> внутри __text */
.lu-lead__text b,
.lu-lead__text strong{
  font-weight: 600;
}

/* =========================================================
   МОДИФИКАТОР: лёгкая заливка (по умолчанию — мятная)
   Цвет заливки задаётся через --lu-lead-tint-bg, чтобы
   использовать готовые токены палитры, а не вычислять оттенок.
   ========================================================= */
.lu-lead--tint{
  background: var(--lu-lead-tint-bg);
}

/* МОДИФИКАТОР: прозрачный фон — только полоса и текст */
.lu-lead--plain{
  background: transparent;
}
.lu-lead--plain .lu-lead__inner{
  /* без серого фона полосе нужен чуть меньший отступ слева */
  padding-left: 20px;
}

/* =========================================================
   Адаптив
   ========================================================= */
@media (max-width: 767px){
  .lu-lead{
    --lu-lead-title-size: 20px;
    --lu-lead-text-size: 17px;
    --lu-lead-text-lh: 1.55;
    border-radius: 22px;
  }

  .lu-lead__inner{
    padding: 18px 18px;
    padding-left: 22px;
  }

  .lu-lead--plain .lu-lead__inner{
    padding-left: 16px;
  }
}