<section class="container hero accent-primary">
  <div class="hero__bg -fade">
    <picture><img src="https://picsum.photos/seed/9/1920/960"></picture>
  </div>
  <div class="hero__content">
    <div class="hero__text">
      <h1>This is .-fade</h1>
      <p>
        These are solely examples of how to implement CSS gradients and blends on hero backgrounds. This one is a radial gradient centered on the right side of the hero.
      </p>
      <div class="actions">
        <a class="button accent-white" href="#">Learn More</a>
        <a class="button -outline-fill accent-white" href="#">Buy Now</a>
      </div>
    </div>
    <div class="hero__image">
      <div class="placeholder accent-white" style="aspect-ratio: 634 / 368"></div>
    </div>
  </div>
</div>
</section>

<section class="container hero accent-primary">
  <div class="hero__bg -vignette">
    <picture><img src="https://picsum.photos/seed/9/1920/960"></picture>
  </div>
  <div class="hero__content">
    <div class="hero__text">
      <h1>This is .-vignette</h1>
      <p>It's an elliptical vignette on the whole hero.</p>
      <div class="actions">
        <a class="button accent-white" href="#">Learn More</a>
        <a class="button -outline-fill accent-white" href="#">Buy Now</a>
      </div>
    </div>
    <div class="hero__image">
      <div class="placeholder accent-white" style="aspect-ratio: 634 / 368"></div>
    </div>
  </div>
</div>
</section>

<section class="container hero accent-primary">
  <div class="hero__bg -split">
    <picture><img src="https://picsum.photos/seed/9/1920/960"></picture>
  </div>
  <div class="hero__content">
    <div class="hero__text">
      <h1>This is .-split</h1>
      <p>It is just using a linear gradient to cover the left half.</p>
      <div class="actions">
        <a class="button accent-white" href="#">Learn More</a>
        <a class="button -outline-fill accent-white" href="#">Buy Now</a>
      </div>
    </div>
    <div class="hero__image">
      <div class="placeholder accent-white" style="aspect-ratio: 634 / 368"></div>
    </div>
  </div>
</div>
</section>

<section class="container hero accent-primary">
  <div class="hero__bg -multiply">
    <picture><img src="https://picsum.photos/seed/9/1920/960"></picture>
  </div>
  <div class="hero__content">
    <div class="hero__text">
      <h1>This is .-multiply</h1>
      <p>It is using mix-blend-mode: multiply with the accent-color over the background image.</p>
      <div class="actions">
        <a class="button accent-white" href="#">Learn More</a>
        <a class="button -outline-fill accent-white" href="#">Buy Now</a>
      </div>
    </div>
    <div class="hero__image">
      <div class="placeholder accent-white" style="aspect-ratio: 634 / 368"></div>
    </div>
  </div>
</div>
</section>

<section class="container hero accent-primary">
  <div class="hero__bg -colorize -fade">
    <picture><img src="https://picsum.photos/seed/9/1920/960"></picture>
  </div>
  <div class="hero__content">
    <div class="hero__text">
      <h1>This is .-colorize with .-fade</h1>
      <p>It uses mix-blend-mode: color. -colorize and -multiply can be combined with other gradients.</p>
      <div class="actions">
        <a class="button accent-white" href="#">Learn More</a>
        <a class="button -outline-fill accent-white" href="#">Buy Now</a>
      </div>
    </div>
    <div class="hero__image">
      <div class="placeholder accent-white" style="aspect-ratio: 634 / 368"></div>
    </div>
  </div>
</div>
</section>

@use "@imarc/pronto/resources/styles/imported" as *;

.hero {
  $b: &;

  background: var(--accent-color);
  color: var(--accent-color-contrast);
  position: relative;
  z-index: 0;

  &__bg {
    container-type: size;
    display: grid;
    grid-area: 1 / wide / 2;
    overflow: hidden;

    > *,
    &::before,
    &::after {
      grid-area: 1 / 1;
    }

    + #{$b}__content {
      grid-row: 1 / 2;
    }

    img { 
      max-height: 100cqh;
      width: 100%;
      object-fit: cover;
    }


    &.-fade::after {
      background: radial-gradient(
        circle farthest-side at 50% 25%,
        #0000 35vw,
        #0002 45vw,
        #0004
      );
      content: '';
      z-index: 1;

      @include at(md) {
        background: radial-gradient(
          circle farthest-side at calc(50vw + min(25vw, 325px)),
          #0004 min(15vw, 195px),
          #0008 min(25vw, 325px),
          #000c
        );
      }
    }

    &.-vignette::after {
      background: radial-gradient(
        ellipse closest-side at 50% 35%,
        #0002 40vw,
        #0004
      );
      content: '';
      z-index: 1;

      @include at(md) {
        background: radial-gradient(
          ellipse at center,
          #0004 40%,
          #000c 80%
        );
      }
    }

    &.-split::after {
      content: '';
      z-index: 1;

      @include at(md) {
        background: linear-gradient(to right, #0008 50%, #0000 calc(50% + 1px));
      }
    }

    &.-colorize::before {
      content: '';
      background: var(--accent-color);
      mix-blend-mode: color;
      z-index: 1;
    }

    &.-multiply {
      background: white;
      &::before {
        content: '';
        background: var(--accent-color);
        mix-blend-mode: multiply;
        z-index: 1;
      }
    }
  }

  &__content {
    display: grid;
    grid: auto / subgrid;
    gap: 1rem var(--root-gap);
    align-items: center;
    z-index: 1;

    > :first-child:last-child {
      grid-column: 1 / -1;
    }
  }


  // Natural content order for mobile
  &__image {
    order: 1;
  }
  &__testimonial {
    order: 2;
  }
  &__media {
    order: 3;
  }
  &__text {
    order: 4;
    padding: 2rem 0;
  }
  &__cta {
    order: 5;
  }

  &__text,
  &__image,
  &__media,
  &__cta,
  &__testimonial {
    @include at(md) {
      order: unset;
      grid-column: span var(--span, 1);
    }
  }

  @include at(md) {
    --columns: 2;
  }

  &.-padded {
    padding: 5rem 0;

    #{$b}__text {
      padding: 0;
    }
  }

  &.-bleed {
    #{$b}__content {
      grid-column: main / wide;

      > :nth-child(2) {
        grid-column: span 2;
      }
    }
  }

  &.-center {
    #{$b}__content {
      justify-items: center;
      text-align: center;
    }
    #{$b}__text {
      padding: 4rem 0;
      max-width: fluid-rems(40, 50);
      justify-items: center;
    }
  }
}