/* ============================================================
   project-detail.css — Project Detail  v2 (light theme)
   ============================================================ */

/* ─── BACK LINK ──────────────────────────────────────────── */
.project-back {
  position: fixed;
  top: calc(var(--nav-h) + 1.25rem);
  left: var(--space-md);
  z-index: var(--z-raised);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  transition: color var(--dur-fast) ease;
  cursor: auto;
}
.project-back:hover { color: var(--color-text); }
.project-back__arrow { display: inline-block; transform: scaleX(-1); }

/* ─── HERO PANEL ─────────────────────────────────────────── */
.panel--detail-hero {
  background: var(--color-bg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  padding: var(--nav-h) var(--space-xl) var(--space-xl);
  gap: var(--space-xl);
}

.detail-hero__img-wrap {
  height: 72vh;
  overflow: hidden;
}
.detail-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.detail-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: var(--space-md);
  gap: var(--space-md);
}
.detail-hero__index {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.detail-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 300;
  
  line-height: var(--leading-tight);
  color: var(--color-text);
}
.detail-hero__subtitle {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 300;
  font-style: italic;
  color: var(--color-text-muted);
}
.detail-hero__rule { width: 40px; height: 1px; background: var(--color-accent); }

.detail-hero__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm) var(--space-md);
}
.detail-meta-item__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: 0.2rem;
  display: block;
}
.detail-meta-item__value {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 300;
  color: var(--color-text);
  display: block;
}

/* ─── TEXT PANEL ─────────────────────────────────────────── */
.panel--detail-text {
  background: var(--color-bg);
  display: flex;
  align-items: center;
  padding: var(--nav-h) var(--space-2xl);
}
.detail-text__inner { max-width: 55ch; }
.detail-text__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
  display: block;
}
.detail-text__heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 300;
  
  line-height: var(--leading-snug);
  color: var(--color-text);
  margin-bottom: var(--space-md);
}
.detail-text__body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 300;
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}
.detail-text__body + .detail-text__body { margin-top: var(--space-sm); }

/* ─── FULL-BLEED IMAGE PANEL ─────────────────────────────── */
.panel--detail-image {
  position: relative;
  background: var(--color-surface);
}
.detail-full-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-caption {
  position: absolute;
  bottom: var(--space-md);
  right: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  
  color: rgba(240, 237, 232, 0.5);
  max-width: 28ch;
  text-align: right;
}

/* ─── SPLIT PANEL ────────────────────────────────────────── */
.panel--detail-split {
  background: var(--color-bg);
  display: grid;
  grid-template-columns: 55fr 45fr;
}
.detail-split__img-wrap { overflow: hidden; }
.detail-split__img { width: 100%; height: 100%; object-fit: cover; }
.detail-split__text {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
}
.detail-split__heading {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 300;
  
  line-height: var(--leading-snug);
  color: var(--color-text);
}
.detail-split__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* ─── PORTRAIT PANEL ─────────────────────────────────────── */
.panel--detail-portrait {
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail-portrait__wrap { width: 45vw; height: 82vh; overflow: hidden; }
.detail-portrait__img  { width: 100%; height: 100%; object-fit: cover; }

/* ─── END PANEL ──────────────────────────────────────────── */
.panel--detail-end {
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--space-xl);
}
.detail-end__heading {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 300;
  
  line-height: var(--leading-snug);
  color: var(--color-text);
  max-width: 14ch;
}
.detail-end__back {
  margin-top: var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  
  text-transform: uppercase;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: gap var(--dur-normal) var(--ease-out);
}
.detail-end__back:hover { gap: var(--space-md); }

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1023px) {
  .panel--detail-text { padding: var(--nav-h) var(--space-lg); }
}

@media (max-width: 767px) {
  .panel--detail-hero {
    grid-template-columns: 1fr;
    padding: calc(var(--nav-h) + var(--space-sm)) var(--space-sm) var(--space-lg);
    gap: var(--space-md);
  }
  .detail-hero__img-wrap { height: 42vw; }
  .panel--detail-text {
    width: 100%;
    flex-basis: 100%;
    padding: var(--space-xl) var(--space-sm);
  }
  .panel--detail-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .detail-split__img-wrap { height: 50vw; }
  .detail-portrait__wrap  { width: 82vw; height: 56vh; }
}

/* V13.9 — keep native arrow cursor on text and all hover targets */
*, *::before, *::after,
a, button, input, textarea, select, label,
p, span, h1, h2, h3, h4, h5, h6,
[role="button"], [data-cursor], .project-link, .nav-link, .contact-direct__link {
  cursor: default !important;
}


/* ─── PROJECT 01 PINNED IMAGE PAN EXPERIMENT ─────────────── */
.panel--detail-pan {
  overflow: hidden;
}
.detail-pan-stack {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--color-surface);
}
.detail-pan-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none;
  will-change: transform;
  z-index: 10;
  pointer-events: none;
}
.detail-pan-img.is-active,
.detail-pan-img:first-child {
  transform: none;
  z-index: 10;
}
.detail-pan-img:nth-child(2) { z-index: 20; }
.detail-pan-img:nth-child(3) { z-index: 30; }


/* V20.5 Typography */
h1, h2, h3, .hero-title, .project-title {
  font-family: 'Cal Sans', sans-serif;
}

body, p, span, a, .menu, .small-text {
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
}

/* V4.5 — tighten Philosophy-to-image spacing without changing panel width/scroll math */
@media (min-width: 768px) {
  .panel--detail-text .detail-text__inner {
    transform: translateX(12vw);
  }
}

/* V5.8 — responsive detail-page heading safeguards */
.detail-hero__title,
.detail-text__heading,
.detail-split__heading,
.detail-end__heading {
  overflow-wrap: break-word;
  word-break: normal;
}

@media (max-width: 767px) {
  .detail-hero__title {
    font-size: clamp(2rem, 10.5vw, 3.25rem);
    line-height: 0.98;
  }

  .detail-text__heading,
  .detail-split__heading {
    font-size: clamp(1.75rem, 8.5vw, 2.5rem);
    line-height: 1.05;
  }

  .detail-end__heading {
    font-size: clamp(2rem, 11vw, 3.25rem);
    line-height: 1;
  }
}