/* ===== PROJECT PAGES — detail layout + image slider =====
   Shared by every page in /projekt (previously copied inline into each one).
   Loaded after style.css, so equal-specificity rules here win without
   !important. */

html, body { overflow-x: clip; }

.project-detail { padding-top: 0; overflow-x: clip; }
.project-detail .description { font-size: var(--fs-body); line-height: 1.75; max-width: 62ch; }
.project-detail .meta-value { text-transform: uppercase; }
.project-detail .project-body { gap: 0 6rem; grid-template-columns: 260px 1fr; }
.project-detail .project-type { font-size: var(--fs-ui); margin-bottom: 2rem; }

/* ---- Slider ---------------------------------------------------------- */

.slider-outer {
  margin: 0 0 2rem 0;
  width: 100%;
  position: relative;
  user-select: none;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--black);
  font-family: var(--font);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s, background-color 0.15s;
}
.slider-btn:hover { opacity: 1; background: rgba(255,255,255,0.75); }
#prevBtn { left: -3.25rem; }
#nextBtn { right: -3.25rem; }

/* A fixed 675px stage, capped to the visible height under the header so a
   short screen (a phone turned sideways, a small laptop window) never cuts
   the picture off or pushes the arrows below the fold. On any screen taller
   than ~790px this resolves to 675px. */
.slider-track {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  height: 675px;
  height: min(675px, calc(100vh - 7rem));
  height: min(675px, calc(100svh - 7rem));
  min-height: 240px;
  background: var(--white);
  /* Swiping is native scrolling with snap points — the browser owns the
     gesture end to end, so there's no custom touch JS left to lose a
     fight with iOS Safari's own gestures. */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Stop the browser silently shifting scrollLeft to "preserve" the
     viewport when an image finishes loading and changes layout inside
     the track — that's scroll anchoring, and here it just drifts the
     slider off slide 1. */
  overflow-anchor: none;
}
.slider-track::-webkit-scrollbar { display: none; }

.slider-inner {
  display: flex;
  height: 100%;
}

/* overflow: hidden keeps a zoomed drawing (transform: scale) inside its own
   slide — a transform is not clipped by the track alone. */
.slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.slide-content {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  max-height: 100%;
}

.slide-content img,
.slide-content video {
  display: block;
  max-width: 100%;
  max-height: calc(675px - 22px);
  max-height: min(653px, calc(100vh - 7rem - 22px));
  max-height: min(653px, calc(100svh - 7rem - 22px));
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}
.slide-content img { width: auto; height: auto; }

.slide-credit {
  font-size: var(--fs-micro);
  color: var(--gray);
  margin-top: 5px;
}

.slider-dots { display: none; }

/* A one-off desktop layout choice (Örby) shows one photo inset at 60% width
   for variety among the other full-width slides. At mobile widths 60% of an
   already-narrow screen reads as tiny, so it only applies above 760px. */
@media (min-width: 761px) {
  .desktop-inset {
    width: 60%;
    margin: 0 auto;
  }
}

/* Tablet range: no room outside the track, so bring the arrows in. */
@media (max-width: 1100px) and (min-width: 761px) {
  #prevBtn { left: 0.25rem; }
  #nextBtn { right: 0.25rem; }
  .slider-btn { background: rgba(255,255,255,0.72); opacity: 0.8; }
}

@media (max-width: 760px) {
  /* 260px + a 6rem gap left almost nothing for the text on a phone. */
  .project-detail .project-body {
    grid-template-columns: 1fr;
    gap: 2rem 0;
  }
  .project-detail {
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
  }

  /* No arrows on touch — swiping is the control. */
  .slider-btn { display: none; }

  /* One height for the whole slider, set by slider.js from the slides, so
     the page never jumps as you swipe. Shorter images are centred in it. */
  .slider-track { height: auto; min-height: 0; }
  .slide {
    height: auto;
    align-items: center;
    padding: 0;
  }
  .slide-content { max-height: none; }
  .slide-content img,
  .slide-content video {
    max-height: 72vh;
    max-width: 100%;
    width: auto;
    height: auto;
  }

  /* Drawings zoomed up for the tall desktop stage crop far too tight on the
     short mobile stage — show them whole. (slider.js still treats them as
     zoomed via the class, so they don't vote on the stage height.) */
  .slide-content img.zoomed-plan { transform: none !important; }

  .slider-outer { margin: 0.75rem 0 1.75rem; }

  /* A quiet hint that there is more to swipe to, since the arrows are gone.
     No transition on the active dot: it follows the finger, and any fade
     reads as lag. */
  .slider-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 1rem;
  }
  .slider-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d6d6d6;
  }
  .slider-dots span.on { background: var(--black); }
}