/* Stage 4.2 — grouped Browse sections + scroll-synced mood pills. */
.browse-groups{
  display:grid;
  gap:clamp(44px,6vw,76px);
  padding:26px 0 78px;
}

.browse-mood-group{
  min-width:0;
  scroll-margin-top:210px;
}

.browse-mood-group[hidden]{display:none!important}

.browse-mood-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:18px;
  margin:0 0 18px;
  padding:0 2px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.browse-mood-heading .eyebrow{
  margin-bottom:7px;
}

.browse-mood-heading h2{
  margin:0;
  font-size:clamp(27px,3.6vw,44px);
  line-height:1;
  letter-spacing:-.055em;
}

.browse-mood-count{
  flex:0 0 auto;
  min-height:32px;
  display:inline-flex;
  align-items:center;
  padding:0 11px;
  border:1px solid #35313f;
  border-radius:999px;
  color:var(--ink-muted);
  background:rgba(20,18,27,.76);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}

.browse-mood-group .browse-tile-grid{
  padding:0;
}

.mood-group-happy{--group-accent:#9b44ff}
.mood-group-attitude{--group-accent:#ff9c20}
.mood-group-chill{--group-accent:var(--gwap-green)}
.mood-group-hype{--group-accent:#ff3c58}
.mood-group-love{--group-accent:#ff5eb8}

.browse-mood-heading:after{
  content:"";
  align-self:end;
  width:clamp(54px,7vw,96px);
  height:2px;
  margin-left:auto;
  margin-bottom:8px;
  background:linear-gradient(90deg,var(--group-accent),transparent);
  opacity:.72;
}

#mood-filters .mood-chip.is-scroll-active:not([aria-pressed="true"]){
  border-color:var(--gwap-green);
  box-shadow:0 0 0 1px var(--gwap-green),0 0 18px var(--gwap-green-glow);
  color:var(--ink);
}

#mood-filters .mood-chip[data-filter-value="all"].is-scroll-active{
  box-shadow:none;
}

@media(max-width:640px){
  .browse-groups{
    gap:42px;
    padding-top:18px;
    padding-bottom:64px;
  }

  .browse-mood-group{
    scroll-margin-top:198px;
  }

  .browse-mood-heading{
    align-items:center;
    margin-bottom:14px;
    padding-bottom:12px;
  }

  .browse-mood-heading h2{
    font-size:clamp(28px,9vw,38px);
  }

  .browse-mood-heading:after{
    display:none;
  }

  .browse-mood-count{
    min-height:30px;
    padding-inline:9px;
    font-size:10px;
  }
}

@media(max-width:360px){
  .browse-mood-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:9px;
  }
}

@media(prefers-reduced-motion:reduce){
  .browse-mood-group{scroll-behavior:auto}
}