/*
 * Shared by every banner card style (standard, shop, lottery, mystery) in
 * every theme. Cards opt in through data attributes set by banner_card()
 * (includes/banners.php): data-bnr-card on the card, data-bnr-text and
 * data-bnr-media on its two halves, data-bnr-title on the headline.
 * --bnr-accent and --bnr-image come from the banner itself. A theme whose
 * cards are always dark sets --bnr-text and --bnr-text-soft on them.
 */

/* Content decides the height, so a long headline wraps instead of being cut,
   and every slide stretches to the tallest so a carousel's cards line up. */
.banner-carousel-swiper .swiper-slide { height: auto !important; display: flex !important; }
.banner-carousel-swiper .swiper-slide > * { flex: 1 1 auto; min-width: 0; }
[data-bnr-card] { height: 100% !important; min-height: 172px; }
@media (min-width: 640px)  { [data-bnr-card] { min-height: 200px; } }
@media (min-width: 1024px) { [data-bnr-card] { min-height: 224px; } }
[data-bnr-card][data-bnr-compact] { min-height: 0; }

/* With the height free, a percentage max-height on the image no longer
   resolves, so the image is capped here instead of growing the card. */
[data-bnr-card] [data-bnr-media] img { max-height: 8.5rem !important; }
@media (min-width: 640px)  { [data-bnr-card] [data-bnr-media] img { max-height: 10.5rem !important; } }
@media (min-width: 1024px) { [data-bnr-card] [data-bnr-media] img { max-height: 12rem !important; } }

/* On phones a row of text and button puts the button under the text. */
[data-bnr-row] { gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; }
@media (max-width: 639px) {
  [data-bnr-row] { flex-wrap: wrap; align-content: center; row-gap: .75rem; }
  [data-bnr-row] > * { max-width: 100% !important; }
}

[data-bnr-card] [data-bnr-title] {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
}
[data-bnr-card] [data-bnr-label] { color: var(--bnr-accent) !important; }

/* Subtitle and the live line */
.bnr-sub { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--bnr-text-soft, var(--ink-soft)); overflow-wrap: anywhere; }
.bnr-live { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: .1rem 0 0; font-size: .8rem; color: var(--bnr-text-soft, var(--ink-soft)); }
.bnr-stat { font-weight: 600; color: var(--bnr-text, var(--ink)); overflow-wrap: anywhere; }
.bnr-coin { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; }
.bnr-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem; border-radius: 999px;
  font-weight: 700; font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--bnr-accent);
  background: color-mix(in srgb, var(--bnr-accent) 14%, transparent);
}
.bnr-chip::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
/* Only the dot pulses: a fading chip with ticking digits looks like flicker. */
.bnr-chip.is-urgent { color: #b91c1c; background: #fee2e2; }
.bnr-chip.is-urgent::before { animation: bnr-pulse 1.6s ease-in-out infinite; }
.bnr-chip.is-ended { color: var(--ink-soft); background: color-mix(in srgb, var(--ink-soft) 14%, transparent); }
.bnr-chip.is-ended::before { display: none; }
@keyframes bnr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Both image layouts turn the card dark and show the image with the text
   over its darker side. Cover: a photo or artwork fills the card. Product: a
   cut-out image sits on the right on a spotlight of the banner's colour. */
[data-bnr-layout="cover"] {
  background:
    linear-gradient(90deg, rgba(12, 12, 18, .9) 0%, rgba(12, 12, 18, .7) 38%, rgba(12, 12, 18, .12) 72%, rgba(12, 12, 18, 0) 100%),
    var(--bnr-image) center / cover no-repeat,
    #0c0c12 !important;
}
[data-bnr-layout="product"] {
  background:
    linear-gradient(90deg, rgba(12, 12, 18, .92) 0%, rgba(12, 12, 18, .7) 42%, rgba(12, 12, 18, 0) 66%),
    var(--bnr-image) right 6% center / auto 78% no-repeat,
    radial-gradient(circle at 80% 55%, color-mix(in srgb, var(--bnr-accent) 45%, transparent) 0%, transparent 42%),
    linear-gradient(135deg, #1b1b25 0%, #0c0c12 100%) !important;
}
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text]:not([data-bnr-row]) { max-width: 60%; }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-media],
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-deco] { display: none !important; }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] { position: relative; z-index: 1; }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] [data-bnr-title],
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] .bnr-stat { color: #fff !important; }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] .bnr-sub,
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] .bnr-live,
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] .ed-status { color: rgba(255, 255, 255, .82) !important; }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) :is([data-bnr-label], [data-bnr-text] .ed-eyebrow) { color: color-mix(in srgb, var(--bnr-accent) 55%, #fff) !important; }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .bnr-chip:not(.is-urgent) { background: rgba(255, 255, 255, .16); color: #fff; }

/* One rhythm for the text column in every style: label, headline, meta and
   button evenly spaced and centred in the card's height. The lottery ticket's
   row lays out its own text and button side by side, so it keeps its own. */
[data-bnr-card] [data-bnr-text]:not([data-bnr-row]) {
  display: flex !important; flex-direction: column; justify-content: center;
  gap: .5rem !important; padding-top: 1.25rem; padding-bottom: 1.25rem;
}
[data-bnr-card] [data-bnr-text]:not([data-bnr-row]) > * { margin-top: 0 !important; margin-bottom: 0 !important; }
[data-bnr-card] [data-bnr-text]:not([data-bnr-row]) > :last-child:not(:first-child) { margin-top: .25rem !important; }
[data-bnr-card] [data-bnr-label] { line-height: 1.2; }
[data-bnr-card] [data-bnr-title] { line-height: 1.15 !important; }
[data-bnr-card] .bnr-live { margin: 0; }

/* Phones: the text needs the card's full width, so the image moves to a band
   across the top, shown in full, and fades into the dark the text sits on. */
@media (max-width: 639px) {
  [data-bnr-layout="cover"] {
    background:
      linear-gradient(180deg, rgba(12, 12, 18, 0) 0, rgba(12, 12, 18, .15) 5rem, rgba(12, 12, 18, .92) 8.5rem, #0c0c12 10rem),
      var(--bnr-image) center top / cover no-repeat,
      #0c0c12 !important;
  }
  [data-bnr-layout="product"] {
    background:
      linear-gradient(180deg, rgba(12, 12, 18, 0) 0, rgba(12, 12, 18, 0) 6.5rem, rgba(12, 12, 18, .9) 8.75rem, #0c0c12 10rem),
      var(--bnr-image) center 1rem / auto 6.5rem no-repeat,
      radial-gradient(circle at 50% 4.25rem, color-mix(in srgb, var(--bnr-accent) 50%, transparent) 0, transparent 6.5rem),
      linear-gradient(135deg, #1b1b25 0%, #0c0c12 100%) !important;
  }
  :is([data-bnr-layout="cover"], [data-bnr-layout="product"]) [data-bnr-text] {
    max-width: 100% !important;
    padding-top: 8.25rem !important;
    justify-content: flex-end !important;
  }
  [data-bnr-card] [data-bnr-text]:not([data-bnr-row]) { gap: .4rem !important; }
}

/* Pagination: the active dot becomes a bar that fills until the next slide. */
.banner-carousel-swiper .swiper-pagination-bullet { transition: width .3s ease; }
.banner-carousel-swiper.bnr-progress .swiper-pagination-bullet-active {
  width: 1.75rem; border-radius: 999px; opacity: 1;
  background: linear-gradient(90deg, var(--theme-600, #4f46e5) calc(var(--bnr-progress, 0) * 100%), color-mix(in srgb, var(--ink-soft) 30%, transparent) 0) !important;
}

@media (prefers-reduced-motion: reduce) {
  .bnr-chip.is-urgent::before { animation: none; }
}