Page Lead: Primary Landscape

/* ------------------------------------ *\
  $SECTION-TEXT
\* ------------------------------------ */

$image-max-width: 27.5rem;

.c-page-lead {
  color: var(--ds-color-theme-content-primary);
  position: relative;
  // @todo: add background image once the asset is delivered.
  // background-image: url('/images/textures/dots.svg');
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  padding: var(--ds-space-xxxl) var(--ds-space-md) var(--ds-space-xl);

  // Layout

  &__breadcrumbs { grid-area: 1 / 1 / 1 / 13; }
  &__main { grid-area: 2 / 1 / 2 / 13; }
  &__subnav { grid-area: 3 / 1 / 3 / 13; }
  &__image { 
    grid-area: 4 / 1 / 4 / 13; 

    &[data-aspect-ratio="portrait"],
    &[data-aspect-ratio="square"] {
      max-width: $image-max-width;
    }

    &[data-aspect-ratio="portrait"] {
      picture, img {
        height: 100%;
      }
    }
  }

  &[data-jump-links="true"] {    
    .c-page-lead__jump-links { grid-area: 2 / 1 / 2 / 13; }
    .c-page-lead__main { grid-area: 3 / 1 / 3 / 13; }
    .c-page-lead__subnav { grid-area: 4 / 1 / 4 / 13; }
    .c-page-lead__image { grid-area: 5 / 1 / 5 / 13; }
  }

  @include media(">large") {
    &[data-aspect-ratio="portrait"] {
      .c-page-lead__breadcrumbs { grid-area: 1 / 1 / 1 / 9; }
      .c-page-lead__main { grid-area: 2 / 1 / 2 / 9; }
      .c-page-lead__subnav { grid-area: 3 / 1 / 3 / 9; }
      .c-page-lead__image {     
        position: relative;
        grid-area: 1 / 9 / 5 / 13;
  
        picture {
          position: absolute;
          right: 0;
          display: flex;
          justify-content: center;
          align-items: center;
        }
  
        img {
          height: 100%;
          width: auto;
        }
      }
    }

    &[data-aspect-ratio="landscape"],
    &[data-aspect-ratio="square"] {
      .c-page-lead__breadcrumbs { grid-area: 1 / 1 / 1 / 7; }
      .c-page-lead__main { grid-area: 2 / 1 / 2 / 7; }
      .c-page-lead__subnav { grid-area: 3 / 1 / 3 / 7; }
      .c-page-lead__image {     
        position: relative;
        grid-area: 1 / 7 / 5 / 13;
        display: flex;
        align-items: center;
  
        picture {
          position: absolute;
          right: 0;
          display: flex;
          justify-content: center;
          align-items: center;
        }
  
        img {          
          width: 100%;
        }
       }
    }

    &[data-aspect-ratio="square"] {
      .c-page-lead__image {
        grid-area: 1 / 8 / 5 / 13;
      }
    }

    &[data-jump-links="true"] {    
      .c-page-lead__breadcrumbs { grid-area: 1 / 3 / 1 / 8; }
      .c-page-lead__jump-links { grid-area: 1 / 1 / 5 / 3; } 
      .c-page-lead__main { grid-area: 2 / 3 / 2 / 8; }
    }
  }


  // Styling

  &__title {
    @extend .o-heading--h1-secondary-bold;
    display: inline;
  }

  &__intro {
    @extend .o-heading--h1-secondary;
    display: inline;
  }

  &__container {
    padding-top: var(--ds-space);
    grid-row-gap: var(--ds-space-xl);
  }
  
  &__subnav {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-xs);

    &__label {
      @extend .o-caption--secondary-caption1;
      margin-bottom: 0;
      font-weight: var(--ds-font-weight-light) !important;
    }

    ul {
      list-style-type: none;
      display: flex;
      flex-wrap: wrap;
      gap: var(--ds-space);
    }

    li {
      display: inline-flex;
    }

    .o-link {
      @extend .o-detail--1;

      span:not(.o-icon)::after {
        background-color: transparent;
      }
    }
  }

  &__image {
    picture {
      transform: rotate(-2deg);
      border-radius: var(--ds-border-radius);
      padding: var(--ds-space-md);
      padding-top: 0;
      margin-top: calc(var(--ds-space-xs) * -1);

      @include media(">large") {
        margin-top: 0;
      }
    }

    img {
      border-radius: var(--ds-border-radius);
    }
  }

  &__body, &__button {
    margin-top: var(--ds-space);
  }

  &__aside {
    display: flex;
    flex-direction: column;
    align-items: end;
  }

  .c-text-block--aside__link,
  .c-page-lead__jump-link {
    @extend .o-body--p2-primary;
    font-weight: var(--ds-font-weight-regular) !important;
  }

  .c-page-lead__jump-link {
    span:not(.o-icon)::after {
      background-color: transparent;
    }
  }

  &--secondary,
  &--tertiary {
    .c-page-lead__jump-links {
      display: flex;
      flex-direction: column;
      padding: var(--ds-space-xs) 0;
      border: solid 2px var(--ds-color-gray-103);
      border-width: 2px 0;

      label {
        @extend .o-heading--h5-secondary-bold;
      }
  
      ul {
        display: flex;
        flex-direction: column;
        gap: var(--ds-space-xs);
        list-style-type: none;
      }

      @include media(">large") {
        border-width: 0 2px 0 0 ;
      }
    }
  }

  &--secondary {
    .c-page-lead {
      &__title {
        @extend .o-heading--h2-secondary-bold;
      }
    
      &__intro {
        @extend .o-heading--h2-secondary;
        font-weight: var(--ds-font-weight-light) !important;
      }
    }
  }

  &--tertiary {
    .c-page-lead {
      &__main {
        margin-bottom: var(--ds-space-xxxl);

        @include media(">large") {
          margin-top: var(--ds-space-xxxl);
        }
      }

      &__container {
        padding-top: var(--ds-space);
        grid-row-gap: var(--ds-space);
      }

      &__main {
        margin-bottom: 0;
      }

      &__title {
        @extend .o-heading--h3-secondary-bold;
        display: inline;
      }
    
      &__intro {
        @extend .o-heading--h3-secondary;
        font-weight: var(--ds-font-weight-light) !important;
        display: inline;
      }
    }
  }
}