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

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

  &__inner {
    align-items: center;
    background-color: color('surface');
    border: config('border-width-base', $display) solid color('border');
    border-radius: radius('lg');
    display: grid;
    overflow: hidden;

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

  &__image {
    block-size: 100%;
    inline-size: 100%;
    max-block-size: 28rem;
    object-fit: cover;

    @include breakpoint('lg') {
      max-block-size: none;
    }
  }

  &__content {
    padding: spacer-clamp('m', 'xl');
    @include layout-stack('m');
  }

  &__eyebrow {
    color: color('primary');
    font-weight: 700;
  }

  &__company {
    color: color('heading');
  }

  &__figure {
    margin-inline: 0;
    @include layout-stack('m');
  }

  &__quote {
    border: 0;
    color: color('heading');
    font-family: config('font-family-heading', $typography);
    font-size: responsive-font-size(1.75rem, 25, '2vw + 1rem');
    line-height: 1.35;
    margin: 0;
    padding: 0;
  }

  &__author {
    align-items: center;
    display: flex;
    gap: spacer('s');
    text-align: start;

    img {
      block-size: 3rem;
      border-radius: 50%;
      inline-size: 3rem;
      object-fit: cover;
    }

    strong,
    span span {
      display: block;
    }

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

  &__metrics {
    border-block-start: config('border-width-base', $display) solid color('border');
    display: grid;
    gap: spacer('s');
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    padding-block-start: spacer('m');

    div {
      display: flex;
      flex-direction: column-reverse;
    }

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

    dd {
      color: color('heading');
      font-family: config('font-family-heading', $typography);
      font-size: font-size('h2');
      font-weight: 700;
      margin: 0;
    }
  }

  &__link {
    justify-self: start;
  }
}

<section class="case-study-block" aria-labelledby="case-study-title">
    <div class="container">
        <div class="case-study-block__inner">
            <img class="case-study-block__image" src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&amp;fit=crop&amp;w=900&amp;q=70" alt="The Northwind team working together in their office." width="900" height="1100" loading="lazy">
            <div class="case-study-block__content">
                <p class="case-study-block__eyebrow">Case study · <span class="case-study-block__company" id="case-study-title">Northwind</span></p>
                <figure class="case-study-block__figure">
                    <blockquote class="case-study-block__quote">
                        <p>We rebuilt our marketing site on Spruce in three weeks. Switching to a new brand style later took one afternoon.</p>
                    </blockquote>
                    <figcaption class="case-study-block__author">
                        <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&amp;fit=crop&amp;w=96&amp;q=70&amp;h=96" alt="" width="48" height="48" loading="lazy">
                        <span><strong>Maya Chen</strong><span>Head of Design, Northwind</span></span>
                    </figcaption>
                </figure>
                <dl class="case-study-block__metrics">
                    <div>
                        <dt>faster page builds</dt>
                        <dd>3×</dd>
                    </div>
                    <div>
                        <dt>CSS shipped</dt>
                        <dd>−42%</dd>
                    </div>
                    <div>
                        <dt>Lighthouse accessibility</dt>
                        <dd>100</dd>
                    </div>
                </dl>
                <a class="btn btn--outline-primary case-study-block__link" href="#">Read the full story</a>
            </div>
        </div>
    </div>
</section>