/*
 * Project index — editorial data-row list, not a 3-card grid of equal tiles.
 * Each project is a row: thumbnail (small), index number, title, meta strip, tags.
 * Hovering surfaces a red caret + reveals the description; no scale/lift.
 */

.projects-container {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink);
  margin-top: var(--s-5);
}

/* JS emits exactly two children: .project-image-container + .project-content.
   Two-col grid: [thumbnail 130px] [content 1fr]. Counter sits inside the thumbnail
   via ::before on .project-image-container so it's always in the right column. */
.projects-container { counter-reset: project; }

.project-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0 var(--s-5);
  align-items: start;
  padding: var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-step), border-bottom-color var(--dur-1) var(--ease-step);
  position: relative;
  min-height: 160px;            /* uniform card height regardless of content */
}
.project-card:hover { background: var(--paper-2); border-bottom-color: var(--ink); }
.project-card:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: -2px;
  background: var(--paper-2);
  border-bottom-color: var(--mark);
}
.project-card:focus-visible .project-image-container {
  border-color: var(--mark);
  box-shadow: inset 0 0 0 2px var(--mark);
}
.project-card.hidden-project { display: none; }

/* Suppress outer ::before counter — counter lives on the thumbnail. */
.project-card::before { display: none; }

/* Thumbnail — col 1 — every card uses the same landscape preview frame. */
.project-image-container {
  grid-column: 1; grid-row: 1;
  width: 200px;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  align-self: start;
  position: relative;
  counter-increment: project;
}
/* Counter overlaid at the bottom-left of the thumbnail as a small badge. */
.project-image-container::before {
  content: counter(project, decimal-leading-zero);
  position: absolute;
  bottom: 0; left: 0;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: var(--paper);
  background: rgba(10,10,10,0.7);
  padding: 1px 5px;
  letter-spacing: 0.06em;
  z-index: 1;
}
.project-image, .project-video-preview {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Full color, no grayscale. */
  transition: transform var(--dur-2) var(--ease-snap);
}
/* Hover: red inset ring on the thumbnail wrapper + image nudges 1% — feels like
   a focus crosshair tightening on the frame, not a 2px lift or a color reveal. */
.project-card:hover .project-image-container {
  border-color: var(--mark);
  box-shadow: inset 0 0 0 2px var(--mark);
}
.project-card:hover .project-image,
.project-card:hover .project-video-preview { transform: scale(1.02); }
.video-indicator {
  position: absolute; top: 30px; left: 40px;
  transform: translate(-50%, -50%);
  font-size: var(--t-14); color: var(--paper);
  opacity: 0; transition: opacity var(--dur-1) var(--ease-step);
}
.project-card:hover .video-indicator { opacity: 1; }

/* Type badge — JS positions it inside .project-image-container as a corner chip. */
.project-type-badge {
  position: absolute;
  top: 0; right: 0;
  padding: 2px 6px;
  border-radius: var(--r-0);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  z-index: 1;
}
.project-type-badge.personal { background: var(--ink); color: var(--paper); }
.project-type-badge.professional { background: var(--mark); color: var(--paper); }

/* Content — col 2. Strict 4-row grid: title / description / features / tags.
   Each row has a defined min-height so cards stay symmetric across the index. */
.project-content {
  grid-column: 2; grid-row: 1;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: var(--s-2);
  padding: 0;
  align-self: stretch;
  min-width: 0;
}
.project-title {
  font-family: var(--font-mono);
  font-size: var(--t-18);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.project-description {
  font-family: var(--font-serif);
  font-size: var(--t-14);
  color: var(--ink-2);
  margin: 0;
  line-height: 1.4;
  max-width: 70ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  align-self: start;
}

/* Quick features — hide them on the index. Cards stay clean and symmetric;
   features live inside the modal. The h3, description, tags are enough preview. */
.project-quick-features { display: none; }

.project-tags {
  display: flex;
  flex-wrap: nowrap;          /* single line; overflow hidden — keeps cards uniform height */
  gap: var(--s-2);
  margin: 0;
  overflow: hidden;
  align-self: end;
}
.project-tag {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 1px 6px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: var(--r-0);
}

/* Right column — type badge + caret */
.project-meta-right {
  grid-column: 4; grid-row: 1;
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-11);
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
.project-card::after {
  content: '▸';
  grid-column: 4; grid-row: 1;
  justify-self: end;
  font-family: var(--font-mono);
  color: var(--rule-2);
  font-size: var(--t-16);
  transition: color var(--dur-1) var(--ease-step), transform var(--dur-2) var(--ease-snap);
}
.project-card:hover::after { color: var(--mark); transform: translateX(4px); }

/* Guest message (locked professional projects) — bordered note, not a card. */
.guest-message {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: 1px dashed var(--ink);
  background: var(--paper);
}
.guest-message h3 {
  font-family: var(--font-mono);
  font-size: var(--t-14);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.guest-message h3 i { color: var(--mark); margin-right: var(--s-2); }
.guest-message p { font-family: var(--font-serif); color: var(--ink-2); }

@media (max-width: 700px) {
  /* Stack: image full-width on top, content below */
  .project-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: unset;
    padding: 0;
  }
  .project-image-container {
    grid-column: 1; grid-row: 1;
    width: 100%;
    height: auto;
    min-height: unset;
    aspect-ratio: 16 / 10;
  }
  .project-content {
    grid-column: 1; grid-row: 2;
    padding: var(--s-3) var(--s-4);
  }
  /* Clamp description to 3 lines on mobile */
  .project-description { -webkit-line-clamp: 3; }
  .project-meta-right { display: none; }
  /* Keep the caret but pin it to the content row */
  .project-card::after {
    position: absolute;
    bottom: var(--s-3); right: var(--s-4);
    grid-column: unset; grid-row: unset;
  }
}

/* ============================================================
   PROJECT MODAL — opened on card click. JS injects:
   .project-modal > .modal-content > .modal-body >
     .project-detail (2-col grid):
       .project-media-column > .project-media-container >
          .main-media (image-wrapper or video-wrapper) + .media-thumbnails
       .project-content-column > .project-detail-header (h2 + subtitle) + body
   ============================================================ */
.project-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  background: rgba(10,10,10,0.88);
}
.project-modal.active { display: flex; }
.project-modal .modal-content {
  width: 100%;
  max-width: 1080px;
  height: 88vh;       /* fixed height so columns can scroll inside it */
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--r-0);
  box-shadow: var(--shadow-modal);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.project-modal-bar {
  min-height: 46px;
  flex: 0 0 46px;
  padding-left: var(--s-4);
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 3;
}
.project-modal-bar-label {
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.project-modal-bar-label span { color: var(--mark); }
.project-modal .modal-close {
  position: static;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  border-left: 1px solid var(--ink);
  border-radius: var(--r-0);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: var(--t-16);
  z-index: 1;
  transition: background var(--dur-1) var(--ease-step), color var(--dur-1) var(--ease-step);
}
.project-modal .modal-close:hover { background: var(--mark); color: var(--paper); border-color: var(--mark); }
.project-modal .modal-close:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: -3px;
}

/* modal-body does NOT scroll — each column handles its own overflow. */
.project-modal .modal-body {
  overflow: hidden;
  padding: 0;
  flex: 1;
  min-height: 0;
}

/* 2-col grid fills the modal body height. */
.project-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  height: 100%;
  min-height: 0;
}

/* Media column: sticky viewer + scrollable thumbnail strip.
   Column itself does NOT scroll; only thumbnails scroll if they overflow. */
.project-media-column {
  min-width: 0;
  padding: var(--s-5);
  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.project-media-container { display: flex; flex-direction: column; gap: var(--s-3); flex: 1; min-height: 0; }

/* Main media — fixed display window, image scales DOWN to fit (not up). */
.main-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-media img,
.main-media video,
.main-media iframe {
  width: 100%;
  height: 100%;
  object-fit: contain;     /* preserve aspect ratio of the source */
  background: var(--paper);
  display: block;
}

.media-thumbnails {
  display: grid;
  grid-template-columns: repeat(auto-fill, 64px);
  gap: 4px;
}
.thumbnail {
  width: 64px; height: 48px;
  object-fit: cover;
  border: 1px solid var(--rule-2);
  cursor: pointer;
  background: var(--paper-2);
  position: relative;
  transition: border-color var(--dur-1) var(--ease-step), box-shadow var(--dur-1) var(--ease-step);
}
.thumbnail:hover { border-color: var(--ink); }
.thumbnail.active { border-color: var(--mark); box-shadow: inset 0 0 0 2px var(--mark); }
.thumbnail:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }
.thumbnail.video-thumb {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--t-11);
  color: var(--ink); background: var(--paper-2);
  flex-direction: column; gap: 2px;
}
.thumbnail.video-thumb i { color: var(--mark); }
.thumbnail.video-thumb span { font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; }

/* Content column: ONLY this column scrolls. */
.project-content-column {
  min-width: 0;
  font-family: var(--font-serif);
  color: var(--ink);
  overflow-y: auto;
  padding: var(--s-5);
  height: 100%;
}
.project-detail-header { padding-bottom: var(--s-4); border-bottom: 1px solid var(--ink); margin-bottom: var(--s-4); }
.project-detail-title {
  font-family: var(--font-mono);
  font-size: var(--t-24);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 4px;
}
.project-detail-subtitle {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-2);
  margin: 0;
}
.project-content-column h3 {
  font-family: var(--font-mono);
  font-size: var(--t-12);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-2);
  margin: var(--s-4) 0 var(--s-2);
  border-top: 1px solid var(--rule);
  padding-top: var(--s-3);
}
.project-content-column ul,
.project-content-column ol { padding-left: var(--s-4); margin-bottom: var(--s-3); }
.project-content-column li { font-family: var(--font-serif); margin-bottom: 4px; }
.project-content-column p { font-family: var(--font-serif); }
.project-modal .project-description {
  display: block;
  max-width: none;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}
.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-3) 0 var(--s-2);
}
.project-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--dur-1) var(--ease-step), color var(--dur-1) var(--ease-step);
}
.project-link:hover,
.project-link:focus-visible {
  color: var(--paper);
  background: var(--mark);
  outline: none;
}

@media (max-width: 800px) {
  .project-modal { padding: var(--s-3); align-items: flex-end; }
  .project-modal .modal-content {
    max-height: 92vh;
    height: 92vh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  .project-modal .modal-body { padding: 0; overflow-y: auto; flex: 1; min-height: 0; }
  /* Single column: media on top, content scrolls below */
  .project-detail {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: auto;
    overflow: visible;
  }
  .project-media-column {
    border-right: 0;
    border-bottom: 1px solid var(--ink);
    padding: var(--s-3);
    overflow: visible;
  }
  .project-content-column {
    overflow-y: visible;
    height: auto;
    padding: var(--s-4);
  }
  .main-media { aspect-ratio: 16 / 9; }
  .media-thumbnails { overflow-x: auto; display: flex; flex-wrap: nowrap; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .project-card,
  .project-modal,
  .project-modal .modal-content,
  .lightbox-overlay {
    transition: none !important;
  }
}