/**
 * content-section.css — Repeatable H2 + image + text block.
 * Image always renders fully (object-fit: contain) — never cropped.
 */

/* Content sections carry their own top spacing via the h2's margin-top
   below, so the section wrapper itself doesn't pad above the heading —
   this avoids stacking padding-bottom(prev) + padding-top(next) into an
   overly large gap between two consecutive text blocks. */
.content-section.section {
  padding-top: 0;
}

.content-section h2 {
  margin-top: 28px;
  margin-bottom: 14px;
}

.content-section__media {
  width: 100%;
  margin-bottom: var(--space-paragraph);
  border-radius: var(--radius-input);
  overflow: hidden;
}

.content-section__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-input);
}

.content-section__body {
  width: 100%;
}

/* Spacing fix for the trailing paragraph right after the Android/iOS
   download grid on the Home page (no top margin of its own otherwise). */
.mobile-download-grid + p.content-section__body {
  margin-top: 24px;
}

.content-section__h3-block {
  margin-top: 28px;
}

.content-section__cta {
  margin-top: 12px;
}

.content-section table {
  margin-top: 4px;
}

/* Two-column Android/iOS (or similar) download grid, reused on the
   Home and App pages. */
.mobile-download-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-card-gap);
  margin-top: 28px;
}

.mobile-download-grid__col {
  background: var(--color-card-bg);
  border-radius: var(--radius-input);
  padding: var(--space-card-padding);
  display: flex;
  flex-direction: column;
}

.mobile-download-grid__col h3 {
  margin-bottom: 8px;
}

.mobile-download-grid__col p {
  flex-grow: 1;
  margin-bottom: 20px;
}

.mobile-download-grid__col img.mobile-download-grid__icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: var(--radius-input);
}

@media (min-width: 768px) {
  .mobile-download-grid {
    grid-template-columns: 1fr 1fr;
  }
}