/**
 * alternating-feature SDC — structural only (section spacing, max-width
 * container, row spacing, zig-zag alternation). Never restyles the pasted
 * rows' own headings/copy/chips — their inline styles carry that.
 *
 * Content model: html_text is a flat sequence of row divs, each a 2-column
 * grid (image, text) in the SAME child order every time — the mockup's own
 * source alternates image/text by hand, but this project's convention is to
 * let CSS do it instead, so editors don't have to remember to flip markup
 * order per row. :nth-child(even) on the row wrappers (direct children of
 * .mk3-af__inner) flips which column each child renders in via `order`.
 */
.mk3-sdc--alternating-feature {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.mk3-sdc--alternating-feature .mk3-af__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vw, 3.75rem);
}

/* Zig-zag: flip the visual order of the two children on every other row.
   Works whether the row wrapper is display:grid or display:flex (both
   support the `order` property on their direct children). */
.mk3-sdc--alternating-feature .mk3-af__inner > div:nth-child(even) > *:first-child {
  order: 2;
}
.mk3-sdc--alternating-feature .mk3-af__inner > div:nth-child(even) > *:last-child {
  order: 1;
}

@media (max-width: 768px) {
  /* Stack image over text on mobile and cancel the alternation — the
     pasted row's inline grid-template-columns is 2-up, so !important is
     needed to override it structurally at this breakpoint. */
  .mk3-sdc--alternating-feature .mk3-af__inner > div {
    grid-template-columns: 1fr !important;
  }
  .mk3-sdc--alternating-feature .mk3-af__inner > div:nth-child(even) > *:first-child,
  .mk3-sdc--alternating-feature .mk3-af__inner > div:nth-child(even) > *:last-child {
    order: initial;
  }
}