/* ------------------------------------------------------------------
   Lifecycle flow module — DILO USA redesign
   Reference: Figma node 419:8997
------------------------------------------------------------------ */

.lifecycle-flow {
  --lifecycle-flow-accent: #eb690b;
  --lifecycle-flow-near-black: #1a1c1e;
  --lifecycle-flow-text: #495156;
  --lifecycle-flow-divider: #c3ced7;
  --lifecycle-flow-font-display: var(--dilo-font-display);
  --lifecycle-flow-font-body: var(--dilo-font-body);

  background-color: #f0f3f5;
  border-bottom: 1px solid var(--lifecycle-flow-divider);
}

.lifecycle-flow__inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 96px;
  padding-top: 96px;
  text-align: center;
}

/* Eyebrow — centred, so the theme class draws a dash either side */
.lifecycle-flow__eyebrow {
  color: var(--lifecycle-flow-accent);
  margin: 0;
}

.lifecycle-flow__heading {
  color: var(--lifecycle-flow-near-black);
  font-family: var(--lifecycle-flow-font-display);
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

.lifecycle-flow__intro {
  color: var(--lifecycle-flow-text);
  font-family: var(--lifecycle-flow-font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  max-width: 720px;
}

/* Closing paragraph below the flow */
.lifecycle-flow__outro {
  color: var(--lifecycle-flow-text);
  font-family: var(--lifecycle-flow-font-display);
  /* 14px against the intro's 16px. The intro sets the section up and the
     flow is the point; this one closes it, so it steps back rather than
     matching the paragraph above the diagram. Leading opens to 1.55 to keep
     it readable at the smaller size. */
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  max-width: 720px;
}

.lifecycle-flow__outro p {
  margin: 0 0 12px;
}

.lifecycle-flow__outro p:last-child {
  margin-bottom: 0;
}

.lifecycle-flow__intro p {
  margin: 0 0 8px;
}

.lifecycle-flow__intro p:last-child {
  margin-bottom: 0;
}

/* ==================================================================
   Lifecycle flow — steps + arrows
   ================================================================== */
/* Steps top-align rather than each centring itself: the titles wrap to
   different line counts ("Refilling & Evacuation" is one line where the rest
   are two), and independent centring pushed those subtitles out of line.

   Margin and step padding both dropped to zero, so the distance from the
   paragraph above is the inner's 24px gap alone - it used to be 24 + 8 + 20
   = 52px spread across three rules. */
.lifecycle-flow__flow {
  align-items: flex-start;
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.lifecycle-flow__step {
  align-items: center;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 16px;
  max-width: 224px;
  min-width: 0;
  padding: 0 16px;
}

/* Number badge — orange circle */
.lifecycle-flow__badge {
  align-items: center;
  background-color: var(--lifecycle-flow-accent);
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  flex: 0 0 auto;
  font-family: var(--lifecycle-flow-font-display);
  font-size: 28px;
  font-weight: 800;
  height: 64px;
  justify-content: center;
  line-height: 1;
  width: 64px;
}

.lifecycle-flow__step-title {
  color: var(--lifecycle-flow-near-black);
  font-family: var(--lifecycle-flow-font-display);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  text-transform: uppercase;
}

.lifecycle-flow__step-subtitle {
  color: var(--lifecycle-flow-accent);
  font-family: var(--lifecycle-flow-font-body);
  /* 14px, not 12px - at 12px against a 16px title the product names read as
     a footnote rather than the point of each step. Bold too: the body family
     registers the 67 Bold Condensed cut at 700, so this is the real bold and
     not a synthesized one. */
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

/* Arrow separators */
/* Pinned to the badge's centre line. Once the steps top-align, centring the
   arrow on the whole row would drop it below the badges. 64px badge, 20px
   arrow, so 22px down from the top. */
.lifecycle-flow__arrow {
  align-items: center;
  align-self: flex-start;
  color: var(--lifecycle-flow-accent);
  display: flex;
  flex: 0 0 auto;
  margin-top: 22px;
}

.lifecycle-flow__arrow svg {
  fill: currentColor;
  height: 20px;
  width: 20px;
}

/* ==================================================================
   Row alignment

   Top-aligning the steps is not enough on its own: a one-line title still
   leaves its subtitle higher than a two-line neighbour's. Subgrid makes
   badge, title and subtitle three shared rows across every step, so they
   line up whatever the copy does - no reserved dead space, and it survives
   future edits to the step titles.

   Where subgrid is unavailable the min-height below reserves two lines on
   the title, which covers one-line vs two-line but not a three-line title.
   The grid column template is emitted per instance from module.html, since
   it depends on how many steps the editor has added.
   ================================================================== */
.lifecycle-flow__step-title {
  min-height: 2.2em;
}

@supports (grid-template-rows: subgrid) {
  .lifecycle-flow__flow {
    align-items: start;
    column-gap: 0;
    display: grid;
    grid-template-rows: auto auto auto;
    justify-items: center;
    row-gap: 16px;
  }

  .lifecycle-flow__step {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    justify-items: center;
    row-gap: 16px;
  }

  /* Deliberately NOT grid-row: 1. An explicit row line makes this a
     definite-position item, and grid places all of those in a pass before
     the auto-placed steps - which packed all four arrows into the start of
     row 1 instead of between the steps. Left to auto-place it lands in row 1
     anyway, because the steps span rows 1-3 and the cursor stays on row 1.
     align-self then centres it on the 64px badge. */
  .lifecycle-flow__arrow {
    align-self: center;
    margin-top: 0;
  }

  /* Subgrid holds the rows level, so the reservation is not needed */
  .lifecycle-flow__step-title {
    min-height: 0;
  }
}

/* ==================================================================
   Responsive — single mobile breakpoint
   ================================================================== */
@media (max-width: 767px) {
  .lifecycle-flow__inner {
    padding-bottom: 56px;
    padding-top: 56px;
  }

  .lifecycle-flow__heading {
    font-size: 38px;
  }

  /* Stack the flow vertically; arrows rotate to point downward. Back to flex
     here - a single column has nothing to align across. */
  .lifecycle-flow__flow {
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .lifecycle-flow__step {
    display: flex;
  }

  .lifecycle-flow__step-title {
    min-height: 0;
  }

  .lifecycle-flow__arrow {
    align-self: center;
    margin-top: 0;
  }

  .lifecycle-flow__step {
    max-width: none;
    width: 100%;
  }

  .lifecycle-flow__arrow svg {
    transform: rotate(90deg);
  }
}