/* ============================================
   MATHEO DELANNOY — Portfolio Theme v14.1
   8-column grid: [1-2] | vline | [3-7] | vline | [8]
   Modules: Full, Pair, Quad, Trio, Video, Separator
   ============================================ */

/* --- Fonts --- */
@font-face {
  font-family: 'Affairs';
  src: url('../fonts/Affairs-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Affairs';
  src: url('../fonts/Affairs-Italic.woff') format('woff');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Neuf Sans';
  src: url('../fonts/Neuf.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* --- Variables --- */
:root {
  --font-nav: 'Neuf Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Affairs', Georgia, serif;
  --color-black: #000;
  --color-white: #fff;
  --color-divider: #000;
  --margin: 20px;
  --frame: 20px;
  --nav-top: 30px;
  --font-size-nav: 10px;
  --font-size-body: 12px;
  --lh: 1.5;
  --line-width: 0.5px;
  --content-gap: 40px;
  --vline-pad: 15px;
  --hline-gap: 10px;
  --divider-top: 120px;
}

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--lh);
  color: var(--color-black);
  background: var(--color-white);
  overflow-x: hidden;
  opacity: 0;
  transition: opacity 0.5s;
}
body.loaded { opacity: 1; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, video { max-width: 100%; height: auto; display: block; }

/* ============================================
   WRAPPER & 8-COLUMN GRID
   ============================================ */
.site-wrapper {
  min-height: 100vh;
  padding: 0 var(--margin);
}

.site-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  min-height: 100vh;
  padding-top: var(--nav-top);
}

/* ============================================
   FIXED LINES
   ============================================ */
.hline-top {
  position: fixed;
  top: var(--frame);
  left: var(--margin);
  right: var(--margin);
  height: var(--line-width);
  background: var(--color-black);
  z-index: 50;
  pointer-events: none;
}

.hline-bottom {
  position: fixed;
  bottom: var(--frame);
  left: var(--margin);
  right: var(--margin);
  height: var(--line-width);
  background: var(--color-black);
  z-index: 50;
  pointer-events: none;
}

.vline-1 {
  position: fixed;
  top: var(--frame);
  bottom: var(--frame);
  width: var(--line-width);
  background: var(--color-black);
  z-index: 50;
  pointer-events: none;
}

.vline-2 {
  position: fixed;
  top: var(--frame);
  bottom: var(--frame);
  width: var(--line-width);
  background: var(--color-black);
  z-index: 50;
  pointer-events: none;
}

/* ============================================
   LEFT COLUMN — index (cols 1-2)
   ============================================ */
.left-col {
  grid-column: 1 / 3;
  padding-right: var(--vline-pad);
}

.left-col__inner {
  position: fixed;
  top: calc(var(--frame) + var(--hline-gap));
  left: var(--margin);
  bottom: calc(var(--frame) + var(--hline-gap));
  background: var(--color-white);
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: calc((100vw - 2 * var(--margin)) * 2 / 8 - var(--vline-pad));
}

.left-col__nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: calc(var(--divider-top) - var(--frame) - var(--hline-gap));
  flex-shrink: 0;
}

.site-title {
  font-family: var(--font-nav);
  font-size: var(--font-size-nav);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.site-title a { transition: opacity 0.3s; }
.site-title a:hover { opacity: 0.5; }

.nav-link {
  font-family: var(--font-nav);
  font-size: var(--font-size-nav);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: opacity 0.3s;
}
.nav-link:hover { opacity: 0.5; }

.divider-h-left {
  height: var(--line-width);
  background: var(--color-divider);
  flex-shrink: 0;
}

/* ============================================
   PROJECT INDEX
   ============================================ */
.project-index {
  padding-top: var(--hline-gap);
  text-align: left;
  flex: 1;
  position: relative;
}

.project-index__label {
  font-family: var(--font-nav);
  font-size: var(--font-size-nav);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}

.project-index__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: relative;
}

.project-index__item {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 16px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: baseline;
  transition: opacity 0.15s ease-out;
  white-space: nowrap;
}

.project-index__name {
  width: 50%;
  flex-shrink: 0;
  opacity: 0.25;
  transition: opacity 0.15s ease-out;
}

.project-index__cat {
  opacity: 0.25;
  transition: opacity 0.15s ease-out;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 16px;
  text-align: left;
}

.project-index__dot { display: none; }

.floating-dot {
  position: absolute;
  right: 0;
  top: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-black);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.floating-dot.visible { opacity: 1; }

.project-index__item:hover .project-index__name { opacity: 0.5; }
.project-index__item:hover .project-index__cat { opacity: 1; }
.project-index__item.active .project-index__name { opacity: 1; }
.project-index__item.active .project-index__cat { opacity: 1; }

/* Footer */
.left-col__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-shrink: 0;
}

.nav-sv {
  font-family: var(--font-nav);
  font-size: var(--font-size-nav);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.4;
  transition: opacity 0.3s;
}
.nav-sv:hover { opacity: 1; }

.clock {
  font-family: var(--font-nav);
  font-size: var(--font-size-nav);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.clock__colon { animation: blink 1s step-end infinite; }
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ============================================
   MIDDLE COLUMN — content (cols 3-7)
   ============================================ */
.mid-col {
  grid-column: 3 / 8;
  padding-left: var(--vline-pad);
  padding-right: var(--vline-pad);
}

.mid-col__header {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;
  height: calc(var(--divider-top) - var(--nav-top));
  overflow: hidden;
}

.project-title-header {
  font-family: var(--font-nav);
  font-size: var(--font-size-nav);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0;
  transition: opacity 0.3s ease-out;
  white-space: nowrap;
  align-self: start;
}
.project-title-header.visible { opacity: 1; }

.project-description {
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 13px;
  letter-spacing: 0;
  transition: opacity 0.3s ease-out;
  overflow: hidden;
  column-count: 2;
  column-gap: 20px;
  column-fill: auto;
  height: 70px;
  align-self: start;
}

.divider-h-mid {
  height: var(--line-width);
  background: var(--color-divider);
}

.project-content {
  padding-top: var(--content-gap);
  padding-bottom: 0;
  min-height: 0;
  position: relative;
}

.project-slide { display: none; opacity: 0; }
.project-slide.active { display: block; opacity: 1; }
.project-slide.is-fading-out {
  position: absolute;
  top: var(--content-gap);
  left: 0; right: 0;
  pointer-events: none;
}

/* ============================================
   IMAGES — 16:9
   ============================================ */
.project-images {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.project-image--full {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.project-image--full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================
   PAIR MODULE — 2 images side by side (8:9 each, 16:9 total)
   ============================================ */
.project-image-pair {
  display: flex;
  width: 100%;
  overflow: hidden;
}
.project-image--pair {
  flex: 1;
  overflow: hidden;
  aspect-ratio: 8 / 9;
}
.project-image--pair img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-image-row {
  display: flex;
  gap: 0;
}
.project-image-row .project-image-pair,
.project-image-row .project-image-quad,
.project-image-row .project-image-trio {
  flex: 1;
  min-width: 0;
}
.project-image-row--with-text { gap: 20px; }
.project-image-row__text {
  flex: 0 0 140px;
  align-self: flex-start;
  padding-top: 4px;
}
.project-image-row__text p {
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 13px;
}

/* ============================================
   QUAD MODULE — 4 images in 2x2 grid (each 16:9, total 16:9)
   ============================================ */
.project-image-quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.project-image--quad {
  overflow: hidden;
}
.project-image--quad img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================
   TRIO MODULE — 1 big (8:9) + 2 small (16:9 each), total 16:9
   ============================================ */
.project-image-trio {
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.project-image--trio-big {
  flex: 1;
  overflow: hidden;
}
.project-image--trio-big img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-image--trio-smalls {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.project-image--trio-sm {
  flex: 1;
  overflow: hidden;
}
.project-image--trio-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Separator: 15px above, 30px below (via flex gap) */
.project-separator {
  margin-top: -15px;
}
.project-separator p {
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 13px;
  letter-spacing: 0;
  max-width: 40%;
}

.project-credits { margin-top: 15px; }
.project-credits__details {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--lh);
}

/* ============================================
   VIDEO PLAYER — minimal UI, 16:9
   ============================================ */
.project-video--full {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}

.project-video--full video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-video--vimeo iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.project-video--vimeo { cursor: default; }

.video-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  transition: opacity 0.25s ease-out;
  pointer-events: none;
  z-index: 2;
}
.project-video--full:hover .video-play-overlay { opacity: 1; }
.project-video--full.is-playing .video-play-overlay { opacity: 0; }

.video-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 3;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease-out;
}
.project-video--full:hover .video-progress,
.project-video--full.is-playing .video-progress { opacity: 1; }

.video-progress__bar {
  height: 100%;
  background: #fff;
  width: 0%;
  transition: width 0.1s linear;
}

/* ============================================
   RIGHT COLUMN — tags + year + counter (col 8)
   ============================================ */
.right-col {
  grid-column: 8 / 9;
  padding-left: var(--vline-pad);
}

.right-col__inner {
  position: sticky;
  top: var(--nav-top);
}

.right-col__header {
  height: calc(var(--divider-top) - var(--nav-top));
  overflow: hidden;
}

.project-tags {
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 13px;
  text-align: right;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.project-tags.visible { opacity: 1; }

.divider-h-right {
  height: var(--line-width);
  background: var(--color-divider);
}

.image-counter {
  font-family: var(--font-nav);
  font-size: var(--font-size-nav);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: right;
  padding-top: var(--hline-gap);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.image-counter.visible { opacity: 1; }

/* ============================================
   HORIZONTAL MODE
   ============================================ */
.project-slide[data-display="horizontal"].active {
  display: block;
  height: calc(100vh - var(--frame) * 2 - 160px);
}

.project-images--horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 60px;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.project-images--horizontal::-webkit-scrollbar { display: none; }
.project-images--horizontal.is-dragging {
  cursor: grabbing;
  user-select: none;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.project-image--hz {
  flex-shrink: 0;
  height: 100%;
  display: flex;
  align-items: center;
  scroll-snap-align: start;
}
.project-image--hz img {
  display: block;
  height: 100%;
  width: auto;
  max-height: 100%;
  pointer-events: none;
}

/* ============================================
   EFFECTS
   ============================================ */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--color-white);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}
.page-transition.active { opacity: 1; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  :root {
    --margin: 15px;
    --frame: 15px;
    --nav-top: 25px;
    --content-gap: 20px;
    --vline-pad: 0px;
    --hline-gap: 8px;
    --divider-top: 80px;
  }

  .vline-1, .vline-2, .hline-top, .hline-bottom { display: none; }
  .floating-dot { display: none; }

  .site-grid {
    grid-template-columns: 1fr;
    padding-top: var(--nav-top);
  }

  .left-col, .mid-col, .right-col { grid-column: 1; padding-left: 0; padding-right: 0; }

  .left-col__inner {
    position: relative;
    top: auto; left: auto; width: auto !important; bottom: auto;
    background: none; z-index: auto; display: block;
  }
  .left-col__nav { height: auto; }
  .left-col__footer { padding-top: 20px; padding-bottom: 0; }

  .mid-col__header {
    display: flex; flex-direction: column; height: auto; overflow: visible; gap: 10px;
  }
  .project-title-header { text-align: left; }
  .project-description { column-count: 1; column-fill: balance; height: auto; }
  .project-tags { text-align: left; }
  .project-content { padding-left: 0; padding-bottom: 60px; }

  .right-col__inner { position: relative; top: auto; }
  .right-col__header { height: auto; }
  .image-counter { text-align: left; }

  .project-index__name { width: auto; flex-shrink: 1; }
  .project-index { padding-bottom: 20px; border-bottom: var(--line-width) solid var(--color-divider); }
  .project-index__item { padding-left: 12px; }
  .project-index__name { opacity: 0.75; }
  .project-index__item.active .project-index__name { opacity: 1; }
  .project-index__item.active .project-index__cat { opacity: 0.5; }
  .project-index__item.active::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 4px; border-radius: 50%; background: var(--color-black);
  }

  .divider-h-left, .divider-h-right { display: none; }

  .project-slide[data-display="horizontal"].active { height: auto; }
  .project-images--horizontal {
    flex-direction: column; height: auto; overflow-x: visible; overflow-y: visible;
    cursor: default; gap: 30px;
  }
  .project-image--hz { height: auto; width: 100%; }
  .project-image--hz img { width: 100%; height: auto; max-height: none; }
  .project-image-row { flex-direction: column; gap: 15px; }
  .project-image-row__text { flex: none; }
  .project-separator { margin-top: 0; }

  /* Quad: stack as 2-column on tablet */
  .project-image-quad {
    grid-template-columns: 1fr 1fr;
    aspect-ratio: auto;
  }
  .project-image--quad {
    aspect-ratio: 16 / 9;
  }

  /* Trio: stack vertically on tablet */
  .project-image-trio {
    flex-direction: column;
    aspect-ratio: auto;
  }
  .project-image--trio-big {
    aspect-ratio: 16 / 9;
  }
  .project-image--trio-smalls {
    flex-direction: row;
  }
  .project-image--trio-sm {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 640px) {
  :root { --margin: 12px; }
  .project-images { gap: 15px; }
  .project-image-pair { flex-direction: column; }
  .project-separator { margin-top: 0; }

  /* Quad: single column on mobile */
  .project-image-quad {
    grid-template-columns: 1fr;
  }

  /* Trio: full stack on mobile */
  .project-image--trio-smalls {
    flex-direction: column;
  }
}