/*
 * Page sections and their headings.
 *
 *   <section class="yb-section yb-container">…</section>
 *       a block of the page; sections are spaced by --yb-space-section
 *   <div class="yb-section-heading">
 *     <h2>…</h2>
 *     <a class="yb-button yb-button--plain" href="…">…</a>
 *   </div>
 *       heading with an optional button (or text) on the right
 *   <h2 class="yb-section-title">…</h2>
 *       a lone section heading (--center to centre it)
 */
.yb-section {
  margin-bottom: var(--yb-space-section);
}

.yb-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--yb-space-m);
  margin-bottom: var(--yb-space-xl);
}

.yb-section-heading > :first-child {
  max-width: 760px;
}

.yb-section-title {
  margin-bottom: var(--yb-space-xl);
}

.yb-section-title--center {
  text-align: center;
}

.yb-section-heading p {
  margin: 0;
}

/* Small uppercase label in a thin pill: <p class="yb-tag">Kirjuta meile</p> */
.yb-tag {
  align-self: flex-start;
  display: inline-block;
  margin: 0;
  padding: 5px 20px;
  border: 1px solid var(--yb-color-border);
  border-radius: var(--yb-radius-card);
  color: var(--yb-color-black);
  font-size: var(--yb-size-tag);
  font-weight: var(--yb-weight-medium);
  line-height: 20px;
  text-transform: uppercase;
}

.yb-tag--blue {
  color: var(--yb-color-primary);
}

/*
 * A heading with a button at the far right of the same row.
 *
 *   <div class="yb-section-head"><h2>…</h2><a class="yb-button …">…</a></div>
 */
.yb-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--yb-space-m);
}

.yb-section-head h2 {
  max-width: 740px;
  margin: 0;
}

.yb-section-head > .yb-button {
  flex: none;
}

@media (min-width: 768px) {
  .yb-section-head {
    flex-wrap: nowrap;
  }
}

.yb-section-head .yb-tag {
  margin-bottom: 20px;
}

/* Full-width tinted bands around sections. */
.yb-band-surface {
  padding-block: var(--yb-space-section);
  background: var(--yb-color-surface);
}

.yb-band-fade {
  padding-block: 100px var(--yb-space-section);
  background: linear-gradient(var(--yb-color-surface), var(--yb-color-white));
}

/* Tablet: the old site's bands keep 60 px above and below their content. */
@media (min-width: 768px) and (max-width: 1024px) {
  .yb-band-surface,
  .yb-band-fade {
    padding-block: 60px;
  }

  /* Home: the reviews follow the team band with no extra gap. */
  .yb-band-surface + .yb-reviews {
    padding-top: 0;
  }
}

@media (max-width: 767px) {
  .yb-band-fade {
    padding-top: var(--yb-space-section);
  }
}

/* Front page news block: the heading sits well above the post cards. */
.yb-home-news .yb-section-head {
  margin-bottom: 174px;
}

@media (max-width: 1024px) {
  .yb-home-news .yb-section-head {
    margin-bottom: 60px;
  }
}

/* Front page "Meie koolitused on": extra room above, as on the old site. */
.yb-home-values-title {
  margin-top: var(--yb-space-section);
  margin-bottom: 45px;
}