/* Root */
.yqg-sb{
  width: 100%;
  overflow: hidden;
  position: relative;
  background: var(--yqg-sb-bg, #111);
  padding-top: var(--yqg-sb-pad-y, 14px);
  padding-bottom: var(--yqg-sb-pad-y, 14px);
}

/* Height control (0px = effectively "auto") */
.yqg-sb .yqg-sb__viewport{
  width: 100%;
  overflow: hidden;
  min-height: var(--yqg-sb-min-h, 0px);
  display: flex;
  align-items: center;
}

/* Items (DEFAULT: allow wrapping + <br> to work) */
.yqg-sb .yqg-sb__item{
  color: var(--yqg-sb-fg, #fff);
  display: inline;
  white-space: normal;          /* <-- key change: allow wrapping/line breaks */
  word-break: normal;
  overflow-wrap: anywhere;
  font-weight: 600;
}

/* WYSIWYG formatting support */
.yqg-sb .yqg-sb__item p{ margin: 0; }
.yqg-sb .yqg-sb__item strong{ font-weight: 700; }
.yqg-sb .yqg-sb__item em{ font-style: italic; }
.yqg-sb .yqg-sb__item u{ text-decoration: underline; }

.yqg-sb .yqg-sb__item a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.yqg-sb .yqg-sb__item a:hover{
  text-decoration-thickness: 2px;
}

/* Static mode */
.yqg-sb.is-static .yqg-sb__static{
  width: 100%;
  display: flex;
  padding-left: 16px;
  padding-right: 16px;
}

/* In static mode, make the item behave like normal text block */
.yqg-sb.is-static .yqg-sb__item{
  display: block;
  width: 100%;
}

/* Alignment (static) */
.yqg-sb.align-left  .yqg-sb__static{ justify-content: flex-start; text-align: left; }
.yqg-sb.align-center .yqg-sb__static{ justify-content: center; text-align: center; }
.yqg-sb.align-right .yqg-sb__static{ justify-content: flex-end; text-align: right; }

/* Motion mode layout (marquee = single line by design) */
.yqg-sb.is-motion .yqg-sb__track{
  display: flex;
  width: max-content;
  will-change: transform;
  animation: yqg-sb-marquee var(--yqg-sb-duration, 18s) linear infinite;
}
.yqg-sb.is-motion .yqg-sb__content{
  display: flex;
  white-space: nowrap;          /* keep content as one line for marquee */
}
.yqg-sb.is-motion .yqg-sb__item{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;          /* keep items one line for marquee */
  padding: 0 1.25rem;           /* spacing between repeats */
}

/* Pause on hover */
.yqg-sb.is-hover-pausable:hover .yqg-sb__track{
  animation-play-state: paused;
}

/* When JS decides scrolling isn't needed:
   Make it behave like a normal responsive banner, wrapping allowed */
.yqg-sb.is-motion.is-no-scroll .yqg-sb__track{
  animation: none !important;
  transform: none !important;
  width: 100%;
}

.yqg-sb.is-motion.is-no-scroll .yqg-sb__content{
  width: 100%;
  white-space: normal;
  flex-wrap: wrap;
  gap: 0; /* you can change if you want spacing between wrapped lines */
}

/* In no-scroll state, restore normal wrapping and remove marquee padding */
.yqg-sb.is-motion.is-no-scroll .yqg-sb__item{
  display: block;
  width: 100%;
  white-space: normal;
  padding: 0; /* avoid huge left/right gaps when not scrolling */
}

/* Alignment when no-scroll (acts like static) */
.yqg-sb.is-motion.is-no-scroll.align-left  .yqg-sb__track{ justify-content: flex-start; text-align: left; }
.yqg-sb.is-motion.is-no-scroll.align-center .yqg-sb__track{ justify-content: center; text-align: center; }
.yqg-sb.is-motion.is-no-scroll.align-right .yqg-sb__track{ justify-content: flex-end; text-align: right; }

/* Hide the duplicated second row when we’re not scrolling */
.yqg-sb.is-motion.is-no-scroll .yqg-sb__content[aria-hidden="true"]{
  display: none !important;
}

/* Full-width breakout */
.yqg-sb.is-fullwidth{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}

/* Shared keyframes (direction controlled via CSS variables) */
@keyframes yqg-sb-marquee{
  from { transform: translate3d(var(--yqg-sb-from, 0%), 0, 0); }
  to   { transform: translate3d(var(--yqg-sb-to, -50%), 0, 0); }
}