/* =========================================================
   Внутренние страницы направлений: «Песни», «Via Stoica»
   (общие блоки — about.css)
   ========================================================= */
.pg-intro { gap: 14px; padding: 32px 36px 32px 28px;
  background: radial-gradient(80% 140% at 0 0, rgba(0, 149, 250, .10), transparent 60%), var(--gray-1700); }
.pg-title { font-size: 44px; line-height: 52px; font-weight: 700; color: var(--text-light); }
.pg-lead, .ab-block .pg-lead { max-width: 70ch; color: var(--gray-300); font-size: calc(17px * var(--fs-s, 1)); line-height: 28px; }
.pg-lead strong { color: var(--text-light); }
.pg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* Список песен */
.songs { display: flex; flex-direction: column; gap: 12px; }
.song { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 14px 16px; border-radius: var(--radius-m); background: var(--gray-1500); }
.song__year { font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.song__title { font-size: calc(18px * var(--fs-h, 1)); line-height: 26px; font-weight: 600; color: var(--text-light); }
.song p { margin-top: 2px; }

@media (max-width: 767.98px) {
  .pg-intro { padding: 20px 16px; }
  .pg-title { font-size: 28px; line-height: 36px; }
  .pg-actions .btn { width: 100%; }
  .song { grid-template-columns: 52px minmax(0, 1fr); }
}

.songs--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.songs--grid .song { grid-template-columns: 48px minmax(0, 1fr); padding: 12px 14px; }
.song p a { color: var(--blue-600); text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; }
@media (max-width: 767.98px) { .songs--grid { grid-template-columns: minmax(0, 1fr); } }

/* Синглы Amatuni: обложки в ряд */
.ab-grid > .ab-block--wide { grid-column: 1 / -1; }
.releases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.release { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--radius-m); background: var(--gray-1500); }
/* Карточки синглов делят общие строки (subgrid): обложка, название, подпись, кнопка и площадки
   стоят на одной линии, даже если название переносится */
@supports (grid-template-rows: subgrid) {
  .release { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 8px; align-content: start; }
  .release .release__body { display: contents; } /* приоритет выше, чем у базового .release__body ниже */
  .release__listen { align-self: start; }
}
.release__cover { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-s); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.release__body { display: flex; flex-direction: column; gap: 6px; }
.release__title { font-size: calc(17px * var(--fs-h, 1)); line-height: 24px; font-weight: 600; color: var(--text-light); }
.release__meta, .ab-block .release__meta { font-size: calc(13px * var(--fs-s, 1)); line-height: 18px; color: var(--gray-500); }
.release__listen { align-self: stretch; margin-top: 2px; }
.release__links, .ab-block .release__links { font-size: calc(12px * var(--fs-s, 1)); line-height: 18px; color: var(--gray-500); }
.release__links a { display: inline-block; padding: 6px 0; color: var(--gray-400); white-space: nowrap; }
.release__links a:hover { color: var(--link-hover); }
/* пять синглов в один ряд вплоть до 1024px; уже — по три */
@media (max-width: 1023.98px) { .releases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
  .releases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .release__links a { display: inline-block; padding: 6px 0; }
}
@media (max-width: 359.98px) { .releases { grid-template-columns: minmax(0, 1fr); } }

/* Песни на мои стихи: превью клипа слева */
.song--video { grid-template-columns: 168px minmax(0, 1fr); align-items: start; }
.song__thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-s); overflow: hidden; }
.song__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.song__thumb .latest__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; padding: 6px; border-radius: 32px; background: var(--primary-surface); color: var(--on-accent); }
.song--video .song__year { font-weight: 600; }
.song--video .btn--link { margin-top: 4px; font-size: calc(14px * var(--fs-s, 1)); }
@media (max-width: 767.98px) { .song--video { grid-template-columns: minmax(0, 1fr); } }

.ab-grid > .ab-block--full { grid-column: 1 / -1; }
.ab-block--full .songs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100.98px) { .ab-block--full .songs { grid-template-columns: minmax(0, 1fr); } }

/* Телефон: синглы компактными строками — обложка слева, название, «Слушать», площадки */
@media (max-width: 767.98px) {
  .releases { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .release { grid-row: auto; display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: none; column-gap: 12px; row-gap: 0; align-items: start; padding: 10px; }
  .release__cover { grid-column: 1; grid-row: 1; }
  .release .release__body { display: flex; flex-direction: column; gap: 4px; grid-column: 2; grid-row: 1; min-width: 0; }
  .release__listen { align-self: flex-start; padding-inline: 18px; }
  .release__links a { padding: 4px 0; }
}
/* Телефон: площадки — ровный ряд с промежутками вместо точек-разделителей */
@media (max-width: 767.98px) {
  .ab-block .release__links, .release__links { display: flex; flex-wrap: wrap; gap: 0 14px; font-size: 0; line-height: 0; }
  .release__links a { font-size: calc(12px * var(--fs-s, 1)); line-height: 18px; min-height: 32px; display: inline-flex; align-items: center; padding: 0; }
}
@media (max-width: 767.98px) and (pointer: coarse) { .release__links a { min-height: 32px; } }

@media (min-width: 768px) {
  .ab-block .release__links, .release__links { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 14px; }
}
.release__links a { min-height: 0; }
@media (pointer: coarse) { .release__links a { padding-block: 6px; min-height: 0; } }
.song__thumb { background: var(--gray-1100); }
@media (hover: hover) { .song__thumb:hover .latest__play { background: var(--primary-surface-hover); } } /* отклик цветом, без увеличения */
.song__thumb .latest__play { transition: transform .2s var(--ease); }
/* аватар канала вместо значка над заголовком */
.ch-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none;
  box-shadow: 0 0 0 3px var(--gray-1700), 0 0 0 4px var(--card-line); }
@media (max-width: 767.98px) { .ch-avatar { width: 64px; height: 64px; } }
@media (max-width: 767.98px) { .pg-title { font-size: 32px; line-height: 40px; } }

/* «Новое видео» на странице направления (разметку пишет tools/update_latest_video.py) */
.pg-video .dir__video {
  display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 10px; border-radius: var(--radius-m); background: var(--gray-1500);
  transition: background-color .2s var(--ease);
}
@media (hover: hover) { .pg-video .dir__video:hover { background: var(--gray-1100); } }
.pg-video .dir__video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-s); overflow: hidden; background: var(--gray-1100); }
.pg-video .dir__video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-video .dir__video-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; padding: 8px; border-radius: 32px; background: rgba(1, 4, 6, .6); color: #fff; }
.pg-video .dir__video-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pg-video .dir__video-label { font-size: calc(12px * var(--fs-s, 1)); line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500); }
.pg-video .dir__video-date { font-size: calc(13px * var(--fs-s, 1)); line-height: 18px; color: var(--gray-500); }
.pg-video .dir__video-title { font-size: calc(18px * var(--fs-h, 1)); line-height: 26px; font-weight: 600; color: var(--text-light); }
@media (max-width: 599.98px) { .pg-video .dir__video { grid-template-columns: minmax(0, 1fr); } }
.pg-video .dir__video { max-width: 860px; }
.pg-video .dir__video-label { display: none; } /* заголовок блока уже говорит «Новое видео» */

/* Рассказы: название трилогии над её частями в списке */
.ab-grid > .st-cycle { grid-column: 1 / -1; margin: 8px 0 -8px; font-size: calc(17px * var(--fs-h, 1)); color: var(--gray-400); font-weight: 500; }