@use 'sprucecss/scss/spruce' as *;

.services-block {
  padding-block: spacer-clamp('xl', 'xxl');

  &__inner {
    display: flex;
    flex-direction: column;
    gap: spacer('l');
  }

  &__list {
    border-block-start: config('border-width-base', $display) solid color('heading');
    list-style: none;
    margin: 0;
    padding: 0;
  }

  &__service {
    border-block-end: config('border-width-base', $display) solid color('border');
    display: grid;
    gap: spacer('s') spacer('l');
    grid-template-columns: auto minmax(0, 1fr);
    padding-block: spacer('l');

    @include breakpoint('lg') {
      align-items: start;
      grid-template-columns: 4rem minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr);
    }
  }

  &__number {
    color: color('primary');
    font-family: config('font-family-heading', $typography);
    font-size: font-size('h4');
    font-variant-numeric: tabular-nums;
    font-weight: config('font-weight-heading', $typography);
    line-height: 1.3;
  }

  &__body {
    @include layout-stack('xs'); // title, text
  }

  &__title {
    font-size: font-size('h3');
  }

  &__text {
    color: color('muted');
  }

  &__deliverables,
  &__terms {
    grid-column: 2;

    @include breakpoint('lg') {
      grid-column: auto;
    }
  }

  &__deliverables {
    list-style: none;
    margin: 0;
    padding: 0;
    @include layout-stack('xxs');

    li {
      align-items: center;
      display: flex;
      gap: spacer('xs');

      &::before {
        background-color: color('primary');
        block-size: 0.35rem;
        border-radius: 50%;
        content: '';
        flex-shrink: 0;
        inline-size: 0.35rem;
      }
    }
  }

  &__terms {
    display: grid;
    gap: spacer('xs');
    margin-block: 0;
  }

  &__term {
    display: flex;
    gap: spacer('xs');
    justify-content: space-between;

    @include breakpoint('lg') {
      flex-direction: column;
      gap: 0;
      justify-content: flex-start;
    }

    dt {
      color: color('muted');
      font-size: config('font-size-sm', $typography);
      font-weight: 400;
    }

    dd {
      color: color('heading');
      font-weight: 700;
      margin: 0;
    }
  }

  &__note {
    color: color('muted');
    font-size: config('font-size-sm', $typography);
    margin-block: 0;
  }
}

<section class="services-block" id="services" aria-labelledby="services-title">
    <div class="container">
        <div class="services-block__inner">
            <header class="block-heading block-heading--start">
                <p class="block-heading__eyebrow">Services</p>
                <h2 class="block-heading__title" id="services-title">Ways to work together</h2>
                <p class="block-heading__text">Fixed scope, fixed price. You always know what you get and when.</p>
            </header>
            <ol class="services-block__list" role="list">
                <li class="services-block__service">
                    <span class="services-block__number" aria-hidden="true">01</span>
                    <div class="services-block__body">
                        <h3 class="services-block__title">Product sprint</h3>
                        <p class="services-block__text">Two weeks to go from a fuzzy idea to a tested prototype.</p>
                    </div>
                    <ul class="services-block__deliverables" role="list" aria-label="Deliverables">
                        <li>User interviews</li>
                        <li>Clickable prototype</li>
                        <li>Test report</li>
                    </ul>
                    <dl class="services-block__terms">
                        <div class="services-block__term">
                            <dt>Duration</dt>
                            <dd>2 weeks</dd>
                        </div>
                        <div class="services-block__term">
                            <dt>From</dt>
                            <dd>€8,000</dd>
                        </div>
                    </dl>
                </li>
                <li class="services-block__service">
                    <span class="services-block__number" aria-hidden="true">02</span>
                    <div class="services-block__body">
                        <h3 class="services-block__title">Product design</h3>
                        <p class="services-block__text">A dedicated designer for your team, from flows to polished screens.</p>
                    </div>
                    <ul class="services-block__deliverables" role="list" aria-label="Deliverables">
                        <li>Flows and wireframes</li>
                        <li>UI design</li>
                        <li>Design QA</li>
                    </ul>
                    <dl class="services-block__terms">
                        <div class="services-block__term">
                            <dt>Duration</dt>
                            <dd>3 months+</dd>
                        </div>
                        <div class="services-block__term">
                            <dt>From</dt>
                            <dd>€12,000 / month</dd>
                        </div>
                    </dl>
                </li>
                <li class="services-block__service">
                    <span class="services-block__number" aria-hidden="true">03</span>
                    <div class="services-block__body">
                        <h3 class="services-block__title">Design system</h3>
                        <p class="services-block__text">Tokens, components and documentation your developers will love.</p>
                    </div>
                    <ul class="services-block__deliverables" role="list" aria-label="Deliverables">
                        <li>Audit</li>
                        <li>Component library</li>
                        <li>Documentation</li>
                    </ul>
                    <dl class="services-block__terms">
                        <div class="services-block__term">
                            <dt>Duration</dt>
                            <dd>6–10 weeks</dd>
                        </div>
                        <div class="services-block__term">
                            <dt>From</dt>
                            <dd>€24,000</dd>
                        </div>
                    </dl>
                </li>
                <li class="services-block__service">
                    <span class="services-block__number" aria-hidden="true">04</span>
                    <div class="services-block__body">
                        <h3 class="services-block__title">Workshop</h3>
                        <p class="services-block__text">A hands-on day to align product, design and engineering.</p>
                    </div>
                    <ul class="services-block__deliverables" role="list" aria-label="Deliverables">
                        <li>Preparation call</li>
                        <li>On-site day</li>
                        <li>Summary</li>
                    </ul>
                    <dl class="services-block__terms">
                        <div class="services-block__term">
                            <dt>Duration</dt>
                            <dd>1 day</dd>
                        </div>
                        <div class="services-block__term">
                            <dt>From</dt>
                            <dd>€3,500</dd>
                        </div>
                    </dl>
                </li>
            </ol>
            <p class="services-block__note">Prices exclude VAT. Non-profits get 30% off.</p>
        </div>
    </div>
</section>