/*
  Steps (stepsBlock, MB-7; contract umbraco/blocks/stepsBlock.md). Mobile first. Colours from the band tokens
  (css/shared/themes.css); a site restyles through the --steps-* properties below or its own tokens.
*/
.steps {
  --steps-line: currentColor;                     /* row lines (numbered rows) */
  --steps-divider: var(--color-link);             /* slanted divider (row with dividers) */
  --steps-title-fs: var(--fs-h3);
  --steps-row-space: var(--space-10);
  --steps-photo-radius: var(--radius-media);      /* step photos (MB-22) */
  padding: var(--section-space) var(--page-gutter);
}
.steps__inner { max-width: var(--container-max); margin: 0 auto; }
.steps__head { max-width: var(--container-text); margin-bottom: var(--space-12); }
.steps__eyebrow { margin: 0 0 var(--space-4); overflow-wrap: break-word; }
.steps__heading { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-heading); overflow-wrap: break-word; }
.steps__intro { margin: var(--space-4) 0 0; font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.steps__list { list-style: none; margin: 0; padding: 0; }
.steps__title { margin: 0; font-size: var(--steps-title-fs); line-height: var(--lh-heading); overflow-wrap: break-word; }
.steps__text p { margin: var(--space-3) 0 0; line-height: var(--lh-body); }
.steps__text p + p { margin-top: var(--space-4); }
.steps__closing { margin-top: var(--space-10); }

/* Step photo (MB-22, optional): a 4:3 box so nothing moves while it loads; first in its step, so above it on phones. */
.steps__photo {
  aspect-ratio: 4 / 3;
  max-width: 32rem;
  margin-bottom: var(--space-4);
  overflow: hidden;
  border-radius: var(--steps-photo-radius);
  background: var(--color-hairline);
}
.steps__photo picture { display: block; width: 100%; height: 100%; }
.steps__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.steps__closing-text { margin: 0 0 var(--space-6); font-size: var(--fs-body-lg); line-height: var(--lh-body); max-width: var(--container-text); }

/* Numbered rows: one step per row, lines between rows. */
.steps--numbered .steps__step {
  display: grid;
  gap: var(--space-2);
  padding: var(--steps-row-space) 0;
  border-top: var(--border-width) solid var(--steps-line);
}
.steps--numbered .steps__number { font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); }
.steps--numbered .steps__text p:first-child { margin-top: 0; }
.steps--numbered .steps__closing {
  margin-top: 0;
  padding: var(--steps-row-space) 0;
  border-top: var(--border-width) solid var(--steps-line);
  border-bottom: var(--border-width) solid var(--steps-line);
}
.steps--numbered .steps__list:last-child { border-bottom: var(--border-width) solid var(--steps-line); }

/* Row with dividers: a slanted line on the right of each step. */
.steps--dividers .steps__list { display: grid; gap: var(--space-10) var(--space-8); }
.steps--dividers .steps__step { position: relative; padding-right: var(--space-16); }
.steps--dividers .steps__step::after {
  /* A slanted line drawn inside its own box, so it never sticks out of the step. */
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--space-12);
  height: 100%;
  min-height: var(--space-16);
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--steps-divider) calc(50% - 1px), var(--steps-divider) calc(50% + 1px), transparent calc(50% + 1px));
}
.steps--dividers .steps__text p:first-child { margin-top: var(--space-3); }

@media (min-width: 768px) {
  .steps--dividers .steps__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .steps--dividers .steps__step { grid-column: span 3; }
  .steps--dividers .steps__step:last-child:nth-child(odd) { grid-column: span 6; }
}

@media (min-width: 1024px) {
  .steps { --steps-row-space: var(--space-16); }
  .steps--numbered .steps__step,
  .steps--numbered .steps__closing {
    grid-template-columns: 1fr 2fr 2fr 3fr;
    column-gap: var(--space-8);
    align-items: start;
  }
  .steps--numbered .steps__number { grid-column: 1; padding-top: 0.35em; }
  .steps--numbered .steps__step--has-photo > * { grid-row: 1; }
  .steps--numbered .steps__photo { grid-column: 4; max-width: none; margin-bottom: 0; }
  .steps--numbered .steps__title { grid-column: 2; }
  .steps--numbered .steps__text { grid-column: 3; }
  .steps--numbered .steps__closing { display: grid; }
  .steps--numbered .steps__closing > * { grid-column: 2 / 4; justify-self: start; }

  .steps--dividers .steps__step,
  .steps--dividers .steps__step:last-child:nth-child(odd) { grid-column: span 2; }
  .steps--dividers .steps__step--row-of-2,
  .steps--dividers .steps__step--row-of-2:last-child:nth-child(odd) { grid-column: span 3; }
  .steps--dividers .steps__step--row-of-1 { grid-column: span 6; }
}

/*
  Intro stays in view (MB-112, Layout tab switch, off by default; from FuelChief's 9-step panel, #135). From 992 px the
  head (small label, heading, intro) is a column on the left that stays in view under the sticky header while the steps
  scroll past beside it, and lets go at the end of the steps (position: sticky; no other motion). Below 992 px the head
  sits above the steps as usual, so nothing sticks. Numbered steps keep their numbers; each step stacks (number, title,
  text) in its cell. A band decoration a site adds never makes the page scroll sideways (overflow-x: clip, which keeps
  sticky working). Site hooks:
    --steps-sticky-gap          space between the sticky header and the head (default --space-6; FuelChief: 70px under
                                its 80px header = 150px from the top)
    --steps-sticky-intro-width  the head column (default a third of the content)
    --steps-sticky-column-gap   between the head column and the steps (default --space-12)
    --steps-sticky-columns      steps per row from 1200 px, 1 to 4 (default 2)
    --steps-sticky-columns-mid  steps per row from 992 to 1199 px (default 1)
*/
.steps--sticky-intro { overflow-x: clip; }

@media (min-width: 992px) {
  .steps--sticky-intro .steps__inner {
    display: grid;
    grid-template-columns: var(--steps-sticky-intro-width, minmax(0, 1fr)) minmax(0, 2fr);
    column-gap: var(--steps-sticky-column-gap, var(--space-12));
    align-items: start;
  }
  .steps--sticky-intro .steps__head {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    top: calc(var(--site-sticky-header-height, 0px) + var(--steps-sticky-gap, var(--space-6)));
    margin-bottom: 0;
  }
  .steps--sticky-intro .steps__list,
  .steps--sticky-intro .steps__closing { grid-column: 2; min-width: 0; }
  .steps--sticky-intro .steps__list {
    display: grid;
    grid-template-columns: repeat(var(--steps-sticky-columns-mid, 1), minmax(0, 1fr));
    column-gap: var(--space-8);
  }
  .steps--sticky-intro.steps--dividers .steps__list > .steps__step { grid-column: auto; }

  /* Numbered rows: each step stacks in its cell (as on phones), whatever the width. */
  .steps--sticky-intro.steps--numbered .steps__step,
  .steps--sticky-intro.steps--numbered .steps__closing { display: grid; grid-template-columns: minmax(0, 1fr); }
  .steps--sticky-intro.steps--numbered .steps__step > *,
  .steps--sticky-intro.steps--numbered .steps__closing > * { grid-column: auto; grid-row: auto; }
  .steps--sticky-intro.steps--numbered .steps__number { padding-top: 0; }
  .steps--sticky-intro.steps--numbered .steps__photo { max-width: 32rem; margin-bottom: var(--space-4); }
}

@media (min-width: 1200px) {
  .steps--sticky-intro .steps__list { grid-template-columns: repeat(var(--steps-sticky-columns, 2), minmax(0, 1fr)); }
}

/*
  Step groups (MB-129, step fields Group title and Group icon, empty by default; from FuelChief's 9-step panel, #135).
  A step with a group title starts a named group: a heading (optional decorative icon before the words) over the group's
  own list; numbers carry on across groups. In "Intro stays in view" the steps of each group sit 3 a row from 1200 px,
  1 a row from 992 to 1199 px (as the source), stacked below. Each group heading fades in like a step (MB-3).
  Site hooks:
    --steps-group-space          space above each group after the first (default --space-12)
    --steps-group-title-fs       group heading size (default --fs-h3)
    --steps-group-icon-size      the icon square (default 2.5rem = 40px, as the source)
    --steps-sticky-group-columns grouped steps per row from 1200 px with the intro in view, 1 to 4 (default 3)
    --steps-number-zero          "none" shows 1, 2 … instead of 01, 02 … in grouped numbered steps (FuelChief: none)
*/
.steps__group + .steps__group { margin-top: var(--steps-group-space, var(--space-12)); }
.steps__group-title {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
  font-size: var(--steps-group-title-fs, var(--fs-h3));
  line-height: var(--lh-heading);
  overflow-wrap: break-word;
}
.steps__group-text { min-width: 0; }
.steps__group-icon { flex: none; width: var(--steps-group-icon-size, 2.5rem); height: var(--steps-group-icon-size, 2.5rem); }
.steps__group-icon picture { display: block; width: 100%; height: 100%; }
.steps__group-icon-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.steps__number-zero { display: var(--steps-number-zero, inline); }

@media (min-width: 992px) {
  .steps--sticky-intro .steps__groups { grid-column: 2; min-width: 0; }
}

@media (min-width: 1200px) {
  .steps--sticky-intro.steps--grouped .steps__list { grid-template-columns: repeat(var(--steps-sticky-group-columns, 3), minmax(0, 1fr)); }
}