/* Repeatable content block: H2 → image → text → H3 structure.
   The image is always placed directly after the H2 (mobile and desktop)
   and is displayed in full — never cropped. */
.content-section__figure {
  margin: 0 0 var(--paragraph-gap);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-bg-dark);
}
.content-section__img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  display: block;
}

.content-section__body > *:last-child { margin-bottom: 0; }

/* Two-column feature blocks (app platforms) */
.platform-grid {
  display: grid;
  gap: var(--card-gap);
  margin-top: var(--h2-gap);
}
.platform-card {
  display: grid;
  gap: var(--space-16);
  align-content: start;
  padding: var(--card-padding);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-soft);
}
.platform-card__icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.platform-card__title { color: var(--color-gold); }

/* Bonus cards grid */
.bonus-grid { margin-top: var(--h2-gap); }
.bonus-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--card-padding);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.bonus-card:hover { border-color: var(--color-border); transform: translateY(-3px); }
.bonus-card__media {
  display: grid;
  place-items: center;
  padding: var(--space-12);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-dark);
}
/* Bonus images are shown in full, without cropping */
.bonus-card__img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.bonus-card__title { color: var(--color-gold); }
.bonus-card__text {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.bonus-card .btn { margin-top: auto; }

/* Support / contact cards */
.info-grid { margin-top: var(--h2-gap); }
.info-card {
  display: grid;
  gap: var(--space-8);
  padding: var(--card-padding);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-soft);
}
.info-card__title { color: var(--color-gold); }
.info-card__text { margin: 0; font-size: var(--fs-small); color: var(--color-text-muted); }

@media (min-width: 768px) {
  .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}