/* =====================================================================
   Service hero rail (vb-shr) · Viva Media design system
   Production CSS of the native block `service-hero-rail`, copied rule for rule
   from the live inline bundle on /services, /commercial-, /corporate-, /social-media-video-production-toronto (== scrape/css/vb-blocks.live.css) and /animation-video-production-toronto.
   It matches vivamedia-web/blocks/service-hero-rail/block.css verbatim, so class
   names and selectors are the production ones. Mechanical edits only:
   literal .3s/.5s durations became var(--vm-duration)/var(--vm-duration-slow)
   (same values). Tokens come from ../../tokens/tokens.css.
   Sections: 1 host-page context · 2 shared vb scaffolding · 3 block ·
   4 specimen-only static states (.is-hover / .is-focus mirror the real
   :hover / :focus-visible rules so states are visible without interaction).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. HOST-PAGE CONTEXT (specimen only, not production block CSS)
   On vivamedia.ca every vb block renders inside the Webflow site stylesheet.
   Where the block CSS is silent, these Webflow element defaults reach into
   the blocks and change the render (measured with tools/q.py snap):
     body 14px/20px #333 · p 16px/24px, margin-bottom 10px (26px at <=479)
     ul 18px/38px #000, margin-top 40px (16px/28px at <=479)
     figure margin-bottom 10px · figcaption centred · links underlined
   Single-element specificity, so every production class rule still wins.
   Deliberately NOT reproduced: Webflow's `p { color: #000 }` (see README).
   --------------------------------------------------------------------- */
:where(.vb) { font-size: 14px; line-height: 20px; color: var(--vm-ink); }
:where(.vb) p { margin: 0 0 10px; font-size: 16px; line-height: 24px; }
:where(.vb) ul { margin: 40px 0 0; padding-left: 40px; color: var(--vm-night); font-size: 18px; line-height: 38px; }
:where(.vb) ol { margin: 0 0 10px; padding-left: 40px; }
:where(.vb) figure { margin: 0 0 10px; }
:where(.vb) figcaption { margin-top: 5px; text-align: center; }
:where(.vb) a { text-decoration: underline; }
@media (max-width: 479px) {
  :where(.vb) p { line-height: 26px; }
  :where(.vb) ul { font-size: 16px; line-height: 28px; }
}

/* ---------------------------------------------------------------------
   2. SHARED VB SCAFFOLDING (production, ships with every block bundle)
   --------------------------------------------------------------------- */
/* shared block scaffolding */
.vb { font-family: var(--vm-font-body); }
.vb *, .vb *::before, .vb *::after { box-sizing: border-box; }
.vb .vb-container { max-width: var(--vm-container); margin: 0 auto; padding: 0 var(--vm-gutter); }
.vb .vb-container--va,
.vb:is(
  .vb-fw[data-variant="editorial"],
  .vb-process[data-variant="editorial"],
  .vb-eb[data-variant="editorial"],
  .vb-faq[data-variant="editorial"],
  .vb-ctaglow[data-variant="lavender"]
) > .vb-container {
  --vm-va-gutter: 40px;
  width: min(var(--vm-container), calc(100% - var(--vm-va-gutter) - var(--vm-va-gutter)));
  max-width: none;
  padding-inline: 0;
}
.vb :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--vm-focus);
  outline-offset: 3px;
}
.vb .vb-eyebrow {
  display: inline-block; font-size: var(--vm-caption); font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; padding: 6px 16px;
  border-radius: var(--vm-radius-tag, var(--vm-radius-pill)); border: 1px solid var(--vm-rule);
}
.vb h2.vb-title {
  font-family: var(--vm-font-display); font-weight: 600;
  font-size: var(--vm-h4); line-height: var(--vm-h4-lh);
  letter-spacing: var(--vm-tracking-tight); margin: 16px 0 0;
}
.vb .vb-sub { font-size: var(--vm-body-lg); line-height: 1.6; }
@media (max-width: 767px) {
  /* production also re-declares --vm-section-pad and --vm-gutter here; tokens.css already does */
  .vb h2.vb-title { font-size: var(--vm-h5); line-height: var(--vm-h5-lh); }
  .vb .vb-container--va,
  .vb:is(
    .vb-fw[data-variant="editorial"],
    .vb-process[data-variant="editorial"],
    .vb-eb[data-variant="editorial"],
    .vb-faq[data-variant="editorial"],
    .vb-ctaglow[data-variant="lavender"]
  ) > .vb-container { --vm-va-gutter: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .vb *, .vb *::before, .vb *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------------
   3. BLOCK (production)
   --------------------------------------------------------------------- */
/* service-hero-rail: Figma Version A's integrated dark hero and service rail.
   Fluid type and intrinsic content height replace the fixed Figma frame. */
.vb-shr {
  --vb-service-accent: var(--vm-lavender);
  --vm-focus: var(--vm-focus-on-dark);
  background: var(--vm-black);
  color: var(--vm-white);
  padding: clamp(72px, 8vw, 112px) 0 clamp(72px, 7vw, 96px);
}
.vb-shr[data-accent="gold"] { --vb-service-accent: var(--vm-gold); }
.vb-shr[data-accent="sage"] { --vb-service-accent: var(--vm-sage); }
.vb-shr[data-accent="rose"] { --vb-service-accent: var(--vm-rose); }
.vb-shr .vb-shr-eyebrow {
  margin: 0;
  color: var(--vm-text-muted-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.5;
  text-transform: uppercase;
}
.vb-shr .vb-shr-lead {
  display: grid;
  grid-template-columns: minmax(0, 17fr) minmax(280px, 10fr);
  align-items: end;
  gap: clamp(48px, 8vw, 120px);
  margin-top: clamp(40px, 5vw, 64px);
}
.vb-shr .vb-shr-title,
.vb-shr .vb-shr-intro,
.vb-shr .vb-shr-route { min-width: 0; }
.vb-shr .vb-shr-title {
  max-width: 14ch;
  margin: 0;
  color: var(--vm-white);
  font-family: var(--vm-font-display);
  font-size: clamp(52px, 6.3vw, 80px);
  font-weight: 600;
  letter-spacing: var(--vm-tracking-tight);
  line-height: 1.04;
  overflow-wrap: break-word;
  text-wrap: balance;
  white-space: pre-line;
}
.vb-shr .vb-shr-intro { align-self: end; }
.vb-shr .vb-shr-sub {
  max-width: 42ch;
  margin: 0;
  color: var(--vm-text-soft-dark);
  font-size: var(--vm-body-lg);
  line-height: 1.65;
}
.vb-shr .vb-shr-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--vm-space-2);
  margin-top: var(--vm-gap-m);
  color: var(--vm-white);
  font-size: var(--vm-body);
  font-weight: 700;
  line-height: 1.4;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--vm-space-1);
}
.vb-shr .vb-shr-cta:hover { color: var(--vm-lavender); }
.vb-shr .vb-shr-note {
  max-width: 42ch;
  margin: var(--vm-gap-s) 0 0;
  color: var(--vm-text-muted-dark);
  font-size: var(--vm-caption);
  line-height: 1.5;
}
.vb-shr .vb-shr-nav { margin-top: clamp(56px, 7vw, 84px); }
.vb-shr .vb-shr-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  column-gap: var(--vm-gap-m);
}
.vb-shr .vb-shr-link {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: var(--vm-space-4);
  padding: 18px 0;
  border-top: 1px solid var(--vm-rule-strong-dark);
  border-bottom: 1px solid var(--vm-rule-strong-dark);
  color: var(--vm-white);
  text-decoration: none;
  transition: background var(--vm-duration) var(--vm-ease), color var(--vm-duration) var(--vm-ease);
}
.vb-shr .vb-shr-link:hover { color: var(--vb-service-accent); }
.vb-shr .vb-shr-link[aria-current="page"] { color: var(--vb-service-accent); }
.vb-shr .vb-shr-label {
  font-size: var(--vm-body-lg);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.vb-shr .vb-shr-action {
  flex: none;
  color: currentColor;
  font-size: var(--vm-body-lg);
  line-height: 1.5;
}

@media (max-width: 991px) {
  .vb-shr .vb-shr-lead { grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); gap: var(--vm-gap-xl); }
  .vb-shr .vb-shr-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .vb-shr { padding: 56px 0 64px; }
  .vb-shr .vb-shr-eyebrow { font-size: 11px; }
  .vb-shr .vb-shr-lead { grid-template-columns: minmax(0, 1fr); gap: var(--vm-gap-m); margin-top: var(--vm-gap-m); }
  .vb-shr .vb-shr-title { max-width: 11ch; font-size: clamp(38px, 10.25vw, 46px); line-height: 1.08; }
  .vb-shr .vb-shr-sub { font-size: var(--vm-body); line-height: 1.6; }
  .vb-shr .vb-shr-nav { margin-top: var(--vm-gap-l); }
  .vb-shr .vb-shr-link { min-height: 72px; padding: 14px 0; gap: var(--vm-space-2); }
  .vb-shr .vb-shr-label { font-size: var(--vm-body); }
}
@media (max-width: 359px) {
  .vb-shr .vb-shr-title { font-size: 36px; }
  .vb-shr .vb-shr-link { min-height: 68px; }
  .vb-shr .vb-shr-label { font-size: 15px; }
}

/* ---------------------------------------------------------------------
   4. SPECIMEN-ONLY STATIC STATES
   --------------------------------------------------------------------- */
.vb .is-focus { outline: 2px solid var(--vm-focus); outline-offset: 3px; }   /* mirrors .vb :focus-visible */
.vb-shr .vb-shr-link.is-hover { color: var(--vb-service-accent); }