@import "base";

$column--info-width: 13%;
$column--icon-width: 3%;

/* Available in the new bootstrap */
.w-100 {
  width: 100%;
}

.grid {
  @include _column-gap($spacing * 4);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  text-align: start;
  justify-content: center;

  & > * {
    display: flex;
    flex-direction: column;
  }

  .grid-item__title {
    margin: 0;
    padding: 0;
  }

  .grid-item__expand {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
  }
}

.grid__fit {
  grid-template-columns: repeat(auto-fit, minmax($card-minimum-width, 1fr));
}

.card {
  border-radius: 4px;
  @include _box-shadow(0px, 5px, 8px, 0px, $color-background-box-shadow);
  @include _margin($spacing * 4, 0px, 0px, 0px);
  background-color: $color-background-secondary;
  padding: 0;

  &.activated-card {
    border: 3px solid $color-tertiary;
    position: relative;

    .activated-text {
      @include _font-size(20px);
      @include _padding(10px, 20px, 10px, 20px);
      background: $color-tertiary;
      border-radius: 0 0 4px 4px;
      color: $color-text-secondary;
      display: inline-block;
      position: absolute;
      right: 36px;
      line-height: 1;
    }

    .card__image {
      border-radius: 1px 1px 0 0;
      width: -moz-available;
      width: -webkit-fill-available;
      width: fill-available;
      height: 220px;
    }

    .button-group > :not(:first-child) {
      margin-left: calculate-rem(20px);
    }
  }

  .card__title {
    margin: 0;
    padding: 0;
  }

  .card__text {
    @include _padding($spacing * 4, $spacing * 4, $spacing * 4, $spacing * 4);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
  }

  .card__images {
    position: relative;
    text-align: center;
  }

  .card__image {
    border-radius: 4px 4px 0 0;
    display: block;
    margin: auto;
    object-fit: cover;
  }

  .card__thumbnail {
    color: $color-text-secondary;
    left: 50%;
    margin: 0;
    padding: 0;
    position: absolute;
    text-shadow: 3px 3px 3px $color-background-box-shadow;
    top: 50%;
    transform: translate(-50%, -50%);
    width: fit-content;
  }

  .button {
    @include _margin($spacing * 4, 0px, 0px, 0px);
  }
}

.grid-characters {
  .grid-character-image {
    @include _padding(0px, $spacing * 4, 0px, $spacing * 4);
    display: block;
    max-height: $character-card-image-max-height;
    margin: 0 auto;
  }

  .grid-character-title {
    margin-bottom: 0;
  }
}

.grid-worksheets {
  .card:last-child {
    display: flex;
    flex-direction: column;
  }

  .card__image {
    width: -webkit-fill-available;
    width: -moz-available;
  }
}

@media (min-width: $tablet-small-min-width) {
  .card__text {
    @include _font-size(18px);
  }

  .grid-games {
    @include _column-gap($spacing * 10);
    display: grid;
    grid-auto-flow: column;

    img {
      min-height: 240px;
    }
  }

  .grid-sessions {
    border-top: 1px solid $color-table-border;
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns:
      $column--info-width
      auto
      $column--info-width
      $column--icon-width
      $column--icon-width;

    & > * {
      align-items: center;
      border-bottom: 1px solid $color-table-border;
      display: flex;
    }

    .grid-icon {
      max-height: 60%;
      max-width: 60%;
    }
  }

  .grid-resources {
    border-top: 1px solid $color-table-border;
    display: grid;
    grid-auto-rows: auto;

    & > * {
      border-bottom: 1px solid $color-table-border;
    }
  }

  .grid-benefits {
    @include _column-gap($spacing * 10);
    display: grid;
    grid-template-areas:
      "image1 image2 image3"
      "title1 title2 title3"
      "text1 text2 text3"
      "button1 button2 button3";
    grid-template-columns: repeat(3, 1fr);
    text-align: start;
    @include _padding(30px, 30px, 30px, 30px);
  }

  .grid-benefits__button {
    align-content: center;
    display: flex;
  }

  .grid-benefits__button1 {
    grid-area: button1;
  }

  .grid-benefits__button2 {
    grid-area: button2;
  }

  .grid-benefits__button3 {
    grid-area: button3;
  }

  $max-resource-sheets-numbers-per-key-stage: (
    ks1: 4,
    ks2: 3,
    lower-ks3: 4,
    intermediate-ks3: 2,
    upper-ks3: 3,
  );

  @each $key-stage,
    $max-resource-sheets-number in $max-resource-sheets-numbers-per-key-stage
  {
    .grid-resources--#{$key-stage} {
      grid-template-columns: $column--info-width repeat(
          $max-resource-sheets-number,
          auto
        );
    }
  }
}

@media (max-width: $mobile-max-width) {
  .grid-icon {
    display: none;
  }

  .grid-benefits {
    display: grid;
    grid-template-areas:
      "image1"
      "title1"
      "text1"
      "button1"
      "image2"
      "title2"
      "text2"
      "button2"
      "image3"
      "title3"
      "text3"
      "button3";
    row-gap: 4 * $spacing;
  }
}
