/*
  PROJECT PAGE — single shared template (content branches on ?project=
  later; see the TODO at the top of project.html).

  "On light" context: --color-blue text on the near-white body background,
  per the mockup's second color/type pairing.
*/

body.project-page {
  background: var(--color-paper-white);
  color: var(--color-blue);
}

.project-wrap {
  padding-top: 120px;
  padding-bottom: 80px;
}

.project-header {
  margin-bottom: 64px;
}

.project-header__eyebrow {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0.6;
  margin-bottom: 16px;
}

.project-header__eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

.project-title {
  grid-column: 1 / 7;
  color: var(--color-blue);
}

.project-subtitle {
  grid-column: 1 / 7;
  margin-top: 8px;
  opacity: 0.7;
  text-transform: uppercase;
  font-size: 10pt;
  letter-spacing: 0.04em;
}

/* ---------- a standalone section: label + body copy + one image ---------- */

.project-section {
  margin-bottom: 96px;
}

.project-section__label {
  grid-column: 1 / 3;
  color: var(--color-blue);
}

.project-section__body {
  grid-column: 3 / 7;
  opacity: 0.85;
  margin-bottom: 32px;
}

/* BUG FIX: the label (2 columns) and body (4 columns) side-by-side
   layout above was never adapted for narrow viewports — at phone widths
   each of those 2 label columns is only ~20px wide, far narrower than
   even one word of "FINAL PRODUCT"/"THOUGHT PROCESS"/etc., so the label
   text overflowed its own grid column and visually overlapped the body
   text sitting right next to it. Stack label above body, both full
   width, instead of side-by-side once there's not enough room for that
   to read comfortably. */
@media (max-width: 700px) {
  .project-title,
  .project-subtitle,
  .project-section__label,
  .project-section__body {
    grid-column: 1 / -1;
  }

  .project-section__label {
    margin-bottom: 12px;
  }
}

.project-image {
  grid-column: 1 / -1;
  position: relative;
  aspect-ratio: 16 / 9;
  background: rgba(85, 126, 170, 0.06);
  border: 1px solid rgba(85, 126, 170, 0.2);
  overflow: hidden;
  cursor: pointer;
}

.project-image__caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  background: linear-gradient(0deg, rgba(85, 126, 170, 0.85), transparent 60%);
  color: var(--color-paper-white);
  font-family: var(--font-mono);
  text-transform: uppercase; /* all Syne Mono text is uppercase, per spec */
  font-size: 9pt;
  letter-spacing: 0.05em;
  opacity: 0;
  transition: opacity var(--duration-base) ease;
}

.project-image:hover .project-image__caption {
  opacity: 1;
}

/* ---------- video case-study box (js/project.js injects the <video>) ---------- */

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

.project-video__mute {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(29, 29, 30, 0.55);
  color: var(--color-paper-white);
  font-family: var(--font-mono);
  text-transform: uppercase; /* all Syne Mono text is uppercase, per spec */
  font-size: 8pt;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity var(--duration-fast) ease, background var(--duration-fast) ease;
}

.project-video__mute:hover {
  background: rgba(29, 29, 30, 0.8);
}

/* Shown only while hovering the video itself — not a persistent on-screen
   control, per spec ("a mute button in the top right corner when
   hovering over video"). */
.project-image--video:hover .project-video__mute {
  opacity: 1;
}

/* ---------- the draggable image-box cluster (Failures & Setbacks) ---------- */
/*
  Two centered stacks of 3 boxes each (left: --1/--2/--3, right:
  --4/--5/--6). Each box's resting spot is its stack's horizontal center
  (--stack-x) plus a small per-box "fan" offset/rotation so the stack
  reads as a loose pile of real paper, not a neat grid — both are JUST
  the STARTING point: js/drag.js is what makes them freely draggable
  anywhere within this section (it owns [data-drag-bounds] below), and
  the first real drag converts a box from this centered/fanned transform
  system to plain pixel left/top with no transform, permanently, until
  the next full page load resets everything back to this CSS layout.
*/

.project-cluster {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden; /* safety net: nothing can visually escape the section, even mid-clamp */
  /* Tall enough for a ~420px-wide portrait image (the case-study photos
     run up to ~1.5:1 height:width, i.e. ~630px tall at full box width)
     plus breathing room above/below, not just the old empty-placeholder
     height. */
  min-height: 760px;
}

.cluster-box {
  /* Target 420px wide (scaled down from the original 512px spec so more
     of the stack is visible at once), scaling down fluidly on narrower
     viewports rather than a fixed media-query breakpoint — height is
     intentionally NOT constrained (no aspect-ratio), so images of any
     proportion all render at this same width and keep their own natural
     height (see .cluster-box__img below), instead of being cropped to
     fit a fixed box. */
  width: clamp(220px, 32vw, 420px);
  height: auto;
  background: var(--color-paper-white);
  border: 1px solid rgba(85, 126, 170, 0.25);
  left: var(--stack-x, 50%);
  top: 50%;
  transform:
    translate(-50%, -50%)
    translate(var(--fan-x, 0px), var(--fan-y, 0px))
    rotate(var(--fan-rot, 0deg));
}

.cluster-box .paper__inner {
  height: auto; /* override the shared .paper__inner's height:100% — this box sizes to its (future) image, not a fixed box */
  min-height: 340px; /* placeholder size until a real image fills it — see .cluster-box__img */
  background: var(--color-paper-white);
}

/* For when a real <img class="cluster-box__img" src="..."> is added
   inside .paper__inner: fills the box's width exactly (so every image
   lines up at a uniform 512px-ish width regardless of its own native
   size) and lets height follow the image's own aspect ratio. */
.cluster-box__img {
  display: block;
  width: 100%;
  height: auto;
  /* Belt-and-suspenders alongside img.draggable=false in project.js —
     Safari in particular can still initiate its own image-drag from CSS
     user-drag alone, which hijacked js/drag.js's pointer-based dragging. */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* left stack */
.cluster-box--1 { --stack-x: 35%; --fan-x: 0px;   --fan-y: 0px;   --fan-rot: -2deg; z-index: 3; }
.cluster-box--2 { --stack-x: 35%; --fan-x: 14px;  --fan-y: 10px;  --fan-rot: 3deg;  z-index: 2; }
.cluster-box--3 { --stack-x: 35%; --fan-x: -10px; --fan-y: 20px;  --fan-rot: -4deg; z-index: 1; }

/* right stack */
.cluster-box--4 { --stack-x: 65%; --fan-x: 0px;   --fan-y: 0px;   --fan-rot: 2deg;  z-index: 3; }
.cluster-box--5 { --stack-x: 65%; --fan-x: -12px; --fan-y: 12px;  --fan-rot: -3deg; z-index: 2; }
.cluster-box--6 { --stack-x: 65%; --fan-x: 10px;  --fan-y: 22px;  --fan-rot: 4deg;  z-index: 1; }

@media (max-width: 600px) {
  /* Two 512px-ish columns can't sit side by side on a phone — stack them
     as one centered column instead, each pair still a loose little pile. */
  .cluster-box--1, .cluster-box--2, .cluster-box--3 { --stack-x: 50%; top: 28%; }
  .cluster-box--4, .cluster-box--5, .cluster-box--6 { --stack-x: 50%; top: 72%; }
  .project-cluster { min-height: 900px; }
}

/* ---------- footer ---------- */
/*
  "Questions?" is commented out in project.html for now (Sadie found the
  bounce — js/footer-bounce.js — confusing), so this is shrunk back down
  to a compact strip instead of the tall bounded box the bounce needed
  for room to move. That taller height is the FIRST line below,
  commented out rather than deleted — restore it (and uncomment the
  height.footer-bounce.js, bounce <script> and the button in
  project.html) to bring the bounce back exactly as it was.
*/

.project-footer {
  grid-column: 1 / -1;
  margin-top: 120px;
  position: relative;
  /* height: clamp(180px, 26vw, 260px); */ /* the bounce's room-to-move height — see note above */
  padding: 40px 0;
  border-top: 1px solid rgba(85, 126, 170, 0.3);
  border-bottom: 1px solid rgba(85, 126, 170, 0.3);
  font-family: var(--font-mono);
  text-transform: uppercase; /* all Syne Mono text is uppercase, per spec */
  font-size: 9pt;
  letter-spacing: 0.05em;
}

.project-footer__next {
  position: absolute;
  right: var(--grid-margin);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 18pt;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-blue);
}

.project-footer__questions {
  position: absolute;
  left: 0;
  top: 0;
  /* 2x the original 9pt (inherited from .project-footer before) */
  font-size: 18pt;
  opacity: 0.75;
  cursor: pointer;
  white-space: nowrap;
  will-change: transform; /* js/footer-bounce.js drives this every frame */
}