/* work-search: what the Search case study has of its own (D41). Tokens come from css/tokens.css, the base and
   text roles from css/ds.css, and the shared case-study shell (ToC, scroll areas, callouts, rounds, approaches,
   reframe, next-case band) from css/work-gemstones.css, all linked before this file. The Figma components local to
   this case study are named ws-* (ws-meta-card__row, ws-approach, ws-round, ws-round__stat); in the markup each sits
   on the same element as its wg-* class, which supplies the styles they share. Splitting the shared shell out of
   work-gemstones.css is open (docs/backlog.md). */

/* ---------- context ---------- */
/* Hero collage (Figma 1489:4105): 890 x 387, three pieces placed as in the frame, each cropped from its source with
   the Figma fill offsets. The start transforms are the entrance's first frame (js/case-study-scroll.js, SEARCH_ELEMENTS) */
/* @raw-ok:start artwork: hero composition measured from Figma 1489:4105; transforms are the entrance's start frame */
.ws-hero { position: relative; width: 100%; height: 387px; }
.ws-hero__piece { position: absolute; overflow: hidden; border-radius: var(--radius-card); box-shadow: var(--shadow-md); }
.ws-hero__piece img { position: absolute; display: block; max-width: none; pointer-events: none; }
.ws-hero__main { left: 40px; top: 61px; width: 563px; height: 326px; transform: translate(0, 18.5px) scale(0.775); filter: blur(10px); }
.ws-hero__main img { left: -0.01%; top: 0.06%; width: 100.01%; height: 131.55%; }
.ws-hero__card1 { left: 485px; top: 0; width: 251px; height: 140px; transform: translate(-36px, 18.5px) scale(0.7175); filter: blur(10px); }
.ws-hero__card1 img { left: 0; top: -56.59%; width: 100%; height: 423.93%; }
.ws-hero__card2 { left: 631px; top: 170px; width: 259px; height: 143px; transform: translate(-36px, 18.5px) scale(0.7175); filter: blur(10px); }
.ws-hero__card2 img { left: -0.22%; top: -192.51%; width: 100%; height: 429.3%; }
/* @raw-ok:end */
@media (prefers-reduced-motion: reduce) {
  .ws-hero__piece { transform: none; filter: none; }
}
html:not(.js) .ws-hero__piece { transform: none; filter: none; }

/* iPad (781–1279): the desktop composition at its own 890px, scaled to the six columns by js/case-study-scroll.js (zoom), as on Gemstones */
@media (min-width: 781px) and (max-width: 1279px) {
  .ws-hero { width: 890px; } /* @raw-ok artwork: desktop hero composition width (js HERO_W) */
}

/* Phone collage (Figma 1507:4412, 390 x 245): two copies of one app screen on the raised surface, bleeding to both
   screen edges; the frame clips them. Positions are Figma's, as shares of the frame so it scales with the page. */
.ws-hero__m-back, .ws-hero__m-front { display: none; }
.ws-hero__m-back img, .ws-hero__m-front img { left: 0; top: 0; width: 100%; height: 100%; }
@media (max-width: 780px) {
  .wg-scroll[data-scroll="1"] .ws-hero { order: 1; width: calc(100% + 2 * var(--layout-margin)); margin-inline: calc(-1 * var(--layout-margin)); height: auto; aspect-ratio: 390 / 245; overflow: hidden; background: var(--surface-raised); box-shadow: var(--shadow-md); } /* @raw-ok measure: Figma 1507:4412 frame 390 x 245 */
  .ws-hero__main, .ws-hero__card1, .ws-hero__card2 { display: none; }
  /* @raw-ok:start artwork: phone collage placed as in Figma 1507:4684 / 1507:4680; transforms are the entrance's start frame */
  .ws-hero__m-back, .ws-hero__m-front { display: block; height: auto; aspect-ratio: 786 / 1704; }
  .ws-hero__m-back { left: 22.821%; top: -145.714%; width: 78.462%; transform: translate(0, 10.05px) scale(0.775); filter: blur(10px); }
  .ws-hero__m-front { left: 3.590%; top: 17.959%; width: 51.568%; transform: translate(-27.94px, 14.35px) scale(0.7175); filter: blur(10px); }
  /* @raw-ok:end */
}
@media (max-width: 780px) and (prefers-reduced-motion: reduce) {
  .ws-hero .ws-hero__m-back, .ws-hero .ws-hero__m-front { transform: none; filter: none; }
}
html:not(.js) .ws-hero .ws-hero__m-back, html:not(.js) .ws-hero .ws-hero__m-front { transform: none; filter: none; }

/* "How it started.": the heading sits 12px above the two columns */
.ws-request { display: flex; flex-direction: column; gap: var(--gap-stack); width: 100%; }
/* The typed example fills its column (Figma 425 wide); Gemstones' is a 220px bar */
.ws-search-example { width: 100%; }
/* iPad (781–1279): the example keeps its desktop width instead of taking a column that is far wider there */
@media (min-width: 781px) and (max-width: 1279px) { .ws-search-example { width: 425px; max-width: 100%; } } /* @raw-ok measure: Figma 425 wide example */

/* Three metrics (Figma Metrics / …): a number, a statement, a sentence; thirds of the column */
.ws-metrics { color: var(--text-accent); }
.ws-metric { flex: 0 0 var(--layout-third); min-width: 0; display: flex; flex-direction: column; gap: var(--gap-stack); }
.ws-metric__number { white-space: nowrap; color: inherit; }
.ws-metric .body-s { color: var(--text-body); }

/* The legacy screenshot (Figma Asset / Legacy Search screenshot): 890 x 432, never stretched, cropped by the box */
.ws-shot { position: relative; width: 100%; aspect-ratio: 890 / 432; border-radius: var(--radius-card); overflow: hidden; } /* @raw-ok measure: Figma 890 x 432 */
.ws-shot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- process ---------- */
/* The three sketches are rough.js drawings in the shared .wg-sketch frame (js/wg-sketch-solutions.js); the query sketch's lettering sits on its 270 x 270 art */
/* @raw-ok:start artwork: hand-lettered sketch labels placed on the 270x270 sketch art */
.wg-sketch__label.ws-sketch__label--search { top: 29.6%; left: 11.1%; font-size: var(--sketch-title-size); }
.wg-sketch__label.ws-sketch__label--chip   { top: 67.4%; left: 14.8%; font-size: 15px; }
@media (max-width: 780px) {
  .wg-sketch__label.ws-sketch__label--search { font-size: 17px; }
  .wg-sketch__label.ws-sketch__label--chip   { font-size: 13px; }
}
/* @raw-ok:end */
/* The reframe box rests at 108px here (Figma: 890 x 108); js/case-study-scroll.js reads data-rest-height */
.ws-reframe { height: 108px; } /* @raw-ok measure: reframe rest height, read by the expand script (data-rest-height) */

/* ---------- solution ---------- */
/* Figma: every block in the accent panel is 60px from the next, the areas included (Gemstones: 200px) */
.ws-solution .wg-solution-pill__inner { gap: var(--gap-section); }
/* A figure: the picture, then its caption; copy blocks carry a caption-heading label above the text */
.ws-figure { display: flex; flex-direction: column; gap: var(--gap-stack); margin: 0; min-width: 0; }
.ws-figure__copy { display: flex; flex-direction: column; gap: var(--gap-stack); width: 100%; }
/* Pictures are never stretched: each box keeps its Figma ratio and the picture is cropped by it.
   Row 1 (spotlight): the picture fits the box height from the top left; only the left corners are rounded, as in Figma (1489:492, 1489:509) */
.ws-figure--group { gap: var(--gap-group); }
.ws-figure__media { display: block; width: 100%; height: auto; }
.ws-figure__media--row1 { aspect-ratio: 425 / 442; border-radius: var(--radius-card) 0 0 var(--radius-card); } /* @raw-ok measure: Figma 425 x 442 */
.ws-figure__media--cover { object-fit: cover; object-position: left top; }
/* Row 2 (results pages): a clipped box with the picture placed inside it at Figma's scale and offset (1489:501, 1489:504) */
.ws-figure__media--row2 { position: relative; overflow: hidden; aspect-ratio: 425 / 735; border-radius: var(--radius-card); } /* @raw-ok measure: Figma 425 x 735 */
.ws-figure__crop { position: absolute; max-width: none; height: auto; display: block; }
/* @raw-ok:start measure: Figma crop of each page screenshot inside its 425 x 735 box */
.ws-figure__crop--results { left: 0; top: -11.9%; width: 159.53%; }
.ws-figure__crop--empty { left: -65.82%; top: 0.04%; width: 231.64%; }
/* @raw-ok:end */
/* Functionality: the prototype video left, its copy right (Figma 580 / 40 / 270). The box clips the video; js/demo-video.js adds the play / pause button to it */
.ws-functionality { display: flex; gap: var(--gap-block); align-items: flex-start; width: 100%; }
.ws-functionality__media { position: relative; flex: 580 1 0; min-width: 0; aspect-ratio: 580 / 378; border-radius: var(--radius-card); overflow: hidden; } /* @raw-ok measure: Figma 580 x 378 */
.ws-functionality__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-functionality .ws-figure__copy { flex: 270 1 0; min-width: 0; } /* @raw-ok measure: Figma 270 px copy column */
/* User experience: copy, then the four figures, 40px apart (Figma 1489:490) */
.ws-solution .ws-ux { display: flex; flex-direction: column; gap: var(--gap-block); width: 100%; margin-top: calc(var(--gap-section) - var(--gap-block)); } /* the Solution area's own gap is 40, the blocks are 60 apart */
/* Two columns a gutter apart, rows 40px apart */
.ws-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--layout-gutter); row-gap: var(--gap-block); align-items: start; width: 100%; }

/* ---------- validation: a round shows one prototype video on a raised panel, and two results ---------- */
/* Both videos are crops of the recording laid on the panel (Figma 1474:745 and 1474:760, videoTransform taken literally):
   web = 477 x 272 of the 425 x 371 box, 26px off the left edge, 50px down; app = 225 wide, centred, cropped at the bottom */
.ws-round__media { background: var(--surface-raised); }
.ws-round__video { position: absolute; display: block; max-width: none; object-fit: fill; } /* @raw-ok measure: Figma crop percentages */
.ws-round__video--web { left: -9.176%; top: 0.054%; width: 160.87%; height: 105.07%; } /* @raw-ok measure: Figma 1474:745 videoTransform, box 425 x 371 */
.ws-round__video--app { left: 23.57%; top: -0.042%; width: 52.86%; height: 131.31%; } /* @raw-ok measure: Figma 1474:760 videoTransform, box 425 x 371 */

/* ---------- hand-off visuals (Figma 1489:4110): three shots 890 wide, 40 apart, cropped from their sources ---------- */
.ws-handoff__stack { display: flex; flex-direction: column; gap: var(--layout-gutter); width: 100%; }
.ws-handoff__app { display: flex; gap: var(--layout-gutter); width: 100%; }
.ws-handoff__shot { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-card); box-shadow: var(--shadow-md); }
.ws-handoff__shot img { position: absolute; display: block; left: 0; width: 100%; max-width: none; pointer-events: none; }
.ws-handoff__shot--dialog { aspect-ratio: 400 / 304; } /* @raw-ok measure: Figma 890 x 676 */
.ws-handoff__shot--dialog img { top: 0; height: 100%; }
.ws-handoff__shot--web { aspect-ratio: 890 / 1014; } /* @raw-ok measure: Figma 890 x 1014 */
.ws-handoff__shot--web img { top: 0.07%; height: 165.83%; } /* @raw-ok measure: Figma crop */
.ws-handoff__shot--app { flex: 1 0 0; min-width: 0; aspect-ratio: 425 / 1130; } /* @raw-ok measure: Figma 425 x 1130 */
.ws-handoff__shot--app img { top: 0.03%; height: 238.47%; } /* @raw-ok measure: Figma crop */
.ws-handoff__shot--app + .ws-handoff__shot--app img { top: -0.04%; height: 100.01%; } /* @raw-ok measure: Figma crop */

/* ---------- outcomes ---------- */
/* The sign-off card holds only text here (Gemstones reserves 310px on the right for the phone) */
.wg-outcomes-card.ws-outcomes-card { padding-right: var(--inset-wide); }

/* ---------- iPad (781–1279): the Gemstones grid, 6 columns and a gutter of 20 (D13) ----------
   A desktop third is 2 columns and a half 3; equal flex children with the gutter between them land on the column lines.
   The metrics (thirds) and the two figure columns (halves) already do. The Functionality row follows Gemstones' first
   Compensating row: landscape video 4 columns beside the copy in 2, portrait the copy and then the video, 6 columns each. */
@media (min-width: 781px) and (max-width: 1279px) {
  .ws-functionality { column-gap: var(--layout-gutter); }
  .ws-functionality .ws-figure__copy { flex: none; width: calc((100% - 2 * var(--layout-gutter)) / 3); }
}
@media (min-width: 781px) and (max-width: 1024px) {
  .ws-functionality { flex-direction: column; row-gap: var(--gap-block); }
  .ws-functionality .ws-figure__copy { order: -1; width: 100%; }
  .ws-functionality__media { flex: none; width: 100%; }
}

/* ---------- phones (≤780): Figma 1507:4408, 390 wide ----------
   4 columns, 24px margins, 60px between a section's blocks. Pictures that Figma runs to the screen edge bleed by the
   margin; crops are Figma's, as shares of the box. Type roles that Figma's phone frame takes differently from the desktop
   one (metric sentences and Solution copy: body-s / body-detail, 16px; body-m is 18 here) are one-off switches, as
   Gemstones does for its stat label. */
@media (max-width: 780px) {
  /* Project metadata: the last value wraps to three lines and the label stays at its top (Figma 1507:4418, items-start) */
  .wg-meta-card__col.ws-meta-card__row:last-child { align-items: start; }

  /* Metrics: stacked 20 apart; number, statement and sentence 4 apart (Figma 1507:4447) */
  .ws-metrics { flex-direction: column; gap: var(--gap-group); }
  .ws-metric { flex: none; width: 100%; gap: var(--gap-hair); }

  /* The legacy screenshot: 390 x 344 to both screen edges, cropped from the wide picture (Figma 1507:4706), caption 14 below */
  .wg-graph-group { gap: var(--chart-row-gap); }
  .ws-shot { width: calc(100% + 2 * var(--layout-margin)); margin-inline: calc(-1 * var(--layout-margin)); aspect-ratio: 390 / 344; } /* @raw-ok measure: Figma 1507:4706 390 x 344 */
  .ws-shot__img { inset: auto; left: -41.62%; top: -0.29%; width: 183.25%; height: auto; max-width: none; } /* @raw-ok measure: Figma 1507:4706 crop */

  /* Solution, Functionality: the copy, then the prototype video running to both screen edges (Figma 1507:5252) */
  .ws-functionality { flex-direction: column; gap: var(--gap-block); }
  .ws-functionality .ws-figure__copy { order: -1; flex: none; width: 100%; }
  .ws-functionality__media { flex: none; width: calc(100% + 2 * var(--layout-margin)); margin-inline: calc(-1 * var(--layout-margin)); aspect-ratio: 390 / 255; } /* @raw-ok measure: Figma 1507:5254 390 x 255 */
  /* The prototype is cropped as Figma draws it (1507:5254 videoTransform: 56% of the recording, from 22% across) */
  .ws-functionality__media video { inset: auto; left: -39.11%; top: -0.18%; width: 178.22%; height: 178.4%; max-width: none; object-fit: fill; } /* @raw-ok measure: Figma 1507:5254 crop */
  .ws-solution .ws-figure__copy .body-m, .ws-solution .ws-figure figcaption { font: var(--type-body-detail); } /* @raw-ok one-off: the Solution copy and the four captions take body-detail on phone (Figma 1507:5255, 5403, 5901, 5904, 5908, 5914), 16px */
  .ws-solution .ws-ux { margin-top: 0; }

  /* Solution, User experience (Figma 1507:5400): a picture, then its caption 12 below; the four figures 40 apart.
     The first two pictures are 448 wide from the column, running past the right screen edge (never narrower than column + margin) */
  .ws-figures { grid-template-columns: minmax(0, 1fr); row-gap: var(--gap-block); }
  .ws-figure, .ws-figure--group { gap: var(--gap-stack); container-type: inline-size; }
  .ws-figure__media--row1 { width: max(448px, 100cqw + var(--layout-margin)); max-width: none; border-radius: var(--radius-card); } /* @raw-ok measure: Figma 1518:5900, 5903 448 wide */
  .ws-figure__media--spotlight { aspect-ratio: 448 / 280; } /* @raw-ok measure: Figma 1518:5900 */
  .ws-figure__media--suggestions { aspect-ratio: 448 / 346; border-top-right-radius: 0; } /* @raw-ok measure: Figma 1518:5903 */
  .ws-figure__media--row2 { aspect-ratio: 342 / 689; } /* @raw-ok measure: Figma 1518:5910 */
  .ws-figure:last-child .ws-figure__media--row2 { aspect-ratio: 342 / 313; } /* @raw-ok measure: Figma 1518:5916 */
  /* @raw-ok:start measure: Figma crop of each page screenshot inside its box */
  .ws-figure__crop--results { left: 0; top: -0.86%; width: 168.42%; }
  .ws-figure__crop--empty { left: -64.72%; top: -0.54%; width: 229.43%; }
  /* @raw-ok:end */

  /* Outcomes: the sign-off card holds text only, so no overhang below it (Gemstones leaves room for its phone); the hand-off pictures that follow carry their own 60px section padding */
  .wg-outcomes-card.ws-outcomes-card { padding: var(--inset-wide); margin-bottom: 0; }
  .wg-section[data-section="outcomes"] { padding-bottom: 0; }

  /* Hand-off: four pictures to both screen edges, 60 apart (Figma 1507:4530, 5566, 5570, 5574), cropped from their sources */
  .ws-handoff__stack, .ws-handoff__app { flex-direction: column; gap: var(--gap-section); }
  .ws-handoff__shot { width: calc(100% + 2 * var(--layout-margin)); margin-inline: calc(-1 * var(--layout-margin)); border-radius: var(--radius-card); }
  /* @raw-ok:start measure: Figma 390-wide boxes and their crops */
  .ws-handoff__shot--dialog { aspect-ratio: 390 / 417; }
  .ws-handoff__shot--dialog img { top: -0.07%; width: 141.02%; height: auto; }
  .ws-handoff__shot--web { aspect-ratio: 390 / 536; }
  .ws-handoff__shot--web img { top: -3.14%; width: 171.54%; height: auto; }
  .ws-handoff__shot--app { flex: none; aspect-ratio: 390 / 887; }
  .ws-handoff__shot--app img { top: -60.32%; height: 278.78%; }
  .ws-handoff__shot--app + .ws-handoff__shot--app { aspect-ratio: 390 / 669; }
  .ws-handoff__shot--app + .ws-handoff__shot--app img { top: 0.06%; height: 155.01%; }
  /* @raw-ok:end */
}