[data-component-id='ecore_common:step_section'] {
  padding: 80px 140px;

  /* Intro block. */
  .intro {
    text-align: center;
    margin-bottom: 60px;

    h2 {
      font-family: Geomanist, sans-serif;
      font-weight: 300;
      font-size: 42px;
      line-height: 1.285;
      color: #363940;
      margin: 0 0 20px;
    }

    .body {
      font-family: Silka, sans-serif;
      font-size: 16px;
      line-height: 1.625;
      color: #54555a;
      margin-bottom: 28px;

      p:first-child {
        margin-top: 0;
      }

      p:last-child {
        margin-bottom: 0;
      }
    }
  }

  /* Steps: horizontal row on desktop. The counter resets here so number-mode
     step items auto-increment. */
  .steps {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    counter-reset: step;

    > [data-component-id='ecore_common:step_item'] {
      flex: 1 1 200px;
      max-width: 280px;
    }
  }

  /* Dark theme. */
  &.dark {
    background-color: #000;

    .intro {
      h2 {
        color: #fff;
      }

      .body {
        color: rgba(255, 255, 255, 0.8);
      }

      .btn {
        border-color: #fff;
        color: #fff;
      }
    }

    /* Override step_item text colours inside dark sections. */
    [data-component-id='ecore_common:step_item'] {
      .headline {
        color: #fff;
      }

      .body {
        color: #fff;
      }
    }
  }

  /* Left-aligned variant (homepage / TRUcircularity / itsTRU / reclamation).
     Mirrors the page's content container: a full-width section with a 40px
     gutter whose inner content is capped at 1400px and centred — the same
     structure the category grid and trust-logos sections use — so the intro
     and steps line up with them at every viewport width. */
  &.left {
    padding-left: 40px;
    padding-right: 40px;

    .intro {
      text-align: left;
      max-width: 1400px;
      margin-left: auto;
      margin-right: auto;
    }

    /* Horizontal row that shrinks 280px items down to fit, matching prod. */
    .steps {
      flex-wrap: nowrap;
      justify-content: flex-start;
      gap: 0;
      max-width: 1400px;
      margin-left: auto;
      margin-right: auto;

      > [data-component-id='ecore_common:step_item'] {
        flex: 0 1 auto;
        width: 280px;
        max-width: 327px;
        margin-right: 60px;
      }

      /* Number-mode columns run a touch wider so headline/body wrap like the
         homepage design (scoped to number mode; icon pages keep 280px). */
      > [data-component-id='ecore_common:step_item'].number {
        width: 320px;
        max-width: 340px;
        margin-right: 44px;
      }
    }

    /* Step items render left-aligned with larger markers in this variant. */
    [data-component-id='ecore_common:step_item'] {
      align-items: flex-start;
      text-align: left;

      /* Icon markers get a larger box here; number circles size themselves. */
      &.icon .marker {
        width: 100px;
        height: 100px;
      }

      &.icon .marker img {
        width: 100px;
        height: 100px;
      }
    }

    @media (max-width: 782px) {
      padding-left: 36px;
      padding-right: 36px;

      .steps {
        flex-wrap: wrap;
        align-items: flex-start;

        > [data-component-id='ecore_common:step_item'] {
          width: 100%;
          max-width: 100%;
          margin-right: 0;
        }
      }
    }
  }

  /* ===========================================================================
     Dark left-aligned variant = prod's "large-symbol-block" section
     (TRUcircularity / itsTRU). Ported 1:1 from live including its 1250 / 1000 /
     782 breakpoints so the dark step sections render identically to prod.
     Scoped to .dark.left (0,3,0) so it overrides the shared .left (0,2,0)
     layout above while leaving the light homepage (.left, no .dark) untouched.
     ========================================================================= */
  &.dark.left {
    margin: 0 0 80px 80px;
    padding: 80px 120px 80px 60px;

    .intro {
      max-width: 790px;
      margin-left: 0;
      margin-right: 0;
    }

    .steps {
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 0;
      max-width: 1200px;
      margin: 80px 0 0;

      /* Prod formula: 4 columns each calc(25% - 60px) + 60px right margin fills
         the row exactly (the trailing margin sits at the row edge, no overflow).
         The same narrow width is kept when the row collapses to a column below
         1000px, matching prod's left-aligned narrow-column layout. */
      > [data-component-id='ecore_common:step_item'] {
        flex: 0 1 auto;
        width: calc(25% - 60px);
        max-width: 327px;
        margin: 0 60px 60px 0;
      }
    }

    /* Dark step item: 30px white title, 15px white body, 100px icon marker. */
    [data-component-id='ecore_common:step_item'] {
      .headline {
        font-size: 30px;
        line-height: 1.25;
        margin-bottom: 8px;
      }

      .body {
        font-size: 15px;
      }

      &.icon .marker {
        margin-bottom: 15px;
      }
    }

    @media (max-width: 1250px) {
      margin-left: 36px;
      padding: 80px 72px 80px 36px;
    }

    /* Prod collapses the 4-across row to a single column here. The items must
       also drop their narrow 25%-column width, otherwise each stacked item stays
       a ~150px strip and the body text wraps one or two words per line. */
    @media (max-width: 1000px) {
      .steps {
        flex-direction: column;

        > [data-component-id='ecore_common:step_item'] {
          width: 100%;
          max-width: 500px;
          margin: 0 0 60px;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }

    @media (max-width: 782px) {
      margin: 0;
      padding: 80px 36px;

      /* Keep the section heading at its desktop size on mobile. The base rule
         shrinks .intro h2 to 32px, but the dark step headlines are 30px, so a
         32px intro no longer reads as a heading. Prod's large-symbol-block
         heading doesn't shrink on mobile either — hold it at 42px. */
      .intro h2 {
        font-size: 42px;
      }

      .steps {
        align-items: center;

        > [data-component-id='ecore_common:step_item'] {
          width: 100%;
          max-width: 500px;
          margin: 0 0 60px;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      /* Icon beside the title, body spanning below — prod's ≤782 layout. */
      [data-component-id='ecore_common:step_item'] {
        display: grid;
        grid-template-columns: 112px 1fr;
        column-gap: 20px;
        align-items: center;
        grid-template-areas:
          'marker headline'
          'body   body';
        text-align: left;

        .headline {
          grid-area: headline;
        }

        .body,
        .ctas {
          grid-area: body;
          margin-top: 16px;
        }

        &.icon .marker {
          grid-area: marker;
          width: 112px;
          height: 112px;
          margin-bottom: 0;
        }

        &.icon .marker img {
          width: 112px;
          height: 112px;
        }
      }
    }
  }

  @media (max-width: 1250px) {
    padding-left: 45px;
    padding-right: 45px;
  }

  @media (max-width: 782px) {
    padding: 40px 36px;

    .intro h2 {
      font-size: 32px;
    }

    .steps {
      flex-direction: column;
      align-items: center;

      > [data-component-id='ecore_common:step_item'] {
        max-width: 100%;
        width: 100%;
      }
    }
  }
}