/* Золотая плашка-подчёркивание под словами — фирменный приём макета.
   В Figma: прямоугольники h=7, r=12, #da9b2a, лежат ПОД текстом (z ниже текста),
   слегка перекрывая нижнюю часть строки. Реализация: inline-span + ::after. */

.mark {
  position: relative;
  z-index: 0;
  white-space: nowrap;
}

.mark::after {
  content: '';
  position: absolute;
  right: calc(-4 * var(--u));
  left: calc(-4 * var(--u));
  bottom: calc(1 * var(--u));
  height: calc(7 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--color-gold);
  z-index: -1;
}

/* Светло-золотая версия (ссылка «לכל התגובות» в отзывах, Figma 3016:7681) */
.mark--tan::after {
  background: var(--color-tan);
}

@media (max-width: 767px) {
  .mark::after {
    height: calc(5 * var(--u));
    bottom: 0;
  }

  /* Длинные фразы (special, support): на мобиле разрешаем перенос —
     плашка рисуется фоном на каждом фрагменте строки (box-decoration-break). */
  .mark--flow {
    white-space: normal;
    background-image: linear-gradient(var(--color-gold), var(--color-gold));
    background-repeat: no-repeat;
    background-size: 100% calc(5 * var(--u));
    background-position: center bottom;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .mark--flow::after {
    content: none;
  }
}