/* ==========================
     SPOTLIGHT / CHALLENGE
     ========================== */
  #spotlight {
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    background:
      radial-gradient(circle at 0 0, rgba(255,255,255,0.06), transparent 60%),
      radial-gradient(circle at 100% 140%, rgba(0,0,0,0.85), transparent 65%),
      #050506;
  }

  #challenges {
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    background:
      radial-gradient(circle at 0 0, rgba(255,255,255,0.04), transparent 55%),
      #050506;
  }

  .vh-spot-card {
    border-radius: 14px;
    border: 1px solid var(--border-strong);
    background:
      radial-gradient(circle at 0 0, rgba(255,255,255,0.16), transparent 60%),
      rgba(255,255,255,0.06);
  }

  .vh-spot-disc {
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 20%, #d4d4d8 0%, #71717a 50%, #111 100%);
  }
  .vh-spot-disc::before {
    content:"";
    position:absolute;
    inset: 6px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,0.85);
    background: radial-gradient(circle at 30% 20%, #eeeeef 0%, #8e8e98 60%, #18181c 100%);
  }
  .vh-spot-disc::after {
    content:"";
    position:absolute;
    inset: 16px;
    border-radius:999px;
    border:1px solid rgba(24,24,27,0.95);
    background:#050506;
  }
  
  /* ==========================
   MOBILE – SEGMENTED SWITCH
   ========================== */
/* ==========================
   MOBILE – SEGMENTED SWITCH
   ========================== */
@media (max-width: 768px) {
  #scopeSwitcher {
    width: 100%;
    border-radius: 999px;
    padding: 3px;
    gap: 3px;
    background: rgba(5,5,6,0.95);
    border: 1px solid rgba(255,255,255,0.08);
  }

  #scopeSwitcher .vh-chip {
    flex: 1;                          /* cada chip ocupa 50% */
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;             /* mantém formato pílula */
    /* NÃO mexemos em background/border/color:
       usa o estilo original da .vh-chip */
    font-size: 0.7rem;
    letter-spacing: 0.16em;
  }
}

  
/* ==========================
   MOBILE – SCROLL HORIZONTAL DOS VIBE CHIPS
   ========================== */
@media (max-width: 768px) {
  /* wrapper da secção */
  #vibes {
    position: relative;
    overflow: hidden; /* garante que as sombras não “fujam” para fora */
  }

  /* faixa de chips */
  #vibeChips {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;

    padding: 0.25rem 0; /* retirado o padding lateral que quebrava a sombra */
  }

  #vibeChips > * {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  /* === Scrollbars === */
  #vibeChips::-webkit-scrollbar {
    height: 4px;
  }
  #vibeChips::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
  }

}

/* ==========================
   CONTEXT BAR (DESKTOP ONLY)
   ========================== */
#feedContextBar {
  margin-top: 0.25rem;   /* cola ao row dos controls */
  margin-bottom: 0.35rem;
  letter-spacing: 0.06em;
}

.vh-context-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.35);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
}

/* ==========================
   DESKTOP – FEED CONTEXT BAR
   ========================== */
.vh-context-dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.35);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
}

.vh-context-text{
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.06em;
}


/* =========================================================
   MOBILE – SPOTLIGHT CAROUSEL (mostra 1 artista de cada vez)
   ========================================================= */
@media (max-width: 768px) {
  /* em vez de grid com 3 cards */
  #spotlightList {
    position: relative;
    display: block !important;
    height: 88px;              /* ~altura de 1 card */
    overflow: hidden;
  }

  /* cards empilhados, só 1 visível */
  #spotlightList .vh-spot-card {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 220ms ease, transform 220ms ease;
    pointer-events: none;
  }

  #spotlightList .vh-spot-card.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* opcional: apertar um pouco o layout no mobile */
  #spotlightList .vh-spot-disc {
    width: 46px !important;
    height: 46px !important;
  }

  #spotlightList .vh-spot-card {
    padding: 10px !important;
    border-radius: 14px;
  }
}

/* respeitar “reduzir movimento” */
@media (prefers-reduced-motion: reduce) {
  #spotlightList .vh-spot-card {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================
   LIGHT MODE OVERRIDES (home/index)
   ========================== */

html[data-theme="light"] #spotlight,
html[data-theme="light"] #challenges {
  background:
    radial-gradient(circle at 0 0, rgba(0,0,0,0.05), transparent 60%),
    rgba(255,255,255,0.78);
}

html[data-theme="light"] .vh-spot-card {
  border-color: rgba(0,0,0,0.14);
  background:
    radial-gradient(circle at 0 0, rgba(0,0,0,0.06), transparent 60%),
    rgba(255,255,255,0.86);
}

html[data-theme="light"] .vh-spot-disc {
  background: radial-gradient(circle at 30% 20%, #ffffff 0%, #cfcfd6 55%, #8b8b96 100%);
}
html[data-theme="light"] .vh-spot-disc::before {
  border-color: rgba(0,0,0,0.18);
  background: radial-gradient(circle at 30% 20%, #ffffff 0%, #d9d9df 60%, #9a9aa6 100%);
}
html[data-theme="light"] .vh-spot-disc::after {
  border-color: rgba(0,0,0,0.22);
  background: rgba(255,255,255,0.88);
}

/* mobile segmented switch */
@media (max-width: 768px) {
  html[data-theme="light"] #scopeSwitcher {
    background: rgba(255,255,255,0.86);
    border-color: rgba(0,0,0,0.10);
  }

  html[data-theme="light"] #vibeChips::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
  }
}

/* context dot */
html[data-theme="light"] .vh-context-dot {
  background: rgba(0,0,0,0.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.55);
}