/* Страница «Мелодии для школьного звонка»: фильтр, карточки, плеер. Дополняет site.css, цвета — его переменные. */
.mel-hero .wrap { grid-template-columns: 1.15fr .85fr; align-items: start; }
.mel-hero .btns { margin-top: 8px; }
.mel-feature { align-self: center; }
.mel-intro { padding: 32px 0 8px; }
.mel-intro-text { max-width: 880px; color: var(--ink-2); margin-bottom: 28px; }

/* --- фильтр по разделам --- */
.mel-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.mel-filter a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line);
                border-radius: 99px; background: #fff; color: var(--ink-2); font-weight: 600; font-size: 15px; cursor: pointer; }
.mel-filter a:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.mel-filter a span { font-size: 13px; color: var(--ink-3); font-weight: 700; }
.mel-filter a[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.mel-filter a[aria-pressed="true"] span { color: rgba(255, 255, 255, .8); }

/* --- разделы и карточки --- */
.mel-cat { margin-top: 40px; scroll-margin-top: 90px; }
.mel-cat h3 { font-size: 24px; margin-bottom: 4px; }
.mel-sub { color: var(--ink-3); margin-bottom: 16px; }
.mel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.mel { min-width: 0; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--line);
       border-radius: var(--radius); padding: 18px 18px 14px; transition: border-color .15s, box-shadow .15s; }
.mel.is-playing { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.mel-title { font-size: 17px; font-weight: 700; line-height: 1.3; margin: 0; }
.mel-desc { color: var(--ink-2); font-size: 15px; line-height: 1.45; margin: 0; flex-grow: 1; }
.mel audio { width: 100%; height: 40px; }
.mel-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.mel-meta { color: var(--ink-3); font-size: 14px; }
.mel-dl { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 2px solid var(--blue); border-radius: 10px;
          font-weight: 700; font-size: 14px; color: var(--blue); background: #fff; white-space: nowrap; }
.mel-dl:hover { background: var(--blue); color: #fff; text-decoration: none; }
.mel-dl svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* --- плеер (добавляет melodii.js) --- */
.mel-player { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.mel-play { width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--blue); color: #fff; cursor: pointer;
            display: grid; place-items: center; padding: 0; transition: background .15s, transform .08s; }
.mel-play:hover { background: var(--blue-dark); }
.mel-play:active { transform: scale(.96); }
.mel-play:focus-visible, .mel-seek:focus-visible, .mel-dl:focus-visible, .mel-filter a:focus-visible {
  outline: 3px solid #FFB300; outline-offset: 2px; }
.mel-play svg { width: 20px; height: 20px; fill: currentColor; }
.mel-play .i-pause, .mel-play[aria-pressed="true"] .i-play { display: none; }
.mel-play[aria-pressed="true"] .i-pause { display: block; }
.mel-play[disabled] { background: var(--ink-3); cursor: default; }
.mel-seek { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 0; border-radius: 3px; cursor: pointer;
            background: linear-gradient(to right, var(--blue) var(--p, 0%), var(--bg-3) var(--p, 0%)); }
.mel-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--blue);
                                  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.mel-seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--blue); border: 2px solid #fff; }
.mel-seek::-moz-range-track { background: transparent; }
.mel-time { font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mel-err { color: var(--red); font-size: 14px; }

/* --- карточка на первом экране --- */
.mel-list-hero { grid-template-columns: 1fr; }
.mel-big { padding: 24px; box-shadow: var(--shadow); border-color: var(--blue-soft); }
.mel-big .mel-title { font-size: 22px; }
.mel-big .mel-play { width: 60px; height: 60px; }
.mel-big .mel-player { grid-template-columns: 60px minmax(0, 1fr) auto; }
.mel-big .mel-play svg { width: 26px; height: 26px; }

/* --- условия --- */
.mel-terms { background: var(--blue-soft); border-radius: var(--radius); padding: 28px 32px; max-width: 900px; }
.mel-terms h2 { font-size: 26px; }
.mel-terms p { margin: 0; font-size: 18px; color: var(--ink); }

#po-raspisaniyu .steps { margin-top: 24px; }
#po-raspisaniyu .shot { align-self: center; }

@media (max-width: 980px) {
  .mel-hero .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .mel-cat h3 { font-size: 21px; }
  .mel { padding: 16px 14px 12px; }
  .mel-terms { padding: 22px 18px; }
  .mel-terms p { font-size: 16px; }
  .mel-filter { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 8px; padding: 2px 16px 8px; scrollbar-width: none; }
  .mel-filter::-webkit-scrollbar { display: none; }
  .mel-filter a { padding: 7px 12px; font-size: 14px; white-space: nowrap; flex: none; }
  .mel-big .mel-title { font-size: 19px; }
}
@media print { .mel-player, .mel-filter, .mel audio { display: none; } }