/* ==========================================================================
   Content-section block — repeatable H2 + text + image pattern.
   Markup shape used across pages:

   <section class="content-section content-section--media">
     <h2>...</h2>
     <div class="content-section__body">
       <div class="content-section__media"><img ...></div>
       <div class="content-section__text"> ...paragraphs / h3 structure... </div>
     </div>
   </section>

   The device/promo image always sits full-width, directly under the H2
   and above the text — at every screen size, not just on mobile. There
   is no side-by-side two-column layout for this block.
   ========================================================================== */

.content-section__body {
  display: grid;
  gap: var(--space-card-gap);
  margin-top: var(--space-h2-text);
}

.content-section__text {
  /* Grid items default to min-width: auto, sized to their widest
     unbreakable content. When a .table-wrap sits inside this text
     block, its table's own min-width would otherwise force this grid
     item — and everything above it — wider than the viewport on
     mobile; body's overflow-x: hidden then clips that overflow
     instead of letting it scroll, so content disappears off-screen. */
  min-width: 0;
}

.content-section__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  /* Natural intrinsic ratio — these promo images place characters and
     logos close to the left/right edges, so cropping to a fixed ratio
     risks cutting them off. Let the image keep its own proportions. */
}

/* Image always comes first (right after the H2), text always follows —
   same order at every breakpoint. */
.content-section--media .content-section__media {
  order: -1;
}

/* Spacing around a CTA (button or button pair) placed right after a
   content-section body. */
.content-section__body + .btn,
.content-section__body + .two-col-grid {
  margin-top: var(--space-card-gap);
}