/* ============================================================
   COMPONENT: Process / How It Works
   FILE: assets/css/process.css
   Depends on: process.html.
   Loaded after services.css (Phase 1.0 §6, in build order).

   Section background is white, continuing the white/light-gray
   alternation already established by ... -> Benefits (white) ->
   Services (light-gray) -> Process (white).

   Step "card" system: each <li class="process__step"> in
   process.html also carries `surface--solid` (surfaces.css),
   which supplies the background/border/radius/shadow — the same
   convention services.css/benefits.css already use (their cards
   carry the class directly rather than duplicating the
   declarations here). Only step-specific layout (grid placement,
   the number badge, the icon badge, the connector track) is
   added here, scoped under .process__step — nothing here
   redefines or duplicates the surface system itself.

   PROGRESS / CONNECTOR LINE (Stage 5.5 §6):
   A single decorative `.process__track` element rather than a
   per-step connector. On desktop it is an absolutely positioned
   horizontal line running through the row of step numbers; on
   mobile/tablet the layout switches to a single column and the
   same element becomes a vertical line running behind the numbers
   instead. This reuses one CSS-only mechanism at every breakpoint
   rather than introducing separate desktop/mobile connector
   systems. No SVG path animation or per-segment JS is used — the
   line itself is static, and only the steps fade/rise in via the
   existing AppMotion.staggerChildren() mechanism, per Stage 5.5 §7
   ("do not create an unnecessarily complicated animation system").

   MARKUP: `.process__track` and `.process__track-wrap` (the <ol>)
   are both children of `.process__timeline`, a plain wrapper
   <div> — the track is a sibling of the <ol>, not a non-<li>
   child inside it, so the list stays a semantically valid ordered
   list of exactly five <li> items. `.process__timeline` is the
   positioning context (position: relative) the absolutely
   positioned track is placed against; the visual position/size of
   the track is unchanged from before.

   JAVASCRIPT / MOTION:
   process.js registers window.Sections.initProcess, which adds
   `.js-motion-ready` to each step and calls
   AppMotion.staggerChildren() — the identical mechanism
   services.js/benefits.js already use, no new IntersectionObserver
   or DOMContentLoaded listener. See the "ENTRANCE MOTION HOOK"
   section below: exactly like Services, the resting (no-JS) state
   is already opacity: 1 / transform: none, so a slow or failed
   process.js load never hides a step or makes the process
   unreadable — the section works fully with JavaScript disabled.
   ============================================================ */

.process {
  background-color: var(--color-white);
  padding-block: var(--space-10);
}

.process__inner {
  text-align: center;
}

.process__heading {
  margin: 0 0 var(--space-2);
  color: var(--color-navy);
  font-size: var(--text-h3);
}

.process__subheading {
  max-width: 640px;
  margin: 0 auto var(--space-8);
  color: var(--color-dark-gray);
  font-size: var(--text-body);
}

/* ------------------------------------------------------------
   TRACK WRAP + CONNECTOR
   Single column of steps by default (mobile-first), with a
   vertical connector line running behind the numbers.
------------------------------------------------------------ */
.process__timeline {
  position: relative;
}

.process__track-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);

  list-style: none;
  counter-reset: none;
}

.process__track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 27px; /* centered under the 56px number badge below */
  width: 2px;

  background-color: rgba(var(--color-navy-rgb), 0.14);
  z-index: var(--z-decorative);
}

/* ------------------------------------------------------------
   STEP
------------------------------------------------------------ */
.process__step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-areas:
    "number title"
    "number text";
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  align-items: start;

  padding: var(--space-3);
  text-align: left;

  z-index: var(--z-content);
}

.process__number {
  grid-area: number;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;

  background-color: var(--color-navy);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
}

.process__icon {
  display: none; /* icon shown inline with the title on tablet+, see below */
}

.process__title {
  grid-area: title;
  margin: 0;
  color: var(--color-navy);
  font-size: 1.125rem;
  line-height: var(--line-height-heading);
}

.process__text {
  grid-area: text;
  margin: 0;
  color: var(--color-dark-gray);
  font-size: var(--text-small);
  line-height: var(--line-height-body);
}

/* ------------------------------------------------------------
   ENTRANCE MOTION HOOK
   Resting state (no classes) is fully visible: opacity: 1 / no
   transform by default, so a slow or failed process.js load
   never hides a step — matches the Services "ENTRANCE MOTION
   HOOK" pattern exactly. `.js-motion-ready` is added by
   process.js itself, synchronously, before it calls
   AppMotion.staggerChildren().
------------------------------------------------------------ */
.process__step {
  opacity: 1;
  transform: none;
}

.process__step.js-motion-ready {
  transition:
    opacity var(--duration-slow) var(--ease-premium),
    transform var(--duration-slow) var(--ease-premium);
  transition-delay: var(--stagger-delay, 0ms);
}

.process__step:not(.is-visible).js-motion-ready {
  opacity: 0;
  transform: translateY(16px);
}

/* ------------------------------------------------------------
   RESPONSIVE
   Breakpoint values copied from tokens.css's documented
   reference values, same convention services.css/benefits.css use.
------------------------------------------------------------ */

/* Tablet: show the icon badge alongside the title, connector stays vertical */
@media (min-width: 768px) {
 .process__step {
  grid-template-columns: 56px 1fr;
  grid-template-areas:
    "number icon"
    "number title"
    "number text";
  padding: var(--space-4);
}

  .process__icon {
    grid-area: icon;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: var(--space-1);

    background-color: rgba(var(--color-gold-rgb), 0.12);
    color: var(--color-gold);
    border-radius: var(--radius-sm);
  }

  .process__icon svg {
    width: 18px;
    height: 18px;
  }

  .process__title {
    margin-top: var(--space-1);
  }
}

/* Desktop and up: horizontal stepped row with a horizontal connector */
@media (min-width: 1024px) {
  .process {
    padding-block: var(--space-12);
  }

  .process__track-wrap {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-3);
  }

  .process__track {
    top: 27px; /* centered on the number badge */
    bottom: auto;
    left: 6%;
    right: 6%;
    width: auto;
    height: 2px;
  }

  .process__step {
  flex: 1;
  grid-template-columns: 1fr;
  grid-template-areas:
    "number"
    "icon"
    "title"
    "text";
    justify-items: center;
    text-align: center;
    padding: var(--space-4) var(--space-3);
  }

 .process__icon {
  grid-area: icon;
  margin-inline: auto;
}

  .process__title,
  .process__text {
    text-align: center;
  }
}

/* Small mobile: tighten spacing */
@media (max-width: 479px) {
  .process {
    padding-block: var(--space-8);
  }

  .process__track-wrap {
    gap: var(--space-4);
  }

  .process__step {
    padding: var(--space-2);
    column-gap: var(--space-2);
  }

  .process__number {
    width: 48px;
    height: 48px;
    font-size: 1.0625rem;
  }

  .process__track {
    left: 23px;
  }
}

/* ------------------------------------------------------------
   REDUCED MOTION
   Same convention as services.css: entrance motion is skipped
   entirely (handled in process.js via AppMotion's own
   prefersReducedMotion check), and every step is rendered fully
   visible with no transform.
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .process__step.js-motion-ready {
    transition: none;
  }

  .process__step:not(.is-visible).js-motion-ready {
    opacity: 1;
    transform: none;
  }
}