/* =========================================================
   PROJECT.CSS
   Project page layout for i.s.m.architecten

   Structure:
   1. Desktop grid layout
   2. Project info / title / text / data
   3. Photo column
   4. Drawing column
   5. Mobile horizontal swipe layout
   6. Mobile Instagram-style navigation
========================================================= */


/* =========================================================
   1. PROJECT LAYOUT — DESKTOP GRID
========================================================= */

.project-layout {
  position: fixed;
  inset: 0;

  display: grid;

  /*
    Grid structure:
    [left margin] [info] [gap] [photos] [gap] [drawings] [gap]
  */
  grid-template-columns:
    var(--layout-margin-left)
    var(--project-col-text)
    var(--layout-gap)
    var(--project-col-photo)
    var(--layout-gap)
    var(--project-col-drawing)
    var(--layout-gap);

  height: 100vh;
  overflow-y: auto;

  background: #fff;

  font-size: 14px;
  line-height: 1.25;

  box-sizing: border-box;
}


/* =========================================================
   2. GENERIC COLUMN BEHAVIOUR
========================================================= */

.project-info,
.project-photo-column,
.project-drawing-column {
  min-width: 0;   /* prevents overflow inside CSS grid columns */
  min-height: 0;
  box-sizing: border-box;
}


/* =========================================================
   3. LEFT COLUMN — INFO
========================================================= */

.project-info {
  grid-column: 2;
  height: 100vh;
  overflow: hidden; /* keeps text and data inside the column */
  position: relative;
  min-width: 0;
}

.project-info-inner {
  height: 100%;
  display: grid;

  /*
    Desktop vertical structure:
    [top rhythm] [scrolling text] [data table] [bottom rhythm]
  */
  grid-template-rows:
    5.8vh
    minmax(0, 1fr)
    auto
    5.8vh;

  min-width: 0;
}


/* =========================================================
   4. HEADER — PROJECT TITLE
========================================================= */

.project-header {
  grid-row: 1;
  align-self: end;
  margin: 0 0 1em 0;
}

.project-title-line {
  position: fixed; /* aligns title independently from the info column */
  top: calc(5.8vh - 1.25em - 1em);
  left: clamp(32px, 4.2vw, 80px);

  margin: 0;

  font-size: 14px;
  line-height: 1.25;

  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
}

.project-title-main {
  font-weight: 600;
}

.project-title-detail {
  font-weight: 400;
}


/* =========================================================
   5. TEXT — SCROLL + WRAP
========================================================= */

.project-text-wrapper {
  grid-row: 2;

  min-width: 0;
  min-height: 0;

  width: 100%;
  max-width: 100%;

  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-width: none;
}

.project-text-wrapper::-webkit-scrollbar {
  display: none;
}

.project-text {
  font-size: 12.5px;
  line-height: 1.4;
  margin-top: 0;
}

.project-text,
.project-text * {
  max-width: 100%;
  min-width: 0;

  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.project-text p {
  margin: 0 0 1em 0;
}

.project-text > *:first-child {
  margin-top: 0;
}

.project-text > *:last-child {
  margin-bottom: 0;
}


/* =========================================================
   6. DATA TABLE
========================================================= */

.project-data {
  grid-row: 3;
  align-self: end;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin-top: 16px;
  overflow: hidden;

  font-size: 11.5px;
  line-height: 1.4;

  border-bottom: 0.5px solid rgba(0, 0, 0, 0.4);
}

.project-data-row {
  display: grid;
  grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
  column-gap: 12px;

  min-width: 0;
  max-width: 100%;

  padding: 4px 0;
  align-items: baseline;
}

.project-data-row + .project-data-row {
  border-top: 0.5px solid rgba(0, 0, 0, 0.4);
}

.project-data-row > div {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

.project-data-row p {
  margin: 0;
}


/* =========================================================
   7. PHOTOGRAPHY CREDIT LINE
========================================================= */

.project-photography {
  position: fixed;

  /* same left alignment as the project title */
  left: clamp(32px, 4.2vw, 80px);

  /* positioned on the lower desktop rhythm line */
  top: calc(100vh - 5.8vh);

  z-index: 20;

  display: grid;
  grid-template-columns: 120px auto;
  column-gap: 12px;

  font-size: 11.5px;
  line-height: 1.4;

  white-space: nowrap;
  padding: 4px 0;
}

.project-photography p {
  margin: 0;
}


/* =========================================================
   8. MIDDLE COLUMN — PHOTOS
========================================================= */

.project-photo-column {
  grid-column: 4;
  overflow: hidden;
}

.project-photo-scroll {
  height: 88.4vh;
  margin-top: 5.8vh;

  overflow-y: auto;

  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1vw, 20px);

  scrollbar-width: none;
}

.project-photo-scroll::-webkit-scrollbar {
  display: none;
}

.project-photo {
  margin: 0;
}

.project-photo img {
  width: 100%;
  height: auto;
  display: block;
}


/* =========================================================
   9. RIGHT COLUMN — DRAWINGS / SLIDES
========================================================= */

.project-drawing-column {
  grid-column: 6;
  position: relative;
  overflow: hidden;
  padding: 0;
}

.project-drawing-slide {
  position: absolute;
  inset: 5.8vh 0 5.8vh 0;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;
  overflow: hidden;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.project-drawing-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.project-drawing-slide img {
  width: 100%;
  height: auto;
  display: block;
}


/* =========================================================
   10. LEGACY MOBILE SWIPE INDICATOR
   Disabled because mobile now uses .mobile-project-nav.
========================================================= */

.mobile-swipe-indicator {
  display: none !important;
}


/* =========================================================
   11. MOBILE — HORIZONTAL SWIPE LAYOUT
========================================================= */

@media (max-width: 760px) {

  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .project-layout {
    position: fixed;
    inset: 0;

    display: flex;
    flex-direction: row;

    width: 100vw;
    height: 100vh;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    padding: 0;
  }

  /*
    Each project column becomes one full-screen horizontal slide:
    1. text / data
    2. photos
    3. drawings
  */
  .project-info,
  .project-photo-column,
  .project-drawing-column {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;

    scroll-snap-align: start;

    box-sizing: border-box;
    padding: 24px 16px 41px 16px;
  }

  .project-info {
    order: 1;
    overflow: hidden;
  }

  .project-photo-column {
    order: 2;
    overflow-y: auto;
  }

  .project-drawing-column {
    order: 3;
    overflow-y: auto;
  }

  /*
    Mobile uses flex instead of grid to avoid the old desktop rhythm
    creating unwanted vertical gaps above the text.
  */
  .project-info-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  .project-text-wrapper {
    flex: 0 1 auto;
    min-height: 0;
    max-height: 100%;

    overflow-y: auto;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;
  }

  .project-data {
    margin-top: auto;
  }

  .project-photo-scroll {
    height: auto;
    margin: 0;
    overflow: visible;

    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .project-drawing-slide {
    position: relative;
    inset: auto;

    display: block;

    margin: 0 0 16px 0;

    opacity: 1;
    pointer-events: auto;
    transition: none;
  }

  .project-title-line {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    z-index: 100;

    margin: 0;
    padding: 16px 16px 4px 16px;

    background: #fff;

    font-size: 13px;
    line-height: 1.25;

    white-space: normal;
  }

  .project-photography {
    position: relative;
    left: auto;
    top: auto;

    display: grid;
    grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
    column-gap: 12px;
    align-items: baseline;

    margin: 0;
    padding: 4px 0;

    font-size: 11.5px;
    line-height: 1.4;

    white-space: normal;
  }

  .project-photography > *:first-child {
    grid-column: 1;
  }

  .project-photography > *:last-child {
    grid-column: 2;
  }

  .project-photography p {
    margin: 0;
  }
}


/* =========================================================
   12. MOBILE — INSTAGRAM-STYLE NAVIGATION

   Requires this HTML in project.php:

   <div class="mobile-project-nav">
     <button class="mobile-project-arrow mobile-project-arrow-left" type="button">‹</button>
     <div class="mobile-project-dots">
       <button class="dot active" type="button" data-slide="0"></button>
       <button class="dot" type="button" data-slide="1"></button>
       <button class="dot" type="button" data-slide="2"></button>
     </div>
     <button class="mobile-project-arrow mobile-project-arrow-right" type="button">›</button>
   </div>
========================================================= */

.mobile-project-nav {
  display: none;
}

@media (max-width: 760px) {

  .mobile-project-nav {
    display: block;
  }

  .mobile-project-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);

    z-index: 20000;

    border: none;
    background: transparent;

    font-size: 36px;
    line-height: 1;
    color: rgb(0, 0, 0);

    /*
      Keep the clickable area inside the viewport,
      while visually placing the arrow close to the screen edge.
    */
    width: 40px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    cursor: pointer;
    pointer-events: auto;

    transition: opacity 0.2s ease;
  }

  .mobile-project-arrow-left {
    left: 0;
    justify-content: flex-start;
  }

  .mobile-project-arrow-right {
    right: 0;
    justify-content: flex-end;
  }

  .mobile-project-dots {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);

    z-index: 20000;

    display: flex;
    gap: 6px;
  }

  .mobile-project-dots .dot {
  width: 8px;
  height: 8px;

  aspect-ratio: 1 / 1;       /* 👈 zorgt dat ze perfect rond blijven */
  flex: 0 0 8px;              /* 👈 voorkomt squash in flex */

  border-radius: 50%;
  background: #000;
  mix-blend-mode: difference;

  opacity: 0.3;

  border: none;
  padding: 0;
  margin: 0;

  line-height: 0;             /* 👈 voorkomt inline stretch */
  appearance: none;           /* 👈 reset button styling */

  transition: opacity 0.2s ease;
}

  .mobile-project-dots .dot.active {
    opacity: 1;
  }

  .mobile-project-arrow.is-disabled {
  opacity: 0;
  pointer-events: none;
  }
}