/* Project detail view, shared by the home list overlay and the Work page. */

.project-detail {
  position: fixed;
  inset: 0;
  z-index: 30015;
  background: #0a0a0a;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}

.project-detail.active {
  pointer-events: auto;
}

.detail-back {
  position: absolute;
  top: 3rem;
  left: 3rem;
  z-index: 2;
  cursor: pointer;
  opacity: 0;
}

.detail-info {
  width: 70%;
  height: 100vh;
  padding: 22vh 4rem 4rem;
  display: flex;
  flex-direction: column;
}

.detail-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  opacity: 0;
}

.detail-title {
  font-family: "Breton", sans-serif;
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #f0f0f0;
  white-space: nowrap;
}

.detail-year {
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #f0f0f0;
  white-space: nowrap;
}

.detail-desc {
  font-family: "Breton", sans-serif;
  font-size: clamp(0.85rem, 1.1vw, 1.05rem);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.45);
  max-width: 28rem;
  margin-top: 2.5rem;
  opacity: 0;
}

.detail-tags {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
  opacity: 0;
}

.detail-tag {
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.4em 0.8em;
  border-radius: 50px;
}

.detail-gallery-wrap {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100vh;
  display: flex;
  align-items: stretch;
}

.detail-thumbs {
  width: 14%;
  height: 100vh;
  overflow-y: clip;
  overflow-x: visible;
  flex-shrink: 0;
}

.detail-thumbs-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 50vh 0;
  will-change: transform;
}

.detail-thumbs-inner img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.detail-thumbs-inner img.active {
  opacity: 1;
}

.detail-selected {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  perspective: 800px;
}

.detail-selected img {
  max-width: 100%;
  max-height: 85vh;
  height: auto;
  display: block;
  object-fit: contain;
  will-change: transform;
  transform-style: preserve-3d;
}

@media (max-width: 768px) {
  .project-detail {
    overflow-y: auto;
  }
  .detail-info {
    width: 100%;
    height: auto;
    padding: 5rem 1.5rem 2rem;
  }
  .detail-gallery-wrap {
    position: relative;
    width: 100%;
    height: auto;
    top: auto;
    right: auto;
  }
  .detail-back {
    top: 1.5rem;
    left: 1.5rem;
  }
  .detail-thumbs {
    width: 18%;
  }
}

body.jstar-page .detail-desc { overflow-wrap: anywhere; color: #b5c0d0; }

@media (max-width: 768px) {
  body.jstar-page .detail-title-wrap { flex-wrap: wrap; }
  body.jstar-page .detail-title { font-size: clamp(28px, 10vw, 48px); white-space: normal; overflow-wrap: anywhere; }
}

.detail-back { border: 0; background: transparent; color: inherit; text-align: left; }

@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  body.jstar-page .project-detail { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 20px max(28px, env(safe-area-inset-bottom)); background: #07101c; }
  body.jstar-page .detail-back { position: sticky; display: block; top: 0; left: auto; width: 100%; min-height: 68px; padding: 20px 0 16px; background: #07101c; z-index: 3; }
  body.jstar-page .detail-info { width: 100%; height: auto; min-height: 0; padding: 20px 0 25px; }
  body.jstar-page .detail-title-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  body.jstar-page .detail-title { font-size: clamp(28px, 8vw, 42px); line-height: 1.12; white-space: normal; overflow-wrap: anywhere; }
  body.jstar-page .detail-year { font: 500 12px/1.5 Inter, sans-serif; color: #8da4c1; }
  body.jstar-page .detail-desc { margin-top: 24px; max-width: none; font-size: 15px; line-height: 1.85; overflow-wrap: break-word; }
  body.jstar-page .detail-tags { margin-top: 18px; gap: 7px; }
  body.jstar-page .detail-tag { max-width: 100%; overflow-wrap: anywhere; color: #aabbd1; font-size: 10px; line-height: 1.6; letter-spacing: .04em; border-color: #314258; }
  body.jstar-page .detail-gallery-wrap { position: static; width: 100%; height: auto; display: block; }
  body.jstar-page .detail-thumbs { width: 100%; height: auto; overflow: visible; }
  body.jstar-page .detail-thumbs-inner { width: 100%; padding: 0; display: grid; gap: 16px; transform: none !important; will-change: auto; }
  body.jstar-page .detail-thumbs-inner img { width: 100% !important; height: auto; opacity: 1; cursor: default; border: 1px solid #203047; border-radius: 6px; }
  body.jstar-page .detail-selected { display: none; }
}

@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  body.jstar-page .detail-gallery-wrap.detail-mobile-gallery { display: flex; flex-direction: column; gap: 16px; padding-bottom: 12px; }
  body.jstar-page .detail-mobile-gallery .detail-selected { display: block; order: -1; padding: 0; perspective: none; }
  .project-stage { position: relative; height: clamp(235px, 44svh, 410px); overflow: hidden; background: #0b1727; border: 1px solid #243b57; border-radius: 10px; touch-action: pan-y pinch-zoom; cursor: grab; }
  .project-stage:active { cursor: grabbing; }
  body.jstar-page .detail-selected .project-stage-image { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; padding: 8px; user-select: none; -webkit-user-drag: none; transform-style: flat; }
  .project-gallery-bar { display: flex; align-items: center; gap: 16px; padding-top: 14px; }
  .project-gallery-count { font: 500 11px/1.5 Inter,sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .1em; color: #a5b9d3; }
  .project-gallery-bar>a { margin-left: auto; color: #96bcf5; font: 400 12px/1.5 Inter,sans-serif; text-decoration: none; }
  .project-gallery-controls { display: flex; gap: 8px; }
  .project-gallery-controls button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #354c69; background: transparent; color: #e2ecfb; font-size: 19px; cursor: pointer; }
  .project-gallery-controls button:disabled { opacity: .28; cursor: default; }
  body.jstar-page .detail-mobile-gallery .detail-thumbs-inner { display: flex; gap: 10px; overflow-x: auto; padding: 3px 1px 9px; scrollbar-width: thin; scrollbar-color: #385578 transparent; }
  .project-thumbnail { flex: 0 0 66px; width: 66px; height: 51px; padding: 3px; border: 1px solid #243850; border-radius: 6px; background: #0a1523; cursor: pointer; transition: border-color .2s,background .2s; }
  .project-thumbnail[aria-pressed=true] { border-color: #649ef8; background: #183459; }
  body.jstar-page .detail-thumbs-inner .project-thumbnail img { width: 100% !important; height: 100%; object-fit: cover; border: 0; border-radius: 3px; pointer-events: none; }
  .project-stage:focus-visible,.project-thumbnail:focus-visible,.project-gallery-controls button:focus-visible { outline: 2px solid #74a8ff; outline-offset: 3px; }
}

.project-detail:focus { outline: none; }

@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .project-stage { height: auto; aspect-ratio: 4 / 3; min-height: 225px; }
  body.jstar-page .detail-mobile-gallery .detail-thumbs-inner { flex-direction: row; align-items: center; }
}

@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .project-stage[aria-busy=true] { cursor: progress; }
  .project-stage[aria-busy=true]:after { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: #6ca5ff; opacity: .75; }
}

.project-expand { margin-left: auto; padding: 8px 0; border: 0; background: transparent; color: #96bcf5; font: 400 12px/1.5 Inter,sans-serif; cursor: pointer; }

.project-lightbox { position: fixed; inset: 0; margin: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; background: #050c17f7; color: #edf3ff; overflow: hidden; }

.project-lightbox::backdrop { background: #030913e6; }

.project-lightbox-header { display: flex; align-items: center; gap: 16px; padding: max(12px,env(safe-area-inset-top)) 20px 12px; min-height: 68px; border-bottom: 1px solid #28394e; }

.project-lightbox-header>span { flex: 1; min-width: 0; font: 400 12px/1.5 Inter,sans-serif; overflow-wrap: anywhere; }

.project-lightbox-header button { flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 8px; color: #d6e5fc; background: transparent; border: 1px solid #34475e; border-radius: 6px; font: 400 12px/1.4 Inter,sans-serif; cursor: pointer; }

.project-lightbox-header .project-lightbox-close { font-size: 27px; border-radius: 50%; line-height: 1; }

.project-lightbox-scroll { height: calc(100% - 81px); overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; padding-bottom: env(safe-area-inset-bottom); }

.project-lightbox-content { width: 100%; min-height: 100%; display: flex; justify-content: center; align-items: flex-start; padding: 18px; }

.project-lightbox-content.is-zoomed { width: 200%; }

.project-lightbox-image { display: block; width: 100%; max-width: 1200px; height: auto; object-fit: contain; }

.project-lightbox-content.is-zoomed .project-lightbox-image { max-width: none; }

.project-lightbox button:focus-visible { outline: 2px solid #7aafff; outline-offset: 3px; }

.project-lightbox[open] { display: flex; flex-direction: column; }

.project-lightbox-scroll { flex: 1; min-height: 0; height: auto; }

body.jstar-page .detail-links { display: flex; flex-wrap: wrap; gap: 4px 28px; max-width: 28rem; margin-top: 1.25rem; opacity: 0; }

body.jstar-page .detail-links:empty { display: none; }

body.jstar-page .detail-link { display: inline-flex; align-items: center; min-height: 44px; color: #8fb9ff; font: 400 14px/1.4 Inter, sans-serif; text-decoration: underline; text-underline-offset: 4px; }

body.jstar-page .detail-link:hover, body.jstar-page .detail-link:focus-visible { color: #fff; }

body.jstar-page .detail-selected video { max-width: 100%; max-height: 85vh; height: auto; display: block; object-fit: contain; background: #000; }

body.jstar-page .detail-link-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; flex-basis: 100%; }

@media (min-width: 769px) {
  body.jstar-page .detail-link-group .detail-link { min-height: 34px; }
}

body.jstar-page .detail-link-label { flex-basis: 100%; margin-top: 4px; color: #8da4c1; font: 600 0.7rem/1.5 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }

html.jstar-project-entry, html.jstar-project-entry body { background: #07101c; }

html.jstar-project-entry body * { visibility: hidden; }

html.jstar-project-entry .project-detail, html.jstar-project-entry .project-detail * { visibility: visible; }

body.jstar-page .project-detail { background: #07101c; }

body.jstar-page .detail-year { color: #8da4c1; }

body.jstar-page .detail-tag { color: #aabbd1; border-color: #314258; }

/* Desktop text column stops where the thumbnail column starts (45vw), with the same 2rem gap the title fit uses. */
@media (min-width: 769px) {
  body.jstar-page :is(.detail-desc, .detail-tags, .detail-links) { max-width: min(28rem, calc(45vw - 6rem)); }
}