/* Rewards (rewards.html): page-only styles. Reuses the shared design system. */

/* ---------- hero ---------- */
.rwd-hero { min-height: clamp(520px, 74vh, 700px); }
.rwd-hero .phero__bg img { object-position: 50% 55%; }
.rwd-hero::after {
  background:
    linear-gradient(0deg, rgba(3, 23, 14, 0.9) 0%, rgba(3, 23, 14, 0.5) 42%, rgba(3, 23, 14, 0.18) 100%),
    linear-gradient(90deg, rgba(3, 23, 14, 0.78) 0%, rgba(3, 23, 14, 0.45) 45%, transparent 75%);
}
.rwd-chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 13px; border-radius: 999px;
  font: 600 0.82rem/1 var(--font-body); letter-spacing: 0.04em; color: #fff;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.24); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.rwd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.rwd-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 0 4px rgba(37, 228, 145, 0.25); }
.rwd-hero .lede { max-width: 56ch; }

/* ---------- live pump programs ---------- */
.pumps { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); }
.pump {
  display: flex; flex-direction: column; gap: 12px; padding: clamp(26px, 3.4vw, 44px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); scroll-margin-top: calc(var(--header-h) + 76px);
}
.pump__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.pump__logo { height: 76px; width: auto; max-width: 180px; object-fit: contain; object-position: left center; }
.pump__live {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 11px; border-radius: 999px;
  font: 700 0.72rem/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; background: var(--mint); color: #055c36;
}
.pump__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--green-bright); animation: pulse 2.2s infinite; }
.pump h3 { font-size: clamp(2.1rem, 2.6vw + 1rem, 3.2rem); }
.pump__lede { font-size: 1.12rem; color: var(--ink-2); max-width: 40ch; }
.pump__how {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 6px; padding: 14px 16px; border-radius: 10px;
  background: var(--cream); border: 1px solid var(--line); color: var(--ink-2); line-height: 1.45;
}
.pump__how svg { flex: none; margin-top: 1px; color: var(--green); }
.pump__how b { color: var(--ink); font-weight: 600; }
.pump__stores { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 6px; }
.pump__stores li { display: inline-flex; align-items: center; gap: 10px; }
.pump__stores li > b { font: 500 1.15rem var(--font-display); }
.pump__cta { margin-top: auto; align-self: flex-start; }
.pump__stores { margin-bottom: 14px; }
.nb { white-space: nowrap; }
.item__act { margin-top: 10px; }
.item__act .link-arrow { position: relative; justify-self: start; }
.item__act .link-arrow::before { content: ""; position: absolute; inset: -12px -6px; } /* 44px+ tap area, underline stays put */
.age-wrap { margin-top: clamp(28px, 4vw, 48px); }
.back { margin-top: 28px; }
.pump__lede, .pump__how > span { text-wrap: pretty; }

/* ---------- member perks ---------- */
.perks { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(18px, 2.4vw, 32px); }
.perks > .item { grid-column: span 2; }
.perks > .item--half { grid-column: span 3; }
.perks .item__media { position: relative; }
.perk-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2; padding: 7px 12px; border-radius: 999px;
  font: 700 0.7rem/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
  background: rgba(3, 23, 14, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.perk-tag--neon { background: var(--neon); color: var(--forest); }
.perk-logo {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 18%, #fff 0%, var(--cream) 70%);
}
.item__media .perk-logo img { width: 56%; max-width: 260px; height: auto; object-fit: contain; }
.perk-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 10px; }
.perk-cta .link-arrow { color: #fff; }
.perk-cta .link-arrow:hover { color: var(--neon); }


/* tap targets: the shared sub-nav chips and breadcrumb links fall under 44px, so grow them here without moving anything */
@media (max-width: 960px) { .subnav a { display: inline-flex; align-items: center; min-height: 44px; } }
.crumbs a, .perk-cta .link-arrow, .back .link-arrow { position: relative; }
.crumbs a::before, .perk-cta .link-arrow::before, .back .link-arrow::before { content: ""; position: absolute; inset: -12px -8px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .pumps { grid-template-columns: 1fr; }
  .perks { grid-template-columns: 1fr 1fr; }
  .perks > .item, .perks > .item--half { grid-column: span 1; }
  .perks > #events .item__media { flex: 1; aspect-ratio: auto; min-height: 240px; }
  .perks > #events .item__body { flex: none; }
  .perks > #early-access { grid-column: 1 / -1; flex-direction: row; }
  .perks > #early-access .item__media { flex: 1; aspect-ratio: auto; min-height: 320px; }
  .perks > #early-access .item__body { flex: 1; align-content: center; padding: clamp(26px, 4vw, 40px); }
}
@media (max-width: 720px) {
  .rwd-hero { min-height: 0; }
  .rwd-hero .phero__bg img { object-position: 62% 50%; }
  .rwd-hero::after { background: linear-gradient(0deg, rgba(3, 23, 14, 0.94) 0%, rgba(3, 23, 14, 0.78) 55%, rgba(3, 23, 14, 0.4) 100%); }
  .rwd-hero .phero__actions .btn { flex: 1 1 0; padding-inline: 0.8em; }
  .rwd-hero .phero__actions .btn:first-child { flex-basis: 100%; }
  .perks { grid-template-columns: 1fr; }
  .perks .item__media--tall { aspect-ratio: 4 / 3; }
  .perks .item__media--tall img { object-position: 50% 42%; }
  .perks > #events .item__media { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
  .perks > #events .item__body { flex: 1; }
  .perks > #early-access { flex-direction: column; }
  .perks > #early-access .item__media { flex: none; aspect-ratio: 4/3; min-height: 0; }
  .pump__cta { align-self: stretch; }
}