/* ─────────────────────────────────────────────────────────
   Joker layouts — original promo banner + added joker poses
   The promo banner image is UNCHANGED. Jokers are anchored to
   the banner "frame" with container units (cqw) so they scale
   proportionally with the banner on every device.
   ───────────────────────────────────────────────────────── */

/* Stop any joker overhang from creating a horizontal scrollbar */
html, body { overflow-x: hidden; }

.joker-promo { overflow: visible; }

/* Top-align the columns so the featured card can't push the banner
   (and its jokers) downward — keeps the joker placement stable. */
.joker-shell {
  position: relative;
  align-items: start;
}

/* Stage centres the banner frame in the promo column */
.jpromo-stage {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Frame === the banner. It is the positioning + sizing context. */
.jpromo-frame {
  position: relative;
  width: clamp(210px, 80%, 300px);
  max-width: 100%;
  container-type: inline-size;   /* enables cqw units for children */
}

/* Original promo banner — kept exactly as-is */
.jpromo-phone {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Beside joker (layouts 1 & 3) — overlaps the banner's left edge ── */
.jpromo-joker {
  position: absolute;
  left: -16cqw;
  bottom: 0;
  width: 40cqw;
  height: auto;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 2cqw 4cqw rgba(0, 0, 0, 0.55));
}
.jpromo-joker--wide { left: -26cqw; width: 72cqw; }

/* ── Perched "thinker" joker (layout 2) — on the top-left corner ── */
.jpromo-perch {
  position: absolute;
  top: -27cqw;
  left: -7cqw;
  width: 55cqw;
  height: auto;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 2cqw 4cqw rgba(0, 0, 0, 0.5));
}

/* ── Sitting joker (layout 1) — bottom-right corner of the shell ── */
.jpromo-sit {
  position: absolute;
  right: -52px;
  bottom: -27px;
  width: clamp(120px, 17vw, 184px);
  height: auto;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.5));
}
@media (max-width: 1100px) { .jpromo-sit { right: -24px; } }
@media (max-width: 860px)  { .jpromo-sit { display: none; } }

/* ─────────────────────────────────────────────────────────
   Featured slot card (above the form on step 1)
   ───────────────────────────────────────────────────────── */
.featured-slot {
  grid-column: 1 / -1;          /* full-width header above both columns */
  min-width: 0;                 /* allow it to shrink — prevents grid blowout on mobile */
  position: relative;
  display: flex;
  gap: 14px;
  align-items: stretch;
  padding: 14px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(139, 92, 246, 0.12), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(139, 92, 246, 0.30);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.featured-slot-thumb {
  flex: 0 0 96px;
  width: 96px;
  height: 110px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.featured-slot-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding-right: 18px;          /* small clearance for the NEW badge */
}
.featured-slot-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a78bfa;
}
.featured-slot-title {
  margin: 0;
  font-family: var(--bricolage);
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}
.featured-slot-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--content-secondary);
}
.featured-slot-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.16);
  border: 1px solid rgba(139, 92, 246, 0.35);
  font-size: 12px;
  font-weight: 600;
  color: #c4b5fd;
  white-space: nowrap;          /* keep "Available after registration" on one line */
}
.featured-slot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a78bfa;
  box-shadow: 0 0 7px #a78bfa;
}
.featured-slot-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* Stacked layouts: drop the card below the fixed language switcher
   and add breathing room between the card and the banner below it. */
@media (max-width: 860px) {
  .featured-slot { margin-top: 44px; margin-bottom: 26px; }
}

@media (max-width: 420px) {
  .featured-slot { gap: 12px; padding: 12px; }
  .featured-slot-body { padding-right: 12px; }
  .featured-slot-thumb { flex-basis: 72px; width: 72px; height: 100px; }
  .featured-slot-title { font-size: 16px; }
  .featured-slot-desc { font-size: 12px; }
  .featured-slot-pill { font-size: 11px; padding: 6px 10px; }
}

/* ── Mobile: keep the perched/wide poses tidy (the base pointing
   pose already uses small, safe values that work on phones) ── */
@media (max-width: 620px) {
  .jpromo-joker--wide  { left: -24cqw; width: 56cqw; }
  .jpromo-perch        { top: -25cqw; left: -8cqw; width: 52cqw; }
}