/**
 * content-section.css — Repeating "H2 + text + image" pattern (BEM)
 */

/* Override the generic .section double (top+bottom) padding: content
   sections sit back-to-back, so a single top gap between blocks reads
   better than a top+bottom gap stacking up into a large empty space. */
.content-section {
  padding-block: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem) 0;
}

.content-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-card-gap);
  align-items: start;
  width: 100%;
  min-width: 0;
}

.content-section__image {
  order: -1;
  border-radius: var(--radius-card);
  width: 100%;
  min-width: 0;
}

.content-section__body {
  min-width: 0;
}

.content-section__image img {
  display: block;
  width: 100%;
  height: auto;
}

.content-section__body ul,
.content-section__body ol {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: var(--space-paragraph);
  display: grid;
  gap: 0.5rem;
}

.content-section__body ol {
  list-style: decimal;
}

.content-section__body h3 {
  color: var(--color-white);
  margin-top: var(--space-paragraph);
}

.content-section__cta {
  margin-top: var(--space-card-gap);
}

.content-section__downloads {
  display: grid;
  gap: 0.75rem;
  margin-top: var(--space-card-gap);
}

@media (min-width: 480px) {
  .content-section__downloads {
    grid-template-columns: 1fr 1fr;
  }
}

/* Images always render full-width, directly under the H2 and above the body
   text, at every breakpoint (per spec: "H2 → Картинка → текст"). */