$card-header-in-hero-font-size: 14;
$card-header-in-hero-line-height: 20;

.ds-hero {
  position: relative;

  header {
    font-weight: 600;
  }

  p {
    line-height: 1.538;
    margin: 8px 0;
  }

  .excerpt {
    @include limit-visibile-lines(3, 24, 15);
    @include dark-theme-only {
      color: $grey-10;
    }

    color: $grey-90;
    margin: 0 0 10px;
  }

  .ds-card:not(.placeholder) {
    border: 0;
    padding-bottom: 20px;

    p {
      margin-top: 4px;
    }

    &:hover {
      border: 0;
      box-shadow: none;
      border-radius: 0;
    }

    .meta {
      padding: 0;
    }

    .img-wrapper {
      margin: 0 0 12px;
    }
  }

  .ds-card.placeholder {
    margin-bottom: 20px;
    padding-bottom: 20px;
  }

  .img-wrapper {
    margin: 0 0 12px;
  }

  .ds-hero-item {
    position: relative;
  }

  // "1/3 width layout" (aka "Mobile First")
  .wrapper {
    @include ds-border-top;
    @include dark-theme-only {
      color: $grey-30;
    }

    color: $grey-50;
    display: block;
    margin: 12px 0 16px;
    padding-top: 16px;
    height: 100%;

    &:focus {
      @include ds-fade-in;
    }

    @at-root .ds-hero-no-border .ds-hero-item .wrapper {
      border-top: 0;
      border-bottom: 0;
      padding: 0 0 8px;
    }

    &:hover .meta header {
      @include dark-theme-only {
        color: $blue-40;
      }

      color: $blue-60;
    }

    &:active .meta header {
      @include dark-theme-only {
        color: $blue-40;
      }

      color: $blue-70;
    }

    .img-wrapper {
      width: 100%;
    }

    .img {
      height: 0;
      padding-top: 50%; // 2:1 aspect ratio

      img {
        border-radius: 4px;
        box-shadow: inset 0 0 0 0.5px $black-15;
      }
    }

    .meta {
      display: block;
      flex-direction: column;
      justify-content: space-between;

      header {
        @include dark-theme-only {
          color: $white;
        }

        @include limit-visibile-lines(4, 28, 22);
        color: $grey-90;
        margin-bottom: 0;
      }

      .context,
      .source {
        margin: 0 0 4px;
      }

      .context {
        @include dark-theme-only {
          color: $teal-10;
        }

        color: $teal-70;
      }

      .source {
        @include dark-theme-only {
          color: $grey-40;
        }

        font-size: 13px;
        color: $grey-50;
        -webkit-line-clamp: 1;
        margin-bottom: 0;
      }
    }
  }

  // "2/3 width layout"
  .ds-column-5 &,
  .ds-column-6 &,
  .ds-column-7 &,
  .ds-column-8 & {
    .wrapper {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-column-gap: 24px;

      .img-wrapper {
        margin: 0;
        grid-column: 2;
        grid-row: 1;
      }

      .meta {
        grid-column: 1;
        grid-row: 1;
        display: flex;
      }

      .img {
        height: 0;
        padding-top: 100%; // 1:1 aspect ratio
      }
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-column-gap: 24px;
      grid-auto-rows: min-content;
    }
  }

  // "Full width layout"
  .ds-column-9 &,
  .ds-column-10 &,
  .ds-column-11 &,
  .ds-column-12 & {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 24px;

    &.ds-hero-border {
      @include ds-border-top;
      padding: 20px 0;

      .ds-card:not(.placeholder):nth-child(-n+2) {
        @include ds-border-bottom;
        margin-bottom: 20px;
      }
    }

    .wrapper {
      border-top: 0;
      border-bottom: 0;
      margin: 0;
      padding: 0 0 20px;
      display: flex;
      flex-direction: column;

      .img-wrapper {
        margin: 0;
      }

      .img {
        margin-bottom: 12px;
        height: 0;
        padding-top: 50%; // 2:1 aspect ratio
      }

      .meta {
        flex-grow: 1;
        display: flex;
        padding: 0 24px 0 0;

        header {
          @include limit-visibile-lines(3, 28, 22);
        }

        .source {
          margin-bottom: 0;
        }
      }
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-column-gap: 24px;
      grid-auto-rows: min-content;

      .ds-card {
        &:hover {
          @include dark-theme-only {
            background: none;

            .title {
              color: $blue-40;
            }
          }
        }

        &:active .title {
          @include dark-theme-only {
            color: $blue-50;
          }
        }

        .title {
          @include dark-theme-only {
            color: $white;
          }

          @include limit-visibile-lines(3, 20, 14);
        }
      }
    }
  }

  &.empty {
    grid-template-columns: auto;
  }
}
