/* ═══════════════════════════════════════════════════════════════════════════
   public-view.css — Sprint 3: вкладка PUBLIC в правой панели.

   Fix-pack 1 (2026-10-20):
     • Убран двойной top-padding → sub-tabs вплотную к top-level view-tabs,
       в тон .src-tab из MyExplorer.
     • Высота плашки ~45% меньше (aspect 16:9, нет внешнего .pt-meta).
     • Текст плашки — overlay поверх cover с scrim-градиентом для читаемости.
     • Fallback-обложки — не CSS, а картинки /assets/covers/cover_mood-*.png
       (пикаются в JS по hash от id). Этот файл не задаёт сами обложки,
       только оверлей/скрим поверх <img class="pt-cover-img">.
     • .public-tracks теперь скроллится вертикально.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Контейнер view — не плодим двойной отступ поверх .view-pane.gap=12 ──── */

.view-pane[data-view="public"]{
  padding: 0;
}
.public-view{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;        /* нужно для flex-item с внутренним overflow */
  gap: 10px;
  padding: 0 2px;       /* почти ноль — view-pane.gap даёт достаточно */
}


/* ── Sub-tabs SETS | MOODS — паттерн как .src-tab из MyExplorer ──────────── */

.public-subtabs{
  display: flex;
  gap: 3px;
  padding: 4px;
  border-radius: 14px;
  background: linear-gradient(135deg,rgba(30,20,60,.45),rgba(15,10,35,.55));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid #2a2148;
  flex-shrink: 0;
}
.public-subtab{
  flex: 1 1 50%;
  padding: 9px 8px;
  background: transparent;
  color: var(--muted, #8f83b8);
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s;
}
.public-subtab:hover:not(.active){
  color: #c9bfe8;
  background: rgba(139,66,187,.08);
}
.public-subtab.active{
  color: #f0eaff;
  border-color: #cf75f3;
  background: linear-gradient(135deg,
                              color-mix(in srgb, #cf75f3 28%, transparent),
                              color-mix(in srgb, #cf75f3 15%, transparent));
  box-shadow: 0 0 10px color-mix(in srgb, #cf75f3 30%, transparent);
}
/* Активная MOODS — другой акцент (cyan), чтобы sub-tab'ы отличались */
.public-subtab[data-subtab="moods"].active{
  border-color: #75c8f3;
  background: linear-gradient(135deg,
                              color-mix(in srgb, #75c8f3 28%, transparent),
                              color-mix(in srgb, #75c8f3 15%, transparent));
  box-shadow: 0 0 10px color-mix(in srgb, #75c8f3 30%, transparent);
}


/* ── Rails: horizontal scrollers ─────────────────────────────────────────── */

.public-rails{
  position: relative;
  flex-shrink: 0;
}
.public-rail{
  position: relative;
}
.public-rail[hidden]{ display: none !important; }

.public-rail::before,
.public-rail::after{
  content: "";
  position: absolute;
  top: 0; bottom: 8px;
  width: 20px;
  pointer-events: none;
  z-index: 1;
}
.public-rail::before{
  left: 0;
  background: linear-gradient(to right, rgba(10,6,24,.95), rgba(10,6,24,0));
}
.public-rail::after{
  right: 0;
  background: linear-gradient(to left,  rgba(10,6,24,.95), rgba(10,6,24,0));
}

.public-rail-track{
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 2px 2px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* wheel-handler в JS даёт горизонтальный скролл колесом мыши */
}
.public-rail-track::-webkit-scrollbar{ display: none; }


/* ── Тайл: cover 16:9 с overlay-текстом (без внешнего .pt-meta) ──────────── */

.public-tile{
  flex: 0 0 auto;
  width: 200px;              /* чуть шире для баланса низкой высоты */
  aspect-ratio: 16 / 9;      /* ~ -45% к прежней высоте 9:7+meta */
  background: #1a1237;
  border: 1px solid #21173e;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  position: relative;
  transition: border-color .15s, box-shadow .2s, transform .15s;
}
.public-tile:hover{ border-color:#7d5eb8; transform: translateY(-1px); }
.public-tile.active{
  border-color: #ffffff;
  box-shadow:
    0 0 0 1px #cf75f3,
    0 0 20px rgba(207,117,243,.45);
}

/* Cover занимает всю плашку */
.public-tile .pt-cover{
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.public-tile .pt-cover-img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Scrim — градиент от прозрачного вверху к плотному внизу,
   делает читаемым белый текст поверх ЛЮБОЙ обложки.
   Градиент тянется только снизу (чтобы cover наверху оставался виден). */
.public-tile .pt-scrim{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 72%;
  background: linear-gradient(to top,
                              rgba(10,6,24,.95) 0%,
                              rgba(10,6,24,.72) 30%,
                              rgba(10,6,24,.35) 65%,
                              rgba(10,6,24,0)    100%);
  pointer-events: none;
}

.public-tile .pt-overlay{
  position: absolute;
  left: 10px; right: 10px; bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;        /* клик уходит в .public-tile, не блокируется */
  z-index: 1;
}
.public-tile .pt-name{
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 0 10px rgba(0,0,0,.4);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.public-tile .pt-author{
  font-size: 10.5px;
  color: #e0d4ff;
  text-shadow: 0 1px 3px rgba(0,0,0,.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .95;
}


/* ── Rail: skeleton / loader / error / empty ─────────────────────────────── */

.public-tile.public-tile--skel,
.public-tile.public-tile--loader{
  background: linear-gradient(90deg, #1a1237 0%, #221a44 50%, #1a1237 100%);
  background-size: 300% 100%;
  animation: pt-skel 1.4s linear infinite;
  cursor: default;
  width: 200px;
  aspect-ratio: 16/9;
}
.public-tile.public-tile--loader{
  width: 80px;
}
.public-tile.public-tile--skel .pt-scrim,
.public-tile.public-tile--skel .pt-overlay,
.public-tile.public-tile--loader .pt-scrim,
.public-tile.public-tile--loader .pt-overlay{ display: none; }

@keyframes pt-skel{
  0%   { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}

.public-rail-empty,
.public-rail-error{
  padding: 18px 16px;
  color: #a89bd0;
  font-size: 12px;
  text-align: center;
  width: 100%;
}
.public-rail-error{ color: #e68a9f; }


/* ── Tracks: ВЕРТИКАЛЬНЫЙ скролл ─────────────────────────────────────────── */

.public-tracks{
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;        /* место под scrollbar чтобы не прыгали карточки */
  scrollbar-width: thin;
  scrollbar-color: #4a3980 transparent;
}
.public-tracks::-webkit-scrollbar{ width: 6px; }
.public-tracks::-webkit-scrollbar-thumb{
  background: #4a3980; border-radius: 3px;
}
.public-tracks::-webkit-scrollbar-track{ background: transparent; }

/* Shadow-строка: D3 — название видно (opacity .35), lock-иконка справа */
.src-card.src-card--locked{
  opacity: .35;
  cursor: pointer;
  filter: grayscale(.5);
}
.src-card.src-card--locked:hover{
  opacity: .55;
  border-color: #cf75f3;
  background: rgba(141,66,187,.12);
}
.src-card-lock{
  margin-left: 6px;
  vertical-align: -2px;
  color: #cf75f3;
}

/* CTA-плашка «ещё N треков — войди» */
.public-tracks-locked-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(90,63,184,.18), rgba(141,66,187,.22));
  color: #e6ddff;
  border: 1px dashed #7d5eb8;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.public-tracks-locked-row:hover{
  background: linear-gradient(135deg, rgba(90,63,184,.28), rgba(141,66,187,.32));
  border-color: #cf75f3;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(207,117,243,.3);
}
.public-tracks-locked-row svg{
  flex-shrink: 0;
  color: #cf75f3;
}

.public-tracks-more-skel{
  height: 60px;
  margin-top: 7px;
  border-radius: 12px;
  background: linear-gradient(90deg,#1a1237 0%, #221a44 50%, #1a1237 100%);
  background-size: 300% 100%;
  animation: pt-skel 1.4s linear infinite;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────────────────── */
/* Mobile — тот же вертикальный layout (D6), меньшие тайлы                    */
/* ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px){
  .public-view{
    gap: 8px;
    padding: 0;
  }
  .public-subtab{
    padding: 8px 6px;
    font-size: 11px;
    letter-spacing: 0.6px;
  }
  .public-tile{
    width: 170px;
  }
  .public-tile .pt-name{ font-size: 12px; }
  .public-tile .pt-author{ font-size: 10px; }
  .public-tracks-locked-row{
    padding: 11px 12px;
    font-size: 12px;
  }
}

@media (max-width: 560px){
  .public-tile{ width: 150px; }
}