/* Home — palmer-bets-homepage 27:37 / palmer-bets-mobile 67:4 */

.section-title { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 32px; color: var(--color-text); letter-spacing: .02em; }
.section-title--sm { font-size: 20px; line-height: 27px; letter-spacing: .03em; }
.section-lead { font-size: 14px; line-height: 18px; color: var(--color-muted); }

/* ── hero  27:71 ─────────────────────────────────────────────────────── */
.hero {
  /* 840 + 600 at 1440; wider than that, the text column grows with the left bleed so the
     copy stays aligned to the 1280 container and the photo starts where the mockup puts it */
  display: grid; grid-template-columns: minmax(0, calc((100% - 1440px) / 2 + 840px)) minmax(0, 1fr);
  min-height: 360px; background: var(--color-dark-2); color: #fff;
  box-shadow: inset 0 0 0 1px var(--color-dark-3);
}
.hero__text {
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  /* the column is (vw − 1440) / 2 + 840 wide, so its bleed is 100% − 840: copy starts at the container edge */
  padding: 48px 48px 48px max(80px, calc(100% - 760px));
}
.hero__copy { display: flex; flex-direction: column; gap: 12px; max-width: 712px; }
.hero__title { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 48px; color: #fff; }
.hero__lead { font-size: 14px; line-height: 22px; color: var(--color-on-dark); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__media { position: relative; min-height: 360px; }
.hero__media picture, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--color-brand); z-index: 1; }

/* ── popular markets + bet slip  27:119 ──────────────────────────────── */
.sportsbook { padding: 32px 0; background: var(--color-bg); }
.sportsbook__inner { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.sportsbook__main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.sportsbook__head { display: flex; flex-direction: column; gap: 16px; }
.sportsbook__titles { display: flex; flex-direction: column; gap: 4px; }
.markets { display: flex; flex-direction: column; gap: 16px; }
.sportsbook__slip { position: sticky; top: calc(var(--header-h) + 24px); }

/* ── racing next to jump  27:284 ─────────────────────────────────────── */
.racing-band { padding: 32px 0; background: var(--color-dark); color: #fff; }
.racing-band__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.racing-band__titles { display: flex; flex-direction: column; gap: 2px; }
.racing-band__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 27px; letter-spacing: .03em; }
.racing-band__sub { font-weight: 700; font-size: 12px; line-height: 16px; color: var(--color-brand); letter-spacing: .08em; }
.racing-band__all { font-weight: 600; font-size: 13px; line-height: 17px; color: #fff; text-decoration: none; white-space: nowrap; }
.racing-band__all:hover { color: var(--color-brand); }
.jump { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 16px; }
.jump-card { min-width: 0; }
.jump-card__link {
  display: flex; flex-direction: column; gap: 10px; padding: 16px;
  background: var(--color-dark-2); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--color-dark-3);
  color: #fff; text-decoration: none;
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.jump-card__link:hover { box-shadow: inset 0 0 0 1px var(--color-brand); transform: translateY(-2px); }
.jump-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jump-card__min { font-weight: 800; font-size: 15px; line-height: 20px; color: var(--color-brand); white-space: nowrap; }
.jump-card__body { display: flex; flex-direction: column; gap: 2px; }
.jump-card__track { font-weight: 700; font-size: 14px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jump-card__race { font-size: 12px; line-height: 16px; color: var(--color-on-dark); }

/* ── explore sports  27:331 ──────────────────────────────────────────── */
.explore { padding: 32px 0; background: #fff; }
.explore__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.sport-card__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px;
  border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--color-border);
  color: var(--color-text); text-decoration: none;
  transition: box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.sport-card__link:hover { box-shadow: inset 0 0 0 1px var(--color-border-4); background: var(--color-bg); }
.sport-card__icon { display: inline-flex; width: 24px; height: 24px; color: var(--color-text); }
.sport-card__icon .icon { width: 24px; height: 24px; }
.sport-card__text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sport-card__name { font-weight: 700; font-size: 15px; line-height: 20px; }
.sport-card__count { font-size: 12px; line-height: 16px; color: var(--color-muted-3); }
.sport-card__cta { font-weight: 600; font-size: 12px; line-height: 16px; color: var(--color-brand); white-space: nowrap; }
.sport-card__link:hover .sport-card__cta { text-decoration: underline; }

.featured {
  display: flex; margin-top: 24px; border-radius: var(--radius); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--color-border); text-decoration: none; color: var(--color-text);
  transition: box-shadow var(--dur-fast) var(--ease);
}
.featured:hover { box-shadow: inset 0 0 0 1px var(--color-border-4), 0 6px 16px rgba(17, 19, 21, .06); }
.featured__body { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 1; padding: 24px; background: var(--color-surface); }
.featured__row { display: flex; align-items: center; gap: 12px; }
.featured__tag { padding: 4px 8px; border-radius: 3px; background: var(--color-brand); color: #fff; font-weight: 700; font-size: 10px; line-height: 13px; }
.featured__text { display: flex; flex-direction: column; gap: 2px; }
.featured__title { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 20px; }
.featured__sub { font-size: 13px; line-height: 17px; color: var(--color-muted); }
.featured__cta { font-weight: 700; font-size: 13px; line-height: 17px; color: var(--color-brand); white-space: nowrap; }
.featured:hover .featured__cta { text-decoration: underline; }
.featured__media { display: block; width: 180px; height: 100px; flex: none; }
.featured__media img { width: 100%; height: 100%; object-fit: cover; }

/* ── promotion card (F3 decision; the mockup collapses this section) ─── */
.promo-section { padding: 0 0 32px; background: #fff; }
.promo-card {
  display: grid; grid-template-columns: 520px minmax(0, 1fr); border-radius: var(--radius); overflow: hidden;
  background: var(--color-dark-2); color: #fff; text-decoration: none; box-shadow: inset 0 0 0 1px var(--color-dark-3);
}
.promo-card__media { position: relative; display: block; min-height: 180px; }
.promo-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-card__media::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 6px; background: var(--color-brand); }
.promo-card__body { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 24px 32px; }
.promo-card__title { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 32px; }
.promo-card__text { font-size: 13px; line-height: 20px; color: var(--color-on-dark); }
.promo-card__cta { margin-top: 4px; font-weight: 700; font-size: 13px; line-height: 17px; color: var(--color-brand); }
.promo-card:hover .promo-card__cta { text-decoration: underline; }

/* ── mobile 67:4 ─────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .section-title { font-size: 22px; line-height: 30px; }
  .section-title--sm { font-size: 18px; line-height: 24px; }
  .section-lead { font-size: 13px; line-height: 17px; }

  .hero { grid-template-columns: 1fr; min-height: 0; box-shadow: none; }
  .hero__text { gap: 16px; padding: 16px; }
  .hero__copy { gap: 16px; }
  .hero__title { font-size: 32px; line-height: 38px; }
  .hero__lead { font-size: 13px; line-height: 20px; }
  .hero__ctas { gap: 12px; }
  .hero__btn { flex: 1; padding: 12px 16px; font-size: 13px; line-height: 17px; }
  .hero__media { min-height: 180px; height: 180px; }

  .sportsbook { padding: 24px 0; }
  .sportsbook__inner { grid-template-columns: 1fr; gap: 20px; }
  .sportsbook__main { gap: 20px; }
  .sportsbook__head { gap: 20px; }
  .sportsbook__titles { gap: 6px; }
  .sportsbook__slip { display: none; }

  .racing-band { padding: 24px 0; }
  .racing-band__title { font-size: 18px; line-height: 24px; }
  .racing-band__all { font-size: 11px; line-height: 14px; }
  .jump { display: flex; gap: 12px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--container-pad-mobile)); padding-right: var(--container-pad-mobile); }
  .jump::-webkit-scrollbar { display: none; }
  .jump-card { flex: 0 0 130px; }
  .jump-card__link { gap: 10px; padding: 12px; }
  .jump-card__min { font-size: 13px; line-height: 17px; }
  .jump-card__track { font-size: 12px; line-height: 16px; }
  .jump-card__race { font-size: 11px; line-height: 14px; }
  .chip--dark { padding: 2px 4px; font-size: 8px; line-height: 10px; }

  .explore { padding: 24px 0; }
  .explore__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
  .sport-card__link { gap: 8px; padding: 12px; }
  .sport-card__icon, .sport-card__icon .icon { width: 20px; height: 20px; }
  .sport-card__name { font-size: 13px; line-height: 17px; }
  .sport-card__count { font-size: 11px; line-height: 14px; }
  .sport-card__cta { display: none; }

  .featured { flex-direction: column; margin-top: 24px; }
  .featured__body { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
  .featured__row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .featured__tag { padding: 2px 6px; font-size: 9px; line-height: 12px; }
  .featured__text { gap: 4px; }
  .featured__sub { font-size: 12px; line-height: 16px; }
  .featured__cta { font-size: 12px; line-height: 16px; }
  .featured__media { width: 100%; height: 100px; }

  .promo-section { padding: 0 0 24px; }
  .promo-card { grid-template-columns: 1fr; }
  .promo-card__media { min-height: 100px; height: 100px; }
  .promo-card__media::after { right: auto; left: 0; }
  .promo-card__body { padding: 16px; }
  .promo-card__title { font-size: 18px; line-height: 24px; }
}