/*
 * A row of short selling points in pale pills with a check mark, between
 * two thin rules. An optional .yb-tag above the list sits on the top rule.
 *
 *   <section class="yb-highlights yb-container">
 *     <p class="yb-tag">Meie koolitused on</p>      (optional)
 *     <ul class="yb-highlights__list"><li>Selgust loovad</li>…</ul>
 *   </section>
 */
.yb-highlights {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 66px;
  margin-bottom: 144px;
}

.yb-highlights__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--yb-space-m);
  width: 100%;
  margin: 0;
  padding: 37px 0 52px;
  border-top: 1px solid var(--yb-color-border);
  border-bottom: 1px solid var(--yb-color-border);
  list-style: none;
}

.yb-highlights .yb-tag {
  align-self: center;
  margin-bottom: -16px;
  position: relative;
  background: var(--yb-color-white);
  color: var(--yb-color-primary);
  font-size: 9px;
}

.yb-highlights .yb-tag + .yb-highlights__list {
  padding-top: 45px;
}

.yb-highlights__list li {
  position: relative;
  padding: 16px 16px 16px 50px;
  border-radius: var(--yb-radius-pill);
  background: var(--yb-color-surface);
  color: var(--yb-color-primary);
  font-family: var(--yb-font-link);
  font-size: var(--yb-size-body-s);
  font-weight: var(--yb-weight-medium);
  line-height: 24px;
  letter-spacing: var(--yb-tracking-button);
}

.yb-highlights__list li::before,
.yb-highlights__list li::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  width: 24px;
  height: 24px;
}

.yb-highlights__list li::before {
  border-radius: 50%;
  background: var(--yb-color-primary);
}

.yb-highlights__list li::after {
  background: var(--yb-color-white);
  -webkit-mask: url("../../icons/check.svg") center / 12px no-repeat;
  mask: url("../../icons/check.svg") center / 12px no-repeat;
}

@media (max-width: 1024px) {
  .yb-highlights {
    margin-top: 40px;
    margin-bottom: 60px;
  }
}

@media (max-width: 767px) {
  .yb-highlights {
    margin-top: 0;
    margin-bottom: 40px;
  }

  .yb-highlights__list {
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    border: 0;
  }
}

/* --tagged: the tag sits inside the rules, above the pills. */
.yb-highlights--tagged {
  position: relative;
  margin-top: 43px;
  margin-bottom: 57px;
  padding-top: 37px;
}

.yb-highlights--tagged::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--yb-gutter);
  left: var(--yb-gutter);
  border-top: 1px solid var(--yb-color-border);
}

.yb-highlights--tagged .yb-tag {
  margin-bottom: 0;
}

.yb-highlights--tagged .yb-tag + .yb-highlights__list {
  border-top: 0;
  padding-bottom: 67px;
}

/* Below 1025 px the old pages drop the tag and the rules around the pills. */
@media (max-width: 1024px) {
  .yb-highlights--tagged {
    margin: 0 0 60px;
    padding-top: 0;
  }

  .yb-highlights--tagged::before,
  .yb-highlights--tagged .yb-tag {
    display: none;
  }

  .yb-highlights--tagged .yb-tag + .yb-highlights__list {
    padding: 17px 0;
    border: 0;
  }
}

@media (max-width: 767px) {
  .yb-highlights--tagged {
    margin: 32px 0 40px;
  }

  .yb-highlights--tagged .yb-tag + .yb-highlights__list {
    gap: 50px;
    padding: 0;
  }
}