/**
 * ░░░░░██╗░█████╗░░█████╗░░█████╗░  ░░██╗  ██████╗░███████╗██╗░░░██╗  ██╗░░
 * ░░░░░██║██╔══██╗██╔══██╗██╔══██╗  ░██╔╝  ██╔══██╗██╔════╝██║░░░██║  ╚██╗░
 * ░░░░░██║██║░░██║███████║██║░░██║  ██╔╝░  ██║░░██║█████╗░░╚██╗░██╔╝  ░╚██╗
 * ██╗░░██║██║░░██║██╔══██║██║░░██║  ╚██╗░  ██║░░██║██╔══╝░░░╚████╔╝░  ░██╔╝
 * ╚█████╔╝╚█████╔╝██║░░██║╚█████╔╝  ░╚██╗  ██████╔╝███████╗░░╚██╔╝░░  ██╔╝░
 * ░╚════╝░░╚════╝░╚═╝░░╚═╝░╚════╝░  ░░╚═╝  ╚═════╝░╚══════╝░░░╚═╝░░░  ╚═╝░░
 *
 * Central iGaming — desenvolvido por João
 *
 * Canal      https://t.me/central_igaming_channel
 * Network    https://t.me/central_igaming
 * Contato    https://t.me/Joao_igaming
 */

/* ============================================================================
   JogPIX — pages/promos.css  (/promocoes e /bonus)
   Estrutura (ver front/promo.php): .jp-promo-hero + .jp-promo-grid + regras
   ============================================================================ */

.jp-promo-shell { display: flex; flex-direction: column; gap: 12px; }

/* ---- HERO ---------------------------------------------------------------- */
.jp-promo-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 15%, rgba(var(--jp-orange-rgb), .2), transparent 42%),
    linear-gradient(180deg, rgba(var(--jp-panel-rgb), .94), rgba(var(--jp-card-rgb), .94));
}
.jp-promo-copy small {
  color: var(--jp-yellow); font-weight: 900;
  text-transform: uppercase; letter-spacing: .14em; font-size: 11px;
}
.jp-promo-copy h1 { font-size: clamp(28px, 7vw, 40px); line-height: .95; margin: 10px 0; }
.jp-promo-copy p { color: var(--jp-muted); font-size: 14px; margin-bottom: 12px; }
.jp-promo-hero img { width: 100%; border-radius: 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); order: -1; }

@media (min-width: 520px) {
  .jp-promo-hero { grid-template-columns: 1.1fr .9fr; align-items: center; }
  .jp-promo-hero img { order: 0; }
}

/* ---- GRADE de cartões ---------------------------------------------------- */
.jp-promo-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 460px) { .jp-promo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px) { .jp-promo-grid { grid-template-columns: repeat(3, 1fr); } }

.jp-promo-card { display: block; padding: 16px; }
.jp-promo-card i { font-size: 24px; color: var(--jp-yellow); }
.jp-promo-card h2 { font-size: 18px; margin: 12px 0 6px; }
.jp-promo-card p { color: var(--jp-muted); font-size: 13px; }

/* ---- regras -------------------------------------------------------------- */
.jp-promo-rules ol { color: var(--jp-muted); margin: 0; padding-left: 18px; line-height: 1.8; }