@import 'base';

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

.card {
  @include _border-radius(16px, 16px, 16px, 16px);
  @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;

  .card__text {
    @include _padding($spacing * 4, $spacing * 4, $spacing * 4, $spacing * 4);
  }

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

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

  .card__image {
    @include _border-radius(16px, 16px, 0px, 0px);
  }

  .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--big {
    @include _margin($spacing * 4, 0px, 0px, 0px);
    width: 100%;

    .glyphicon {
      @include _font-size(25px);
      @include _padding(0px, $spacing, 0px, 0px);
      float: left;
    }
  }

  .button-group {
    @include _padding($spacing * 3, 0px, 0px, 0px);

    .button {
      align-items: center;
      display: inline-flex;

      .glyphicon {
        @include _font-size(25px);
        @include _padding(0px, 0px, 0px, $spacing);
      }
    }
  }
}

.grid-characters {
  @include _column-gap($spacing * 4);
  display: grid;
  float: none;
  grid-template-columns: repeat(auto-fit, minmax($card-minimum-width, 1fr));
  margin-left: auto;
  margin-right: auto;
  text-align: start;

  .card__title {
    @include _padding($spacing * 4, $spacing * 4, $spacing * 4, $spacing * 4);
    color: $color-teacher-blue;
    margin: 0;
    text-align: center;
  }

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

.grid-worksheets {
  @include _column-gap($spacing * 4);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax($card-minimum-width, 1fr));
  text-align: start;

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

    .card__text {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      justify-content: space-between;
    }
  }
}

@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;
    grid-template: auto auto auto / auto;

    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;
  }

  .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;
  }
}
