/**
 * Repeating "H2 + image + text" content block pattern.
 * Image order in the DOM is always: H2 -> image -> body text, for every
 * breakpoint (mobile and desktop both place the image right after the
 * heading and before the paragraph, per spec 4.5).
 */
.content-section {
  scroll-margin-top: 5.5rem;
}

/* The generic .section utility spaces standalone sections generously
   (games-slider, bonus-banner, etc.). Stacked one after another inside a
   page's content loop that doubles up into a very large gap, so repeated
   content-sections get a tighter — but still clearly visible — rhythm. */
.container > .content-section.section {
  padding-block: var(--space-sm);
}

@media (min-width: 768px) {
  .container > .content-section.section {
    padding-block: var(--space-md);
  }
}

/* h2 { margin-top: var(--space-section) } from global.css is meant for a
   heading that follows flowing body text directly. Inside a content-section
   the heading is the section's own first element, and the gap above it is
   already fully controlled by that section's padding-block above — without
   this override the two would stack, undoing the tighter rhythm entirely. */
.content-section > h2 {
  margin-top: 0;
}

.content-section .games-slider {
  padding-block: 0;
  margin-top: var(--space-heading-gap);
}

.content-section .games-slider .container {
  padding-inline: 0;
  max-width: none;
}

.content-section__media {
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-top: var(--space-heading-gap);
  background: var(--color-bg-dark);
}

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

.content-section__body > *:first-child {
  margin-top: var(--space-heading-gap);
}

.content-section__two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-heading-gap);
}

@media (min-width: 768px) {
  .content-section__two-col {
    grid-template-columns: 1fr 1fr;
  }
}

.content-section__platform {
  background: var(--color-bg-dark);
  border-radius: var(--radius-card);
  padding: var(--space-card-padding);
}

.content-section__platform-icon {
  width: 3rem;
  height: auto;
}

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

.content-section__cta {
  margin-top: var(--space-heading-gap);
  width: fit-content;
}

.content-section__intro {
  padding-top: var(--space-lg);
}

.content-section__intro > *:first-child {
  margin-top: 0;
}

/* Card grid (bonus cards, etc.) */
.bonus-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-card-gap);
  margin-top: var(--space-heading-gap);
}

.bonus-grid__card {
  background: var(--color-bg-dark);
  border-radius: var(--radius-card);
  padding: var(--space-card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.bonus-grid__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bonus-grid__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bonus-grid__card h3 {
  margin-top: var(--space-2xs);
}

.bonus-grid__card p {
  margin-top: var(--space-3xs);
  font-size: var(--font-size-small);
  flex-grow: 1;
}

@media (min-width: 480px) {
  .bonus-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .bonus-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}