@use '../../../../global/scss/tools' as nsw;

.nsw-easy-read-content {
  font-size: nsw.rem(20px);
  line-height: nsw.rem(32px);

  p,
  ul,
  ol,
  dl,
  .nsw-intro,
  .nsw-easy-read-block__copy {
    font-size: nsw.rem(20px);
    line-height: nsw.rem(32px);
  }

  h1,
  .nsw-h1 {
    font-size: nsw.rem(44px);
    line-height: nsw.rem(56px);

    @include nsw.breakpoint('lg') {
      font-size: nsw.rem(60px);
      line-height: nsw.rem(76px);
    }
  }

  h2,
  .nsw-h2 {
    font-size: nsw.rem(36px);
    line-height: nsw.rem(44px);

    @include nsw.breakpoint('lg') {
      font-size: nsw.rem(40px);
      line-height: nsw.rem(52px);
    }
  }

  h3,
  .nsw-h3 {
    font-size: nsw.rem(28px);
    line-height: nsw.rem(36px);

    @include nsw.breakpoint('lg') {
      font-size: nsw.rem(32px);
      line-height: nsw.rem(40px);
    }
  }

  h4,
  .nsw-h4,
  .nsw-card__title {
    font-size: nsw.rem(24px);
    font-weight: var(--nsw-font-bold);
    line-height: nsw.rem(32px);
  }

  // Keep the card API generic and apply the Easy Read proportions and type
  // treatment only when a horizontal card is used in Easy Read content.

  .nsw-card--horizontal {
    --nsw-easy-read-card-image-width: 33.333%;

    .nsw-card__copy,
    .nsw-card__tag,
    .nsw-card__date {
      font-size: nsw.rem(20px);
      line-height: nsw.rem(32px);
    }

    @include nsw.breakpoint('md') {
      .nsw-card__image {
        flex-basis: var(--nsw-easy-read-card-image-width);
        min-height: nsw.rem(240px);
        max-height: nsw.rem(420px);
        overflow: hidden;

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

      .nsw-card__content {
        flex-basis: calc(100% - var(--nsw-easy-read-card-image-width));
        justify-content: center;
        padding: nsw.rem(24px) nsw.rem(24px) nsw.rem(72px);

        > .nsw-material-icons {
          right: auto;
          bottom: nsw.rem(24px);
          left: calc(var(--nsw-easy-read-card-image-width) + #{nsw.rem(24px)});
          transform: none;
        }
      }
    }

    @include nsw.breakpoint('lg') {
      .nsw-card__content {
        padding: nsw.rem(32px) nsw.rem(32px) nsw.rem(88px);

        > .nsw-material-icons {
          bottom: nsw.rem(32px);
          left: calc(var(--nsw-easy-read-card-image-width) + #{nsw.rem(32px)});
        }
      }
    }
  }

  p + p {
    margin-top: nsw.rem(24px);
  }

  &__heading-text {
    display: block;
    margin-top: nsw.rem(16px);
  }

  &__heading-icon {
    display: block;
    box-sizing: border-box;
    width: nsw.rem(48px);
    height: nsw.rem(48px);
    padding: nsw.rem(3px);
    background-image: url(#{nsw.$nsw-easy-read-icon});
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-origin: content-box;
    background-clip: content-box;
  }

  &__divider {
    margin: nsw.rem(16px) 0;
    border: 0;
    border-top: 1px solid var(--nsw-grey-04);

    @include nsw.breakpoint('md') {
      margin: nsw.rem(20px) 0;
    }
  }

  &__block-stack {
    margin: nsw.rem(32px) 0;

    @include nsw.breakpoint('md') {
      margin: nsw.rem(40px) 0;
    }
  }

  &__block-item {
    margin: 0;
  }
}

.nsw-easy-read-core-ideas {
  .nsw-content-block__image {
    max-height: nsw.rem(48px);
  }

  .nsw-content-block__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: nsw.rem(48px);
    height: nsw.rem(48px);
    max-width: nsw.rem(48px);
    max-height: nsw.rem(48px);
    padding: nsw.rem(3px);
    box-sizing: border-box;

    svg {
      display: block;
      width: nsw.rem(42px);
      height: nsw.rem(42px);
      max-width: nsw.rem(42px);
      max-height: nsw.rem(42px);
    }
  }
}

.nsw-easy-read-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  width: 100%;
  border-radius: var(--nsw-border-radius);
  overflow: hidden;

  @include nsw.breakpoint('md') {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  &__image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;

    img {
      display: block;
      width: 100%;
      height: auto;
    }

    &--landscape {
      aspect-ratio: 3 / 2;
      overflow: hidden;

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

  &__content {
    min-width: 0;
    padding: nsw.rem(24px) nsw.rem(20px);

    @include nsw.breakpoint('md') {
      padding: nsw.rem(32px);
    }
  }

  &__title {
    margin: 0;
    font-weight: var(--nsw-font-bold);
    text-wrap: pretty;
  }

  &__copy {
    text-wrap: pretty;
  }

  &.nsw-section--brand-dark,
  &.nsw-section--invert {
    a {
      @include nsw.link-light;
    }
  }

  &.nsw-section--brand-light,
  &.nsw-section--off-white,
  &.nsw-section--white {
    a {
      @include nsw.link-dark;
    }
  }
}

.nsw-easy-read-about {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  .nsw-callout__content {
    flex: 1 1 auto;
  }

  &__pictogram {
    background-image: url(#{nsw.$nsw-easy-read-icon});
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-origin: content-box;
    background-clip: content-box;
  }

  .nsw-callout__pictogram {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: nsw.rem(48px);
    height: nsw.rem(48px);
    padding: nsw.rem(3px);
    margin-right: nsw.rem(16px);
  }
}

.nsw-easy-read-downloads {
  h2 {
    margin-top: 0;
  }


  > .nsw-utility-list {
    margin: nsw.rem(24px) 0;

    @include nsw.breakpoint('lg') {
      margin: nsw.rem(32px) 0;
    }

    + p {
      margin-top: 0;
    }
  }

}

.nsw-easy-read-content .nsw-easy-read-metadata {
  div + div {
    margin-top: nsw.rem(4px);
  }

  dt,
  dd {
    display: inline;
  }

  dt {
    font-weight: var(--nsw-font-bold);
  }

  dd {
    margin-left: nsw.rem(4px);
  }
}


.nsw-easy-read-category-group {
  + .nsw-easy-read-category-group {
    margin-top: nsw.rem(32px);

    @include nsw.breakpoint('md') {
      margin-top: nsw.rem(48px);
    }
  }

  &__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--nsw-border-radius);
    object-fit: cover;
  }

  &__content h2 {
    margin-top: nsw.rem(24px);

    @include nsw.breakpoint('md') {
      margin-top: 0;
    }
  }
}