/* MOON SHOT — Kanalliste (Instagram, Spotify, …) */
.channels {
  border-top: 1px solid var(--line);
}

.channels a {
  display: grid;
  grid-template-columns: auto 20px minmax(120px, 1fr) auto auto;
  align-items: center;
  gap: clamp(14px, 3vw, 32px);
  padding: clamp(15px, 2.2vw, 22px) clamp(4px, 1vw, 14px);
  border-bottom: 1px solid var(--line);
  color: var(--bone);
  transition: background .3s, border-color .3s, padding-left .3s;
}

.channels a:hover {
  background: rgba(238, 237, 227, .035);
  border-color: var(--line-loud);
  padding-left: clamp(10px, 1.6vw, 22px);
}

.channels__no {
  font-size: .6875rem;
  letter-spacing: .2em;
  color: var(--muted);
}

.channels .icon {
  opacity: .85;
  transition: opacity .3s;
}

.channels a:hover .icon {
  opacity: 1;
}

.channels__name {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 600;
  letter-spacing: .01em;
  transition: color .3s;
}

.channels a:hover .channels__name {
  color: var(--gold);
}

.channels__handle {
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

.channels__go {
  font-size: 1rem;
  color: var(--muted);
  transition: transform .3s, color .3s;
}

.channels a:hover .channels__go {
  color: var(--gold);
  transform: translate(3px, -3px);
}

@media (max-width: 860px) {
  .channels a {
    grid-template-columns: auto 20px 1fr auto;
    gap: 14px;
  }

  .channels__handle {
    display: none;
  }
}