/* Lock-up: meta row (client • role), headline, CTA. Reusable for landing slides and future case-study heroes.
   <div class="lockup">
     <p class="lockup__meta"><strong>Luno</strong><span>Principal Product Designer</span></p>
     <h2 class="lockup__title t-h1">…</h2>
     <a class="button" href="…">Case study</a>
   </div> */
.lockup { display: grid; gap: var(--space-5); width: min(var(--copy-width), 100%); justify-items: start; }
.lockup__meta {
  display: flex; align-items: center; gap: var(--space-5); margin: 0; height: var(--meta-height);
  font: var(--weight-light) var(--fs-h4)/var(--lh-h4) var(--font-text);   /* H4 Light */
}
.lockup__meta strong { font-weight: var(--weight-semibold); }   /* H4 */
/* the separator after the client name comes from separator.css; a label with nothing after it drops the separator */
.lockup__meta--solo strong::after, .lockup__meta--solo.lockup__meta--label > span:first-child::after { display: none; }
/* The two weight variants (both wrap, see the rules at the bottom of this file):
     .lockup__meta                  semibold title, cross-hair, light detail          <p class="lockup__meta lockup__meta--row"><strong>Sponsors</strong><span>CEO, CTO, VP of Product</span></p>
     .lockup__meta--label           light title, cross-hair, semibold detail          <p class="lockup__meta lockup__meta--label"><span>Role</span><strong>Principal Product Designer</strong></p>
   --row / --label rows are at least 39px tall (as used inside case study sections and slides): a one-line row is exactly 39px, and a detail that runs
   to more lines makes the row taller while the title and cross-hair stay level with the FIRST line.
   Stacked rows go inside .lockup__meta-stack: every title column grows to the widest title, so the cross-hairs line up vertically and the details
   start in the same place. Both variants can be stacked.
   <div class="lockup__meta-stack"> …two or more rows… </div> */
.lockup__meta--row, .lockup__meta--label { height: auto; min-height: 39px; padding-block: 6.5px; align-items: flex-start; }   /* 6.5 + 26 + 6.5 = 39 */
.lockup__meta--label strong::after { display: none; }
.lockup__meta--row > :first-child, .lockup__meta--label > :first-child { flex: none; height: 26px; white-space: nowrap; }   /* the title is one line; its cross-hair is centred in it */
.lockup__meta--row > :last-child, .lockup__meta--label > :last-child { flex: 1 1 0; min-width: 0; text-wrap: pretty; overflow-wrap: break-word; }   /* the detail wraps in its own column */
.lockup__meta-stack { display: grid; grid-template-columns: max-content 1fr; }
.lockup__meta-stack > .lockup__meta { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; column-gap: var(--space-5); align-items: start; height: auto; min-height: 39px; padding-block: 6.5px; }
.lockup__meta-stack > .lockup__meta > :first-child { display: flex; justify-content: space-between; align-items: center; }   /* text left, cross-hair at the column's right edge */
.lockup__meta-stack > .lockup__meta > :last-child { align-self: start; line-height: 26px; }
.lockup__title { margin: var(--space-3) 0 var(--space-6); color: var(--color-headline); }
/* Gradient title: the title is filled with the business's gradient (--case-gradient, set by a theme class such as .theme-luno on the slide or the page, see case-themes.css).
   <section class="panel theme-luno"> … <h2 class="lockup__title lockup__title--gradient t-h1">Title</h2>
   The title box is trimmed to the cap height and a gradient only paints inside the box, so padding grows the painted area and the margins take the same amount off again: the layout does not move. */
.lockup__title--gradient {
  background-image: var(--case-gradient, none); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding: 0.35em 0.12em; margin: calc(var(--space-3) - 0.35em) -0.12em calc(var(--space-6) - 0.35em);   /* (0.12em at the sides: overhanging letters are not clipped by the gradient fill) */
}

/* Wrapping variant: the second part (the detail) may run onto several lines. Works with both weights:
   <p class="lockup__meta lockup__meta--wrap"><strong>Collaborators</strong><span>Senior Staff UI designer, Lead Product Manager, …</span></p>         semibold title, light detail
   <p class="lockup__meta lockup__meta--wrap lockup__meta--label"><span>Method</span><strong>Remote tree testing, 30 participants …</strong></p>      light title, semibold detail
   Wrapping rules:
   (The same rules apply to --row and --label rows above, which keep the 39px row instead of trimming.)
   1. The title (first part) never wraps, and its cross-hair stays beside it, so the title is always one line.
   2. The detail takes all the space that is left and wraps inside its own column, so a second line lines up under the first line of the detail
      (a hanging indent), never back under the title.
   3. The cross-hair is centred on the FIRST line only, however many lines the detail runs to.
   4. text-wrap: pretty stops a single word being left alone on the last line; a very long word or address breaks rather than overflowing.
   5. Both parts are trimmed to cap height / baseline (like the Figma text), so the first lines line up exactly and the row is as tall as the text itself
      (one line = cap height; three lines = 2 line heights + cap height). */
.lockup__meta--wrap { height: auto; align-items: flex-start; }
.lockup__meta.lockup__meta--wrap > :first-child {   /* title + cross-hair: the cross-hair is placed after the text, 20px away, in the title's own box */
  display: block; position: relative; flex: none; height: auto; padding-right: calc(var(--space-5) + 6px); white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.lockup__meta.lockup__meta--wrap > :first-child::after { position: absolute; right: 0; top: 50%; margin: 0; transform: translateY(-50%); }
.lockup__meta.lockup__meta--wrap > :last-child { display: block; flex: 1 1 0; min-width: 0; text-wrap: pretty; overflow-wrap: break-word; text-box: trim-both cap alphabetic; }

/* Swipe title (landing page): dark grey at rest; when the Case study button is hovered or keyboard-focused, the business's gradient (--case-gradient, from a theme class on the slide)
   swipes in from the left with a SOFT edge. How: the gradient sits underneath, and a dark-grey layer on top fades from solid to clear along a wide soft edge (--swipe-soft); --swipe-p slides that edge
   across (an animated registered property). Same padding / margin trick as the gradient title above, so the layout does not move.
   <section class="panel theme-luno"> … <h2 class="lockup__title lockup__title--swipe t-h1">Title</h2> */
@property --swipe-p { syntax: '<percentage>'; inherits: true; initial-value: -25%; }   /* (inherits: the title's text span below reads it) */
.lockup__title--swipe { --swipe-soft: 25%; transition: --swipe-p 750ms cubic-bezier(.5, 1, .89, 1); }   /* the same 750 ms ease-out as the button wipe (button-wipe.js), so the title and the button sweep together */
.lockup__title--swipe .hl__tx {   /* the text itself carries the gradient (so the page-colour highlight behind it, .hl, can stay solid); each wrapped line is its own box (clone) */
  background-image:
    linear-gradient(90deg, transparent calc(var(--swipe-p) - var(--swipe-soft)), var(--color-case-dark) calc(var(--swipe-p) + var(--swipe-soft))),
    var(--case-gradient, linear-gradient(var(--color-case-dark), var(--color-case-dark)));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  padding-block: 0.35em; padding-inline: 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone;   /* (vertical padding on an inline box paints room for ascenders / descenders without changing the layout) */
}
/* not while the page is moving between slides (html[data-moving], set by landing.js): a pointer resting still would otherwise trigger the swipe on every title that scrolls under it */
html:not([data-moving]) .lockup:has(.button:is(:hover, :focus-visible)) .lockup__title--swipe { --swipe-p: 125%; }   /* only while the pointer (or keyboard focus) is on the Case study button, not the title or the rest of the lock-up */
@media (hover: none) { .lockup__title--swipe { --swipe-p: 125%; } }   /* touch has no hover: show the gradient */
@media (prefers-reduced-motion: reduce) { .lockup__title--swipe { transition: none; } }
/* The old title box padding / margin trick for the gradient fill is gone: the span does it now. */

/* A two-line title in a stacked meta row (Haven's team names: "Arrivals & / Accommodation"). Write the break yourself: <strong class="lockup__2l"><span>Arrivals &amp;<br>Accommodation</span></strong>.
   The title column is then only as wide as its longest LINE, so the roles beside it keep their room. The cross-hair stays level with the FIRST line, and the row grows to two lines. */
.lockup__meta-stack > .lockup__meta > .lockup__2l { height: auto; align-items: flex-start; }
.lockup__meta-stack > .lockup__meta > .lockup__2l::after { margin-top: 10px; }   /* (the first line is 26px tall: its middle is 10px above the 6px cross-hair's top) */
.lockup__2l > span { line-height: 26px; }
.lockup__meta-stack > .lockup__meta:has(> .lockup__2l) > :last-child { align-self: start; }