/* Promotion — palmer-bets-promotion-detail 64:4 / promo-detail-mobile 97:1909 */

.eyebrow--promo { letter-spacing: 1.5px; }

/* ── hero  64:38 ─────────────────────────────────────────────────────── */
.promo-hero { display: grid; grid-template-columns: minmax(0, 1fr) 708px; min-height: 480px; background: var(--color-dark-2); color: #fff; box-shadow: inset 0 0 0 1px var(--color-dark-3); }
.promo-hero__text { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 64px 48px 64px max(80px, calc(100% - 652px)); }
.promo-hero__copy { display: flex; flex-direction: column; gap: 12px; max-width: 580px; }
.promo-hero__title { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 48px; }
.promo-hero__lead { font-size: 15px; line-height: 22px; color: var(--color-on-dark); }
.promo-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.promo-tag { padding: 4px 8px; border-radius: 2px; background: var(--color-white-06); font-weight: 700; font-size: 10px; line-height: 13px; color: var(--color-on-dark); white-space: nowrap; letter-spacing: .5px; }
.promo-hero__ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.promo-hero__btn { min-height: 48px; padding: 0 24px; }
.promo-hero__terms { font-weight: 700; font-size: 13px; line-height: 17px; color: #fff; text-decoration: none; }
.promo-hero__terms:hover { text-decoration: underline; }
.promo-hero__media { position: relative; min-height: 480px; }
.promo-hero__media picture, .promo-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-hero__media::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--color-brand); z-index: 1; }

/* ── summary strip  64:59 ────────────────────────────────────────────── */
.promo-summary { margin: 0; background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border); }
.promo-summary__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-block: 20px; }   /* 4 × 302 at 1440 */
.promo-summary__item { display: flex; flex-direction: column; gap: 4px; }
.promo-summary dt { font-weight: 700; font-size: 11px; line-height: 14px; color: var(--color-muted-3); letter-spacing: 1px; }
.promo-summary dd { font-weight: 700; font-size: 13px; line-height: 17px; color: var(--color-text); }
.promo-summary__red { color: var(--color-brand) !important; }

/* ── how to participate  64:72 ───────────────────────────────────────── */
.promo-head { display: flex; flex-direction: column; gap: 4px; }
.promo-head__title { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 38px; color: var(--color-text); letter-spacing: .5px; }
.promo-steps { padding: 64px 0; background: #fff; }
.promo-steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }   /* the mockup's 3 × 411 + 64 overflows 1280 by 17px; fluid here */
.promo-step { display: flex; align-items: flex-start; gap: 24px; }
.promo-step__num { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 65px; color: var(--color-muted-3); }
.promo-step--active .promo-step__num { color: var(--color-brand); }
.promo-step__body { display: flex; flex-direction: column; gap: 6px; padding-top: 7px; flex: 1; }
.promo-step__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 24px; color: var(--color-text); }
.promo-step__text { font-size: 14px; line-height: 22px; color: var(--color-muted); }
.promo-step__arrow { padding-top: 21px; font-weight: 700; font-size: 18px; line-height: 23px; color: var(--color-muted-3); }

/* ── before you participate  64:94 ───────────────────────────────────── */
.promo-before { padding: 64px 0; background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border); }
.promo-bullets { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.promo-bullets li { position: relative; padding-left: 18px; font-size: 14px; line-height: 20px; color: var(--color-muted); }
.promo-bullets li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 3px; background: var(--color-brand); }
.promo-before__link { display: inline-block; margin-top: 32px; font-weight: 700; font-size: 14px; line-height: 18px; color: var(--color-brand); text-decoration: none; }
.promo-before__link:hover { text-decoration: underline; }

/* ── ready to take part  64:115 ──────────────────────────────────────── */
.promo-cta { background: var(--color-dark); color: #fff; }
.promo-cta__inner { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-block: 80px; text-align: center; }
.promo-cta__title { font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: 48px; }
.promo-cta__lead { max-width: 600px; font-size: 15px; line-height: 20px; color: var(--color-on-dark); }
.promo-cta__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.promo-cta__ghost { min-height: 42px; padding: 12px 24px; }

/* ── promotional terms (not drawn; target of the mockup's links) ──────── */
.promo-terms { background: #fff; box-shadow: inset 0 1px 0 var(--color-border); }
.promo-terms__inner { display: flex; flex-direction: column; gap: 20px; padding-block: 48px 64px; max-width: 1040px; }
.promo-terms__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 27px; color: var(--color-text); letter-spacing: .03em; }
.promo-terms__list { display: flex; flex-direction: column; gap: 10px; padding-left: 20px; list-style: decimal; font-size: 14px; line-height: 22px; color: var(--color-muted); }
.promo-terms__list a { color: var(--color-text); }
.promo-terms__note { font-size: 12px; line-height: 16px; color: var(--color-muted-3); }

/* ── mobile  97:1909 ─────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .promo-hero { grid-template-columns: 1fr; min-height: 0; box-shadow: none; }
  .promo-hero__media { order: -1; min-height: 220px; height: 220px; }
  .promo-hero__media::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 4px; }
  .promo-hero__text { gap: 20px; padding: 24px 16px 32px; }
  .promo-hero__copy { gap: 10px; }
  .promo-hero__title { font-size: 32px; line-height: 36px; }
  .promo-hero__lead { font-size: 14px; line-height: 20px; }
  .promo-tags { gap: 6px; }
  .promo-hero__ctas { gap: 12px; }
  .promo-hero__btn { width: 100%; }

  .promo-summary { box-shadow: none; }
  .promo-summary__inner { grid-template-columns: 1fr 1fr; gap: 16px; padding-block: 20px; }
  .promo-summary dt { font-size: 10px; line-height: 13px; }
  .promo-summary dd { font-size: 12px; line-height: 16px; }

  .promo-steps { padding: 48px 0; }
  .promo-head__title { font-size: 24px; line-height: 32px; }
  .promo-steps__list { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .promo-step { gap: 16px; }
  .promo-step__num { font-size: 36px; line-height: 48px; }
  .promo-step__body { gap: 4px; padding-top: 0; }
  .promo-step__title { font-size: 16px; line-height: 22px; }
  .promo-step__text { font-size: 13px; line-height: 18px; }
  .promo-step__arrow { display: none; }

  .promo-before { padding: 48px 0; box-shadow: none; }
  .promo-bullets { margin-top: 24px; }
  .promo-before__link { margin-top: 24px; }

  .promo-cta__inner { padding-block: 48px; }
  .promo-cta__title { font-size: 28px; line-height: 38px; }
  .promo-cta__lead { font-size: 14px; line-height: 20px; }
  .promo-cta__actions { flex-direction: column; align-items: stretch; width: 100%; }

  .promo-terms__inner { padding-block: 32px 40px; }
}

/* below the mobile frame: long button labels may wrap */
@media (max-width: 389px) {
  .promo-cta__ghost, .promo-hero__btn { white-space: normal; text-align: center; }
}