/* ==================== FONT ==================== */
@font-face {
  font-family: 'Berthold';
  src: url('../fonts/Berthold/Berthold-Akzidenz-Grotesk-Medium.woff') format('woff2');
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family:'UncutSans';
  src: url('/fonts/uncut_sans/UncutSans-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family:'UncutSans';
  src: url('/fonts/uncut_sans/UncutSans-Medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family:'UncutSans';
  src: url('../fonts/uncut_sans/UncutSans-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
}

/* ==================== ROOT VARIABLES ==================== */
:root {
  /* Base unit */
  --unit: 1rem;

  /* Spacing scale */
  --space-xs: 0.3rem;
  --space-sm: 0.65rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* Font sizes */
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-lg: 1.25rem;
  --font-xl: 1.5rem;

  /* Line heights */
  --line-none: 1.0;
  --line-tight: 1.05;
  --line-normal: 1.15;
  --line-relaxed: 1.3;

  /* UI Elements */
  --border-radius: 1.2rem;
  --border-width: 1px;

  /* Colors */
  --color-bg: #fff;
  --color-fg: #000;
  --color-border: #000;
  --color-hover: #000;
  --color-accent: #f39c12;
  --color-danger: #e74c3c;
}

/* ==================== RESET ==================== */
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'UncutSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--font-base);
  line-height: var(--line-normal);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
}

/* ==================== BASE BUTTON ==================== */
.ui-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-md);
  margin-top: 0;
  margin-right: var(--space-xs);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;

  background: transparent;
  border: var(--border-width) solid var(--color-border);
  color: white;
  mix-blend-mode: difference;
  backdrop-filter: blur(2);
  background-color: #fff;
  border-radius: var(--border-radius);
  
  font-size: var(--font-base);
  font-weight: 500;
  line-height: var(--line-none);
  color: var(--color-fg);
  
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

button.ui-btn {
  appearance: none;
}
.ui-btn.danger {
  color: var(--color-danger);
}

.ui-btn.danger:hover {
  background: var(--color-danger);
  color: var(--color-bg);
}

#hamburger-btn {
  display: none; /* Hidden on desktop */
}

.logo {
  order: -1; /* Keep logo first */
}

/* ==================== TOPBAR / MENU ==================== */
#topbar {
  position: fixed;
  top: var(--space-xs);
  left: var(--space-xs);
  right: var(--space-xs);
  z-index: 10000;
  
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  
  background: transparent;
  pointer-events: none;
}

#topbar > * {
  pointer-events: auto;
}

.filter-chip {
  position: relative;
  padding-right: var(--space-lg);
}

.chip-close {
  position: absolute;
  right: var(--space-xs);
  top: 50%;
  transform: translateY(-50%);
  
  width: 16px;
  height: 16px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-size: var(--font-sm);
  line-height: 1;
  cursor: pointer;
  
  transition: color 0.15s ease;
}

.chip-close:hover {
  color: var(--color-danger);
}

/* Star filter */
.star-filter {
  cursor: pointer;
  font-size: var(--font-base);
  color: #aaa;
  transition: color 0.15s ease;
}

.star-filter.active {
  color: var(--color-accent);
}

/* ==================== DOCK ==================== */
#dock {
  position: fixed;
  bottom: 0;
  left: var(--space-xs);
  z-index: 10000;
  
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  
  pointer-events: none;
}

#dock > * {
  pointer-events: auto;
}

.dock-tile {
  background: var(--color-bg);
}

/* ==================== WINDOWS ==================== */
.window {
  position: absolute;
  
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius);
  
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  
  z-index: 100;
  
  /* Default desktop size */
  width: 500px;
  min-width: 300px;
  max-width: 90vw;
}

.window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-md);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  text-transform: uppercase;
  
  cursor: grab;
  user-select: none;
}

.window-header:active {
  cursor: grabbing;
}

.project-title {
  flex: 1;
  font-size: var(--font-lg);
  font-weight: 500;
  line-height: var(--line-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.window-controls {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.window-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: transparent;
  border: var(--border-width) solid var(--color-border);
  border-radius: 50%;
  
  font-size: var(--font-base);
  line-height: 1;
  color: var(--color-fg);
  
  cursor: pointer;
  transition: all 0.15s ease;
}

.window-btn:hover {
  background: var(--color-fg);
  color: var(--color-bg);
}

.close-btn:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-bg);
}

.collapse-btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.window-body {
  padding: var(--space-md);
  overflow: auto;
  max-height: 70vh;
}

.gallery-window .window-body {
  max-height: none; /* Let the window size itself based on media */
  overflow: hidden;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.preview-window .window-body {
  padding: 0 !important;
  overflow: hidden;
}

.project-preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ==================== PROJECT CONTENT ==================== */
.project-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.project-gallery {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 200px;
  
  background: transparent;
  overflow: hidden;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.gallery-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.gallery-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.gallery-pdf {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.gallery-pdf {
  border: none;
}

.gallery-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.gallery-prev,
.gallery-next {
  width: 24px;
  height: 24px;
  padding: 0;
  
  background: transparent;
  border: var(--border-width) solid var(--color-border);
  border-radius: 50%;
  
  font-size: var(--font-base);
  line-height: 1;
  color: var(--color-fg);
  cursor: pointer;
  
  transition: all 0.15s ease;
}

.gallery-prev:hover,
.gallery-next:hover {
  background: var(--color-fg);
  color: var(--color-bg);
}

.gallery-counter {
  font-size: var(--font-sm);
  color: #666;
}

.gallery-nav-inline {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 1;
  justify-content: center;
}

.gallery-nav-inline .gallery-prev,
.gallery-nav-inline .gallery-next {
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: var(--border-width) solid var(--color-border);
  border-radius: 50%;
  font-size: var(--font-sm);
  line-height: 1;
  cursor: pointer;
}

.gallery-nav-inline .gallery-counter {
  font-size: var(--font-sm);
  color: #666;
}

.no-media {
  color: #999;
  font-size: var(--font-sm);
}

.project-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.project-desc {
  white-space: pre-wrap;;
  font-size: var(--font-base);
  line-height: var(--line-relaxed);
  color: var(--color-fg);
}

.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.project-link-out {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  
  background: transparent;
  border: var(--border-width) solid var(--color-border);
  border-radius: calc(var(--border-radius) * 0.8);
  
  font-size: var(--font-sm);
  color: var(--color-fg);
  text-decoration: none;
  
  transition: all 0.15s ease;
}

.project-link-out:hover {
  background: var(--color-fg);
  color: var(--color-bg);
}

/* ==================== PORTFOLIO ==================== */
#portfolio {
  position: relative;
  min-height: 100vh;
}

#global-gallery {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: auto;
}

/* Fullscreen mode image handling */
.fullscreen-mode .gallery-window .window-body {
  display: flex;
  align-items: center;
  justify-content: center;
}
  
.fullscreen-mode .gallery-image,
.fullscreen-mode .gallery-video {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* ==================== MOBILE STYLES ==================== */
@media (max-width: 768px) {
  :root {
    --font-base: 1rem;
    --font-lg: 1.1rem;
    --font-xl: 1.2rem;
    
    --space-md: 0.875rem;
    --space-lg: 1.25rem;
  }

  html, body {
    overflow-x: hidden;
    height: 100%;
    position: fixed; /* Prevent scroll */
    width: 100%;
  }

  #portfolio {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 65px; /* Account for fixed topbar */
    padding-bottom: 70px; /* Account for fixed dock */
    
    /* ← NEW: Flexbox layout for thumbnail grid */
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--space-xs);
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
  }

  #hamburger-btn {
    display: inline-flex;
    order: 0; /* Right after logo */
  }

  .logo {
    order: -1;
  }

  #topbar {
    position: fixed; /* Allow menu to expand */
    top: 0;
    left: 0;
    right: 0;
    
    padding: var(--space-xs);
    background: transparent;
    
    /* Allow wrapping on very small screens */
    gap: 0;
  }

  #topbar .menu-link:not(#hamburger-btn) {
    display: none; /* Hide menu items by default */
  }

  #topbar.menu-open .menu-link {
    display: flex; /* Show when menu is open */
  }

  #topbar.menu-open {
    align-items: flex;
  }

  #topbar.menu-open .menu-link:not(#hamburger-btn):not(.logo) {
    display: inline-flex !important; /* Show when menu is open - needs !important to override */
  }

  #topbar.menu-open .menu-link:not(.logo) {
    display: flex;
    width: auto; /* Changed from 100% to auto */
  }
  
  #topbar.menu-open #hamburger-btn {
    align-self: flex-start;
  }
  
  /* Better spacing for menu items */
  #topbar.menu-open {
    align-items: flex-start;
    padding: var(--space-xs);
  }
    
  /* Make active filters more obvious */
  .filter-chip {
    background: var(--color-fg);
    color: var(--color-bg);
  }

  #dock {
    bottom: 0;
    left: 0;
    right: 0;
    
    padding-left: var(--space-xs);
    padding-top: var(--space-xs);
    padding-right: var(--space-xs);
    padding-bottom: 0;
    background: transparent;
  }

  .window {
    /* Mobile windows are full-width cards */
    position: relative !important; 
    width: calc(100% - (var(--space-xs) + var(--space-xs))) !important;
    max-width: none !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important; /* ← Changed from var(--space-xs), using gap instead */
    order: 1; /* ← NEW: Full project windows appear first */
  }

  /* ← NEW: Preview windows in 2-column grid */
  .preview-window {
    width: calc(50% - var(--space-xs) / 2) !important;
    margin: 0 !important;
    order: 2; /* Preview thumbnails appear after full projects */
  }

  .preview-window .window-body {
    padding: 0 !important;
    height: auto !important;
  }

  .preview-window .project-preview-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }

  /* ← NEW: Visual separator between full projects and thumbnails */
  .preview-window:first-of-type {
    margin-top: var(--space-md) !important;
  }

  .window-header {
    cursor: default;
    padding-top: var(--space-sm);
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  .window-header:active {
    cursor: default;
  }

  .window-body {
    max-height: none;
    padding-top: var(--space-xs);
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
    padding-bottom: var(--space-sm);
  }
  .gallery-window .window-body {
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .gallery-window .project-gallery {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    min-height: 200px; /* ← Add minimum height */
  }
  
  .gallery-image {
    display: block;
    width: 100%; /* ← Changed from auto */
    height: auto; /* Keep auto */
    max-width: 100%; /* ← Changed from none */
    max-height: 70vh; /* ← Add max height constraint */
    object-fit: contain; /* ← Changed from none */
  }
  
  /* Same for videos */
  .gallery-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .gallery-iframe {
    width: 100%;
    aspect-ratio: 16/9;
    max-height: 70vh;
  }

  /* Disable hover effects on mobile */
  .ui-btn:hover,
  .window-btn:hover,
  .gallery-prev:hover,
  .gallery-next:hover,
  .project-link-out:hover,
  .chip-close:hover {
    background: transparent;
    color: inherit;
  }

  .close-btn:hover {
    background: transparent;
    color: inherit;
    border-color: var(--color-border);
  }

  .collapse-btn:hover {
    background: transparent;
    color: inherit;
    border-color: var(--color-border);
  }
}

@media (max-width: 480px) {
  :root {
    --font-sm: 0.9rem;
    --font-base: 1rem;
    --space-xs: 0.3rem;
    --space-sm: 0.625rem;
  }

  .project-title {
    font-size: var(--font-base);
  }

  .project-gallery {
    height: auto;
  }

  /* ← ADD: 2-column preview layout */
  .preview-window {
    width: calc(50% - var(--space-xs) / 2) !important;
    margin: 0 !important;
    order: 2;
  }

  .preview-window .window-body {
    padding: 0 !important;
    height: auto !important;
  }

  .preview-window .project-preview-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }

  .preview-window:first-of-type {
    margin-top: var(--space-md) !important;
  }

  /* ← ADD: Gallery image constraints */
  .gallery-image,
  .gallery-video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
  }

  .gallery-iframe {
    width: 100%;
    aspect-ratio: 16/9;
    max-height: 70vh;
  }
}