/* Unified Spacing System for JewbileeTV */
/* CSS Custom Properties for consistent spacing across all layers */
/* All values use viewport-relative units (vw) for proportional scaling */
/* Reference: 1920px width = 100vw, so 1px = 0.05208vw */

:root {
  /* Spacing Scale (proportional to viewport width) */
  --spacing-xs: 0.208vw;   /* 4px at 1920px */
  --spacing-sm: 0.417vw;   /* 8px at 1920px */
  --spacing-md: 0.833vw;   /* 16px at 1920px */
  --spacing-lg: 1.25vw;    /* 24px at 1920px */
  --spacing-xl: 1.667vw;   /* 32px at 1920px */
  --spacing-xxl: 2.5vw;    /* 48px at 1920px */
  
  /* Gutter (horizontal padding) */
  --gutter: 3.125vw;       /* 60px at 1920px */
  
  /* Layer Heights */
  --navbar-top-offset: 1.481vh;  /* 16px at 1080p */
  --navbar-height: 8.889vh;      /* 96px at 1080p (larger for better visibility) */
  --navbar-bottom: 11.851vh;     /* 1.481vh * 2 + 8.889vh = 128px at 1080p */
  --component-height: 11.111vh;  /* 120px at 1080p */
  --component-bottom: 22.962vh;  /* 11.851vh + 11.111vh = 248px at 1080p */
  --thumbnails-height: 35.44vh;  /* card-height-channel * 1.5 + gutter + 7.407vh */
  
  /* Card Spacing */
  --card-gap: 0.833vw;           /* 16px at 1920px */
  --card-gap-channel: 1.667vw;   /* 32px at 1920px */
  --card-border-radius: 4px;
  
  /* Thumbnail Row Layout - Channel (4.5 cards visible, 25% smaller with larger gaps, +10% size) */
  /* Left gutter only - thumbnails bleed to right edge */
  --channel-cards-per-row: 4.5;
  --card-width-channel: 16.69vw;   /* (100vw - 3.125vw - 5.8345vw) / 4.5 * 0.75 * 1.1 = 320px at 1920px */
  --card-height-channel: 16.69vw;  /* Same as width (square) */
  
  /* Card Dimensions - Video (3.5 cards visible, +10% size) - HOME SCREEN */
  /* Left gutter only - thumbnails bleed to right edge */
  --video-cards-per-row: 3.5;
  --card-width-video: 29.79vw;   /* (100vw - 3.125vw - 2.0825vw) / 3.5 * 1.1 = 572px at 1920px */
  --card-height-video: 16.76vw;  /* 29.79vw * 9/16 = 322px at 1920px (16:9 aspect ratio) */
  
  /* Card Dimensions - Video on CHANNEL SCREEN (5.25 cards visible) */
  /* Scaled down to show more content: 5.25 cards across, 1.25 rows visible */
  /* Formula: 100vw = gutter + 5*(width+gap) + 0.25*width => width = (100-3.125-5*1.667)/5.25 = 16.86vw */
  --video-cards-per-row-channel: 5.25;
  --card-width-video-channel: 16.86vw;   /* (100vw - 3.125vw - 5*1.667vw) / 5.25 = 324px at 1920px */
  --card-height-video-channel: 9.48vw;   /* 16.86vw * 9/16 = 182px at 1920px (16:9 aspect ratio) */
  
  /* Default Card Dimensions (video) */
  --card-width: var(--card-width-video);
  --card-height: var(--card-height-video);
  
  /* Thumbnail Row Layout */
  --thumbnails-visible-cards: 3.5;
  --thumbnails-row-width: 106.85vw;  /* 3.5 * 29.79vw + 2.5 * 0.833vw = 104.265vw + 2.0825vw */
  
  /* Focus States */
  --focus-ring-color: #A8C8FF;
  --focus-ring-width: 0.156vw;   /* 3px at 1920px */
  --focus-glow-blur: 1.563vw;    /* 30px at 1920px - prominent glow */
  --focus-glow-spread: 0.521vw;  /* 10px at 1920px - glow spread radius */
  --focus-glow-color: rgba(168, 200, 255, 0.6);
  
  /* Z-Index Layers */
  --z-background: 0;
  --z-player: 10;
  --z-controls: 20;
  --z-upnext: 25;
  --z-banner: 30;
  --z-gradient: 40;
  --z-thumbnails: 60;
  --z-carousel: 70;
  --z-meta: 80;
  --z-component: 90;
  --z-navbar: 1000;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Hero Scroll Offset (CSS-based, no JS calculations) */
  /* Formula: navbar-height - (hero-height * 0.9) + adjustment */
  /* At 1920px: 96px - (1080px * 0.9) + 150px = 96 - 972 + 150 = -726px = -37.8125vw */
  --hero-offset-adjustment: 7.8125vw;  /* 150px at 1920px */
  --content-offset-y: 0;  /* Default: no offset */
  
  /* Colors */
  --color-background: #1A1C1E;
  --color-surface: #1C1B1F;
  --color-text-primary: #E3E2E6;
  --color-text-secondary: rgba(255, 255, 255, 0.7);
  --color-border: rgba(255, 255, 255, 0.2);
}

/* Row navigation - CSS variable set by JS (index only, no pixel calculations) */
:root {
  --thumbnails-row-index: 0;  /* Current focused row index, set by JS */
  --thumbnails-row-step: 29.66vh; /* Approximate row height (reduced spacing) */
  
  /* Card navigation - CSS variable set by JS (offset only, no pixel calculations) */
  --card-step-channel: 18.357vw;  /* 16.69vw + 1.667vw = 352px at 1920px */
  --card-step-video: 30.623vw;    /* 29.79vw + 0.833vw = 588px at 1920px */
  --card-step-video-channel: 18.527vw;  /* 16.86vw + 1.667vw = 356px at 1920px (for channel screen) */
}

/* Scroll-snap based navigation - browser handles scrolling */
/* Each layer (thumbnails, banner) uses scroll-snap independently */
/* No transform-based hero scrolling - all layers use scrollTo() via shared scroll utility */