/* Звуки неба: карточки «Listen» (js/site/listen.js) на страницах объектов и сборник listen.html.
   Карточка узкая — картинка сверху; широкая (контейнер от 760 px) — картинка слева. Без container queries
   (Safari 15) карточка всегда узкая. */

[data-sounds], .snd-list { display: grid; gap: 18px; }
.snd-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 540px), 1fr)); align-items: start; }
.snd-box { container-type: inline-size; min-width: 0; }
.snd { padding: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); }

.snd-art { position: relative; aspect-ratio: 16 / 9; background: var(--chart-sky); cursor: pointer; overflow: hidden; }
.snd-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.snd-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.snd-chips { position: absolute; left: 10px; top: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.snd-chip {
  font: 800 12px/1.2 var(--body); letter-spacing: .02em; padding: 5px 9px; border-radius: 999px;
  background: rgba(8, 9, 12, .66); color: #f1f2f5;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.snd-chip:empty { display: none; }

.snd-body { padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.snd-head { display: flex; align-items: center; gap: 14px; }
.snd-head h3 { margin: 3px 0 0; }
.snd-play {
  flex: none; width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.snd-play:hover { filter: brightness(1.08); }
.snd-play svg { width: 26px; height: 26px; fill: currentColor; }
.snd-play[aria-busy="true"] svg { animation: snd-wait 1s ease-in-out infinite; }
@keyframes snd-wait { 50% { opacity: .3; } }
.snd[data-state="play"] .snd-art::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--accent); pointer-events: none; }

.snd-modes { align-self: flex-start; flex-wrap: wrap; }
.snd-lead { margin: 0; }
.snd-facts { margin: 0; padding-left: 18px; color: var(--muted); font-size: 15px; }
.snd-facts li { margin: 3px 0; }
.snd-msg { margin: 0; color: var(--poor); }
.snd-how summary { cursor: pointer; font-weight: 700; font-size: 14.5px; color: var(--muted); }
.snd-how summary:hover { color: var(--fg); }
.snd-how p { margin: 8px 0 0; font-size: 14.5px; color: var(--muted); }
.snd-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 2px 0 0; }
.snd-links a { font-weight: 700; text-decoration: none; }
.snd-links a:hover { text-decoration: underline; }

@container (min-width: 760px) {
  .snd { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .snd-art { aspect-ratio: auto; min-height: 330px; }
}

/* в ленте истории — по ширине записи, картинка пониже */
.tl-sound { margin-top: 14px; }
.tl-sound .snd-art { aspect-ratio: 2.3 / 1; }

/* сборник */
.listen-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
.listen-intro { color: var(--muted); max-width: 70ch; margin: -4px 0 16px; }
.snd-static { margin: 0; padding-left: 20px; color: var(--muted); }
.snd-static li { margin: 6px 0; }
.listen-clusters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.listen-credits p { margin: 6px 0; }