/* ==========================================================================
   Content-section block: H2 + text + image, repeated across every page.
   ========================================================================== */

.content-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-h2-text);
  margin-bottom: var(--space-section);
}

.content-section:last-child {
  margin-bottom: 0;
}

.content-section__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  object-fit: contain;
  background: var(--color-bg-dark);
}

.content-section__body h3 {
  margin-top: 1.5rem;
}

.content-section__cta {
  margin-top: 0.5rem;
  align-self: flex-start;
}

/* Desktop: image after H2, constrained height so it never dominates the section */
@media (min-width: 90em) {
  .content-section--media .content-section__image {
    max-height: 28rem;
  }
}

/* ==========================================================================
   Two-column comparison grid (e.g. Android / iOS platform cards).
   Single column on mobile, side by side from tablet breakpoint up.
   ========================================================================== */

.two-col-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-card-gap);
  margin-block: var(--space-h2-text) 0;
}

@media (min-width: 48em) {
  .two-col-grid { grid-template-columns: repeat(2, 1fr); }
}

.two-col-grid__item {
  display: flex;
  flex-direction: column;
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
  padding: var(--space-card-padding);
  box-shadow: var(--shadow-card);
}

.two-col-grid__icon {
  width: 100%;
  max-width: 8rem;
  height: auto;
  object-fit: contain;
  margin-bottom: 1rem;
}

.two-col-grid__item .data-table-wrap {
  margin-block: 1rem;
}

.two-col-grid__item .btn {
  margin-top: auto;
  align-self: flex-start;
}