/* ============================================================
   Content-section & shared page components
   ============================================================ */

/* ---- Highlight / stat chips ---- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-h2-text);
  max-width: var(--content-max);
}
.chip {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  min-width: 150px;
  flex: 1 1 160px;
}
.chip__value {
  display: block;
  color: var(--color-gold);
  font-weight: var(--fw-bold);
  font-size: 1.4rem;
}
.chip__label {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  margin-top: 4px;
}

/* ---- Bonus cards grid (Bonus page): 4 cols x 2 rows -> 1 col mobile ---- */
.bonus-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-card-gap);
  margin-top: var(--space-h2-text);
}
.bonus-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-dark);
  border-radius: var(--radius-card);
  overflow: hidden;
  padding-bottom: var(--card-padding);
}
.bonus-card__media {
  width: 100%;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.bonus-card__media img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;      /* bonus images: fully visible, never cropped */
}
.bonus-card__body {
  padding: 18px var(--card-padding) 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.bonus-card__title { color: var(--color-gold); font-size: var(--fs-h3); }
.bonus-card__text { color: var(--color-text-muted); font-size: var(--fs-small); flex: 1; }
.bonus-card .btn { margin-top: 8px; }

/* ---- Two-column platform block (App page: Android | iOS) ---- */
.platforms {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-card-gap);
  margin-top: var(--space-h2-text);
}
.platforms > * { min-width: 0; }
.bonus-grid > *, .feature-grid > *, .contact-cards > * { min-width: 0; }
.platform-card {
  background: var(--color-bg-dark);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;          /* allow inner tables to scroll, not overflow */
}
.platform-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.platform-card__icon {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: var(--color-surface);
  padding: 8px;
}
.platform-card__title { color: var(--color-gold); font-size: 1.1rem; font-weight: var(--fw-semibold); }
.platform-card__text { color: var(--color-text-muted); font-size: var(--fs-small); }

/* ---- Feature / "why choose" cards ---- */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-card-gap);
  margin-top: var(--space-h2-text);
}
.feature-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--card-padding);
}
.feature-card__title { color: var(--color-gold); font-size: var(--fs-h3); margin-bottom: 8px; }
.feature-card__text { color: var(--color-text-muted); font-size: var(--fs-small); }

/* ---- Support / contact cards ---- */
.contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-card-gap);
  margin-top: var(--space-h2-text);
}
.contact-card {
  background: var(--color-bg-dark);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-card__title { color: var(--color-gold); font-size: var(--fs-h3); }
.contact-card__meta { color: var(--color-text-muted); font-size: var(--fs-small); }
.contact-card a.inline-link { word-break: break-word; }

/* ---- 404 ---- */
.notfound {
  text-align: center;
  padding-block: clamp(40px, 8vw, 90px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.notfound__code {
  font-family: var(--font-head);
  font-size: clamp(88px, 20vw, 180px);
  font-weight: var(--fw-bold);
  line-height: 1;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.notfound__title { color: var(--color-white); }
.notfound__text { color: var(--color-text-muted); max-width: 520px; }

/* ---- Responsive columns ---- */
@media (min-width: 600px) {
  .bonus-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .platforms { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .bonus-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .bonus-grid { grid-template-columns: repeat(4, 1fr); }
}