/* content-section.css */
.content-section { padding-block: calc(var(--space-section) * 0.6); }
.content-section:first-of-type { padding-top: var(--space-section); }
.content-section .content-figure img { width: 100%; height: auto; }

/* Card list used inside content bodies */
.info-grid {
  display: grid;
  gap: var(--space-card-gap);
  margin-top: var(--space-h2-text);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .info-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.info-grid .card h3 { margin-bottom: 0.5rem; }
.info-grid .card p { color: var(--color-text); }

/* Bonus cards grid: 4 x 2 on desktop, 1 col on mobile */
.bonus-cards {
  display: grid;
  gap: var(--space-card-gap);
  grid-template-columns: 1fr;
  margin-top: var(--space-h2-text);
}
@media (min-width: 560px) { .bonus-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .bonus-cards { grid-template-columns: repeat(4, 1fr); } }
.bonus-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--color-card);
  border-radius: var(--radius-card);
  padding: var(--space-card-padding);
  height: 100%;
}
.bonus-card__media {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-bg-dark);
}
/* Show the full bonus image without cropping */
.bonus-card__media img { width: 100%; height: auto; display: block; }
.bonus-card h3 { font-size: 1.1rem; color: var(--color-white); }
.bonus-card__amount { color: var(--color-accent-yellow); font-weight: var(--fw-bold); }
.bonus-card p { color: var(--color-text); font-size: 0.92rem; }
.bonus-card .btn { margin-top: auto; width: 100%; }

/* 404 page */
.error-404 { text-align: center; }
.error-404__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding-block: var(--space-section);
}
.error-404__code {
  font-size: clamp(5rem, 18vw, 11rem);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--color-heading-gold);
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.error-404__title { color: var(--color-white); }
.error-404__text { max-width: 52ch; color: var(--color-text); }