/*
  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;
  }

  /* stacked headers: half size (was the full 24pt H2, as big as the
     body text), left-aligned with the paragraph below */
  .project-section__label {
    margin-bottom: 12px;
    font-size: calc(var(--text-h2-size) / 2);
    text-align: left;
  }
}

.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;
}

/* A real photo (js/project.js): keeps the original wide 16:9 box and
   fills it edge to edge — cropped as needed (object-fit: cover, centered),
   no placeholder tint or border. */
.project-image--filled {
  background: none;
  border: none;
  cursor: default;
}

.project-image__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.project-image:hover .project-image__caption,
.project-image.is-caption-shown .project-image__caption { /* tap, on touch (js/touch.js) */
  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-base) ease, background var(--duration-fast) ease;
}

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

/* Visible while the sound is on (or waiting for the first tap to turn
   it on). Once the visitor mutes, it fades away and only comes back on
   hover (mouse) or a tap on the video (.is-peek, touch) — see the state
   notes in js/project.js. */
.project-image--video.is-sound-on .project-video__mute,
.project-image--video.is-awaiting-sound .project-video__mute,
.project-image--video.is-peek .project-video__mute {
  opacity: 1;
}

/* hover only on real hover devices, so a tap doesn't leave it "stuck" on */
@media (hover: hover) {
  .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: 856px; /* 760 + 48px extra room top AND bottom (boxes are centered at top:50%) */
}

/* BUG FIX: without this, a finger on a box makes iOS/Android scroll the
   page and cancel the pointer stream, so drag.js never got a drag on
   phones. `none` hands every touch on a box to the drag instead. */
.cluster-box {
  touch-action: none;
}

.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) {
  /* Phone: one loose COLLAGE, not two piles. The old two-stacks-of-three
     buried boxes 2/3 and 5/6 completely (the newest photo, ad-06, was
     invisible at the bottom of a pile). Now all six sit in a staggered
     2-column x 3-row scatter, neighbours overlapping at the corners like
     prints tossed on a table — every photo shows, and each is still
     freely draggable. Positions are px from the cluster's top (box
     centers), so the 48px top/bottom breathing room holds exactly. */
  .cluster-box {
    width: 46vw;
    --fan-x: 0px;
    --fan-y: 0px;
  }
  .cluster-box .paper__inner { min-height: 0; }
  .cluster-box--1 { --stack-x: 30%; top: 190px; }
  .cluster-box--2 { --stack-x: 70%; top: 270px; }
  .cluster-box--3 { --stack-x: 31%; top: 480px; }
  .cluster-box--4 { --stack-x: 69%; top: 560px; }
  .cluster-box--5 { --stack-x: 30%; top: 770px; }
  .cluster-box--6 { --stack-x: 70%; top: 850px; }
  .project-cluster { min-height: 1040px; }
}

/* ---------- 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;
  /* no top/bottom border lines (removed per Sadie) — the strip keeps
     its size, so "Next Project" stays exactly where it was */
  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 */
}

/* Drag hint (touch only — js/touch.js adds it): a quiet mono caption in
   the site's own voice at the top-left of the photo collage, its arrows
   nudging side to side. Fades out at the first direct touch inside the
   section (not on scroll). */
.drag-hint {
  position: absolute;
  top: 14px;
  left: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-blue);
  opacity: 0.75;
  font-family: var(--font-mono);
  text-transform: uppercase; /* all Syne Mono text is uppercase, per spec */
  font-size: 9pt;
  letter-spacing: 0.08em;
  pointer-events: none;
  transition: opacity var(--duration-base) ease;
}

.drag-hint__arrows {
  display: inline-block;
  animation: drag-hint-nudge 1.6s var(--ease-smooth) infinite;
}

@keyframes drag-hint-nudge {
  0%, 100% { transform: translateX(0); }
  30%      { transform: translateX(-4px); }
  60%      { transform: translateX(4px); }
}

.drag-hint.is-gone {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .drag-hint__arrows { animation: none; }
}