/* Page-specific components */

/* Bonus cards grid (Bonus page) --------------------------------------- */
.bonus-grid {
  margin-top: var(--gap-h2-text);
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 481px) { .bonus-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .bonus-grid { grid-template-columns: repeat(4, 1fr); } }

.bonus-card {
  background: var(--color-card);
  clip-path: var(--clip-cut);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition);
}
.bonus-card:hover { transform: translateY(-4px); }
.bonus-card__media {
  background: var(--color-bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}
/* Bonus images must be shown in full – never cropped */
.bonus-card__img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.bonus-card__body {
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}
.bonus-card__title { color: var(--color-white); }
.bonus-card__amount { color: var(--color-heading); font-weight: var(--fw-bold); font-size: 1.05rem; }
.bonus-card__text { color: var(--color-text); font-size: var(--fs-small); }
.bonus-card__btn { margin-top: auto; }

/* App platform columns (App page) ------------------------------------- */
.platform-cols {
  margin-top: var(--gap-h2-text);
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .platform-cols { grid-template-columns: 1fr 1fr; } }
.platform-cols > *, .bonus-grid > *, .contact-cards > *, .grid-2 > * { min-width: 0; }

.platform-card {
  background: var(--color-card);
  clip-path: var(--clip-cut);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;                 /* allow the card to shrink below its table's min-width */
}
.platform-card .table-wrap { width: 100%; max-width: 100%; }
.platform-card .data-table { min-width: 0; }
.platform-card__head { display: flex; align-items: center; gap: 0.85rem; }
.platform-card__icon { width: 48px; height: 48px; object-fit: contain; }
.platform-card__title { color: var(--color-white); }
.platform-card__btn { margin-top: auto; }

/* Download button row */
.dl-row { margin-top: var(--gap-h3-text); }

/* Support contact cards ------------------------------------------------ */
.contact-cards {
  margin-top: var(--gap-h2-text);
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .contact-cards { grid-template-columns: repeat(3, 1fr); } }
.contact-card {
  background: var(--color-card);
  clip-path: var(--clip-cut);
  padding: var(--card-padding);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.contact-card__label { color: var(--color-heading); font-weight: var(--fw-bold); font-family: var(--font-display); }
.contact-card__value a { color: var(--color-accent); }
.contact-card__meta { color: var(--color-text); font-size: var(--fs-small); }

/* 404 page ------------------------------------------------------------- */
.error-page {
  min-height: 52vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--section-gap);
}
.error-page__code {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(5rem, 20vw, 11rem);
  line-height: 1;
  color: var(--color-heading);
}
.error-page__title { color: var(--color-white); margin-top: 0.5rem; }
.error-page__text { color: var(--color-text); max-width: 46ch; margin: 1rem auto 1.75rem; }