/* ==========================================================================
   Golden Play — Content-section block (BEM): H2 + картинка + текст, повторяемый
   ========================================================================== */

.content-section {
  display: flex;
  flex-direction: column;
}

.content-section h2 {
  order: 1;
}

/* Картинка идёт сразу после H2, перед текстом — на всех разрешениях.
   Показывается ПОЛНОСТЬЮ, без обрезания (object-fit: contain, без forced aspect-ratio). */
.content-section__image-wrap {
  order: 2;
  margin-block: var(--space-h2-text);
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--color-surface);
}

.content-section__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.content-section__body {
  order: 3;
}

/* Blok CTA (np. przycisk "Odbierz bonus") wewnątrz .content-section nie miał
   ustawionego order, więc flexbox domyślnie renderował go z order:0 — PRZED
   nagłówkiem H2, obrazkiem i tekstem sekcji. Wyglądało to tak, jakby przycisk
   "przyklejał się" do poprzedniej sekcji bez dolnego marginesu. */
.content-section > .text-center {
  order: 4;
}

.content-section h3 {
  margin-top: var(--space-section);
}

.content-section h3:first-of-type {
  margin-top: var(--space-h2-text);
}

.content-section + .content-section,
.section + .section {
  margin-top: 0;
}