/* Watchlist-page-only additions. The card grid reuses .vod-grid / .vod-card
   / .watchlist-toggle / .empty-state / .skeleton-card as-is (all unscoped
   base rules from style.css, already loaded on this page), so this file only
   adds what's genuinely new: the hero, the source badge, and the count line.
   This site only has one video source (the main YouTube channel), so
   .wl-source-badge--vod exists but is never actually rendered by
   js/watchlist.js — kept only because .wl-source-badge itself is still
   needed for the Short vs. regular-video distinction. Deliberately its own
   file rather than reaching into youtube.css's #yt-grid-scoped
   .yt-card-meta/.yt-card-views — those selectors require an #yt-grid
   ancestor this page doesn't have, so meta-row styling gets its own
   wl-prefixed near-duplicate here. */

/* ---------- Hero ---------- */
.wl-hero {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: center;
  text-align: left;
  max-width: 820px;
  margin: 10px auto 10px;
  padding: 30px 34px;
}
.wl-hero-icon {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--paper);
  border: 4px solid #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd35e;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.wl-hero-icon svg { width: 34px; height: 34px; }
.wl-hero:hover .wl-hero-icon { transform: rotate(-8deg) scale(1.06); }
.wl-hero-text h1 { margin: 0 0 6px; font-size: clamp(1.8rem, 5vw, 2.4rem); }
.wl-hero-text p { margin: 0; line-height: 1.55; color: var(--text-dark); }

@media (max-width: 700px) {
  .wl-hero { padding: 24px 20px; gap: 16px; justify-content: center; text-align: center; }
  .wl-hero-text { text-align: center; }
  .wl-hero-icon { width: 64px; height: 64px; }
  .wl-hero-icon svg { width: 28px; height: 28px; }
  .wl-hero-tape { display: none; }
}

/* ---------- Section heading + count ----------
   .yt-section-title is a bare, unscoped class already loaded via youtube.css
   and reused across pages (vods/index.html uses it for both its section
   headings), so it's reused here as-is rather than duplicated. */
.wl-count {
  text-align: center;
  color: #fff;
  opacity: 0.85;
  font-size: 0.92rem;
  margin: -14px 0 24px;
}

/* ---------- Source badges ----------
   Sits opposite the watchlist star (top-left vs. top-right), same fixed
   rgba-on-dark treatment as .watchlist-toggle/.vod-duration-badge/
   .yt-short-badge for the reason documented on those: needs to stay legible
   against an arbitrary bright thumbnail in both themes, so it deliberately
   does NOT use the --paper-accent/--text-dark tokens that flip with theme. */
.wl-source-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.wl-source-badge svg { flex-shrink: 0; }
.wl-source-badge--vod { background: rgba(29, 69, 104, 0.9); }
.wl-source-badge--youtube { background: rgba(192, 57, 43, 0.9); }
.wl-source-badge--short { background: rgba(0, 0, 0, 0.68); }

/* ---------- Card meta row ----------
   Own wl-prefixed classes -- see header comment for why this can't reuse
   youtube.css's #yt-grid-scoped versions. */
.wl-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 10px;
  margin-top: auto;
}
.wl-card-meta .vod-date { margin-top: 0; }
.wl-card-views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.wl-card-views svg { flex-shrink: 0; opacity: 0.8; }

/* ---------- Watched/unwatched grouping (signed-in visitors only) ----------
   .yt-section-title itself already reads white-on-mat correctly here (same
   context .wl-count uses it in) -- no override needed the way watch.css
   needs one for its cream-card context. */
.wl-group-title { margin: 36px 0 18px; text-align: center; }
.wl-group-title:first-child { margin-top: 0; }
.wl-watched-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  background: rgba(60, 122, 75, 0.9);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.wl-watched-badge svg { flex-shrink: 0; }

/* ---------- Empty state ----------
   .empty-state itself is a bare, unscoped rule from style.css (white text on
   the mat); only the link styling and icon are new here. Scoped to #wl-grid
   so it doesn't leak onto other pages that also load this file (none do
   today, but keeps the rule honest). */
#wl-grid .empty-state a { color: #fff; font-weight: bold; text-decoration: underline; }
#wl-grid .empty-state a:hover { opacity: 0.85; }
.wl-empty-icon { color: rgba(255, 255, 255, 0.5); margin-bottom: 12px; }