/* Layer 9: Thumbnails Layer */
/* Theme titles and thumbnail cards (3.5 cards wide × 1.5 high) */

[data-layer="thumbnails"] {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100vh;
  z-index: var(--z-thumbnails);
  padding: 0 0 0 var(--gutter);  /* Left margin only - thumbnails bleed to top/right/bottom edges */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  /* Scroll-snap disabled initially to prevent auto-snap on page load */
  /* Enabled via .scroll-snap-enabled class after first navigation */
  scroll-padding-top: 14vh;
}

/* Enable scroll-snap only after first navigation (class added by JS) */
/* Using 'proximity' instead of 'mandatory' to allow smooth scroll animation */
[data-layer="thumbnails"].scroll-snap-enabled {
  scroll-snap-type: y proximity;
}

[data-layer="thumbnails"].align-below-component {
  /* Keep full viewport for transform-based positioning */
  /* The transform on .thumbnails-track controls vertical position */
  top: 0;
  bottom: 0;
  height: 100vh;
}

[data-layer="thumbnails"].align-to-component-bottom {
  top: var(--component-bottom);
  bottom: 0;
  padding-top: 18.519vh; /* 200px at 1080p */
}

/* Search and Channels screens: thumbnails align below component with same margin as navbar-to-component spacing */
/* 4.444vh = 48px at 1080p, matching the top padding of the component layer */
[data-layer="thumbnails"][data-screen="search"].align-to-component-bottom,
[data-layer="thumbnails"][data-screen="channels"].align-to-component-bottom {
  padding-top: 4.444vh;
}

/* Search and Channels screens: reset track padding since we're not using the 85vh bottom-aligned layout */
[data-layer="thumbnails"][data-screen="search"] .thumbnails-track,
[data-layer="thumbnails"][data-screen="channels"] .thumbnails-track {
  padding-top: 0;
}

/* Search and Channels screens: container must expand to fit track content for scrolling to work */
[data-layer="thumbnails"][data-screen="search"] .thumbnails-container,
[data-layer="thumbnails"][data-screen="channels"] .thumbnails-container {
  height: auto;
  overflow: visible;
}

[data-layer="thumbnails"].align-viewport-bottom-15 {
  /* Full viewport container */
  top: 0;
  bottom: 0;
  height: 100vh;
  padding-left: var(--gutter);
}

/* Scroll-snap mode: container must expand to fit track content for scrolling to work */
[data-layer="thumbnails"].align-viewport-bottom-15 .thumbnails-container {
  height: auto;
  overflow: visible;
}

/* Default for scroll-snap mode: thumbnails start at 85vh (bottom 15% of viewport) */
/* This applies to home, shows, and any future screens using align-viewport-bottom-15 */
[data-layer="thumbnails"].align-viewport-bottom-15 .thumbnails-track {
  padding-top: 85vh;
}

/* Channel detail screen: thumbnails start at 55vh (bottom 45% of viewport) */
/* Shows ~1.5 rows of video thumbnails so less of second playlist is visible */
[data-layer="thumbnails"].align-viewport-bottom-45 {
  /* Full viewport container */
  top: 0;
  bottom: 0;
  height: 100vh;
  padding-left: var(--gutter);
}

[data-layer="thumbnails"].align-viewport-bottom-45 .thumbnails-container {
  height: auto;
  overflow: visible;
}

[data-layer="thumbnails"].align-viewport-bottom-45 .thumbnails-track {
  padding-top: 50vh;
}

/* Abstract single-row bottom alignment - pins content to bottom with margin */
/* Used when there's only one playlist/row and no need for "more..." peek affordance */
/* Uses absolute positioning to pin row to bottom margin */
[data-layer="thumbnails"].align-single-row-bottom {
  position: fixed;
  inset: 0;
  padding-left: var(--gutter);
}

[data-layer="thumbnails"].align-single-row-bottom .thumbnails-container {
  position: absolute;
  left: var(--gutter);
  right: 0;
  bottom: var(--gutter);
  height: auto;
}

[data-layer="thumbnails"].align-single-row-bottom .thumbnails-track {
  padding-top: 0;
}

[data-layer="thumbnails"].align-single-row-bottom .thumbnails-row {
  padding-bottom: 0;
}

/* Channel detail screen: uses align-viewport-bottom-45 for multiple playlist rows */
/* Show detail screen and single-playlist channels: use align-single-row-bottom for bottom-pinned layout */

/* Channel and show screens: smaller video cards (5.25 visible across, 1.25 rows visible) */
/* Set width only - height is auto to accommodate video-info below thumbnail */
[data-layer="thumbnails"][data-screen="channel"] .thumbnail-card,
[data-layer="thumbnails"][data-screen="show"] .thumbnail-card {
  width: var(--card-width-video-channel);
  height: auto;
}

/* Video thumbnail container uses aspect-ratio to maintain 16:9 proportions */
[data-layer="thumbnails"][data-screen="channel"] .video-thumbnail-container,
[data-layer="thumbnails"][data-screen="show"] .video-thumbnail-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Channel and show screens: reduce video-info padding for tighter row spacing */
[data-layer="thumbnails"][data-screen="channel"] .video-info,
[data-layer="thumbnails"][data-screen="show"] .video-info {
  padding-bottom: 0.5vh;
}

/* Channel and show screens: tighter track gap between sections */
[data-layer="thumbnails"][data-screen="channel"] .thumbnails-track,
[data-layer="thumbnails"][data-screen="show"] .thumbnails-track {
  gap: 1vh;
}

/* Channel and show screens: minimal section margin */
[data-layer="thumbnails"][data-screen="channel"] .thumbnails-section,
[data-layer="thumbnails"][data-screen="show"] .thumbnails-section {
  margin-bottom: 0.5vh;
}

/* Single-row bottom alignment: remove section margin to align visible content to bottom margin */
[data-layer="thumbnails"][data-screen="channel"].align-single-row-bottom .thumbnails-section,
[data-layer="thumbnails"][data-screen="show"].align-single-row-bottom .thumbnails-section {
  margin-bottom: 0;
}

.thumbnails-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.thumbnails-track {
  position: relative;
  /* padding-top is set per-screen (home: 85vh, channel: 60vh, search: 0) */
  display: flex;
  flex-direction: column;
  gap: 4vh;  /* ~43px at 1080p - reduced for tighter row spacing */
}

/* Per-row transforms for thumbnails-track are defined in spacing.css */
/* This keeps all scroll-related transforms in one place */

.thumbnails-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  scroll-snap-align: start;
  /* Extra bottom margin to accommodate video-info (title + stats) below thumbnail */
  margin-bottom: 3vh;  /* Reduced for tighter row spacing */
  /* Let browser skip rendering of offscreen sections to reduce DOM paint cost */
  content-visibility: auto;
  contain-intrinsic-size: auto 40vh;
}

.thumbnails-theme-title {
  font-size: 1.77vw;       /* 34px at 1920px (2x) */
  font-weight: 300;        /* Reduced from 400 - lighter stroke weight */
  color: var(--color-text-secondary);
  margin: 0;
  margin-bottom: 0;        /* No gap between title and thumbnails */
  height: 5.185vh;         /* 56px at 1080p */
  line-height: 5.185vh;    /* 56px at 1080p */
  transition: font-size var(--transition-fast), color var(--transition-fast);
  /* Force consistent font rendering across all sections regardless of sibling transforms */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.thumbnails-section.focused .thumbnails-theme-title {
  font-size: 2.916vw;      /* 56px at 1920px (2x) */
  font-weight: 400;        /* Slightly heavier when focused, but still lighter than before */
  color: var(--color-text-primary);
}

.thumbnails-row {
  display: flex;
  gap: var(--card-gap-channel);
  overflow: visible;
  padding: var(--spacing-md) 0;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  /* CSS-based horizontal navigation: JS sets --card-translate-x directly */
  --card-translate-x: 0;  /* Default: no offset, set by JS as computed pixel/vw value */
  transform: translateX(var(--card-translate-x));
  /* Ensure row content (including duration badges) paints above section titles */
  position: relative;
  z-index: 1;
}

.thumbnails-row::-webkit-scrollbar {
  display: none;
}

.thumbnail-card {
  flex-shrink: 0;
  width: var(--card-width);
  height: var(--card-height);
  border-radius: var(--card-border-radius);
  overflow: visible;
  position: relative;
  cursor: pointer;
}

.thumbnail-card.focused {
  outline: none;
  z-index: 10;
}

/* Video cards: apply glow to thumbnail container only, not the entire card (which includes title/stats) */
.thumbnail-card.video-card.focused {
  box-shadow: none;
}

.thumbnail-card.video-card.focused .video-thumbnail-container {
  box-shadow: 0 0 var(--focus-glow-blur) var(--focus-glow-spread) var(--focus-glow-color);
}

/* Non-video cards (e.g., playlist cards without .circular class): apply glow to entire card */
.thumbnail-card:not(.video-card):not(.circular).focused {
  box-shadow: 0 0 var(--focus-glow-blur) var(--focus-glow-spread) var(--focus-glow-color);
}

.thumbnail-card.circular {
  width: var(--card-width-channel);
  height: var(--card-height-channel);
  border-radius: 50%;
}

.thumbnail-card.circular.focused {
  border-radius: 50%;
  outline: none;
  box-shadow: 0 0 var(--focus-glow-blur) var(--focus-glow-spread) var(--focus-glow-color);
}

/* Suppress browser native :focus outline for circular thumbnails - we manage focus visuals via .focused class */
.thumbnail-card.circular:focus {
  outline: none;
}

/* Prevent text selection artifacts on channel titles during focus changes */
.thumbnail-card.circular {
  user-select: none;
  -webkit-user-select: none;
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbnail-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-sm);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
}

.thumbnail-title {
  font-size: 1.458vw; /* 28px at 1920px (2x) */
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.thumbnail-entity-title {
  position: absolute;
  bottom: -2.916vw; /* -1.25vw - 1.666vw = -56px at 1920px (2x) */
  left: 0;
  right: 0;
  font-size: 1.458vw; /* 28px at 1920px (2x) */
  font-weight: 400;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.channel-row-item-image-container {
  position: relative;
  width: var(--card-width-channel);
  height: var(--card-height-channel);
  border-radius: 50%;
  overflow: hidden;
  background: #2a2a2a;
}

.channel-row-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.channel-row-item-title {
  margin-top: var(--spacing-sm);
  font-size: 1.458vw; /* 28px at 1920px (2x) */
  font-weight: 400;
  color: var(--color-text-secondary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: var(--card-width-channel);
  /* Ensure title is always visible, not just on focus */
  opacity: 1;
  visibility: visible;
}

.video-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.video-card {
  border-radius: 4px;
  overflow: hidden;
}

/* 5-wide grid layout for channels mode on search and channels screens */
[data-layer="thumbnails"][data-mode="channels"][data-screen="search"] .thumbnails-row,
[data-layer="thumbnails"][data-mode="channels"][data-screen="channels"] .thumbnails-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: var(--card-gap-channel);
  /* Increased row-gap to allow both: hiding previous row labels AND preserving original spacing */
  /* Original was var(--spacing-xl) = 1.667vw. Increased to 3.8vw to add ~33px at 1080p */
  row-gap: 3.8vw;
  overflow: visible;
  transform: none !important; /* Disable horizontal sliding in grid mode */
}

/* Hide section heading on search screen */
[data-layer="thumbnails"][data-screen="search"] .thumbnails-theme-title {
  display: none;
}

/* Center channel cards in grid cells on search and channels screens */
[data-layer="thumbnails"][data-mode="channels"][data-screen="search"] .thumbnails-row a,
[data-layer="thumbnails"][data-mode="channels"][data-screen="channels"] .thumbnails-row a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Allow circular cards to grow taller on search and channels screens to show title below image */
[data-layer="thumbnails"][data-mode="channels"][data-screen="search"] .thumbnail-card.circular,
[data-layer="thumbnails"][data-mode="channels"][data-screen="channels"] .thumbnail-card.circular {
  height: auto;
  border-radius: 0;
}

/* Suppress browser native :focus outline - we manage focus visuals via .focused class */
[data-layer="thumbnails"][data-mode="channels"][data-screen="search"] .thumbnail-card.circular:focus,
[data-layer="thumbnails"][data-mode="channels"][data-screen="channels"] .thumbnail-card.circular:focus {
  outline: none;
}

/* Move focus ring to image container on search and channels screens */
/* Cancel card-level focus glow so only the circular icon container has the glow */
[data-layer="thumbnails"][data-mode="channels"][data-screen="search"] .thumbnail-card.circular.focused,
[data-layer="thumbnails"][data-mode="channels"][data-screen="channels"] .thumbnail-card.circular.focused {
  outline: none;
  box-shadow: none;
}

[data-layer="thumbnails"][data-mode="channels"][data-screen="search"] .thumbnail-card.circular.focused .channel-row-item-image-container,
[data-layer="thumbnails"][data-mode="channels"][data-screen="channels"] .thumbnail-card.circular.focused .channel-row-item-image-container {
  outline: none;
  box-shadow: 0 0 var(--focus-glow-blur) var(--focus-glow-spread) var(--focus-glow-color);
}

/* Ensure channel images maintain proper sizing in grid on search and channels screens */
[data-layer="thumbnails"][data-mode="channels"][data-screen="search"] .channel-row-item-image-container,
[data-layer="thumbnails"][data-mode="channels"][data-screen="channels"] .channel-row-item-image-container {
  width: var(--card-width-channel);
  height: var(--card-height-channel);
  flex-shrink: 0;
}

/* RTL support: swap left margin/padding to right for Hebrew mode */
[dir="rtl"] [data-layer="thumbnails"] {
  padding: 0 var(--gutter) 0 0;  /* Right margin instead of left */
}

[dir="rtl"] [data-layer="thumbnails"].align-viewport-bottom-15 {
  padding-left: 0;
  padding-right: var(--gutter);
}

[dir="rtl"] [data-layer="thumbnails"].align-viewport-bottom-45 {
  padding-left: 0;
  padding-right: var(--gutter);
}

[dir="rtl"] [data-layer="thumbnails"].align-single-row-bottom {
  padding-left: 0;
  padding-right: var(--gutter);
}

[dir="rtl"] [data-layer="thumbnails"].align-single-row-bottom .thumbnails-container {
  left: 0;
  right: var(--gutter);
}

/* Non-blocking image loading states */
/* Images fade in when loaded - no opacity:0 default to avoid invisible images if load event fails */

.thumbnail-loaded {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.thumbnail-error {
  opacity: 0.3;
  filter: grayscale(100%);
}

/* Progressive loading placeholder states for channel cards */
/* Shows channel name immediately with animated placeholder for avatar */

.channel-row-item-image-container.loading {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Fade in avatar when loaded during progressive loading */
.channel-row-item-image-container .channel-row-item-image {
  transition: opacity 0.3s ease-in-out;
}

.channel-row-item-image-container.loading .channel-row-item-image {
  opacity: 0;
}

.channel-row-item-image-container.loaded .channel-row-item-image {
  opacity: 1;
}

/* Pause animations and transitions on offscreen / hidden thumbnail sections
   to avoid ~240 simultaneous CSS animations at boot */
.thumbnails-section:not(.visible) img,
.thumbnails-section[style*="display: none"] img {
  animation: none !important;
  transition: none !important;
}

.thumbnails-section:not(.visible) .channel-row-item-image-container,
.thumbnails-section[style*="display: none"] .channel-row-item-image-container {
  animation: none !important;
  transition: none !important;
}

/* Horizontal virtualization: skip layout/paint for cards beyond the visible viewport */
.thumbnails-row > a:nth-child(n+6) {
  content-visibility: auto;
  contain-intrinsic-size: 200px 280px;
}

/* Skeleton loading placeholders */
.skeleton-card {
  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

.skeleton-section-title {
  width: 150px;
  height: 24px;
  background: #2a2a2a;
  border-radius: 4px;
  margin-bottom: 12px;
}

/* Content status badges */
.content-badge {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  padding: 2px 8px;
  background: #E50914;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  border-radius: 2px;
  z-index: 1;
  pointer-events: none;
}