/* =========================================================
   Updates Carousel — Gold on Black (Centered, Taller, Fade)
   ========================================================= */

/* Tokens */
:root {
  --bg: #000;
  --text: #fff;
  --gold: #FFD700;
  --gold-2: #ffec8b;
  --border: #1b1b1b;

  --uc-height: clamp(52px, 4.6vw, 68px);
  /* target bar height */
  --uc-font: clamp(1rem, 0.7vw + 0.9rem, 1.2rem);
  --fade-ms: 450ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --wrap-w: 1200px;
}

/* Shell */
.updates-carousel {
  background: #050505;
  color: var(--text);
  border-block: 1px solid var(--border);
  position: relative;
  padding-top: 10px;
}

.updates-carousel::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, .35), transparent);
  pointer-events: none;
}

/* Chip (above bar) */
.uc-topline {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .45rem 1rem .15rem;
}

.uc-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .32rem .65rem;
  border-radius: 999px;
  font: 800 .78rem/1 system-ui, Inter, Roboto, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #111;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  box-shadow: 0 10px 28px -16px rgba(255, 215, 0, .5);
}

/* Bar layout */
.uc-wrap {
  max-width: var(--wrap-w);
  margin: 0 auto;
  padding: 0 1rem;
  min-height: var(--uc-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Viewport/List */
.uc-viewport {
  position: relative;
  overflow: hidden;
  min-height: var(--uc-height);
  padding-block: .85rem;
  /* prevents bottom text clipping */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  inline-size: 100%;
}

.uc-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  inline-size: 100%;
}

/* Stack items; show one at a time */
.uc-list li {
  position: absolute;
  inset: 0;
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--fade-ms) var(--ease),
    transform var(--fade-ms) var(--ease);
  will-change: opacity, transform;
  pointer-events: none;
}

/* No-JS fallback: show first item */
.uc-list li:first-child {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* JS-active state: carousel controls visibility */
.has-uc-js .uc-list li:first-child {
  opacity: 0 !important;
  pointer-events: none !important;
}

.has-uc-js .uc-list li.is-active {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* Link styling */
.uc-list a {
  display: inline-block;
  max-width: 100%;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--uc-font);
  line-height: 1.25;
  /* fixes baseline clipping */
  letter-spacing: .2px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  border-bottom: 1px dashed transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 0 16px rgba(255, 215, 0, .12);
}

.uc-list a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.uc-list a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, .28);
  border-radius: .25rem;
}

/* Responsive */
@media (max-width:640px) {
  .uc-topline {
    padding: .35rem 1rem .1rem;
  }

  .uc-chip {
    padding: .28rem .6rem;
  }

  /* Optional: allow 2-line wrap on small screens
  .uc-list a{
    white-space:normal;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  } */
}

/* Reduced Motion */
@media (prefers-reduced-motion:reduce) {
  .uc-list li {
    transition: none !important;
  }
}