mediahive/frontend/src/components/CollageHero.vue

<template>
  <section class="collage-hero" @keydown="handleKeyDown">
    <!-- Diagonal collage grid -->
    <div class="collage-grid">
      <template v-for="(item, index) in collageItems" :key="item.id">
        <a
          :ref="(el: unknown) => setItemRef(el as HTMLElement | null, index)"
          class="collage-item"
          :class="[
            `collage-item-${index}`,
            {
              'collage-featured': index === 0,
              'collage-item-top-row': isTopRowItem(index),
              'nav-focused': focusedIndex === index,
              'collage-hidden': !isItemVisible(index),
            },
          ]"
          v-bind="getItemAttrs(index)"
          :href="getItemHref(item)"
          @click="handleItemClick($event, item)"
          @focus="focusedIndex = index"
        >
          <!-- Featured item with hexagonal clip -->
          <div v-if="index === 0" class="hex-showcase">
            <img
              v-if="getImageUrl(item)"
              :src="getImageUrl(item)!"
              :alt="item.title || 'Unknown'"
              class="hex-clip"
            />
          </div>
          <!-- SVG focus outline for big hex -->
          <svg
            v-if="index === 0"
            class="hex-focus-outline hex-focus-big"
            viewBox="0 0 130 100"
            preserveAspectRatio="none"
          >
            <polygon
              points="21.67,0 21.67,25 0,37.5 0,62.5 21.67,75 21.67,100 108.33,100 108.33,75 130,62.5 130,37.5 108.33,25 108.33,0"
            />
          </svg>
          <!-- Non-featured items: image, video, or placeholder -->
          <img
            v-if="index !== 0 && getImageUrl(item)"
            :src="getImageUrl(item)!"
            :alt="item.title || 'Unknown'"
            class="collage-media"
          />
          <video
            v-if="index !== 0 && !getImageUrl(item) && getVideoSources(item).length > 0"
            class="collage-media"
            loop
            muted
            playsinline
          >
            <source
              v-for="source in getVideoSources(item)"
              :key="source.src"
              :src="source.src"
              :type="source.type"
              :codecs="source.codecs"
            />
          </video>
          <div
            v-if="index !== 0 && !getImageUrl(item) && getVideoSources(item).length === 0"
            class="collage-placeholder"
          >
            <span class="placeholder-title">{{ item.title }}</span>
          </div>
          <div class="collage-item-overlay"></div>
          <!-- SVG focus outline for small hex items -->
          <svg
            v-if="index !== 0 && index !== 2 && !isTopRowItem(index)"
            class="hex-focus-outline hex-focus-small"
            viewBox="0 0 86.6 100"
            preserveAspectRatio="none"
          >
            <polygon points="43.3,0 86.6,25 86.6,75 43.3,100 0,75 0,25" />
          </svg>
          <!-- Item 2 uses a custom flat-bottom hex outline to match its clip-path -->
          <svg
            v-if="index === 2"
            class="hex-focus-outline hex-focus-small"
            viewBox="0 0 86.6 100"
            preserveAspectRatio="none"
          >
            <polygon points="43.3,0 86.6,33.333 86.6,100 0,100 0,33.333" />
          </svg>
          <!-- Top-row items use a custom flat-top hex outline to match their clip-path -->
          <svg
            v-if="isTopRowItem(index)"
            class="hex-focus-outline hex-focus-small"
            viewBox="0 0 86.6 100"
            preserveAspectRatio="none"
          >
            <polygon points="86.6,0 86.6,66.667 43.3,100 0,66.667 0,0" />
          </svg>
          <div class="collage-item-info" v-if="index === 0">
            <h1 class="collage-title">{{ item.title }}</h1>
            <div class="collage-meta">
              <span v-if="item.year" class="meta-year">{{ item.year }}</span>
              <span v-if="getRating(item)" class="meta-rating" :class="getRatingClass(item)">
                ★ {{ getRating(item)?.toFixed(1) }}
              </span>
              <span v-if="getResolution(item)" class="meta-quality">{{ getResolution(item) }}</span>
            </div>
            <p v-if="getOverview(item)" class="collage-overview">{{ getOverview(item) }}</p>
          </div>
          <div class="collage-item-hover" v-else>
            <span class="hover-title">{{ item.title }}</span>
            <span v-if="getRating(item)" class="hover-rating"
              >★ {{ getRating(item)?.toFixed(1) }}</span
            >
          </div>
        </a>
      </template>
    </div>
  </section>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, onUnmounted, nextTick, watch } from "vue"
import type { MediaItem, Movie, Series } from "../types"
import { getCoverUrl, getVideoPreviewUrl, getVideoSourceAttributes, isVideoPath } from "../api"
import { navAttrs } from "../composables/useKeyboardNavigation"

const focusedIndex = ref<number | null>(null)
const itemRefs = ref<(HTMLElement | null)[]>([])
// Track last row when on col=0 (big image) for sideways navigation
const lastRow = ref(1)

// Reset lastRow when entering the hero from outside (via global nav)
watch(focusedIndex, (newVal, oldVal) => {
  if (newVal === 0 && oldVal === null) {
    // Entering big image from outside hero - reset to row 1
    lastRow.value = 1
  }
})
// Track which items are visible (at least 75% in viewport)
const visibleItems = ref<Set<number>>(new Set())

function setItemRef(el: HTMLElement | null, index: number) {
  itemRefs.value[index] = el
}

// Check if element is at least 75% visible horizontally
function isElementVisible(el: HTMLElement | null): boolean {
  if (!el) return false
  const rect = el.getBoundingClientRect()
  const viewportWidth = window.innerWidth

  // Calculate how much of the element is visible
  const visibleLeft = Math.max(0, rect.left)
  const visibleRight = Math.min(viewportWidth, rect.right)
  const visibleWidth = Math.max(0, visibleRight - visibleLeft)
  const visibleRatio = visibleWidth / rect.width

  return visibleRatio >= 0.75
}

function updateVisibility() {
  const newVisible = new Set<number>()

  for (let i = 0; i < itemRefs.value.length; i++) {
    // Always include items 0, 1, 2 (big image and left side)
    if (i <= 2 || isElementVisible(itemRefs.value[i])) {
      newVisible.add(i)
    }
  }

  visibleItems.value = newVisible
}

onMounted(() => {
  window.addEventListener("resize", updateVisibility)
  document.addEventListener("focusin", handleDocumentFocusIn)
  // Initial visibility check after render
  nextTick(() => {
    updateVisibility()
  })
})

function cleanupHeroVideos() {
  // Find all video elements inside the hero and explicitly release them
  const videos = document.querySelectorAll<HTMLVideoElement>(".collage-hero video")
  videos.forEach((video) => {
    video.pause()
    video.src = ""
    video.load()
  })
}

onUnmounted(() => {
  window.removeEventListener("resize", updateVisibility)
  document.removeEventListener("focusin", handleDocumentFocusIn)
  cleanupHeroVideos()
})

function clearHeroFocus() {
  focusedIndex.value = null
}

function handleDocumentFocusIn(event: FocusEvent) {
  const target = event.target as HTMLElement | null
  if (!target?.closest(".collage-hero")) {
    clearHeroFocus()
  }
}

// Coordinate system for navigation based on actual CSS positioning:
// Visual layout (honeycomb stagger, but sequential cols for navigation):
//   top=-12.5%:    [1]      [3]   [6]   [9]  [12] [15]    <- row 0
//   top=25%:            [0]    [5]   [8]  [11] [14]       <- row 1
//   top=62.5%:    [2]      [4]   [7]  [10] [13] [16]      <- row 2
//
// Navigation columns (no gaps - sequential numbering):
// col -1: left side items (1, 2)
// col 0: big image (0)
// col 1: first right column (3, 5, 4)
// col 2: second right column (6, 8, 7)
// col 3: third right column (9, 11, 10)
// col 4: fourth right column (12, 14, 13)
// col 5: fifth right column (15, 16)

interface NavCoord {
  row: number
  col: number
}
const coordMap: Record<number, NavCoord> = {
  0: { row: 1, col: 0 }, // Big image
  // Left side (col -1)
  1: { row: 0, col: -1 }, // top left
  2: { row: 2, col: -1 }, // bottom left
  // Right side - sequential columns
  3: { row: 0, col: 1 },
  4: { row: 2, col: 1 },
  5: { row: 1, col: 1 },
  6: { row: 0, col: 2 },
  7: { row: 2, col: 2 },
  8: { row: 1, col: 2 },
  9: { row: 0, col: 3 },
  10: { row: 2, col: 3 },
  11: { row: 1, col: 3 },
  12: { row: 0, col: 4 },
  13: { row: 2, col: 4 },
  14: { row: 1, col: 4 },
  15: { row: 0, col: 5 },
  16: { row: 2, col: 5 },
  17: { row: 1, col: 5 },
  18: { row: 0, col: 6 },
  19: { row: 2, col: 6 },
  20: { row: 1, col: 6 },
  21: { row: 0, col: 7 },
  22: { row: 2, col: 7 },
  23: { row: 1, col: 7 },
  24: { row: 0, col: 8 },
  25: { row: 2, col: 8 },
  26: { row: 1, col: 8 },
}

function isTopRowItem(index: number): boolean {
  const coord = coordMap[index]
  return index !== 0 && coord?.row === 0
}

// Reverse lookup: find item index at given coordinates
function findItemAt(row: number, col: number): number | null {
  for (const [idx, coord] of Object.entries(coordMap)) {
    if (coord.row === row && coord.col === col) return parseInt(idx)
  }
  return null
}

// Find nearest item in a direction from current position
function findNext(currentIdx: number, direction: "up" | "down" | "left" | "right"): number | null {
  const current = coordMap[currentIdx]
  if (!current) return null

  // Use lastRow for big image vertical navigation
  const effectiveRow = current.col === 0 ? lastRow.value : current.row

  if (direction === "left") {
    // Moving left: decrease col
    const targetCol = current.col - 1

    if (current.col === 0) {
      // From big image, go to col -1 if it exists for the effective row
      // Row 1 has no col -1, so stay on big image (or could wrap to last item)
      const leftItem = findItemAt(effectiveRow, -1)
      if (leftItem !== null) {
        return leftItem
      }
      // Row 1 has no left item - fall back to top-left tile so left side stays reachable
      const topLeftItem = findItemAt(0, -1)
      if (topLeftItem !== null) {
        lastRow.value = 0
        return topLeftItem
      }
      // No fallback available - stay put
      return 0
    }

    if (targetCol < -1) {
      // Already at col -1, can't go further left - stay put
      return currentIdx
    }

    if (targetCol === 0) {
      // Moving to big image - remember current row
      lastRow.value = current.row
      return 0
    }
    // Find item at same row, col-1
    return findItemAt(current.row, targetCol)
  }

  if (direction === "right") {
    // Moving right: increase col
    const targetCol = current.col + 1

    if (current.col === 0) {
      // From big image, go to col 1 at remembered row
      return findItemAt(lastRow.value, 1)
    }
    if (current.col === -1) {
      // From left column, go to big image
      lastRow.value = current.row
      return 0
    }
    // Find item at same row, col+1, but only if it's visible
    const nextItem = findItemAt(current.row, targetCol)
    if (nextItem !== null && visibleItems.value.has(nextItem)) {
      return nextItem
    }
    // No more visible items to the right - stay put
    return currentIdx
  }

  // Helper to check if item at row/col is visible
  const isItemVisibleAt = (row: number, col: number) => {
    const item = findItemAt(row, col)
    return item !== null && visibleItems.value.has(item)
  }

  if (direction === "up") {
    const targetRow = effectiveRow - 1
    if (targetRow < 0) return null // Exit up

    if (current.col === 0) {
      // Big image: up/down always exits the hero section
      return null
    }

    // Check if target row item at same col is visible
    if (!isItemVisibleAt(targetRow, current.col)) {
      // Skip to row above if middle row is not visible at this column
      if (targetRow === 1 && isItemVisibleAt(0, current.col)) {
        const item = findItemAt(0, current.col)
        if (item !== null) return item
      }
      return currentIdx // Stay put
    }

    // Find item at row-1, same col (or nearest)
    let item = findItemAt(targetRow, current.col)
    if (item !== null) return item
    // Try to find nearest col in target row
    for (let c = current.col; c >= -1; c--) {
      item = findItemAt(targetRow, c)
      if (item !== null && isItemVisibleAt(targetRow, c)) return item
    }
    for (let c = current.col + 1; c <= 10; c++) {
      item = findItemAt(targetRow, c)
      if (item !== null && isItemVisibleAt(targetRow, c)) return item
    }
    return null
  }

  if (direction === "down") {
    const targetRow = effectiveRow + 1
    if (targetRow > 2) return null // Exit down

    if (current.col === 0) {
      // Big image: up/down always exits the hero section
      return null
    }

    // Check if target row item at same col is visible
    if (!isItemVisibleAt(targetRow, current.col)) {
      // Skip to row below if middle row is not visible at this column
      if (targetRow === 1 && isItemVisibleAt(2, current.col)) {
        const item = findItemAt(2, current.col)
        if (item !== null) return item
      }
      return currentIdx // Stay put
    }

    // Find item at row+1, same col (or nearest)
    let item = findItemAt(targetRow, current.col)
    if (item !== null) return item
    // Try to find nearest col in target row
    for (let c = current.col; c >= -1; c--) {
      item = findItemAt(targetRow, c)
      if (item !== null && isItemVisibleAt(targetRow, c)) return item
    }
    for (let c = current.col + 1; c <= 10; c++) {
      item = findItemAt(targetRow, c)
      if (item !== null && isItemVisibleAt(targetRow, c)) return item
    }
    return null
  }

  return null
}

function handleKeyDown(e: KeyboardEvent) {
  // Only handle if focus is within this component
  const target = e.target as HTMLElement
  if (!target.closest(".collage-hero")) return

  const direction = {
    ArrowUp: "up",
    ArrowDown: "down",
    ArrowLeft: "left",
    ArrowRight: "right",
  }[e.key] as "up" | "down" | "left" | "right" | undefined

  if (!direction) {
    if (e.key === "Enter" && focusedIndex.value !== null) {
      const item = collageItems.value[focusedIndex.value]
      e.preventDefault()
      e.stopPropagation()
      if (item) activateItem(item)
    }
    return
  }

  const current = focusedIndex.value ?? 0
  const next = findNext(current, direction)

  if (next !== null && itemRefs.value[next]) {
    e.preventDefault()
    e.stopPropagation()
    focusedIndex.value = next
    itemRefs.value[next]?.focus({ preventScroll: true })
    return
  }

  // Navigation is leaving this section; clear local highlight and let global handler continue.
  clearHeroFocus()
  // If next is null, let event bubble to global navigation
}

// Get attributes for an item - only item 0 participates in global nav as entry point
function getItemAttrs(index: number) {
  if (index === 0) {
    // The hero always enters through the featured item when moving into row 0.
    return { ...navAttrs(0, index, 0) }
  }

  // All tiles participate in the global focus model so only one visual highlight exists
  // and Enter/gamepad A targets the currently highlighted tile.
  return { ...navAttrs(0, index) }
}

// Check if an item index should be visible based on its column and row
function isItemVisible(index: number): boolean {
  // Always show the first few items (big image and left side)
  if (index <= 2) return true
  return visibleItems.value.has(index)
}

const props = defineProps<{
  items: MediaItem[]
  featuredItem?: MediaItem | null
}>()

const emit = defineEmits<{
  select: [MediaItem]
}>()

// Max items we might ever need - use a generous constant
const maxItems = 27

// Get items for the collage based on visible columns
const collageItems = computed(() => {
  const result: MediaItem[] = []

  // Add featured item first
  if (props.featuredItem) {
    result.push(props.featuredItem)
  }

  // Add more items, avoiding duplicates, up to max needed
  for (const item of props.items) {
    if (result.length >= maxItems) break
    if (!result.find((r) => r.id === item.id)) {
      result.push(item)
    }
  }

  return result
})

function getImageUrl(item: MediaItem): string | undefined {
  const coverPath = item.cover_path
  const backdropPath =
    item.type === "movies"
      ? (item.data as Movie).backdrop_path
      : (item.data as Series).backdrop_path
  const imagePath = coverPath || backdropPath

  // Check if the path is an image (not a video)
  if (imagePath && /\.(webm|mp4|mkv|avi|mov)$/i.test(imagePath)) {
    return undefined
  }

  return getCoverUrl(imagePath, item.root_id)
}

function getVideoSources(item: MediaItem): Array<{ src: string; type: string; codecs: string }> {
  if (isVideoPath(item.cover_path)) {
    return [
      {
        src: getVideoPreviewUrl(getCoverUrl(item.cover_path, item.root_id)),
        ...getVideoSourceAttributes(item.cover_path),
      },
    ]
  }

  const showreelSourceSets = item.showreel_source_sets
  if (showreelSourceSets && showreelSourceSets.length > 0) {
    return showreelSourceSets[0]
      .filter((path) => isVideoPath(path))
      .map((path) => ({
        src: getVideoPreviewUrl(getCoverUrl(path, item.root_id)),
        ...getVideoSourceAttributes(path),
      }))
  }

  const showreel = item.showreel_images
  if (showreel && showreel.length > 0) {
    return showreel
      .filter((path) => isVideoPath(path))
      .map((path) => ({
        src: getVideoPreviewUrl(getCoverUrl(path, item.root_id)),
        ...getVideoSourceAttributes(path),
      }))
  }

  return []
}

function getRating(item: MediaItem): number | null {
  if (item.type === "movies") {
    return (item.data as Movie).info?.rating ?? null
  }
  return (item.data as Series).info?.rating ?? null
}

function getRatingClass(item: MediaItem): string {
  const rating = getRating(item)
  if (!rating) return ""
  if (rating >= 7.5) return "rating-high"
  if (rating >= 6) return "rating-medium"
  return "rating-low"
}

function getResolution(item: MediaItem): string | null {
  if (item.type === "movies") {
    const movie = item.data as Movie
    return Object.values(movie.files || {})[0]?.resolution ?? null
  }
  return null
}

function getOverview(item: MediaItem): string | null {
  const overview =
    item.type === "movies"
      ? (item.data as Movie).info?.overview
      : (item.data as Series).info?.overview
  if (!overview) return null
  return overview.length > 150 ? overview.slice(0, 150) + "..." : overview
}

function getItemHref(item: MediaItem): string {
  return `/${item.type}/${item.id}`
}

function activateItem(item: MediaItem) {
  emit("select", item)
}

function handleItemClick(event: MouseEvent, item: MediaItem) {
  // Let modified clicks navigate natively
  if (event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) {
    return
  }
  event.preventDefault()
  emit("select", item)
}
</script>

<style scoped>
.collage-hero {
  position: relative;
  height: 70vh;
  min-height: 450px;
  max-height: 600px;
  overflow: visible;
  background: var(--bg-primary);
  --h: clamp(450px, 70vh, 600px);
  --small-w: calc(0.433 * var(--h)); /* Small hex width = 0.866 * 50% of height */
  --big-edge: calc(1.0833 * var(--h)); /* Big hex right edge = 1.3 * 0.8333 * height */
}

.collage-grid {
  position: relative;
  height: 100%;
}

.collage-item {
  position: absolute;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    filter 0.3s ease,
    opacity 0.3s ease,
    visibility 0.3s ease;
  text-decoration: none;
  color: inherit;
}

/* Media (images and videos) fill the collage item */
.collage-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition:
    transform 0.3s ease,
    filter 0.3s ease,
    opacity 0.3s ease,
    visibility 0.3s ease;
}

/* Hidden items - keep in DOM for measurement but invisible */
.collage-item.collage-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

html.mouse-active .collage-item:hover,
html:not(.mouse-active) .collage-item.nav-focused {
  z-index: 10;
}

/* SVG focus outline styles */
.hex-focus-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.hex-focus-outline polygon {
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

/* Show outline on hover and focus */
html.mouse-active .collage-item:hover .hex-focus-outline,
html:not(.mouse-active) .collage-item.nav-focused .hex-focus-outline {
  opacity: 1;
}

/* Blinking animation for focus outline */
@keyframes hex-outline-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* Brighter outline for keyboard focus */
html:not(.mouse-active) .collage-item.nav-focused .hex-focus-outline polygon {
  stroke: #ffffff;
  stroke-width: 5;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
}

/* Blinking effect on hover/focus */
html.mouse-active .collage-item:hover .hex-focus-outline,
html:not(.mouse-active) .collage-item.nav-focused .hex-focus-outline {
  animation: hex-outline-blink 1s ease-in-out infinite;
}

/* Small items: slightly smaller to create gaps */
.collage-item:not(.collage-featured) {
  transform: scale(0.97);
}

/* Featured item: slightly smaller to create gaps */
.collage-featured {
  transform: scale(0.99);
}

/* Featured item - left side */
.collage-item-0 {
  left: calc(var(--small-w) * 0.5);
  top: 0;
  height: 100%;
  aspect-ratio: 1.3 / 1;
  clip-path: polygon(
    16.67% 0%,
    16.67% 25%,
    0% 37.5%,
    0% 62.5%,
    16.67% 75%,
    16.67% 100%,

    83.33% 100%,

    83.33% 75%,
    100% 62.5%,
    100% 37.5%,
    83.33% 25%,
    83.33% 0%
  );
}

/* Hexagonal showcase for featured item */
.hex-showcase {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hex-showcase .hex-clip {
  height: 100%;
  aspect-ratio: 1.3 / 1;
  object-fit: cover;
  object-position: center 30%;
  clip-path: polygon(
    16.67% 0%,
    16.67% 25%,
    0% 37.5%,
    0% 62.5%,
    16.67% 75%,
    16.67% 100%,

    83.33% 100%,

    83.33% 75%,
    100% 62.5%,
    100% 37.5%,
    83.33% 25%,
    83.33% 0%
  );
}

/* Small items: 50% height, aspect 0.866:1 (pointy-top regular hex) */
/* 3 rows with 25% overlap, shifted up 12.5% (25% of small height) */
/* Fill order: left side first (1-2), then right side nearest to big image (3+) */

.collage-item:not(.collage-featured) {
  height: 50%;
  aspect-ratio: 0.866 / 1;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* LEFT SIDE - positioned at left edge */
/* Row 1 (top) */
.collage-item-1 {
  top: -12.5%;
  left: 0;
}

/* Row 3 (bottom) */
.collage-item-2 {
  top: 62.5%;
  left: 0;
}

/* Keep top hex shape for left-bottom item, but flatten bottom edge to avoid overflow */
.collage-item.collage-item-2:not(.collage-featured) {
  height: 37.5%;
  width: var(--small-w);
  clip-path: polygon(50% 0%, 100% 33.333%, 100% 100%, 0% 100%, 0% 33.333%);
}

/* Top-row items: keep side angles but flatten top edge to avoid top overflow */
.collage-item.collage-item-top-row:not(.collage-featured) {
  top: 0;
  height: 37.5%;
  width: var(--small-w);
  clip-path: polygon(100% 0%, 100% 66.667%, 50% 100%, 0% 66.667%, 0% 0%);
}

/* RIGHT SIDE - Column 0 (closest to big image) */
/* Row 1 (top): -12.5% */
.collage-item-3 {
  top: -12.5%;
  left: calc(var(--big-edge) + var(--small-w) * 0.5);
}

/* Row 3 (bottom): 62.5% */
.collage-item-4 {
  top: 62.5%;
  left: calc(var(--big-edge) + var(--small-w) * 0.5);
}

/* Row 2 (middle): 25%, offset 0.5 */
.collage-item-5 {
  top: 25%;
  left: calc(var(--big-edge) + var(--small-w) * 1);
}

/* RIGHT SIDE - Column 1 */
.collage-item-6 {
  top: -12.5%;
  left: calc(var(--big-edge) + var(--small-w) * 1.5);
}

.collage-item-7 {
  top: 62.5%;
  left: calc(var(--big-edge) + var(--small-w) * 1.5);
}

.collage-item-8 {
  top: 25%;
  left: calc(var(--big-edge) + var(--small-w) * 2);
}

/* RIGHT SIDE - Column 2 */
.collage-item-9 {
  top: -12.5%;
  left: calc(var(--big-edge) + var(--small-w) * 2.5);
}

.collage-item-10 {
  top: 62.5%;
  left: calc(var(--big-edge) + var(--small-w) * 2.5);
}

.collage-item-11 {
  top: 25%;
  left: calc(var(--big-edge) + var(--small-w) * 3);
}

/* RIGHT SIDE - Column 3 */
.collage-item-12 {
  top: -12.5%;
  left: calc(var(--big-edge) + var(--small-w) * 3.5);
}

.collage-item-13 {
  top: 62.5%;
  left: calc(var(--big-edge) + var(--small-w) * 3.5);
}

.collage-item-14 {
  top: 25%;
  left: calc(var(--big-edge) + var(--small-w) * 4);
}

/* RIGHT SIDE - Column 4 */
.collage-item-15 {
  top: -12.5%;
  left: calc(var(--big-edge) + var(--small-w) * 4.5);
}

.collage-item-16 {
  top: 62.5%;
  left: calc(var(--big-edge) + var(--small-w) * 4.5);
}

.collage-item-17 {
  top: 25%;
  left: calc(var(--big-edge) + var(--small-w) * 5);
}

/* RIGHT SIDE - Column 5 */
.collage-item-18 {
  top: -12.5%;
  left: calc(var(--big-edge) + var(--small-w) * 5.5);
}

.collage-item-19 {
  top: 62.5%;
  left: calc(var(--big-edge) + var(--small-w) * 5.5);
}

.collage-item-20 {
  top: 25%;
  left: calc(var(--big-edge) + var(--small-w) * 6);
}

/* RIGHT SIDE - Column 6 */
.collage-item-21 {
  top: -12.5%;
  left: calc(var(--big-edge) + var(--small-w) * 6.5);
}

.collage-item-22 {
  top: 62.5%;
  left: calc(var(--big-edge) + var(--small-w) * 6.5);
}

.collage-item-23 {
  top: 25%;
  left: calc(var(--big-edge) + var(--small-w) * 7);
}

/* RIGHT SIDE - Column 7 */
.collage-item-24 {
  top: -12.5%;
  left: calc(var(--big-edge) + var(--small-w) * 7.5);
}

.collage-item-25 {
  top: 62.5%;
  left: calc(var(--big-edge) + var(--small-w) * 7.5);
}

.collage-item-26 {
  top: 25%;
  left: calc(var(--big-edge) + var(--small-w) * 8);
}

.collage-item-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}

/* Placeholder for missing images */
.collage-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.collage-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #e50914;
}

.placeholder-title {
  position: relative;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  z-index: 1;
}

/* Featured item content */
.collage-item-info {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  text-align: center;
  z-index: 2;
  color: white;
}

.collage-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: 12px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
  line-height: 1.1;
}

.collage-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.meta-year {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}

.meta-rating {
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  font-size: 0.85rem;
}

.rating-high {
  color: #46d369;
}
.rating-medium {
  color: #f9a825;
}
.rating-low {
  color: #e53935;
}

.meta-quality {
  background: rgba(255, 255, 255, 0.15);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.collage-overview {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 16px;
  max-width: 450px;
}

/* Hover info for non-featured items */
.collage-item-hover {
  position: absolute;
  bottom: 40%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 4px;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

html.mouse-active .collage-item:not(.collage-featured):hover .collage-item-hover,
html:not(.mouse-active) .collage-item:not(.collage-featured).nav-focused .collage-item-hover {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hover-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hover-rating {
  font-size: 0.75rem;
  color: #46d369;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .collage-hero {
    height: 50vh;
    min-height: 350px;
    --h: clamp(350px, 50vh, 600px);
  }

  .collage-item-info {
    right: 20%;
    bottom: 10%;
  }

  .collage-overview {
    display: none;
  }
}
</style>