/* ============================================================
   MEA Reviews — Bonuses & Promotions (бонусы)
   Current offers as cards: headline value, the key terms that
   decide real value (wagering, min deposit, max bonus, expiry) and
   a claim CTA. The featured welcome offer is highlighted with an
   accent frame. Light "tech / computer" theme. Tokens scoped to
   .mea-bonus. Self-contained — no external CSS or JS.
   ============================================================ */

.mea-bonus {
  --bn-bg: #ffffff;
  --bn-surface: #ffffff;
  --bn-surface-2: #eef2f8;
  --bn-border: #e0e0e0;
  --bn-text: #1f2733;
  --bn-muted: #5b6676;
  --bn-faint: #8a94a6;
  --bn-accent: #0f62fe;
  --bn-accent-2: #06b6d4;
  --bn-warn: #d97706;

  --bn-radius: 0;
  --bn-radius-sm: 0;
  --bn-space: clamp(2.25rem, 1.5rem + 3vw, 4rem);

  --bn-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --bn-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --bn-duration: 200ms;
  --bn-ease: cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  background: var(--bn-bg);
  color: var(--bn-text);
  font-family: var(--bn-sans);
  padding: var(--bn-space) 0;
}

.mea-bonus__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

/* ---------- Header ---------- */
.mea-bonus__head { max-width: 62ch; margin: 0 0 clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.mea-bonus__kicker {
  font-family: var(--bn-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bn-accent);
}
.mea-bonus__title {
  margin: 0.5rem 0 0.4rem;
  font-size: clamp(1.4rem, 1rem + 2vw, 2.1rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.mea-bonus__sub { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--bn-muted); }

/* ---------- Grid ---------- */
.mea-bonus__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(0.8rem, 0.5rem + 1vw, 1.25rem);
  /* clearance so the featured card's "BEST VALUE" ribbon (top:-0.7rem) never
     collides with the intro copy / injected prose above the grid */
  margin-top: 1.1rem;
}

.mea-bonus__card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1.3rem 1.3rem 1.4rem;
  background: var(--bn-surface);
  border: 1px solid var(--bn-border);
  border-radius: var(--bn-radius);
  box-shadow: none;
  transition: transform var(--bn-duration) var(--bn-ease),
              box-shadow var(--bn-duration) var(--bn-ease);
}
.mea-bonus__card:hover {
  transform: translateY(-3px);
  box-shadow: none;
}

.mea-bonus__card--featured {
  border-color: color-mix(in srgb, var(--bn-accent) 50%, var(--bn-border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--bn-accent) 6%, var(--bn-surface)), var(--bn-surface));
  box-shadow: none;
}
.mea-bonus__card--featured::after {
  content: "Best value";
  position: absolute;
  top: -0.7rem;
  left: 1.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 0;
  background: var(--bn-accent);
  color: #fff;
  font-family: var(--bn-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mea-bonus__tag {
  width: fit-content;
  padding: 0.18rem 0.55rem;
  border-radius: 0;
  background: var(--bn-surface-2);
  color: var(--bn-muted);
  font-family: var(--bn-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.mea-bonus__value { margin: 0; display: grid; gap: 0.1rem; }
.mea-bonus__value b {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--bn-accent);
}
.mea-bonus__value span { font-size: 0.9rem; font-weight: 600; color: var(--bn-muted); }

.mea-bonus__terms {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.75rem;
}
.mea-bonus__terms div {
  display: grid;
  gap: 0.05rem;
  padding: 0.45rem 0.55rem;
  border-radius: 0;
  background: var(--bn-surface-2);
}
.mea-bonus__terms dt {
  font-family: var(--bn-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bn-faint);
}
.mea-bonus__terms dd { margin: 0; font-size: 0.92rem; font-weight: 800; color: var(--bn-text); }

.mea-bonus__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
  padding: 0.7rem 1.1rem;
  border-radius: var(--bn-radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--bn-border);
  background: var(--bn-surface);
  color: var(--bn-text);
  transition: transform var(--bn-duration) var(--bn-ease),
              border-color var(--bn-duration) var(--bn-ease),
              color var(--bn-duration) var(--bn-ease);
}
.mea-bonus__cta svg { width: 15px; height: 15px; }
.mea-bonus__cta:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--bn-accent) 45%, var(--bn-border));
  color: var(--bn-accent);
}
.mea-bonus__cta--primary {
  background: linear-gradient(135deg, var(--bn-accent), color-mix(in srgb, var(--bn-accent-2) 55%, var(--bn-accent)));
  color: #fff;
  border-color: transparent;
  padding: 0.85rem 1.4rem;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* coloured glow so the "Claim bonus" action stands out from the card */
  box-shadow: 0 9px 22px -9px color-mix(in srgb, var(--bn-accent) 80%, transparent),
              0 2px 7px -2px color-mix(in srgb, var(--bn-accent) 42%, transparent);
}
.mea-bonus__cta--primary:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 15px 30px -10px color-mix(in srgb, var(--bn-accent) 90%, transparent),
              0 3px 9px -2px color-mix(in srgb, var(--bn-accent) 52%, transparent);
}

/* ---------- Disclosure note ---------- */
.mea-bonus__note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: clamp(1rem, 0.6rem + 1.5vw, 1.75rem) 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--bn-faint);
}
.mea-bonus__note svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--bn-warn); margin-top: 0.1rem; }

/* ---------- Responsive ---------- */
@media (prefers-reduced-motion: reduce) {
  .mea-bonus__card { transition: none; }
  .mea-bonus__card:hover { transform: none; }
}