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

.hero-intro-block {
  padding-block: spacer-clamp('l', 'xxl');

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

  &__person {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: spacer('s') spacer('m');
  }

  &__photo {
    block-size: 3.5rem;
    border-radius: 50%;
    box-shadow: 0 0 0 3px color('background'), 0 0 0 5px color('primary');
    inline-size: 3.5rem;
    object-fit: cover;
  }

  &__who {
    @include layout-stack('xxs'); // name, role
  }

  &__name {
    color: color('heading');
    font-weight: 700;
  }

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

  &__status {
    align-items: center;
    border: config('border-width-base', $display) solid color('border');
    border-radius: radius('pill');
    display: inline-flex;
    font-size: config('font-size-sm', $typography);
    gap: spacer('xs');
    margin-block: 0;
    padding: spacer('xxs') spacer('s');

    @include breakpoint('md') {
      margin-inline-start: auto;
    }
  }

  &__dot {
    background-color: color('success', 'alert');
    block-size: 0.6rem;
    border-radius: 50%;
    box-shadow: 0 0 0 0.2rem color-alpha('success', 0.25, 'alert');
    inline-size: 0.6rem;
  }

  &__title {
    font-size: responsive-font-size(6rem, 35, '5vw + 1rem');
    hyphens: manual;
    letter-spacing: -0.03em;
    line-height: 1.02;
    margin-block: 0;
    max-inline-size: 18ch;
    text-wrap: balance;
  }

  &__highlight {
    background-image: linear-gradient(transparent 70%, #{color-alpha('primary', 0.25)} 70% 92%, transparent 92%);
    color: color('primary');
  }

  &__footer {
    align-items: end;
    border-block-start: config('border-width-base', $display) solid color('border');
    display: grid;
    gap: spacer('l');
    padding-block-start: spacer('l');

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

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

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

  &__actions {
    @include layout-cluster('s');
  }

  &__facts {
    display: grid;
    gap: spacer('m');
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-block: 0;
  }

  &__fact {
    border-inline-start: config('border-width-base', $display) solid color('border');
    display: flex;
    flex-direction: column-reverse;
    gap: spacer('xxs');
    padding-inline-start: spacer('s');

    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: config('font-weight-heading', $typography);
      line-height: 1;
      margin: 0;
    }
  }
}

<section class="hero-intro-block" aria-labelledby="hero-intro-title">
    <div class="container">
        <div class="hero-intro-block__inner">
            <div class="hero-intro-block__person">
                <img class="hero-intro-block__photo" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&amp;fit=crop&amp;w=240&amp;h=240&amp;q=70" alt="" width="120" height="120" fetchpriority="high">
                <div class="hero-intro-block__who">
                    <p class="hero-intro-block__name">Nora Lind</p>
                    <p class="hero-intro-block__role">Independent product designer</p>
                </div>
                <p class="hero-intro-block__status"><span class="hero-intro-block__dot" aria-hidden="true"></span>Available for new projects from June</p>
            </div>
            <h1 class="hero-intro-block__title" id="hero-intro-title">I design calm, accessible products for <em class="hero-intro-block__highlight">ambitious teams.</em></h1>
            <div class="hero-intro-block__footer">
                <div class="hero-intro-block__text">
                    <p class="hero-intro-block__lead">For twelve years I’ve helped startups and studios turn complex ideas into simple interfaces, from the first research to the design system.</p>
                    <div class="hero-intro-block__actions">
                        <a class="btn btn--primary btn--lg" href="#work">See selected work</a>
                        <a class="btn btn--ghost-primary btn--lg" href="#contact">Book an intro call</a>
                    </div>
                </div>
                <dl class="hero-intro-block__facts">
                    <div class="hero-intro-block__fact">
                        <dt>years in product design</dt>
                        <dd>12</dd>
                    </div>
                    <div class="hero-intro-block__fact">
                        <dt>launched projects</dt>
                        <dd>140+</dd>
                    </div>
                    <div class="hero-intro-block__fact">
                        <dt>design awards</dt>
                        <dd>9</dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>
</section>