/* Shared, theme-agnostic split-banner variant of .lt-lotto. Lives at
   the repo root (not inside any theme's assets/) because app.js's
   blanket /assets mount serves this identically for every theme —
   the same file works unmodified in demotheme9/demotheme9sangphet/
   demotheme9sangphetVer2 since it only reads var(--token) custom
   properties all three define identically, no Tailwind at-rules.
   Always linked; only matches markup when LOTTO_CARD_STYLE===2 in
   the consuming theme's pages/index.ejs. */

.lt-lotto.lt-lotto--split {
  display: grid;
  grid-template-columns: 92px 1fr;
  grid-template-rows: repeat(3, auto);
}
.lt-panel .lt-lotto.lt-lotto--split {
  grid-column: 1 / -1; /* full panel-row width — same technique as .gl-empty/.gl-loading */
}
.lt-lotto.lt-lotto--split .lt-lotto__banner {
  grid-column: 1;
  grid-row: 1 / span 3; /* fills the same height head/body/foot naturally stack into */
  position: relative;
}
.lt-lotto__banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lt-lotto__banner-img--placeholder {
  background: var(--grad-gold); /* already used elsewhere on this exact card, .lt-lotto__flash-badge */
  display: flex;
  align-items: center;
  justify-content: center;
}
.lt-lotto__banner-img--placeholder::after {
  content: '\1F3AB';
  font-size: 22px;
  line-height: 1;
  opacity: .55;
}
.lt-lotto.lt-lotto--split .lt-lotto__head { grid-column: 2; grid-row: 1; }
.lt-lotto.lt-lotto--split .lt-lotto__body { grid-column: 2; grid-row: 2; }
.lt-lotto.lt-lotto--split .lt-lotto__foot { grid-column: 2; grid-row: 3; }

/* Closed ribbon rescaled for the wider card — same "rescale per card
   shape" precedent as .gl-card--closed::after. Starting-point values,
   not yet measured against a rendered card — expect to eyeball-tune. */
.lt-lotto.lt-lotto--split.lt-lotto--closed::after {
  top: 14px;
  right: -40px;
  width: 170px;
  padding: 4px 0;
  font-size: 11px;
}