/* Layer 7: Meta Layer */
/* Entity metadata (title, description, stats) - carousel */
/* Uses scroll-snap for vertical positioning like banner layer */

[data-layer="meta"] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-meta);
  pointer-events: none;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Hero layers do NOT use scroll-snap because the desired resting position (25vh)
   is between snap points (0 and 100vh). CSS scroll-snap would snap back to 0.
   Instead, hero layers use the shared scrollTo utility with fromtop coordinates. */

[data-layer="meta"]::-webkit-scrollbar {
  display: none;
}

/* Track container for scroll-snap sections */
.meta-track {
  display: flex;
  flex-direction: column;
}

/* Meta sections - each section is a scroll target with offsetTop positioning */
/* Section 0 (hero): offsetTop = 0 - meta fully visible */
/* Section 1 (under-nav): offsetTop = heroHeight - navbarHeight - meta bottom aligned with navbar */
/* Section 2 (hidden): offsetTop = 100vh - meta completely off-screen */

.meta-section {
  scroll-snap-align: start;
}

/* Hero section: Height set by JS at runtime via --hero-offset CSS variable.
   JS calculates: heroOffset = (100vh - navbarBottom) - navbarBottom.
   Hero bottom is positioned at navbarHeight from screen bottom.
   Fallback to 60vh if CSS variable not set. */
.meta-section-hero {
  height: var(--hero-offset, 60vh);
  overflow: visible;
  padding-top: 40vh;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Channel screen: position meta at same starting position as home view */
/* Uses padding-top: 25vh to align above thumbnails */
[data-layer="meta"][data-screen="channel"] .meta-section-hero {
  padding-top: 25vh;       /* Aligns above thumbnails */
  margin-top: 0;
}

/* Channel screen: smaller title with reduced stroke weight */
[data-layer="meta"][data-screen="channel"] .meta-title {
  font-size: 2.1vw;        /* ~40px at 1920px - reduced for compact meta layer */
  text-shadow: 0 0.04vw 0.15vw rgba(0, 0, 0, 0.5); /* Lighter stroke weight for channel view */
}

/* Channel screen: smaller avatar to match smaller title */
[data-layer="meta"][data-screen="channel"] .meta-avatar {
  width: 3.5vw;
  height: 3.5vw;
}

/* Channel screen: meta scrolls naturally with the banner via scroll-snap sections */
/* Removed fixed positioning to allow smooth sliding with the banner */

/* Under-nav section: spacer between hero and hidden positions */
.meta-section-under-nav {
  min-height: 40vh;
}

/* Hidden section: scrolling here hides meta completely */
.meta-section-hidden {
  min-height: 100vh;
}

.meta-container {
  max-width: 40vw;         /* ~40% viewport width for text wrapping */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs); /* 4px at 1920px - tighter spacing */
}

/* Title row with avatar and title side by side */
.meta-title-row {
  display: flex;
  align-items: center;
  gap: 0.833vw;            /* 16px at 1920px */
  margin-bottom: 1.111vh;  /* 12px at 1080p - reduced spacing */
}

/* Channel avatar - circular, larger than title for prominence */
.meta-avatar {
  width: 4vw;              /* ~77px at 1920px - larger icon */
  height: 4vw;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.meta-title {
  font-size: 2.5vw;        /* 48px at 1920px - reduced for compact meta layer */
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-text-primary);
  margin: 0;
  text-shadow: 0 0.052vw 0.208vw rgba(0, 0, 0, 0.6); /* 0 1px 4px at 1920px - reduced stroke weight */
}

.meta-stats {
  display: block;
  font-size: 1.04vw;      /* 20px at 1920px - slightly smaller than description (1.15vw/22px) */
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 1.5vh;      /* 16px at 1080p - equal spacing after title */
  text-shadow: 0.052vw 0.104vw 0.104vw rgba(0, 0, 0, 0.5); /* 1px 2px 2px at 1920px */
}

.meta-desc-row {
  margin-top: 1.5vh;      /* 16px at 1080p - equal spacing after stats */
  margin-bottom: 0;
}

.meta-description {
  display: inline;
  font-size: 1.15vw;      /* 22px at 1920px - reduced for compact meta layer */
  font-weight: 400;
  line-height: 1.45;      /* Slightly more line spacing */
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  text-shadow: 0.052vw 0.104vw 0.104vw rgba(0, 0, 0, 0.5); /* 1px 2px 2px at 1920px */
}

/* RTL support for Hebrew descriptions */
.meta-description[dir="rtl"] {
  text-align: right;
  direction: rtl;
}

/* RTL description row needs to be block-level for right alignment to work */
.meta-desc-row:has(.meta-description[dir="rtl"]) {
  display: block;
  text-align: right;
}

.meta-more-pill {
  display: none !important; /* Removed - no longer used */
}

.meta-stat {
  display: inline;
}

.meta-carousel {
  position: relative;
}

/* Single slide with CSS fade transition for smooth text updates */
.meta-slide {
  width: 100%;
  opacity: 1;
  transition: opacity var(--transition-slow);
  pointer-events: none;
}

/* Fade out during content update, then fade back in */
.meta-slide.fade-out {
  opacity: 0;
}

/* ============================================
   Screensaver Info Overlay (Time, Weather, Shabbat)
   ============================================ */

/* Screensaver info overlay - spans full width, only visible in screensaver mode */
/* Time/weather on left, Shabbat times on right */
/* Typography matches navbar: 1.666vw (32px at 1920px), font-weight 500 */
[data-layer="meta"] .shabbat-info-overlay {
  position: fixed;
  top: 5vh;
  left: var(--gutter);
  right: var(--gutter);
  z-index: calc(var(--z-meta) + 1);
  display: none;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-family);
  font-size: 1.666vw;  /* 32px at 1920px - matches navbar */
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-slow);
  text-shadow: 0.052vw 0.104vw 0.208vw rgba(0, 0, 0, 0.6);
}

/* Show overlay when visible class is added (controlled by JS via navContext staleness checks) */
[data-layer="meta"] .shabbat-info-overlay.visible {
  display: flex;
  opacity: 1;
}

/* All Shabbat info elements share the same styling */
.shabbat-parashat,
.shabbat-candle-label,
.shabbat-candle-day,
.shabbat-candle-time,
.shabbat-havdalah-label,
.shabbat-havdalah-day,
.shabbat-havdalah-time {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Separator between sections */
.shabbat-separator {
  font-size: inherit;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0.2vw;
}

/* Left and right groups for screensaver overlay */
.screensaver-info-left,
.screensaver-info-right {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6vw;
}

/* Local time display */
.screensaver-time {
  font-size: inherit;
  font-weight: 600;
  color: inherit;
}

/* Weather icon - displays color emoji */
/* Size proportional to screensaver font (1.25x) to match navbar proportions */
.screensaver-weather-icon {
  font-size: 2.083vw;  /* 40px at 1920px - 1.25x navbar font size */
  line-height: 1;
  vertical-align: middle;
  /* Color is set dynamically by JS based on weather condition */
}

/* Weather temperature */
.screensaver-weather-temp {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}