/* ============================================================
   BLACKJACK BASIC STRATEGY APP (v2)  -  page 9152
   /blackjack-basic-strategy-app/, rendered by
   page-blackjack-basic-strategy-app.php. Loads AFTER article.css, so the
   feature cards (.card), check-lists (.check-list), the two-up row
   (.wpg-inner-row) and the info callout (.bs-callout) all come from the
   shared .av2-prose vocabulary. This sheet only adds the three components
   that shell does not have: the lead paragraph, the download CTA card, and
   the phone-screenshot gallery. Scoped to .bsapp-prose.
   ============================================================ */

.bsapp-prose .bsapp-lead {
  font-size: var(--bji-text-lg);
  line-height: var(--bji-leading-snug);
  color: var(--bji-text);
}

/* ---- download CTA card ---- */
.bsapp-prose .bsapp-cta {
  background:
    radial-gradient(60rem 20rem at 80% -40%, rgb(6 152 255 / 0.30), transparent 60%),
    linear-gradient(160deg, var(--bji-navy-900), var(--bji-navy-800));
  border-radius: var(--bji-radius-lg);
  padding: var(--bji-space-6) var(--bji-space-5);
  text-align: center;
  margin: var(--bji-space-6) 0;
}
.bsapp-prose .bsapp-cta h2 { color: #fff; margin: 0 0 var(--bji-space-2); }
.bsapp-prose .bsapp-cta p { color: var(--bji-text-inverse-muted); margin: 0 0 var(--bji-space-4); }
.bsapp-prose .bsapp-badge { display: inline-block; }
.bsapp-prose .bsapp-badge img {
  height: 56px;
  width: auto;
  border-radius: var(--bji-radius-sm);
  transition: transform var(--bji-duration) var(--bji-ease);
}
.bsapp-prose .bsapp-badge:hover img { transform: translateY(-1px); }

/* ---- phone-screenshot gallery (app-store style horizontal scroller) ---- */
.bsapp-prose .bsapp-shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: var(--bji-space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--bji-space-1) 0 var(--bji-space-3);
  margin: 0 0 var(--bji-space-3);
  -webkit-overflow-scrolling: touch;
}
.bsapp-prose .bsapp-shots img {
  width: 100%;
  height: auto;
  border-radius: var(--bji-radius-md);
  border: 1px solid var(--bji-border);
  box-shadow: var(--bji-shadow-sm);
  scroll-snap-align: start;
}
@media (min-width: 720px) {
  /* on wider screens fit more of the set in view before scrolling */
  .bsapp-prose .bsapp-shots { grid-auto-columns: minmax(160px, 1fr); }
}

.bsapp-prose .bsapp-guide-link {
  text-align: center;
  color: var(--bji-text-muted);
  font-size: var(--bji-text-sm);
}