/* ==========================================================================
   Content-section block (H2 + image + body copy)
   ========================================================================== */

.content-section {
  padding-block: var(--section-gap);
}

.content-section--dark {
  background-color: var(--color-bg-dark);
}

.content-section__title {
  scroll-margin-top: 5.5rem;
}

.content-section__image {
  aspect-ratio: 3 / 1;
}

.content-section__body {
  color: var(--color-text-main);
  margin-top: var(--h2-text-gap);
}

.content-section__image + .content-section__body {
  margin-top: var(--h2-text-gap);
}

.content-section__body p {
  margin-bottom: var(--paragraph-gap);
}

.content-section__body h3 {
  margin-top: calc(var(--section-gap) / 2);
  margin-bottom: var(--h3-text-gap);
}

.content-section__body h3:first-child {
  margin-top: 0;
}

.content-section__body ul,
.content-section__body ol {
  margin-block: var(--paragraph-gap);
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.content-section__body ul {
  list-style: disc;
}

.content-section__body ol {
  list-style: decimal;
}

.content-section__body a {
  color: var(--color-heading-accent);
  text-decoration: underline;
}

/* Contextual internal links (interlinking between pages) get their own
   distinct brand color so they stand out from the generic accent links. */
.content-section__body a.content-link {
  color: var(--color-accent-light);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.content-section__body a.content-link:hover {
  color: var(--color-heading-accent);
}