/* HillPhantom playlist navigation — restrained, solid-site treatment.
   Smaller playlist links, no card boxes or section labels, vertical separators,
   and a gold accent that appears only on hover/focus/press. */

.topics.playlist-nav-section{
  position:relative;
  z-index:4;
  margin-top:0;
  padding:28px var(--gutter) 28px;
  background:#07090b;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.playlist-nav-section .topic-grid{
  width:100%;
  max-width:1500px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0;
}

.playlist-nav-section .playlist-card{
  position:relative;
  min-width:0;
  min-height:128px;
  padding:16px 12px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0 !important;
  border-right:1px solid rgba(255,255,255,.13) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible;
  cursor:pointer;
  text-decoration:none;
  color:var(--text);
  will-change:transform;
  transition:opacity .65s ease,filter .7s ease,transform .24s cubic-bezier(.2,.75,.2,1);
}

.playlist-nav-section .playlist-card:first-child{
  border-left:1px solid rgba(255,255,255,.13) !important;
}

.playlist-nav-section .playlist-card::before,
.playlist-nav-section .playlist-card::after{
  content:none !important;
}

.playlist-nav-section .playlist-card svg{
  position:relative;
  width:32px;
  height:32px;
  color:#e9eceb;
  opacity:.88;
  transform:scale(1);
  transition:transform .24s cubic-bezier(.2,.75,.2,1),color .24s ease,opacity .24s ease,filter .24s ease;
}

.playlist-nav-section .playlist-card .playlist-name{
  position:relative;
  width:100%;
  padding-bottom:12px;
  font-family:var(--serif);
  font-size:clamp(15px,1.08vw,19px);
  line-height:1.08;
  text-align:center;
  color:#ece9e2;
  text-wrap:balance;
  transition:color .24s ease;
}

.playlist-nav-section .playlist-card .playlist-name::before{
  content:none !important;
}

.playlist-nav-section .playlist-card .playlist-name::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:34px;
  height:2px;
  border-radius:999px;
  background:#d9b260;
  box-shadow:0 0 10px rgba(217,178,96,.28);
  opacity:0;
  transform:translateX(-50%) scaleX(.12);
  transform-origin:center;
  transition:opacity .18s ease,transform .26s cubic-bezier(.2,.75,.2,1);
}

.topic-grid.in .playlist-card:hover,
.topic-grid.in .playlist-card:focus-visible{
  z-index:3;
  transform:translateY(-1px) !important;
  outline:none;
}

.topic-grid.in .playlist-card:hover svg,
.topic-grid.in .playlist-card:focus-visible svg,
.topic-grid.in .playlist-card:active svg{
  transform:scale(1.14);
  color:#fff;
  opacity:1;
  filter:drop-shadow(0 0 7px rgba(217,178,96,.14));
}

.topic-grid.in .playlist-card:hover .playlist-name,
.topic-grid.in .playlist-card:focus-visible .playlist-name,
.topic-grid.in .playlist-card:active .playlist-name{
  color:#fff;
}

.topic-grid.in .playlist-card:hover .playlist-name::after,
.topic-grid.in .playlist-card:focus-visible .playlist-name::after,
.topic-grid.in .playlist-card:active .playlist-name::after{
  opacity:1;
  transform:translateX(-50%) scaleX(1);
}

@media(max-width:1180px){
  .playlist-nav-section .topic-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .playlist-nav-section .playlist-card{min-height:116px}
  .playlist-nav-section .playlist-card:nth-child(4){border-left:1px solid rgba(255,255,255,.13) !important}
}

@media(max-width:700px){
  .topics.playlist-nav-section{padding:22px 18px}
  .playlist-nav-section .topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .playlist-nav-section .playlist-card{min-height:102px;padding:12px 8px 14px;gap:8px}
  .playlist-nav-section .playlist-card:nth-child(odd){border-left:1px solid rgba(255,255,255,.13) !important}
  .playlist-nav-section .playlist-card svg{width:29px;height:29px}
  .playlist-nav-section .playlist-card .playlist-name{font-size:15px;padding-bottom:10px}
}

@media(max-width:440px){
  .playlist-nav-section .topic-grid{grid-template-columns:1fr 1fr}
}

@media(prefers-reduced-motion:reduce){
  .topic-grid.in .playlist-card:hover,
  .topic-grid.in .playlist-card:focus-visible{transform:none !important}
  .playlist-nav-section .playlist-card svg,
  .playlist-nav-section .playlist-card .playlist-name::after{transition:none !important}
}