:root {
  /* Colors */
  --bg-color: #f4f4f5; /* Everything gets slightly darker shade except right tiles */
  --text-primary: #111111;
  --text-secondary: #666666;
  --accent-color: #1a56db; /* A vibrant precise blue */
  --accent-hover: #1e40af;
  --tile-bg: #ffffff;
  --border-color: #cccccc;

  /* Typography */
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Layout */
  --nav-height: 70px; /* Slightly smaller to save vertical space */
  --border-radius: 0px; /* Strict grid has no rounded corners */
  --transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

[data-theme='dark'] {
  --bg-color: #111111;
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --accent-color: #3b82f6; /* Brighter blue for dark mode */
  --accent-hover: #60a5fa;
  --tile-bg: #000000;
  --border-color: #2a2a2a;
}

/* Reset & Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-color);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  /* Fill the viewport so the dashboard composes edge-to-edge on tall screens,
     but let the document scroll normally whenever content needs more room.
     (Never lock the body height: clipped content must stay reachable.) */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

/* Typography utilities */
h1,
h2,
h3 {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* The top bar is styled by Header.astro's scoped styles (single source of
   truth for every page, including this one). */

/* --- Dashboard Layout --- */
.dashboard-container {
  max-width: 100%; /* Remove margin box left/right */
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 0;
  flex: 1; /* Fill remaining height on tall viewports */
}

/* --- Hero Section (Left) --- */
.hero-section {
  display: flex;
  flex-direction: column;
  position: relative;
  align-self: stretch;
  /* Grid items default to min-width:auto; without this the column would
     refuse to shrink below its content and blow the track out. */
  min-width: 0;
  padding: 24px clamp(20px, 2.8vw, 40px);
  background-color: var(--bg-color);
  border-right: 1px solid var(--border-color);
}

/* Overflow-safe vertical centering: auto margins collapse to 0 when the
   content is taller than the column, so nothing gets pushed out of reach. */
.hero-content {
  margin-block: auto;
}

.hero-title {
  /* Single fluid size drives both lines so their ratio (and therefore the
     equal-width justification) survives every viewport. */
  --hero-fs: clamp(1.05rem, 0.35rem + 2.1vw, 2.6rem);
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-color);
  line-height: 1;
  margin-bottom: 16px;
  /* Tracking matches the small AVI logo subtext. */
  letter-spacing: 0.05em;
}

.hero-title-line {
  display: block;
  /* Each line stays unbroken; the fluid font size keeps it fitting. */
  white-space: nowrap;
}

/* Same ratio as the small logo (17 / 12 ≈ 1.42) so "ARTIFICIAL VISUAL"
   and "INTELLIGENCE" justify to equal widths in the monospace face. */
.hero-title-line-1 {
  font-size: var(--hero-fs);
}

.hero-title-line-2 {
  font-size: calc(var(--hero-fs) * 1.4154);
  letter-spacing: 0.05em;
}

.hero-photo {
  margin: 0 0 16px;
  border: 1px solid var(--border-color);
  background-color: var(--tile-bg);
  overflow: hidden;
  max-width: 90%;
}

.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.parallax-photo {
  position: relative;
  isolation: isolate;
}

.parallax-photo.is-active img {
  visibility: hidden;
}

.parallax-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
}

.parallax-photo.is-active .parallax-canvas {
  opacity: 1;
}

.hero-description {
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-bottom: 12px;
  max-width: 90%;
  line-height: 1.5;
}

/* --- Tiles Section (Right) --- */
.tiles-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* The non-wrapping carousels inside must never widen this grid column:
     min-width:0 lets the track stay at 1.6fr and the rows scroll internally. */
  min-width: 0;
  /* Research and Talks tiles are pixel-fixed on desktop; the leftover space
     below them should match the tile background instead of showing the gray
     page color underneath. */
  background-color: var(--tile-bg);
}

.tile {
  background-color: var(--tile-bg);
  border-radius: 0;
  /* Anchor targets (e.g. /#people) land below the sticky top bar. */
  scroll-margin-top: calc(var(--nav-height) + 8px);
  padding: 12px 40px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border-bottom: 1px solid var(--border-color);
}

.tile:last-child {
  border-bottom: none;
}

.tile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.tile-header h2 {
  font-size: 1.25rem;
}

.tile-title-link {
  color: inherit;
}

.tile-title-link:hover {
  color: var(--accent-color);
}

.see-more {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.see-more:hover {
  text-decoration: underline;
}

/* Fixed-size Research and News tiles on desktop — they don't grow with the
   viewport; if the viewport is too short for them, the page scrolls instead
   of clipping. Padding comes from the shared .tile rule above. */
.tile-research {
  flex: 0 0 320px;
}

.tile-news {
  flex: 0 0 320px;
}

/* --- News Tile --- */
.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.news-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 12px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.news-date {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  white-space: nowrap;
}

.news-text {
  color: var(--text-primary);
}

.news-text a {
  color: var(--accent-color);
}

.news-text a:hover {
  text-decoration: underline;
}

/* --- People Tile --- */
.tile-people {
  flex-direction: row;
  justify-content: flex-start;
  gap: 40px;
  align-items: center;
  flex: 0 0 auto;
}

.tile-people .tile-header {
  margin-bottom: 0;
}

.person-avatar {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
  background-color: #111111;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid var(--tile-bg);
  margin-left: -8px;
  transition: var(--transition);
}

/* Only invert the initials-fallback bubble (a span). Real photos
   (an img element) stay un-inverted so they don't look like negatives. */
[data-theme='dark'] span.person-avatar {
  filter: invert(1);
  border-color: #ffffff; /* Inverted to #000000 (black) by the filter, matching the dark tile background */
}

.people-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Many people wrap to a new row instead of clipping */
  row-gap: 10px;
  padding-left: 10px; /* Space for negative margin of first child if needed */
}

.person-avatar:first-child {
  margin-left: 0;
}

.person-avatar:hover {
  transform: translateY(-5px) scale(1.05);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* --- Research & Talks Tiles --- */
.horizontal-scroll {
  display: flex;
  gap: 16px;
  /* A real horizontal scroller: with few cards they stretch to fill the
     row, with many the row scrolls instead of squishing every card into
     unreadability. Mouse users get a thin scrollbar as the affordance;
     touch devices hide it and swipe. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding-bottom: 0;
  flex: 1;
}

@media (hover: none) {
  .horizontal-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .horizontal-scroll::-webkit-scrollbar {
    display: none;
  }
}

/* Auto-scrolling carousel: pauses on hover/touch, wheel scrolls it horizontally. */
.research-carousel {
  display: flex;
  gap: 16px;
  flex: 1;
  /* Vertically center the fixed-height cards inside the (flex-grown) tile.
     Surplus tile height becomes breathing room above/below the carousel. */
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: auto;
  overscroll-behavior-x: contain;
}

.research-carousel::-webkit-scrollbar {
  display: none;
}

.research-carousel .paper-card {
  flex: 0 0 220px;
  width: 220px;
  /* Fixed total card height regardless of viewport — image + title + meta are
     all stable so cards never stretch or squish. */
  height: 240px;
}

.research-carousel .card-image {
  flex: none;
  height: 110px;
  min-height: 110px;
  max-height: 110px;
}

.paper-card,
.talk-card {
  flex: 1 0 220px; /* Share the row when few, scroll when many — never squish */
  min-width: 0; /* Prevent flex blowout */
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: var(--transition);
  padding: 12px;
  border-radius: 8px; /* Slightly rounded off */
  border: 1px solid var(--border-color);
  background-color: var(--bg-color); /* Match darker shade */
}

.paper-card:hover,
.talk-card:hover {
  border-color: var(--accent-color);
}

[data-theme='light'] .paper-card:hover,
[data-theme='light'] .talk-card:hover {
  background-color: #f0f5ff;
}

[data-theme='dark'] .paper-card:hover,
[data-theme='dark'] .talk-card:hover {
  background-color: #2a3b5c;
}

.card-image {
  flex: 1;
  width: 100%;
  height: 0; /* Lets flex basis control the size to prevent overflow */
  min-height: 80px;
  max-height: 180px;
  border-radius: 6px;
  object-fit: cover;
  margin-bottom: 8px;
  background-color: #f0f0f0;
}

/* Blank thumbnail for publications without a teaser image — an empty,
   theme-aware box rather than a broken <img> showing its alt text. */
.card-image-blank {
  background-color: var(--tile-bg);
}

.card-title {
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem; /* Larger font size */
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* Vertically align items */
  gap: 6px;
  margin-top: auto; /* Push meta to bottom */
}

.card-venue {
  font-weight: 600;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  padding: 2px 6px;
  border-radius: 4px; /* Small rounded corners */
  font-size: 0.75rem; /* Larger font size */
  text-transform: uppercase;
}

/* Venues like "arXiv" keep their canonical casing instead of being
   uppercased into "ARXIV". */
.card-venue-asis {
  text-transform: none;
}

/* Authors line: takes its own row, single line, ellipsis if too long. */
.card-authors-line {
  flex-basis: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The footer is styled by Footer.astro's scoped styles (single source of
   truth for every page, including this one). */

/* --- Tablet & below: single-column flow --- */
@media (max-width: 1024px) {
  .dashboard-container {
    display: block;
  }

  .hero-section {
    position: static;
    padding: 32px 24px;
    border-right: none;
    /* The wireframe divider reads horizontally between hero and tiles. */
    border-bottom: 1px solid var(--border-color);
  }

  .hero-content {
    margin-block: 0;
  }

  /* The single column has the full viewport width, so the title can afford
     a steeper fluid slope than the desktop two-column layout. */
  .hero-title {
    --hero-fs: clamp(1.05rem, 0.5rem + 3vw, 2.2rem);
  }

  .hero-photo,
  .hero-description {
    max-width: 100%;
  }

  .tiles-section {
    height: auto;
  }

  .tile {
    padding: 16px 24px;
  }

  /* Tiles size to their content in the stacked layout. */
  .tile-research,
  .tile-news {
    flex: none;
    height: auto;
    min-height: 0;
  }

  .paper-card,
  .talk-card {
    /* Fixed-width swipe cards on touch layouts. Only talk cards are
       affected: the research carousel keeps its 220x240 cards via the
       higher-specificity .research-carousel .paper-card rule above. */
    flex: 0 0 280px;
  }

  .card-image {
    height: 160px;
  }
}

/* --- Phones --- */
@media (max-width: 768px) {
  .hero-section {
    padding: 24px 20px;
  }

  .tile {
    padding: 16px 20px;
  }

  /* Stack the People tile: heading above a wrapping avatar row, nothing
     clipped no matter how many people there are. */
  .tile-people {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .people-list {
    padding-left: 8px;
  }
}

/* --- Touch ergonomics --- */
@media (pointer: coarse) {
  .see-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}