/* 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 screen: 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 {
  padding-top: 4.444vh;
}

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

/* Search screen: container must expand to fit track content for scrolling to work */
[data-layer="thumbnails"][data-screen="search"] .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 45vh (bottom 55% of viewport) */
/* Shows ~2 rows of video thumbnails so half 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: 45vh;
}

/* Channel/show detail screens: use same bottom-15 positioning as home screen */
/* Removed 55vh override - now inherits default 85vh from align-viewport-bottom-15 */

/* Show screen: single playlist row aligned to bottom of viewport */
/* Uses calculated padding-top to position the single row at the bottom with proper margin */
/* Formula: 100vh - row-height - bottom-margin - section-title-height */
/* Row height for show screen: card-height-video-channel (9.48vw) + video-info (5vh) = ~14.5vw */
/* Note: Using smaller card size (--card-height-video-channel) not --thumbnails-row-step */
[data-layer="thumbnails"][data-screen="show"] .thumbnails-track {
  /* Position row so bottom aligns with bottom margin */
  /* 100vh - ~25vh (row with video-info) - 5.185vh (title) - 5vh (bottom margin) = ~65vh */
  padding-top: 65vh !important;
}

/* Add bottom margin on show screen for proper spacing */
[data-layer="thumbnails"][data-screen="show"] .thumbnails-section {
  margin-bottom: 5vh;
}

/* 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: 1.5vh;
}

.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 */
}

.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: 1.5vh;    /* Extra space above avatar/thumbnail row */
  height: 5.185vh;         /* 56px at 1080p */
  line-height: 5.185vh;    /* 56px at 1080p */
  transition: font-size var(--transition-fast), color var(--transition-fast);
}

.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;
  box-shadow: 0 0 var(--focus-glow-blur) var(--focus-glow-spread) var(--focus-glow-color);
  z-index: 10;
}

.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 {
  width: var(--card-width-channel);
  height: var(--card-height-channel);
  border-radius: 50%;
  overflow: hidden;
}

.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 and channels screens */
[data-layer="thumbnails"][data-screen="search"] .thumbnails-theme-title,
[data-layer="thumbnails"][data-screen="channels"] .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;
}