/* ============================================================
   Shared page components — bonus cards, platform cards
   ============================================================ */

/* ─── Bonus card grid (Bonus page) ───────────────────────── */
.bonus-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-dark);
  border-radius: var(--radius-card);
  overflow: hidden;
}
/* Fixed-height media box + object-fit: contain — every bonus card ends up
   the same size (uniform grid) while each bonus image still renders in
   full, never cropped, regardless of its own aspect ratio. Same pattern
   as .games-card__media in the games slider. */
.bonus-card__media {
  background: var(--color-bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(140px, 24vw, 200px);
  padding: 0.75rem;
}
.bonus-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bonus-card__body {
  padding: var(--space-card-padding);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-grow: 1;
}
.bonus-card__body h3 { margin: 0; }
.bonus-card__body p { margin: 0; flex-grow: 1; }
.bonus-card__body .btn { align-self: flex-start; margin-top: 0.4rem; }

/* ─── Platform card (App page — Android / iOS) ───────────── */
.platform-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-card-gap);
}
@media (min-width: 768px) {
  .platform-grid { grid-template-columns: repeat(2, 1fr); }
}
.platform-card {
  background: var(--color-bg-dark);
  border-radius: var(--radius-card);
  padding: var(--space-card-padding);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.platform-card__icon { width: 48px; height: 48px; }
.platform-card__icon img { width: 100%; height: 100%; }
.platform-card__title { margin: 0; }
.platform-card .data-table { margin-top: 0.25rem; }
.platform-card .btn { align-self: flex-start; margin-top: 0.5rem; }

/* ─── 404 page ────────────────────────────────────────────── */
.error-404 {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.error-404__code {
  font-size: clamp(4rem, 3rem + 5vw, 7rem);
  font-weight: var(--font-weight-black);
  color: var(--color-accent-light);
  line-height: 1;
  margin: 0;
}
.error-404 .section-intro-lead { max-width: 40rem; }