/*
 * A band of a page and the heading at its top — the layout /applicants/,
 * the alumni front page and «Асоціації та альянси» drew each under their own
 * names with the same values. Loaded on every page (enqueue.php).
 *
 *   <section class="page-section [page-section--grey]">
 *     <div class="page-container">
 *       <div class="section-head">
 *         <h2 class="section-head__title">…</h2>
 *         …a button or a link across from it, if any
 *       </div>
 *       …
 *
 * A heading with nothing across from it may stand alone, without the
 * .section-head row. Paper and text are semantic tokens, so the dark theme
 * comes by itself.
 */

/* layout.css gives every <section> a large top margin at 900px and up, and
   page-general.css a padding of its own; a class outweighs both. */
.page-section {
  margin: 0;
  padding: 80px 0;
  border-bottom: 1px solid rgba(var(--color-tint--rgb), 0.1);
  background: var(--color-bg-primary);
}

.page-section--grey {
  background: var(--color-bg-secondary);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}

.section-head__title {
  margin: 0;
  color: var(--color-text-heading);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

@media (max-width: 991px) {
  .page-section {
    padding: 60px 0;
  }
}

/* The phone scale of variables.css: the section step between bands, the
   section heading under the page title. */
@media (max-width: 767px) {
  .page-section {
    padding: var(--space-section) 0;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 24px;
  }

  .section-head__title {
    font-size: var(--fs-section);
    line-height: 1.25;
  }
}