/* ==========================================================================
   blocks/content-section/content-section.css
   Reusable H2 + text (+ optional image) pattern used across every page.
   The image (when present) always sits above the text, at the full width
   of the content block, on every breakpoint — never cropped, never
   side-by-side with the text.
   ========================================================================== */

.content-section {
  margin-bottom: var(--space-section);
}

.content-section:last-child {
  margin-bottom: 0;
}

.content-section--with-media {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.content-section__body h3 {
  margin-top: var(--space-lg);
}

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

.content-section__media {
  width: 100%;
}

.content-section__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  object-fit: contain;
  background-color: var(--color-bg-dark);
}

.content-section__cta {
  margin-top: var(--space-lg);
  align-self: flex-start;
}