/* =====================
   Climate Quest — page overrides.
   Shares case-study layout with evanescent.css (loaded first).
   Only differences for this page live here.
===================== */

/* Scrollable page — override base html,body { overflow: hidden } */
html:has(.page-project),
.page-project {
  overflow: auto;
  height: auto;
}

/* Grid lines span full page height, lowest z-index */
.page-project .col-grid {
  z-index: 0;
  position: fixed;
}

/* =====================
   Lede — 16px / max-width 912px (Climate Quest's narrower variant of
   evanescent's 16px / 981px). Renders as 3 stacked paragraphs that flow
   as one block (Figma sets mb-0 on each p, so paragraphs share line-height
   spacing rather than getting an extra inter-paragraph gap).
===================== */
.page-climate-quest .ev-lede {
  max-width: 912px;
  letter-spacing: -0.022em;
}

.page-climate-quest .ev-lede p {
  margin: 0;
}

/* =====================
   Hero — full-width image (no white-bordered frame like evanescent's).
   Reuses .ev-hero for grid placement; overrides the inner img treatment.
===================== */
.page-climate-quest .ev-hero > img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1125 / 633;
  object-fit: cover;
}

/* =====================
   Approach — spacing scale (matches Figma layout).
   Within a block (heading → image → description): 16px.
   Between blocks / subsections (body → next image, h2/h3 top): 384px.
   Body-to-body within same section: 32px.
   Source caption sits 16px under its image.
===================== */
.cq-h2--research { margin-top: 0; }
.cq-h2--sealevel,
.cq-h2--audience,
.cq-h2--ideation {
  margin-top: 384px;
}

.cq-image--research-insights {
  grid-column: 3 / 11;
  max-width: 1124px;
  aspect-ratio: 3328 / 2208;
  margin-top: 16px;
}

.cq-image--sealevel {
  grid-column: 3 / 11;
  max-width: 1124px;
  aspect-ratio: 1124 / 643;
  margin-top: 16px;
  border: 1px solid #000;
  box-sizing: border-box;
}

.cq-body--research-insights,
.cq-body--diving,
.cq-body--audience {
  grid-column: 3 / 11;
  max-width: 1045px;
  margin-top: 16px;
}

/* Source/caption beneath the sea-level chart — small grey 10px line,
   positioned to the right half (matches Figma's left calc(50%+71)). */
.cq-source {
  grid-column: 7 / 11;
  font-size: 10px;
  font-weight: 400;
  color: #717171;
  line-height: 1.5;
  margin-top: 16px;
}

/* =====================
   Approach — Target Audience Key Insights
===================== */
.cq-body--audience-extra {
  grid-column: 3 / 11;
  max-width: 1010px;
  margin-top: 32px;
}

/* =====================
   Approach — Ideation (image above, description in light grey below)
===================== */
.cq-body--ideation,
.cq-body--concept1,
.cq-body--kahoot,
.cq-body--gamelofi {
  grid-column: 3 / 11;
  max-width: 1045px;
  margin-top: 16px;
}

/* Ideation images: first (datavis) follows the h2 (16px tight);
   subsequent images each start a new block under their description (384px). */
.cq-image--datavis,
.cq-image--concept1,
.cq-image--kahoot,
.cq-image--gamelofi {
  grid-column: 3 / 11;
  max-width: 1124px;
  margin-top: 384px;
}

.cq-image--datavis { margin-top: 16px; }

.cq-image--datavis    { aspect-ratio: 1124 / 699; }
.cq-image--concept1   { aspect-ratio: 1124 / 928; }
.cq-image--kahoot     { aspect-ratio: 1124 / 581; }
.cq-image--gamelofi   { aspect-ratio: 1123 / 417; }

/* =====================
   Approach — Installation ideation / Lofi / Hifi / Sea Level Display / Exhibition
===================== */
.ev-h3 {
  grid-column: 3 / 11;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #000;
  margin: 0;
}

.cq-h3--installation-ideation,
.cq-h3--lofi,
.cq-h3--hifi,
.cq-h3--sealeveldisplay,
.cq-h3--exhibition {
  margin-top: 384px;
}

.cq-body--graphic-idea,
.cq-body--installation-concept {
  grid-column: 3 / 11;
  max-width: 1045px;
  margin-top: 16px;
}

/* Installation ideation images: first (graphic-idea) follows the h3 (16px);
   installation-concept starts a new block under the previous body (384px). */
.cq-image--graphic-idea,
.cq-image--installation-concept {
  grid-column: 3 / 11;
  max-width: 1123px;
  margin-top: 384px;
}

.cq-image--graphic-idea { margin-top: 16px; }

.cq-image--graphic-idea         { aspect-ratio: 1123 / 737; }
.cq-image--installation-concept { aspect-ratio: 1123 / 582; }

.cq-body--lofi,
.cq-body--visualtesting,
.cq-body--hifi,
.cq-body--sealeveldisplay,
.cq-body--sealeveldrop,
.cq-body--exhibition {
  grid-column: 3 / 11;
  max-width: 1124px;
  margin-top: 16px;
}

/* Lofi/Hifi/SeaLevel images: most sit tight under their h3 (16px);
   visual-testing starts a new block under the previous body (384px). */
.cq-image--lofi,
.cq-image--visualtesting,
.cq-image--hifi,
.cq-image--sealevelmonitor {
  grid-column: 3 / 11;
  max-width: 1124px;
  margin-top: 16px;
}

.cq-image--visualtesting { margin-top: 384px; }

.cq-image--lofi            { aspect-ratio: 1124 / 615; }
.cq-image--visualtesting   { aspect-ratio: 1124 / 513; }
.cq-image--hifi            { aspect-ratio: 1124 / 538; }
.cq-image--sealevelmonitor { aspect-ratio: 838 / 794; max-width: 838px; }

/* Sea level display video — new block after the monitor body (384px). */
.cq-video {
  display: block;
  margin: 0;
}

.cq-video--sealeveldrop {
  grid-column: 3 / 11;
  max-width: 1124px;
  margin-top: 384px;
}

.cq-video--sealeveldrop video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1124 / 545;
  object-fit: cover;
}

/* =====================
   Approach — Exhibition photos (just the hero image, then Outcome)
===================== */
.cq-image--exhibition-hero {
  grid-column: 3 / 11;
  max-width: 1124px;
  aspect-ratio: 1124 / 990;
  margin-top: 16px;
}

/* =====================
   Outcome — Vimeo + credit + 4-photo gallery
   Gallery rhythm matches Figma: 144 below credit, 168 between photos.
===================== */
.cq-hero--outcome {
  margin-top: 40px;
}

.cq-credit {
  grid-column: 7 / 11;
  font-size: 12px;
  font-weight: 400;
  color: #717171;
  line-height: 1.5;
  margin: 16px 0 0;
}

.cq-credit--motion {
  margin-top: 16px;
}

.cq-image--card-wall,
.cq-image--collaborative-scan,
.cq-image--scan-image,
.cq-image--dark-installation {
  grid-column: 3 / 11;
  max-width: 1124px;
  aspect-ratio: 1124 / 632;
  margin-top: 168px;
}

.cq-image--card-wall { margin-top: 144px; }

/* Reminiscence link sits ~320px below the last gallery photo per Figma. */
.page-climate-quest .ev-next {
  margin-top: 320px;
}

/* =====================
   Dark mode
===================== */
:root.dark-mode .cq-image--sealevel {
  border-color: #2a2a2a;
}

:root.dark-mode .cq-source,
:root.dark-mode .cq-credit {
  color: #6a6a6a;
}

/* =====================
   Responsive — narrow viewports
===================== */
@media (max-width: 900px) {
  .cq-image--research-insights,
  .cq-image--sealevel,
  .cq-image--datavis,
  .cq-image--concept1,
  .cq-image--kahoot,
  .cq-image--gamelofi,
  .cq-image--graphic-idea,
  .cq-image--installation-concept,
  .cq-image--lofi,
  .cq-image--visualtesting,
  .cq-image--hifi,
  .cq-image--sealevelmonitor,
  .cq-image--exhibition-hero,
  .cq-image--card-wall,
  .cq-image--collaborative-scan,
  .cq-image--scan-image,
  .cq-image--dark-installation,
  .cq-video--sealeveldrop,
  .cq-source,
  .cq-credit,
  .cq-body--audience-extra,
  .cq-body--ideation,
  .cq-body--concept1,
  .cq-body--kahoot,
  .cq-body--gamelofi,
  .cq-body--graphic-idea,
  .cq-body--installation-concept,
  .cq-body--lofi,
  .cq-body--visualtesting,
  .cq-body--hifi,
  .cq-body--sealeveldisplay,
  .cq-body--sealeveldrop,
  .cq-body--exhibition {
    grid-column: 1 / 7;
    max-width: none;
  }
}