/* =============================================================================
   integrator-services.css
   Page-only styles for /integrator-services.html.
   Foundation styles live in /css/style.css — do not duplicate tokens here.
   Design contract: Story/design-verdict.md (LOCKED).
   ============================================================================= */

/* =============================================================================
   1. HERO — full-bleed dark background photo (mirrors manufacturer main).
   Base .hero (style.css) supplies min-height + flex centering; .hero--dark
   supplies the dark fallback gradient + on-dark colors. This page doesn't load
   manufacturer-services.css, so the .hero--home/bg-photo treatment lives here.
   ============================================================================= */
.is-hero { color: var(--c-on-dark); }
.is-hero h1 {
  color: var(--c-on-dark);
  font-weight: 700; /* h1 is the one place weight 700 is permitted (verdict §2) */
  /* Long headline ("Automation engineering services for system integrators and
     machine builders."). Sized so it reads big but wraps to TWO balanced lines
     across the wider hero__inner; text-wrap:balance evens the two lines. */
  max-width: none;  /* override the base .hero h1 16ch cap so 2 lines can fit */
  font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.25rem);
  line-height: 1.08;
  text-wrap: balance;
}
.is-hero .hero__eyebrow { color: var(--c-accent); }
.is-hero .hero__sub {
  max-width: 56ch;
  margin-top: var(--sp-3);
  /* A touch smaller than the full lead size so the body reads as support copy
     under the larger headline. */
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.5rem);
  line-height: 1.45;
  color: var(--c-on-dark);
}

.is-hero .hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.is-hero .hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.is-hero .hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(7, 19, 35, 0.78) 0%,
    rgba(7, 19, 35, 0.50) 52%,
    rgba(7, 19, 35, 0.24) 100%);
  z-index: 1;
}
.is-hero .hero__inner {
  position: relative;
  z-index: 2;
  /* Use the standard centered .container (max-width + margin-inline:auto) so the
     headline and body sit in the same limited, centered column as the home hero
     — instead of left-anchored and spanning to the screen edge on wide displays. */
}

.is-hero .hero__actions {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* =============================================================================
   2. SERVICES SECTION
   ============================================================================= */
#services .section-head h2 {
  max-width: 22ch;
}

/* Card icon color is inherited from .card__icon in foundation */
.card h3 {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem); /* tighter than --t-h3 for 6-card density */
  font-weight: 500;
}

/* =============================================================================
   3. CONCEPT TO COMMISSIONING — GESTURE-STEPPED
   One scroll gesture advances exactly one step.
   Engine: js/step-scroller.js · wiring: js/is-concept.js
   is-concept.js sets data-active="N" (1-based) on [data-is-stepper] and
   .is-active / .is-passed on .is-stepper__card.
   All schematic highlight transitions are pure CSS — no extra DOM writes.
   ============================================================================= */

#concept-to-commissioning {
  padding-bottom: 0; /* stepper runs flush to the section below */
}

#concept-to-commissioning .section-head {
  padding-bottom: var(--sp-5);
}

#concept-to-commissioning .section-head h2 {
  color: var(--c-on-dark);
}

/* --- Stepper scaffold --- */
.is-stepper { position: relative; }

.is-stepper__stage {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  /* clip (not hidden) — never turns into a scroll container */
  overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The runway: one spacer block per step. The negative margin pulls the runway
   up over the sticky stage's own flow box (one viewport tall) so step 0 starts
   exactly where the stage pins — no dead scroll zone on entry or exit. */
.is-stepper__track {
  margin-top: calc(-100svh + var(--nav-h));
  pointer-events: none;
}
.is-stepper__block { height: 100svh; }

.is-stepper__layout {
  display: grid;
  /* Graphic column is wider than the cards so the detailed step graphic spills
     past the centre line into the right half; the cards take the rest. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
}

/* --- Step graphic (left, oversized) --- */
.is-stepper__visual {
  display: grid;
  width: 100%;
  max-width: 800px;  /* let the graphic grow; the column width is the real cap */
}

/* The four step graphics stack in one grid cell; the active step's panel is
   shown, driven by [data-active] (set 1-based by is-concept.js) — the same
   mechanism the old schematic highlight used, so no JS change is needed. */
.is-stepper__panel {
  grid-area: 1 / 1;
  align-self: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0ms, transform 0ms;  /* outgoing: snap to hidden, no bleed */
  pointer-events: none;
}
.is-stepper:not([data-active]) .is-stepper__panel[data-panel="1"],
.is-stepper[data-active="1"]   .is-stepper__panel[data-panel="1"],
.is-stepper[data-active="2"]   .is-stepper__panel[data-panel="2"],
.is-stepper[data-active="3"]   .is-stepper__panel[data-panel="3"],
.is-stepper[data-active="4"]   .is-stepper__panel[data-panel="4"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  /* incoming: time-based fade so the frame is always fully composed */
  transition:
    opacity   0.5s var(--ease-out),
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Claude Design handover step graphics — static inline SVG, self-contained
   (own dark navy background that matches the section). .mono/.sans map to the
   site fonts. */
.is-step-graphic {
  display: block;
  width: 100%;
  height: auto;
}
.is-step-graphic .mono { font-family: var(--f-mono); }
.is-step-graphic .sans { font-family: var(--f-display); }

/* --- Stepped cards (right) ---
   Every card shares one grid cell so they stack; only the active card shows. */
.is-stepper__cards { display: grid; }

.is-stepper__card {
  grid-area: 1 / 1;
  align-self: center;
  max-width: 400px;
  padding: var(--sp-3) var(--sp-4);
  background: rgba(46, 163, 242, 0.06);
  border: 1px solid var(--c-line-dark);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-lg);
  display: grid;
  gap: var(--sp-2);
  /* Three frames: incoming (below, transparent), active (settled), passed
     (above, transparent). Classes set by is-concept.js; transition is
     time-based so a card always flies in fully at any scroll speed. */
  opacity: 0;
  transform: translateY(44px) scale(0.97);
  transition: opacity 0.5s ease,
              transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.is-stepper__card.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.is-stepper__card.is-passed {
  opacity: 0;
  transform: translateY(-44px) scale(0.97);
}

.is-stepper__card h3 {
  color: var(--c-on-dark);
  /* A little smaller than the default h3 so the card stays compact and the
     graphic gets more width. */
  font-size: var(--t-lead);
}

.is-stepper__card p {
  color: var(--c-on-dark-2);
}

.is-step-num {
  display: block;
  color: var(--c-accent);
  margin-bottom: 0.25rem;
}

/* --- Static fallback: reduced motion AND no-JS ---
   step-scroller.js is inert under prefers-reduced-motion, so the CSS must
   stand in: unpin the stage, drop the scroll runway, and unstack the cards
   so every step is visible and legible. Same treatment for no-JS. */
@media (prefers-reduced-motion: reduce) {
  .is-stepper__stage {
    position: static;
    height: auto;
    overflow: visible;
  }
  .is-stepper__track { display: none; }
  .is-stepper__layout { align-items: start; }
  .is-stepper__cards { gap: var(--sp-3); }
  .is-stepper__card {
    grid-area: auto;
    opacity: 1 !important;
    transform: none !important;
    max-width: 100%;
  }
  /* Show every step graphic, unstacked, in the static fallback */
  .is-stepper__visual { gap: var(--sp-4); max-width: 100%; }
  .is-stepper__panel {
    grid-area: auto;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
  }
}
.no-js .is-stepper__stage {
  position: static;
  height: auto;
  overflow: visible;
}
.no-js .is-stepper__track { display: none; }
.no-js .is-stepper__layout { align-items: start; }
.no-js .is-stepper__cards { gap: var(--sp-3); }
.no-js .is-stepper__card {
  grid-area: auto;
  opacity: 1;
  transform: none;
  max-width: 100%;
}
.no-js .is-stepper__visual { gap: var(--sp-4); max-width: 100%; }
.no-js .is-stepper__panel {
  grid-area: auto;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* =============================================================================
   4. CROSS-LINK BAND + 5. CTA BAND
   The .crosslink-band layout, the .svc-flow-graphic, and the LIGHT #contact /
   .cta-form styling are all owned by css/pages/mfr-subpage.css (loaded ahead of
   this sheet). The former page-local grid crosslink + dark #contact rules were
   removed here so they don't conflict with the shared subpage pattern.
   ============================================================================= */

/* =============================================================================
   6. RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  .is-stepper__layout {
    gap: var(--sp-4);
  }
}

@media (max-width: 768px) {
  .is-hero h1 {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
  }

  /* Single column — the graphic stacks ABOVE the active card (it comes first in
     the DOM). Kept on mobile as a supporting visual: the fine detail is small
     at phone width, but the graphic still reads. */
  .is-stepper__layout {
    grid-template-columns: 1fr;
  }

  .is-stepper__visual {
    max-width: 100%;
  }

  .is-stepper__card {
    max-width: 100%;
    padding: var(--sp-4);
  }
  /* (The mobile sticky-CTA text hide now lives globally in style.css.) */
}

@media (max-width: 480px) {
  .is-hero .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Keep the "Pairs with" headline on a single line at every width. The viewport-
   scaled clamp shrinks the type on narrow screens so nowrap never overflows. */
#crosslink-heading {
  white-space: nowrap;
  font-size: clamp(1.1rem, 4.7vw, 2.9rem);
}

/* Blue inline link in the "Pairs with" body + make the visual a clickable link
   to the Simulation & VC page. --c-accent-ink is the AA-safe accent on light. */
.crosslink-band__content p a {
  color: var(--c-accent-ink);
  text-decoration: none;
}
.crosslink-band__content p a:hover { color: var(--c-accent-hover); }

.crosslink-band__visual-link {
  display: block;
  border-radius: var(--radius, 12px);
}
.crosslink-band__visual-link:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
}