/* Project detail overlay: opens from the left when a project card is
   clicked, panel slides in over a blurred backdrop. Built to hold multiple
   "sections" (Challenge, Discovery, ...) navigated via prev/next -- only
   section 1 (Human Handoff) is authored for now; js/project-detail.js
   renders whichever <section> elements exist under a given project's
   .project-detail__sections and disables prev/next at the ends. */

.project-detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12, 12, 13, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 50;
}

.project-detail-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.project-detail {
  position: fixed;
  /* Full-height drawer flush to the viewport's top and bottom edges, per
     the Figma reference (node 98:6539) -- the 840px Figma frame is just
     the design-time artboard height, not a fixed card size. Section
     content keeps its own top/bottom anchoring via each row's
     justify-content: space-between, so extra viewport height opens up the
     middle rather than adding padding around the panel. */
  top: 0;
  /* Starts after the .rail nav (40px, see css/rail.css) rather than at the
     viewport edge -- confirmed against the Figma reference showing the rail
     sitting beside the open panel, not overlapping its sidebar content. */
  left: 40px;
  height: 100vh;
  width: 1200px;
  max-width: calc(100vw - 40px);
  display: flex;
  transform: translateX(-100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 51;
  box-shadow:
    0 16px 32px -4px rgba(12, 12, 13, 0.1),
    0 4px 4px -4px rgba(12, 12, 13, 0.05);
}

.project-detail.is-open {
  transform: translateX(0);
}

.project-detail__title-row {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.project-detail__close {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  padding: 4px;
  background: transparent;
  border: 2px solid var(--bg);
  cursor: url("../assets/svg/cursor.svg") 6 6, pointer;
}

.project-detail__close img {
  width: 100%;
  height: 100%;
}

/* ---------- sidebar (blue, 300px, sticky across sections) ---------- */
.project-detail__sidebar {
  flex: none;
  width: 300px;
  height: 100%;
  box-sizing: border-box;
  padding: 10px;
  background: var(--blue);
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

.project-detail__title {
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--font-impact);
  font-size: 60px;
  line-height: 50px;
  letter-spacing: -1.8px;
  color: var(--bg);
}

.project-detail__divider {
  flex: none;
  width: 100%;
  height: 1px;
  background: var(--bg);
}

.project-detail__intro-heading {
  font-family: var(--font-plexmono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.42px;
  color: var(--bg);
  margin-bottom: 10px;
}

.project-detail__intro-body {
  font-family: var(--font-plexmono);
  font-weight: 300;
  font-size: 14px;
  line-height: normal;
  letter-spacing: -0.42px;
  color: var(--bg);
}

.project-detail__meta-label {
  font-family: var(--font-plexmono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.42px;
  color: var(--bg);
  margin-bottom: 10px;
}

.project-detail__meta-value {
  font-family: var(--font-plexmono);
  font-weight: 300;
  font-size: 14px;
  line-height: normal;
  letter-spacing: -0.42px;
  color: var(--bg);
}

.project-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
}

.project-detail__tags .tag {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--bg);
  border: 0.243px solid var(--red);
  border-radius: 2.435px;
  padding: 4px;
  font-family: "Monomaniac One", sans-serif;
  font-size: 12px;
  letter-spacing: -0.36px;
  color: var(--red);
  text-align: center;
  white-space: nowrap;
}

/* ---------- content panel (white, remainder of width) ---------- */
.project-detail__content {
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  padding: 50px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

.project-detail__sections {
  flex: 1 0 0;
  position: relative;
  width: 100%;
}

.project-detail__section {
  display: none;
  width: 100%;
  height: 100%;
}

.project-detail__section.is-active {
  display: flex;
}

.project-detail__section-row {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.project-detail__section-row--stacked {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

/* Side-by-side row whose text column hugs the top edge instead of being
   vertically centered (Figma's Outcome layout: items-start on the row). */
.project-detail__section-row--top {
  align-items: flex-start;
}

/* Doubled class selector so this beats the base
   .project-detail__section-media rule (justify-content: flex-end), which
   is defined later in the file and would otherwise win the source-order
   tie when an element carries both classes. */
.project-detail__section-media--centered,
.project-detail__section-media.project-detail__section-media--centered {
  flex: 1 0 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Every section now uses the stacked layout (text block on top, media full
   width below) -- .project-detail__section-media defaults to a fixed 500px
   side-by-side column, so it needs to go full-width/flexible here instead. */
.project-detail__section-row--stacked > .project-detail__section-media {
  flex: 1 0 0;
  min-height: 0;
  width: 100%;
  align-items: center;
}

.project-detail__section-text {
  flex: none;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project-detail__section-heading {
  font-family: var(--font-impact);
  font-size: 30px;
  letter-spacing: -0.9px;
  color: var(--blue);
}

.project-detail__section-subheading {
  font-family: var(--font-plexmono);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: -0.42px;
  color: #000000;
}

.project-detail__section-subheading em {
  font-weight: 700;
  font-style: italic;
  color: var(--blue);
}

.project-detail__hypothesis-grid {
  width: 100%;
  max-width: 800px;
  display: flex;
  justify-content: center;
  gap: 30px;
}

.project-detail__hypothesis-card {
  flex: none;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.project-detail__hypothesis-icon {
  width: 40px;
  height: 40px;
}

.project-detail__hypothesis-label {
  font-family: var(--font-plexmono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.36px;
  text-transform: uppercase;
  color: var(--blue);
}

.project-detail__hypothesis-text {
  font-family: var(--font-plexmono);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.3;
  color: #000000;
}

.project-detail__hypothesis-mockup {
  aspect-ratio: 108 / 216;
  width: 108.18px;
  border-radius: 12px;
  /* The captions above wrap to different line counts (2 vs 3), which would
     start each screen at a different y. The flex row stretches all four
     cards to equal height and the four images are identical in size, so
     pushing each image to its card's bottom edge lines all their tops up
     on the same line. */
  margin-top: auto;
}

.project-detail__section-copy {
  font-family: var(--font-plexmono);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: -0.42px;
  color: #000000;
}

.project-detail__section-copy p {
  margin-bottom: 10px;
}

.project-detail__section-copy p:last-child {
  margin-bottom: 0;
}

.project-detail__section-copy em {
  font-weight: 700;
  font-style: italic;
  color: var(--blue);
}

.project-detail__section-media {
  flex: none;
  width: 500px;
  display: flex;
  justify-content: flex-end;
}

.project-detail__badges {
  display: flex;
  gap: 15px;
}

.project-detail__badge {
  flex: none;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg);
}

.project-detail__badge--icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-detail__badge--icon img {
  width: 87%;
  height: 87%;
}

.project-detail__badge--avatar {
  border: 6px solid var(--bg);
  box-sizing: border-box;
}

.project-detail__badge--avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-detail__vision-block {
  width: 100%;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project-detail__vision-row {
  width: 100%;
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.project-detail__vision-intro {
  flex: none;
  width: 220px;
  font-family: var(--font-plexmono);
  font-weight: 300;
  font-size: 14px;
  line-height: normal;
  letter-spacing: -0.42px;
  color: #000000;
}

.project-detail__vision-list-column {
  flex: none;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
}

.project-detail__vision-row > .project-detail__section-list {
  flex: none;
  width: 280px;
}

.project-detail__vision-list-column .project-detail__section-list {
  flex: none;
  width: 100%;
}

.project-detail__section-list {
  width: 100%;
  font-family: var(--font-plexmono);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: -0.42px;
  color: var(--blue);
  list-style: decimal;
  padding-left: 21px;
}

.project-detail__section-list > li {
  margin-bottom: 10px;
}

.project-detail__section-list > li:last-child {
  margin-bottom: 0;
}

.project-detail__section-list em {
  font-weight: 700;
  font-style: italic;
}

.project-detail__section-list ul {
  list-style: disc;
  padding-left: 21px;
  margin-top: 4px;
}

.project-detail__section-list-plain {
  color: #000000;
}

.project-detail__section-list--plain {
  color: #000000;
}

.project-detail__image-pair {
  width: 100%;
  box-sizing: border-box;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.project-detail__image-pair-item {
  flex: none;
  width: 233px;
  height: 397.559px;
  position: relative;
  overflow: hidden;
}

.project-detail__image-pair-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-detail__platform-stack {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  justify-content: center;
}

.project-detail__platform-grid {
  position: relative;
  width: 100%;
  height: 330px;
}

.project-detail__platform-tile {
  position: absolute;
  top: 0;
  height: 172px;
  box-sizing: border-box;
  padding: 11px;
  background: #dde8ff;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.project-detail__platform-tile-label {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.32px;
  color: #3d38f5;
}

.project-detail__platform-tile-body {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: #000000;
}

.project-detail__platform-bar {
  position: absolute;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border-radius: 5px;
  display: flex;
  align-items: center;
}

.project-detail__platform-bar p {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.32px;
}

.project-detail__platform-bar--green {
  background: #bfe9d3;
}

.project-detail__platform-bar--green p {
  color: #198f51;
}

.project-detail__platform-bar--orange {
  background: #f9dacd;
}

.project-detail__platform-bar--orange p {
  color: #f65009;
}

.project-detail__platform-bar--grey {
  background: #cfcfcf;
}

.project-detail__platform-bar--grey p {
  color: #000000;
}

.project-detail__platform-strip {
  flex: none;
  width: 100%;
}

.project-detail__platform-strip img {
  display: block;
  width: 100%;
}

.project-detail__video {
  width: 100%;
  /* The aspect-ratio box sizes itself from the full row width, which can
     compute a height taller than the flexible media area left inside the
     fixed 840px card -- without this cap the video block overflows down
     over the prev/next arrows. Capping height breaks the box's ratio, but
     the <video> inside letterboxes via object-fit: contain, so the actual
     footage never distorts. */
  max-height: 100%;
  position: relative;
  overflow: hidden;
}

.project-detail__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.project-detail__video-slot {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-impact);
  font-size: 30px;
  letter-spacing: -0.9px;
  color: var(--blue);
  text-align: center;
}

.project-detail__diagram-stack {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  justify-content: center;
}

.project-detail__discovery-collage {
  position: relative;
  flex: 1 0 0;
  width: 100%;
  height: 100%;
}

.project-detail__discovery-collage .project-detail__diagram {
  position: absolute;
}

.project-detail__diagram {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.project-detail__diagram--faded {
  opacity: 0.5;
}

.project-detail__diagram--bordered {
  border: 1px solid var(--blue);
  border-radius: 8px;
}

.project-detail__diagram img {
  position: absolute;
  left: 0;
  width: 100%;
  max-width: none;
}

/* ---------- prev/next ---------- */
.project-detail__nav {
  flex: none;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.project-detail__nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  padding: 4px;
  background: transparent;
  border: 2px solid var(--blue);
  cursor: url("../assets/svg/cursor.svg") 6 6, pointer;
  transition: opacity 0.2s ease;
}

.project-detail__nav button img {
  width: 100%;
  height: 100%;
}

.project-detail__nav button:disabled {
  opacity: 0;
  pointer-events: none;
}