/* ============================================================
   PROJECT PAGE — project-page.css
   Detail-page layer on top of home-v2.css. Reuses hs-* primitives
   (wrap, nav, rule, title, eyebrow, hero, footer) and adds the
   patterns a single-project page needs: intro grid, goal callout,
   quote pair. Load after tokens.css + home-v2.css.
   ============================================================ */

.pp-back {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: 500;
}

.pp-back:hover { color: var(--color-accent); }

.pp-eyebrow-top { margin-top: 46px; }

.pp-title { margin-top: 8px; }

/* ── Context intro — one or more flowing paragraphs under the title,
   for case studies without the three-part Project/Users/Pain-points
   breakdown (.pp-intro-grid) to fill. First used by Songflow. Can be
   a single <p class="pp-context-text"> or a wrapping <div> with that
   class containing several <p>s, same pattern as .pp-prose. ── */
.pp-context-text {
  margin-top: 24px;
  max-width: 80ch;
}

.pp-context-text,
.pp-context-text p {
  font-size: var(--hv2-type-body-lg);
  line-height: var(--hv2-lh-body);
  color: var(--color-text);
}

.pp-context-text p + p { margin-top: 16px; }

/* ── Intro grid: Project / Users & Needs / Pain Points ──────── */
.pp-intro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 56px;
}

.pp-intro-block {
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
}

.pp-intro-label {
  margin: 0 0 8px;
  font-size: var(--hv2-type-caption);
  font-weight: 700;
  line-height: var(--hv2-lh-small);
  color: #141414;
}

.pp-intro-text {
  margin: 0;
  font-size: var(--hv2-type-caption);
  line-height: var(--hv2-lh-body);
  color: var(--color-text-secondary);
}

/* ── Goal callout ─────────────────────────────────────────── */
.pp-goal {
  margin-top: 48px;
  border-left: 4px solid var(--hs-rule);
  padding-left: 14px;
}

.pp-goal-text {
  margin: 6px 0 0;
  max-width: 46ch;
  font-size: var(--hv2-type-h2);
  font-weight: 600;
  line-height: var(--hv2-lh-heading);
  letter-spacing: -0.02em;
  color: #141414;
}

/* ── Primary use case — sits under the goal, one step quieter ── */
.pp-usecase {
  margin-top: 30px;
  padding-left: 18px;
}

.pp-usecase-text {
  margin: 6px 0 0;
  max-width: 60ch;
  font-size: var(--hv2-type-body);
  line-height: var(--hv2-lh-body);
  color: var(--color-text);
}

/* ── Live prototype link ──────────────────────────────────── */
.pp-live {
  margin-top: 30px;
  padding-left: 18px;
}

.pp-callout.pp-live {
  margin-top: 0;
  padding-left: 0;
}

.pp-live-link {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--hv2-type-body);
  line-height: var(--hv2-lh-body);
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent-border);
}

.pp-live-link:hover { border-bottom-color: var(--color-accent); }

.pp-live-note {
  margin: 8px 0 0;
  max-width: 60ch;
  font-size: var(--hv2-type-caption);
  line-height: var(--hv2-lh-small);
  color: var(--color-text-secondary);
}

/* ── Bulleted list — accent dash markers ──────────────────── */
.pp-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pp-list li {
  position: relative;
  padding-left: 16px;
  font-size: var(--hv2-type-caption);
  line-height: var(--hv2-lh-body);
  color: var(--color-text-secondary);
}

.pp-list li + li { margin-top: 7px; }

.pp-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 1px;
  background: var(--color-accent);
}

/* ── Hero screenshot ──────────────────────────────────────── */
.pp-hero { margin-top: 48px; }

/* ── Hero video — extends .pp-hero for case studies whose lead
   media is an embed (Vimeo/YouTube) rather than a screenshot.
   aspect-ratio keeps the iframe responsive without a padding-hack.
   First used by Songflow. Sits inside the same .hs-hero mat +
   .hs-wrap wrapper as the image hero, in place of the <img>. ── */
.pp-hero-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--hs-mat);
}

.pp-hero-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* @media print can't render an iframe's video — browsers either
   leave it blank or print whatever frame happened to be loaded.
   Hide it and swap in a plain link so the printed/exported page
   states what's there instead of showing a broken box. */
.pp-hero-video__print-fallback { display: none; }

@media print {
  .pp-hero-video iframe { display: none; }

  .pp-hero-video__print-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--font-sans);
    font-size: var(--hv2-type-body);
    color: #141414;
  }

  .pp-hero-video__print-fallback a { color: inherit; }
}

/* ── Entity chain diagram ─────────────────────────────────────
   Source renders this as live text/vector rather than a screenshot,
   so it's rebuilt in markup instead of shipped as a raster crop.
   Wraps rather than scrolls at narrow widths. */
.pp-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}

.pp-chain__node {
  border: 1px solid var(--color-border);
  padding: 8px 14px;
  font-size: var(--hv2-type-caption);
  font-weight: 600;
  line-height: var(--hv2-lh-small);
  color: #141414;
  background: var(--color-bg);
}

.pp-chain__arrow {
  color: var(--color-accent);
  font-size: var(--hv2-type-caption);
  line-height: 1;
}

/* ── Quote pair ───────────────────────────────────────────── */
.pp-quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 72px;
}

.pp-quote {
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
}

.pp-quote-text {
  margin: 8px 0 0;
  font-style: italic;
  font-size: var(--hv2-type-body);
  line-height: var(--hv2-lh-body);
  color: var(--color-text);
}

/* Standalone quote — one quote with no pair to sit beside. */
.pp-quote--solo {
  margin-top: 40px;
  max-width: 62ch;
}

/* ── Case-study sections (Define / Personas / Chart Detail) ─── */
.pp-section { margin-top: 96px; }

.pp-section-heading {
  margin: 8px 0 0;
  font-size: var(--hv2-type-h2);
  font-weight: 600;
  line-height: var(--hv2-lh-heading);
  letter-spacing: -0.02em;
  color: #141414;
}

.pp-prose {
  margin-top: 20px;
  max-width: 80ch;
}

.pp-prose p {
  font-size: var(--hv2-type-body-lg);
  line-height: var(--hv2-lh-body);
  color: var(--color-text);
}

.pp-prose p + p { margin-top: 16px; }

/* ── Figures ──────────────────────────────────────────────── */
.pp-figure {
  margin-top: 32px;
  background: var(--hs-mat-light);
  padding: 14px;
}

.pp-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Narrower figure — for a single image that reads oversized at full
   .hs-wrap width relative to its neighbors. */
.pp-figure--narrow {
  max-width: 66%;
}

.pp-figcaption {
  margin-top: 10px;
  padding: 0 2px;
  font-size: var(--hv2-type-caption);
  line-height: var(--hv2-lh-small);
  color: var(--color-text-secondary);
}

/* ── End note — a small aside above the footer, e.g. clarifying a
   naming discrepancy between a source document and the portfolio
   copy. Not for case-study content; keep it short. ── */
.pp-endnote {
  margin-top: 96px;
  max-width: 65ch;
  font-size: var(--hv2-type-caption);
  line-height: var(--hv2-lh-body);
  color: var(--color-text-secondary);
}

/* align-items: start so each mat hugs its own image and the caption sits
   directly beneath it — without it, mats stretch to equal height and a
   shorter image leaves its caption stranded below a tall empty gap. */
.pp-img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.pp-img-grid .pp-figure { margin-top: 0; }

/* A figure immediately followed by a grid needs its own gap — otherwise
   two light-mat blocks butt against each other with no visual seam. */
.pp-figure + .pp-img-grid,
.pp-prose + .pp-img-grid { margin-top: 32px; }

/* Three-up variant for a desktop/mobile/desktop trio — center column
   narrower to match a phone-shaped screenshot's aspect ratio. Items
   align to the top since the mobile shot is taller than the others. */
.pp-img-grid--triptych {
  grid-template-columns: 1fr 0.63fr 1fr;
  align-items: start;
  gap: 20px;
}

/* ── Scale row ────────────────────────────────────────────────
   For image sets whose POINT is their relative size (large vs.
   medium vs. small vs. mobile card). Each figure's flex-grow is set
   from the image's natural pixel width via a --w custom property on
   the element, so the row is a uniform scale-down of the originals
   rather than four boxes forced to equal width. Wraps on narrow. */
.pp-scale-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  margin-top: 32px;
}

.pp-scale-row .pp-figure {
  margin-top: 0;
  flex: var(--w, 1) 1 0;
  min-width: 150px;
}

/* ── Descriptive callouts (Chart Detail) ─────────────────────── */
.pp-callout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
}

.pp-callout {
  border-top: 1px solid var(--color-accent);
  padding-top: 12px;
}

/* Standalone callout — for a block with no natural pair, so it isn't
   left sitting in a two-column grid beside an empty column. */
.pp-callout--solo {
  margin-top: 40px;
  max-width: 62ch;
}

.pp-callout-head {
  display: block;
  font-size: var(--hv2-type-caption);
  font-weight: 700;
  color: #141414;
  margin-bottom: 6px;
}

.pp-callout-body,
.pp-callout-body p {
  font-size: var(--hv2-type-caption);
  line-height: var(--hv2-lh-body);
  color: var(--color-text-secondary);
}

.pp-callout-body p + p { margin-top: 12px; }

/* ── Lightbox ─────────────────────────────────────────────── */
.pp-figure img,
.pp-hero img {
  cursor: zoom-in;
}

.pp-lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
}

.pp-lightbox[open] {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

.pp-lightbox img {
  display: block;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 92vh;
}

.pp-lightbox-close {
  position: fixed;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.pp-lightbox-close:hover { background: rgba(0, 0, 0, 0.7); }

/* ── Narrow ───────────────────────────────────────────────── */
@media (max-width: 760px) {
  .pp-intro-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .pp-quote-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; }
  .pp-section { margin-top: 64px; }
  .pp-img-grid,
  .pp-img-grid--triptych { grid-template-columns: 1fr; gap: 24px; }
  .pp-callout-grid { grid-template-columns: 1fr; gap: 24px; }
}