/* v2.css - Refactored
   - Reduced duplication using CSS custom properties
   - Organized with logical sections
   - Mobile-first approach with desktop overrides
*/

/* =============================================================================
   CUSTOM PROPERTIES (CSS Variables)
============================================================================= */
:root {
  /* Layout */
  --v2-header-h: 140px;
  --v2-pad-x: 48px;
  --v2-scrollbar-w: 0px; /* filled by JS */
  --v2-snap-gap: 32px; /* increased from 24px */
  --v2-grid-gap: 64px; /* increased from 32px */
  --v2-grid-row-gap: 32px; /* default spacing between text and media */

  /* Spacing */
  --v2-space-sm: 10px;
  --v2-space-md: 16px;
  --v2-space-lg: 24px;
  --v2-space-xl: 28px;

  /* Content spacing */
  --v2-content-pad-y: 32px; /* reduced from 48px for less space below header */

  /* Typography */
  --v2-font-body: inherit;
  --v2-font-weight-bold: 700;

  /* Colors - Light theme (default) */
  --bg: #fff;
  --fg: #1f1f1f;
  --muted: #6f6f6f;
  --border-subtle: rgba(0, 0, 0, 0.1);
  --link: #0000ee;
}

/* =============================================================================
   THEME & FONT OVERRIDES
============================================================================= */
/* Dark theme overrides */
body.theme-dark {
  --bg: #111111;
  --fg: #f4f1ea;
  --muted: #aaa7a0;
  --border-subtle: rgba(255, 255, 255, 0.16);
  --link: #E8D7C5;
}

/* Font family */
body {
  font-family: 'TimesTen LT Std', 'Times New Roman', Times, serif;
  transition: background-color 180ms ease, color 180ms ease;
}

/* =============================================================================
   RESET & BASE
============================================================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* IMPORTANT: prevents body scrolling */
  background: var(--bg);
  color: var(--fg);
}

/* =============================================================================
   UTILITY CLASSES
============================================================================= */
.v2-onlyMobile {
  display: none;
}

.v2-onlyDesktop {
  display: inline;
}

/* =============================================================================
   LAYOUT: BASE CONTAINER
============================================================================= */
.v2 {
  background: var(--bg);
  color: var(--fg);
}

/* =============================================================================
   LAYOUT: HEADER
============================================================================= */
.v2-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;

  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  padding: var(--v2-space-md) calc(var(--v2-pad-x) + var(--v2-scrollbar-w)) 72px var(--v2-pad-x);

  pointer-events: none;
  box-sizing: border-box;
  background: var(--bg);
  transition: background-color 180ms ease;
}

.v2-header__left,
.v2-header__center,
.v2-header__right {
  pointer-events: auto;
}

.v2-header__right {
  text-align: right;
}

.v2-header__intro {
  transition: opacity 300ms ease;
}

.v2-header__expanded {
  margin-top: var(--v2-space-lg);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 400ms ease, max-height 400ms ease;
}

.v2-header.is-expanded .v2-header__expanded {
  opacity: 1;
  max-height: 200px;
}

.v2-typewriter {
  display: block;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.v2-typewriter.slide-in {
  opacity: 1;
  transform: translateY(0);
}

.v2-header__menu {
  margin-bottom: var(--v2-space-md);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 400ms ease, max-height 400ms ease;
}

.v2-header.is-menu-open .v2-header__menu {
  opacity: 1;
  max-height: 200px;
}

.v2-header__menuLinks {
  display: flex;
  gap: var(--v2-space-md);
  align-items: center;
}

/* =============================================================================
   COMPONENTS: LINKS & BUTTONS
============================================================================= */
.v2-link {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--fg);
  cursor: pointer;
  text-decoration: underline;
}

/* =============================================================================
   LAYOUT: SNAP SCROLLING CONTAINER
============================================================================= */
.v2-snap {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  scroll-snap-type: none;
  transition: margin-top 400ms ease;
}

/* =============================================================================
   LAYOUT: CASE (MAIN CONTENT SECTIONS)
============================================================================= */
.v2-case {
  height: 100vh;
  height: 100dvh;
  padding: var(--v2-header-h) var(--v2-pad-x) 0;
  box-sizing: border-box;

  display: grid;
  grid-template-rows: 1fr auto;
  row-gap: var(--v2-snap-gap);

  position: relative;
  transition: padding-top 400ms ease;
}

/* Content Grid (left text + right media) */
.v2-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: var(--v2-grid-gap);
  align-items: start; /* align to top so text starts at same height as image */
  
  /* Add vertical padding to create breathing room */
  padding: var(--v2-content-pad-y) 0;
}

/* =============================================================================
   COMPONENTS: CASE LEFT (TEXT CONTENT)
============================================================================= */
.v2-left {
  min-height: 0;
  overflow: hidden;
  cursor: none;
  padding-right: 24px; /* add breathing room so text doesn't feel cramped against image */
  transition: opacity 0.4s ease;
  position: fixed;
  top: var(--v2-header-h);
  left: var(--v2-pad-x);
  width: calc((100vw - var(--v2-pad-x) * 2 - var(--v2-scrollbar-w) - var(--v2-grid-gap)) / 3);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.v2-left.v2-left--active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.v2-text--slidein {
  animation: textSlideIn 0.8s ease-out;
}

@keyframes textSlideIn {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.v2-kicker {
  margin-bottom: var(--v2-space-xl);
}

.v2-company {
  font-weight: var(--v2-font-weight-bold);
}

.v2-title {
  font-style: italic;
  color: var(--muted);
}

.v2-copy {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.v2-copy--updating {
  animation: slideUp 0.4s ease;
}

@keyframes slideUp {
  0% {
    opacity: 0.4;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.v2-stepHeading {
  font-weight: var(--v2-font-weight-bold);
  margin-bottom: 6px;
}

.v2-stepBody {
  color: var(--fg);
}

/* =============================================================================
   COMPONENTS: CASE RIGHT (MEDIA)
============================================================================= */
.v2-right {
  min-height: 0;
  height: 100%;
  position: relative;
  cursor: none;
  overflow: hidden;
  grid-column: 2; /* Always use the second column since left is fixed */
  opacity: 0;
  transition: opacity 0.4s ease;
}

.v2-right.v2-media--visible {
  opacity: 1;
}

/* Shared styles for image and video */
.v2-right img,
.v2-stepVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* JS controls visibility using the hidden attribute */
.v2-right img[hidden],
.v2-stepVideo[hidden] {
  display: none !important;
}

/* =============================================================================
   COMPONENTS: CASE BOTTOM (COUNTER & CONTROLS)
============================================================================= */
.v2-bottom {
  padding-bottom: 32px; /* increased from var(--v2-snap-gap) for more breathing room */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
}

.v2-bottom__left {
  display: flex;
  gap: var(--v2-space-md);
  align-items: center;
}

.v2-bottom__center {
  position: fixed;
  bottom: var(--v2-pad-x);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  gap: var(--v2-space-sm);
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.v2-bottom__center.v2-counter--active {
  opacity: 1;
  pointer-events: auto;
}

.v2-counterItem {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--muted);
}

.v2-counterItem[aria-current="true"] {
  color: var(--fg);
  text-decoration: underline;
}

/* =============================================================================
   COMPONENTS: OVERLAYS & PANELS
============================================================================= */
.v2-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  z-index: 50;
}

.v2-overlay[hidden] {
  display: none !important;
}

body.theme-dark .v2-overlay {
  background: rgba(0, 0, 0, 0.9);
}

.v2-panel {
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  padding: var(--v2-space-lg);
}

.v2-panel__head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: var(--v2-space-lg);
}

.v2-panel__content {
  margin-top: var(--v2-space-lg);
}

.v2-panel__content p {
  margin-top: 0;
  margin-bottom: var(--v2-space-md);
}

.v2-panel__content p:last-child {
  margin-bottom: 0;
}

/* =============================================================================
   COMPONENTS: CASE STUDY OVERVIEW
============================================================================= */
.v2-overview {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 50;
  overflow-y: auto;
  padding: var(--v2-pad-x);
  padding-top: var(--v2-pad-x);
  opacity: 0;
  transition: opacity 300ms ease;
}

.v2-overview:not([hidden]) {
  opacity: 1;
}

.v2-overview[hidden] {
  display: none !important;
}

.v2-overview__close {
  position: fixed;
  top: var(--v2-pad-x);
  right: var(--v2-pad-x);
  background: transparent;
  border: 0;
  font-family: 'TimesTen LT Std', 'Times New Roman', Times, serif;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--fg);
  padding: 0;
  z-index: 51;
  transition: opacity 200ms ease;
  text-decoration: underline;
}

.v2-overview__close:hover {
  opacity: 0.6;
}

.v2-overview__heading {
  font-size: 1.2rem;
  font-weight: var(--v2-font-weight-bold);
  margin: 0 0 calc(var(--v2-space-xl) * 2) 0;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.v2-overview__grid {
  display: flex;
  flex-direction: column;
  gap: calc(var(--v2-space-xl) * 3);
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: var(--v2-pad-x);
}

.v2-overview__case {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--v2-grid-gap);
  align-items: start;
}

.v2-overview__info {
  position: sticky;
  top: calc(var(--v2-pad-x) * 2);
}

.v2-overview__company {
  font-weight: var(--v2-font-weight-bold);
  margin-bottom: 4px;
}

.v2-overview__title {
  font-style: italic;
  color: var(--muted);
  margin-bottom: 8px;
}

.v2-overview__year {
  font-size: 0.9rem;
  color: var(--muted);
}

.v2-overview__thumbnails {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: var(--v2-space-sm);
}

.v2-overview__thumb {
  overflow: hidden;
  opacity: 0;
  animation: fadeInThumb 400ms ease forwards;
  cursor: pointer;
}

.v2-overview__thumb:nth-child(1) { animation-delay: 50ms; }
.v2-overview__thumb:nth-child(2) { animation-delay: 100ms; }
.v2-overview__thumb:nth-child(3) { animation-delay: 150ms; }
.v2-overview__thumb:nth-child(4) { animation-delay: 200ms; }
.v2-overview__thumb:nth-child(5) { animation-delay: 250ms; }
.v2-overview__thumb:nth-child(6) { animation-delay: 300ms; }

@keyframes fadeInThumb {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.v2-overview__thumb img,
.v2-overview__thumb video {
  width: 100%;
  height: auto;
  max-height: 200px;
  display: block;
  opacity: 0.6;
  transition: opacity 200ms ease;
}

.v2-overview__thumb:hover img,
.v2-overview__thumb:hover video {
  opacity: 0.9;
}

.v2-overview__thumb--video video {
  cursor: pointer;
}

/* =============================================================================
   COMPONENTS: MENU
============================================================================= */
.v2-menuList {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--v2-space-md);
  margin-top: var(--v2-space-lg);
}

.v2-menuPreferences {
  margin-top: var(--v2-space-xl);
  font-size: 0.9rem;
  opacity: 0.85;
}

/* =============================================================================
   COMPONENTS: FIXED FOOTER
============================================================================= */
.v2-fixedFooter {
  position: fixed;
  left: var(--v2-pad-x);
  bottom: var(--v2-snap-gap);
  z-index: 20;
}

.v2-fixedFooter__left {
  display: flex;
  gap: var(--v2-space-md);
  align-items: center;
}

.v2-fixedFooter__right {
  position: fixed;
  right: var(--v2-pad-x);
  bottom: var(--v2-snap-gap);
  display: flex;
  gap: var(--v2-space-md);
  align-items: center;
  font-size: 0.85rem;
  opacity: 0.75;
}

.v2-fixedFooter__right:hover {
  opacity: 1;
}

/* =============================================================================
   COMPONENTS: CURSOR NAVIGATION LABEL
============================================================================= */
.v2-cursorNext {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-9999px, -9999px);
  z-index: 30;
  pointer-events: none;
  
  color: var(--fg);
  background: transparent;
  text-decoration: underline;
  font-size: 0.95rem;
}

/* =============================================================================
   RESPONSIVE: MOBILE & TABLET
============================================================================= */
@media (max-width: 700px) {
  :root {
    --v2-pad-x: 20px;
    --v2-content-pad-y: 32px; /* slightly less vertical padding on mobile */
    --v2-grid-gap: 48px; /* keep decent spacing on mobile too */
    --v2-grid-row-gap: 16px; /* reduced spacing between text and media on mobile */
  }

  /* Utility classes */
  .v2-onlyMobile {
    display: inline;
  }

  .v2-onlyDesktop {
    display: none;
  }

  /* Header adjustments */
  .v2-header {
    grid-template-columns: 1fr;
    gap: var(--v2-space-sm);
    padding: 20px var(--v2-pad-x);
    pointer-events: auto;
    position: fixed;
  }

  .v2-header__right {
    text-align: left;
    position: absolute;
    top: var(--v2-space-md);
    right: var(--v2-pad-x);
  }

  /* Expanded header needs more height on mobile for text wrapping */
  .v2-header.is-expanded .v2-header__expanded {
    max-height: 300px;
  }

  /* Case layout */
  .v2-case {
    height: auto;
    min-height: 100dvh;
    grid-template-rows: auto auto;
  }

  /* Grid to single column with custom stacking order */
  .v2-grid {
    grid-template-columns: 1fr;
    row-gap: var(--v2-grid-row-gap);
    padding: var(--v2-content-pad-y) 0;
    display: grid;
    grid-auto-rows: auto;
  }

  /* Make left section children become direct grid children */
  .v2-left {
    display: contents;
    position: static;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    width: auto;
    transition: none;
  }

  /* Order: 1. kicker, 2. media, 3. copy (heading + body together) */
  .v2-kicker {
    order: 1;
    margin-bottom: var(--v2-space-lg);
  }

  .v2-right {
    order: 2;
    height: auto;
    min-height: auto;
    cursor: auto;
    margin-bottom: var(--v2-space-lg);
    grid-column: auto;
    opacity: 1;
    transition: none;
  }

  .v2-copy {
    order: 3;
  }

  .v2-stepHeading {
    margin-bottom: var(--v2-space-lg);
  }

  .v2-stepBody {
    margin-top: 0;
  }

  /* Make images/videos fill width on mobile */
  .v2-right img,
  .v2-stepVideo {
    position: relative;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* Hide fixed footer on mobile */
  .v2-fixedFooter,
  .v2-fixedFooter__right {
    display: none;
  }

  /* Menu layout */
  .v2-menuList {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: var(--v2-space-md);
  }

  /* Overview on mobile */
  .v2-overview {
    padding: var(--v2-pad-x);
    padding-top: 60px;
  }

  .v2-overview__close {
    top: var(--v2-pad-x);
    right: var(--v2-pad-x);
  }

  .v2-overview__case {
    grid-template-columns: 1fr;
    gap: var(--v2-space-lg);
  }

  .v2-overview__info {
    position: static;
  }

  .v2-overview__thumbnails {
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 6px;
  }
}

/* =============================================================================
   RESPONSIVE: MEDIUM SCREENS (TABLET LANDSCAPE)
============================================================================= */
@media (min-width: 701px) and (max-width: 900px) {
  :root {
    --v2-pad-x: 32px;
    --v2-grid-gap: 48px; /* adjusted for medium screens */
    --v2-content-pad-y: 40px;
  }

  .v2-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  }

  .v2-overview__case {
    grid-template-columns: 250px 1fr;
    gap: var(--v2-space-xl);
  }

  .v2-overview__thumbnails {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  }
}