/* ============================================================================
   messiah.by — раздел «Музыка» (/sound/): каталог, плеер, избранное, свои
   альбомы. Палитра — общая с сайтом; плеер снизу тёмный, как в музыкальных
   приложениях, с золотым акцентом на кнопке play.
   ========================================================================= */

/* Классы ниже сами задают display (.mus-player, .mus-modal и т.п.) и
   перебивают дефолт браузера [hidden]{display:none} — держим hidden сильнее. */
[hidden] { display: none !important; }

.mus-body { padding-bottom: 84px; } /* место под закреплённый снизу плеер */

.mus { padding-block: 0; }
.mus > .mus-layout { padding-block: clamp(1.5rem, 4vw, 2.5rem); }

.mus-layout {
  display: grid;
  /* Колонка ТЕКУЧАЯ, а не 240px намертво: на 1000–1200px жёсткая колонка
     съедала у плиток альбомов целый столбец. */
  grid-template-columns: clamp(176px, 19vw, 240px) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  align-items: start;
}

/* ---- Сайдбар -------------------------------------------------------------- */

.mus-sidebar { position: sticky; top: clamp(1rem, 3vw, 1.5rem); }
.mus-nav { display: flex; flex-direction: column; gap: .15rem; }

.mus-nav__link {
  padding: .55rem .7rem;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: .95rem;
}
.mus-nav__link:hover { background: var(--paper-2); color: var(--ink); }
.mus-nav__link.is-active { background: var(--red); color: #fff; }

.mus-nav__group { display: flex; align-items: center; justify-content: space-between; margin-top: 1.25rem; }
.mus-nav__label {
  display: block;
  padding: 0 .7rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-mute);
}
.mus-nav__label--sections { margin-top: 1.25rem; }
/* Списки альбомов и разделов — столбиком, как остальное меню. */
#musPlaylistNav, #musSectionNav { display: flex; flex-direction: column; gap: .15rem; }
.mus-nav__hint { padding: 0 .7rem; color: var(--ink-mute); font-size: .88rem; }

.mus-nav__add {
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.mus-nav__add:hover { border-color: var(--red); color: var(--red); }

/* ---- Контент --------------------------------------------------------------- */

.mus-content { min-width: 0; }
.mus-loading, .mus-muted { color: var(--ink-mute); }
.mus-error { color: var(--red-deep); }

.mus-eyebrow { color: var(--red); font-weight: 500; font-size: .9rem; }
.mus-eyebrow a { color: inherit; }

.mus-row { margin-bottom: clamp(2rem, 4vw, 2.75rem); padding-block: 0; }   /* общий отступ section — не здесь */
.mus-row__title { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin-bottom: 1rem; }
.mus-row__title a { color: var(--ink); text-decoration: none; }
.mus-row__title a:hover { color: var(--red); }

.mus-page-head { margin-bottom: 1.75rem; }
.mus-page-head h1 { margin-bottom: .3em; }
.mus-page-head--album { display: flex; gap: clamp(1rem, 3vw, 1.75rem); align-items: flex-start; }
.mus-page-head__cover {
  width: clamp(120px, 22vw, 180px); height: clamp(120px, 22vw, 180px);
  object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); flex: none;
}

/* ---- Сетка альбомов --------------------------------------------------------- */

.mus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.mus-card {
  display: flex; flex-direction: column; gap: .3rem;
  text-decoration: none; color: var(--ink);
}
.mus-card__cover {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  background-color: var(--paper-30);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.mus-card:hover .mus-card__cover {
  box-shadow: var(--shadow-md); transform: translateY(-3px);
}
.mus-card__play {
  position: absolute; right: .5rem; bottom: .5rem;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  border: none;
  background: var(--gold);
  color: #fff;
  font-size: 1rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, background-color .16s ease;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.mus-card:hover .mus-card__play, .mus-card:focus-within .mus-card__play { opacity: 1; transform: none; }
.mus-card__play:hover { background: var(--red); }

.mus-card__title { font-weight: 500; font-size: .95rem; line-height: 1.3; }
.mus-card__author, .mus-card__count { color: var(--ink-mute); font-size: .82rem; }

/* ---- Список треков ---------------------------------------------------------- */

.mus-tracklist { list-style: none; margin: 0; padding: 0; }

.mus-track {
  display: grid;
  grid-template-columns: 1.8rem 1.6rem minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: .6rem;
  padding: .55rem .5rem;
  border-radius: 10px;
}
.mus-track:hover { background: var(--paper-2); }
.mus-track.is-playing { background: rgba(141, 27, 33, .08); }
.mus-track.is-playing .mus-track__title { color: var(--red-deep); font-weight: 500; }
.mus-track--empty { opacity: .5; }
.mus-track--empty .mus-track__play { cursor: not-allowed; }

.mus-track__play {
  grid-column: 1;
  width: 1.8rem; height: 1.8rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  font-size: .78rem;
}
.mus-track__no { grid-column: 2; color: var(--ink-mute); text-align: right; font-size: .85rem; }
.mus-track__title { grid-column: 3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mus-track__album { display: block; color: var(--ink-mute); font-size: .8rem; }
.mus-track__dur { grid-column: 4; color: var(--ink-mute); font-size: .85rem; font-variant-numeric: tabular-nums; }

.mus-track__fav, .mus-track__add, .mus-track__remove {
  grid-column: auto;
  width: 1.8rem; height: 1.8rem;
  border: none; background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  font-size: 1rem;
}
.mus-track__fav:hover, .mus-track__add:hover { color: var(--red); }
.mus-track__fav.is-active { color: var(--red); }
.mus-track__remove:hover { color: var(--red-deep); }

/* ---- Плеер, закреплённый снизу ---------------------------------------------- */

.mus-player {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(140px, 320px) auto auto auto;
  align-items: center;
  gap: 1rem;
  padding: .55rem clamp(1rem, 3vw, 2rem);
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 -6px 24px rgba(0,0,0,.25);
}

.mus-player__cover { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }

.mus-player__info { min-width: 0; }
.mus-player__title { font-weight: 500; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mus-player__album { display: block; font-size: .78rem; color: rgba(251,248,243,.6); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mus-player__album:hover { color: var(--gold-soft); }

.mus-player__controls { display: flex; align-items: center; gap: .4rem; }
.mus-player__btn {
  border: none; background: transparent; color: var(--paper);
  font-size: 1rem; cursor: pointer; width: 2rem; height: 2rem;
}
.mus-player__btn--play {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--gold);
  color: #1b1512;
}
.mus-player__btn--play:hover { background: var(--gold-soft); }

.mus-player__seek { display: flex; align-items: center; gap: .5rem; }
.mus-player__time { font-size: .75rem; color: rgba(251,248,243,.65); font-variant-numeric: tabular-nums; width: 2.4em; }
.mus-player__seek input[type="range"] { flex: 1; accent-color: var(--gold); }

.mus-player__heart, .mus-player__add {
  border: none; background: transparent; color: rgba(251,248,243,.75);
  font-size: 1.15rem; cursor: pointer;
}
.mus-player__heart.is-active { color: var(--gold); }
.mus-player__heart:hover, .mus-player__add:hover { color: var(--gold-soft); }

.mus-player__volume { display: none; align-items: center; gap: .4rem; }
.mus-player__volume input[type="range"] { width: 80px; accent-color: var(--gold); }

@media (min-width: 860px) {
  .mus-player__volume { display: flex; }
}

/* ---- Модальное окно ---------------------------------------------------------- */

.mus-modal {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(27,21,18,.45);
  padding: 1rem;
}
.mus-modal__box {
  width: 100%; max-width: 26rem;
  background: var(--paper);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: var(--shadow-md);
}
.mus-modal__box h2 { margin-bottom: 1rem; }
.mus-modal__list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; }
.mus-modal__item {
  width: 100%; text-align: left;
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-2);
  cursor: pointer;
  font: inherit;
}
.mus-modal__item:hover { border-color: var(--red); }
.mus-modal__create { display: flex; gap: .5rem; margin-bottom: 1rem; }
.mus-modal__create input {
  flex: 1;
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
}

/* ---- Узкий экран -------------------------------------------------------------- */

@media (max-width: 780px) {
  .mus-layout { grid-template-columns: 1fr; gap: 1rem; }

  /* Колонка перестаёт быть колонкой и остаётся СВЕРХУ полосой-меню, которую
     прокручивают пальцем вбок. Раньше она переносилась по строкам: девять
     альбомов и свои плейлисты занимали пол-экрана, и до музыки надо было
     ещё долистать. */
  .mus-sidebar {
    /* min-width:0 — иначе полоса не прокручивается, а растягивает колонку
       сетки и уводит страницу за край экрана. */
    min-width: 0;
    position: sticky; top: 0; z-index: 20;
    background: var(--paper);
    padding-block: .5rem;
    box-shadow: 0 6px 16px -14px rgba(58,40,20,.6);
  }
  .mus-nav {
    min-width: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: .35rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mus-nav::-webkit-scrollbar { display: none; }
  .mus-nav__link {
    flex: none;
    white-space: nowrap;
    border: 1px solid var(--line);
  }
  .mus-nav__link.is-active { border-color: var(--red); }
  /* Коробки с плейлистами и разделами сами не участвуют в строке — в неё
     встают их ссылки. */
  #musPlaylistNav, #musSectionNav { display: contents; }
  .mus-nav__group { flex: none; margin-top: 0; gap: .3rem; }
  .mus-nav__label, .mus-nav__label--sections { flex: none; margin-top: 0; padding: 0 .3rem; white-space: nowrap; }
  .mus-nav__hint { flex: none; white-space: nowrap; }

  .mus-player {
    grid-template-columns: auto minmax(0,1fr) auto;
    grid-template-areas: "cover info controls" "seek seek seek";
    row-gap: .35rem;
  }
  .mus-player__cover { grid-area: cover; }
  .mus-player__info { grid-area: info; }
  .mus-player__controls { grid-area: controls; }
  .mus-player__seek { grid-area: seek; }
  .mus-player__heart, .mus-player__add { display: none; }
}

/* Заголовок раздела. ⚠️ Его не было вовсе — на главной «Музыки» не находилось
   ни одного <h1>. Лежит НАД двухколоночной раскладкой, поэтому отступ снизу
   меньше обычного: под ним сразу боковое меню и плитки. */
/* У «Музыки» нет общей .wrap вокруг заголовка — отступ слева считаем как
   у .wrap, иначе на широком экране заголовок прилипает к краю окна. */
.mus-head {
  max-width: 46rem; margin-bottom: clamp(1.25rem, 3vw, 2rem);
  padding-top: clamp(1.5rem, 4vw, 3rem);
  margin-left: max(clamp(1rem, 4vw, 2rem), calc((100% - var(--wrap)) / 2 + clamp(1rem, 4vw, 2rem)));
  margin-right: clamp(1rem, 4vw, 2rem);
}
.mus-head h1 { margin: .2rem 0 .6rem; }
.mus-head p { color: var(--ink-600); }
/* Глава, открытая по ссылке из «Сегодня» / «Чтений дня». */
.mus-track.is-target { background: var(--gold-100); border-radius: 10px; box-shadow: inset 3px 0 0 var(--gold-500); }
.mus-chapter-go { margin-left: .5rem; }