/*
 * sd-content-block — text with media or diagram (Session 2.3; Blueprint 4.14, 4.17)
 * Two columns from 1024px (text 6, media 6, or text 5 / media 7 with --wide-media); stacked on phones,
 * text first unless the media explains the text (then --media-first).
 * Variant reverse: media on the left on desktop; the reading order in the markup stays text → media.
 * Feature list: short points with a framed icon (sd-icon-frame) — icons support, text carries meaning.
 */

.sd-content-block {
  display: grid;
  gap: var(--sd-space-6);
  align-items: center;
}

@media (min-width: 1024px) {
  .sd-content-block { grid-template-columns: 1fr 1fr; gap: var(--sd-space-8); }
  .sd-content-block--wide-media { grid-template-columns: 5fr 7fr; }
  .sd-content-block--reverse .sd-content-block__media { order: -1; }
  .sd-content-block--reverse.sd-content-block--wide-media { grid-template-columns: 7fr 5fr; }
}

@media (max-width: 1023.98px) {
  .sd-content-block--media-first .sd-content-block__media { order: -1; }
}

.sd-content-block__text {
  display: grid;
  gap: var(--sd-space-4);
  justify-items: start;
  min-width: 0;
}

.sd-content-block__media {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--sd-radius-lg);
}

.sd-content-block__media img { width: 100%; height: auto; }

/* Diagram container: inline SVG with a text equivalent (Design_System_Plan.md 7.7) */
.sd-content-block__media--diagram {
  padding: var(--sd-space-5);
  border: var(--sd-border-width) solid var(--sd-color-card-divider);
  background: var(--sd-color-blue-050);
}

/* ---------- Feature list ---------- */

.sd-feature-list {
  display: grid;
  gap: var(--sd-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-feature-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sd-space-3);
  align-items: start;
}

.sd-feature-list__title {
  font-size: var(--sd-font-size-body);
  font-weight: var(--sd-font-weight-semibold);
  color: var(--sd-color-text-heading);
}

.sd-feature-list__text {
  color: var(--sd-color-text-muted);
  font-size: var(--sd-font-size-small);
  line-height: var(--sd-line-height-small);
}