@import '../tokens.css?v=0f47e1e2';

/* No Road Block showcase — project SKIN for the generic showcase deck
 * (css/page/showcase.css). Only brand colour, content-specific crops,
 * and the hero-mark treatment live here; all structure is shared.
 * Page: ux-case-studies/nrb-showcase.html. */

.peel-stack {
  --sc-accent: #1807ff;                 /* NRB brand blue */
  --sc-vignette-ink: rgba(8, 2, 84, 0.6); /* darker shade of the blue */
  --sc-hero-wash: 0.7;                  /* ← dial the hero wash here */
}

/* Pitch-slide crop: centre the whole sticker in the v2 trailhead frame
 * (it sits at ~54% / 55% of the source) with a whisper of zoom. */
.sc-zoom {
  --sc-zoom-pos: 50% 80%;
  --sc-zoom-transform: scale(1.06);
  --sc-zoom-origin: 54% 45%;
}

/* ── Hero mark ──────────────────────────────────────────────────────────
 * The inlined product mark (see the page) animates via the .nrb-letter /
 * .nrb-badge / .nrb-bang rules in case-study.css. On the blue wash it
 * prints as solid white: kill the SVG's paper-rim dilate filter (it
 * reads as a stroke once the blue fills sink into the blue ground) and
 * flip every glyph to white fill. */
.peel-panel--hero .cs-hero-mark g[filter] {
  filter: none;
}

.peel-panel--hero .cs-hero-mark path {
  fill: #ffffff;
}

/* Relative (not static) so the in-flow mark still paints above the
 * absolutely-positioned media/wash layers. */
.peel-panel--hero .cs-hero-mark {
  position: relative;
  inset: auto;
  transform: none;
  z-index: 1;
}

/* Short-viewport guard: the mark also yields to viewport height so the
 * stack (mark + 40px + line + CTAs) always fits. */
.peel-panel--hero .cs-hero-mark .cs-hero-mark-lockup {
  width: min(680px, 56vw, 90dvh);
}

.peel-panel--hero .cs-hero-mark .cs-hero-mark-stack {
  width: min(250px, 70vw, 55dvh);
}