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

.hero-case-block {
  padding-block: spacer-clamp('m', 'xl') spacer-clamp('xl', 'xxl');

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

  &__back {
    margin-block: 0;

    a {
      align-items: center;
      display: inline-flex;
      font-weight: 700;
      gap: spacer('xs');
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  // The arrow points back.
  &__back-icon {
    block-size: 1rem;
    inline-size: 1rem;
    scale: -1 1;
  }

  &__intro {
    align-items: end;
    display: grid;
    gap: spacer-clamp('l', 'xl');

    @include breakpoint('lg') {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
  }

  &__heading {
    @include layout-stack('m');
  }

  &__eyebrow {
    color: color('primary');
    font-size: config('font-size-sm', $typography);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  &__title {
    font-size: responsive-font-size(4.5rem, 35, '5vw + 1rem');
    hyphens: manual;
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-wrap: balance;
  }

  &__summary {
    font-size: config('font-size-lead', $typography);
    max-inline-size: 42rem;
  }

  &__tags {
    display: flex;
    flex-wrap: wrap;
    gap: spacer('xxs');
    list-style: none;
    padding: 0;

    // The items sit side by side: clear the stack margins of the base list style.
    > li {
      margin-block: 0;
    }
  }

  &__facts {
    border-block-start: config('border-width-base', $display) solid color('heading');
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block: 0;
  }

  &__fact {
    border-block-end: config('border-width-base', $display) solid color('border');
    padding-block: spacer('s');
    @include layout-stack('xxs');

    &:nth-child(odd) {
      padding-inline-end: spacer('s');
    }

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

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

  &__cover {
    margin: 0;
    @include layout-stack('xs');

    img {
      aspect-ratio: 2 / 1;
      background-color: color('surface-muted');
      border-radius: radius('lg');
      inline-size: 100%;
      object-fit: cover;
    }

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

// The back arrow points to the right (back) in RTL.
[dir='rtl'] .hero-case-block__back-icon {
  scale: 1;
}

<section class="hero-case-block" aria-labelledby="hero-case-title">
    <div class="container">
        <div class="hero-case-block__inner">
            <p class="hero-case-block__back">
                <a href="#"><svg class="hero-case-block__back-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>
</svg>
All work</a>
            </p>
            <div class="hero-case-block__intro">
                <div class="hero-case-block__heading">
                    <p class="hero-case-block__eyebrow">Case study · Fjord Bank · <time datetime="2025">2025</time></p>
                    <h1 class="hero-case-block__title" id="hero-case-title">A banking app people actually enjoy</h1>
                    <p class="hero-case-block__summary">Fjord Bank’s app had grown for ten years, one feature at a time. In six weeks we turned it into a calm, accessible product, and cut the support tickets by a third.</p>
                    <ul class="hero-case-block__tags" role="list" aria-label="Services">
                        <li class="badge">Research</li>
                        <li class="badge">Product design</li>
                        <li class="badge">Design system</li>
                    </ul>
                </div>
                <dl class="hero-case-block__facts">
                    <div class="hero-case-block__fact">
                        <dt>Client</dt>
                        <dd>Fjord Bank</dd>
                    </div>
                    <div class="hero-case-block__fact">
                        <dt>Industry</dt>
                        <dd>Fintech</dd>
                    </div>
                    <div class="hero-case-block__fact">
                        <dt>Timeline</dt>
                        <dd>6 weeks</dd>
                    </div>
                    <div class="hero-case-block__fact">
                        <dt>Team</dt>
                        <dd>2 designers, 4 engineers</dd>
                    </div>
                </dl>
            </div>
            <figure class="hero-case-block__cover">
                <img src="https://images.unsplash.com/photo-1563986768609-322da13575f3?auto=format&amp;fit=crop&amp;w=1800&amp;q=70" alt="The new Fjord Bank app on a phone, held over a desk." width="1800" height="900" fetchpriority="high">
                <figcaption>The new home screen: the balance, the next payment and one clear action.</figcaption>
            </figure>
        </div>
    </div>
</section>