/* Flex container that makes the mobile/desktop image-reorder rules in
   global.css (.content-block__media { order: -1 / 1 }) take effect. */
.content-block {
  display: flex;
  flex-direction: column;
  margin-block: var(--space-block-gap);
}

.content-block__heading {
  order: -2;
}

.content-block__text {
  order: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-paragraph);
  color: var(--color-text-body);
  line-height: var(--line-height-base);
}

/* CTA buttons placed directly inside a .content-block (after the text, see
   content-section.php's order rules) need a clear gap both from the text
   above and from whatever follows — the image included, in both its mobile
   ("first") and desktop ("last", via order:1) positions. */
.content-block > .btn {
  order: 0;
  margin-top: var(--space-h2-text);
  /* .content-block has no align-items set, so the default (stretch) was
     silently stretching this button to the full width of the block —
     the same button that's a compact pill everywhere else (header,
     hero, cards). Pin it back to its natural, intrinsic size. */
  align-self: flex-start;
}