/* =====================================================================
   PLAYLISTS HUB (playlists.html / js/playlists.js)
   Page chrome only — the cards reuse .rich-card / .rich-grid from
   css/explore.css. Hero + search + horizontal carousels + section heads.
   ===================================================================== */

.pl-wrap { padding-top: var(--space-6); padding-bottom: var(--space-16); }

/* ---- Hero + search ---- */
.pl-hero { max-width: 820px; margin: 0 auto var(--space-8); text-align: center; }
.pl-hero__eyebrow {
  font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-3);
}
.pl-hero__title {
  font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: var(--font-extrabold, 800);
  line-height: 1.08; color: var(--text-bright); margin: 0 0 var(--space-3);
  letter-spacing: -0.02em;
}
.pl-hero__sub {
  font-size: var(--text-base); color: var(--text-secondary); line-height: 1.55;
  margin: 0 auto var(--space-6); max-width: 660px;
}

.pl-search {
  position: relative; display: flex; align-items: center; max-width: 560px;
  margin: 0 auto; background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-full); padding: 0 14px; height: 52px;
  box-shadow: 0 4px 18px -12px rgba(16, 24, 40, 0.25);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pl-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-light, rgba(76,139,245,.14)); }
.pl-search__ico { flex: 0 0 auto; color: var(--text-muted); }
.pl-search input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: var(--text-base); color: var(--text-primary); padding: 0 10px; height: 100%;
  font-family: inherit;
}
.pl-search input::placeholder { color: var(--text-muted); }
.pl-search input::-webkit-search-cancel-button { display: none; }
.pl-search__clear {
  flex: 0 0 auto; border: 0; background: var(--bg-card-hover, var(--bg-elev, #eef1f8));
  color: var(--text-secondary); width: 26px; height: 26px; border-radius: 50%;
  font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pl-search__clear:hover { color: var(--text-bright); }

/* ---- Horizontal carousels (rails) ---- */
.pl-rail { margin: 0 0 var(--space-10); }
.pl-rail__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.pl-rail__title { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--text-bright); margin: 0; letter-spacing: -0.01em; }
.pl-rail__sub { font-size: var(--text-sm); color: var(--text-muted); margin: 4px 0 0; }
.pl-rail__nav { display: flex; gap: 8px; flex: 0 0 auto; }
.pl-rail__btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-color);
  background: var(--bg-card); color: var(--text-secondary); font-size: 22px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.pl-rail__btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-1px); }

.pl-rail__track {
  display: flex; gap: var(--space-4); overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  padding: 4px 2px 14px; margin: 0 -2px;
  scrollbar-width: thin;
}
.pl-rail__track::-webkit-scrollbar { height: 8px; }
.pl-rail__track::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 99px; }
.pl-rail__track::-webkit-scrollbar-track { background: transparent; }
/* Each card holds a fixed width inside the rail so the row scrolls. */
.pl-rail__track .rich-card { flex: 0 0 330px; scroll-snap-align: start; }

/* ---- Grouped catalog (grids) ---- */
.pl-section { margin: 0 0 var(--space-10); }
.pl-section__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-4); }
.pl-section__title { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--text-bright); margin: 0; }
.pl-section__count {
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--text-muted);
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 99px;
  padding: 2px 9px; min-width: 22px; text-align: center;
}
.pl-section__sub { flex: 1 1 100%; font-size: var(--text-sm); color: var(--text-muted); margin: 2px 0 0; }
/* Slightly denser grid than the dashboard's so the full catalog stays scannable. */
.pl-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }

.pl-empty { text-align: center; color: var(--text-muted); padding: 40px 0 20px; font-size: var(--text-base); }

/* ---- Mobile ---- */
@media (max-width: 768px) {
  .pl-wrap { padding-top: var(--space-4); }
  .pl-rail__nav { display: none; }            /* touch-scroll the rails on phones */
  .pl-rail__track { gap: 12px; padding-bottom: 10px; }
  .pl-rail__track .rich-card { flex: 0 0 82vw; max-width: 360px; }
  .pl-grid { grid-template-columns: 1fr; gap: 12px; }
  .pl-search { height: 48px; }
}
@media (max-width: 480px) {
  .pl-hero { margin-bottom: var(--space-6); }
  .pl-hero__sub { font-size: var(--text-sm); }
}

/* Company playlist cards: real firm logo (monogram fallback), not the generic icon */
.rich-card__art--logo { display: flex; align-items: center; justify-content: center; padding: 18px; min-height: 96px; }
.rich-card__art--logo .pl-card__logo { max-height: 56px; max-width: 80%; width: auto; object-fit: contain; }
[data-theme="dark"] .rich-card__art--logo .pl-card__logo { filter: brightness(0) invert(1); }
.rich-card__art--logo .pl-card__mono { width: 62px; height: 62px; border-radius: 16px; align-items: center; justify-content: center; font: 800 1.4rem/1 Inter, sans-serif; color: #4c5fd5; border: 1.5px solid rgba(76,95,213,.55); background: rgba(76,95,213,.06); }