@import "../mixins/all";

$categories__desktop-height-7: 525px;
$categories__desktop-height-6: 558px;
$categories__desktop-height-5: 558px;
$categories__desktop-height-4: 208px;
$categories__desktop-height-3: 282px;

$categories__tablet-height-7: 457px; // The height is actually more than this, but this is the
                                     // number which is used to calculate the area based on the ratio
$categories__tablet-height-6: 457px;
$categories__tablet-height-5: 457px;
$categories__tablet-height-4: 441px;
$categories__tablet-height-3: 169px;

$categories__mobile-height-big: 163px;
$categories__mobile-height-small: 123px;

$categories__desktop-gutter: 18px;
$categories__tablet-gutter: 14px;
$categories__mobile-gutter: 12px;

.categories__section {
  color: $typography__main-color;

  width: 100%;
  @include prefix-val(display, flex);
  @include prefix-prop(align-items, center);

  @include dimensions__section--paddings;
}

.categories__content {
  margin: 0 auto;
  text-align: center;

  // mobile
  width: 100%;

  @media #{$desktop} {
    max-width: 1114px + $categories__desktop-gutter;
  }
}

.categories__title {
  @include typography__section-title;
  @include dimensions__section-title--limited-width;
}

.categories__paragraph {
  @include typography__section-paragraph;
  @include dimensions__section-paragraph--limited-width;
}

.categories__button--ghost {
  @include landing-page__button;
}

.categories__categories {
  @include prefix-val(display, flex);
  @include prefix-prop(flex-wrap, wrap);

  // mobile
  padding: 0px (24px - $categories__tablet-gutter / 2) 36px (24px - $categories__tablet-gutter / 2);

  @media #{$mobile-landscape}, #{$tablet} {
    padding: 0px (48px - $categories__tablet-gutter / 2) 48px (48px - $categories__tablet-gutter / 2);
  }

  @media #{$desktop} {
    padding: 0px (60px - $categories__desktop-gutter / 2) 60px (60px - $categories__desktop-gutter / 2);
  }
}

.categories__category {
  padding: $categories__mobile-gutter / 2;

  @media #{$mobile-landscape}, #{$tablet} {
    padding: $categories__tablet-gutter / 2;
  }

  @media #{$desktop} {
    padding: $categories__desktop-gutter / 2;
  }
}

@mixin category-mobile-style($num_of_categories) {
  width: 50%;
  height: $categories__mobile-height-small;

  @if $num_of_categories % 2 == 1 {
    &:first-child {
      width: 100%;
      height: $categories__mobile-height-big;
    }
  }
}

.categories__category--7 {
  @extend .categories__category;

  // mobile
  @include category-mobile-style(7);

  @media #{$mobile-landscape}, #{$tablet} {
    &:nth-child(1) {
      width: (100% / 3 * 2);
      @include golden-ratio-numerator(height, $categories__tablet-height-7);
    }

    &:nth-child(2) {
      width: (100% / 3 * 1);
      @include golden-ratio-numerator(height, $categories__tablet-height-7);
    }

    &:nth-child(3),
    &:nth-child(4) {
      width: 50%;
      @include golden-ratio-denominator(height, $categories__tablet-height-7);
    }

    &:nth-child(5),
    &:nth-child(6),
    &:nth-child(7) {
      width: (100% / 3);
      @include golden-ratio-denominator(height, $categories__tablet-height-7);
    }
  }

  @media #{$desktop} {
    &:nth-child(1) {
      width: 50%;
      @include golden-ratio-numerator(height, $categories__desktop-height-7);
    }

    &:nth-child(2),
    &:nth-child(3) {
      width: 25%;
      @include golden-ratio-numerator(height, $categories__desktop-height-7);
    }

    &:nth-child(4),
    &:nth-child(5),
    &:nth-child(6),
    &:nth-child(7) {
      width: 25%;
      @include golden-ratio-denominator(height, $categories__desktop-height-7);
    }
  }
}

.categories__category--6 {
  @extend .categories__category;

  // mobile
  @include category-mobile-style(6);

  @media #{$mobile-landscape}, #{$tablet} {
    width: (100% / 3);

    &:nth-child(1),
    &:nth-child(2),
    &:nth-child(3) {
      @include golden-ratio-numerator(height, $categories__tablet-height-6);
    }

    &:nth-child(4),
    &:nth-child(5),
    &:nth-child(6) {
      @include golden-ratio-denominator(height, $categories__tablet-height-6);
    }
  }

  @media #{$desktop} {
    width: (100% / 3);

    &:nth-child(1),
    &:nth-child(2),
    &:nth-child(3) {
      @include golden-ratio-numerator(height, $categories__desktop-height-6);
    }

    &:nth-child(4),
    &:nth-child(5),
    &:nth-child(6) {
      @include golden-ratio-denominator(height, $categories__desktop-height-6);
    }
  }
}

.categories__category--5 {
  @extend .categories__category;

  // mobile
  @include category-mobile-style(5);

  @media #{$mobile-landscape}, #{$tablet} {
    &:nth-child(1) {
      width: (100% / 3 * 2);
      @include golden-ratio-numerator(height, $categories__tablet-height-5);
    }

    &:nth-child(2) {
      width: (100% / 3);
      @include golden-ratio-numerator(height, $categories__tablet-height-5);
    }

    &:nth-child(3),
    &:nth-child(4),
    &:nth-child(5) {
      width: (100% / 3);
      @include golden-ratio-denominator(height, $categories__tablet-height-5);
    }
  }

  @media #{$desktop} {
    &:nth-child(1) {
      width: (100% / 3 * 2);
      @include golden-ratio-numerator(height, $categories__desktop-height-5);
    }

    &:nth-child(2) {
      width: (100% / 3);
      @include golden-ratio-numerator(height, $categories__desktop-height-5);
    }

    &:nth-child(3),
    &:nth-child(4),
    &:nth-child(5) {
      width: (100% / 3);
      @include golden-ratio-denominator(height, $categories__desktop-height-5);
    }
  }
}

.categories__category--4 {
  @extend .categories__category;

  // mobile
  @include category-mobile-style(4);

  @media #{$mobile-landscape}, #{$tablet} {
    width: 50%;

    &:nth-child(1),
    &:nth-child(2) {
      @include golden-ratio-numerator(height, $categories__tablet-height-4);
    }

    &:nth-child(3),
    &:nth-child(4) {
      @include golden-ratio-denominator(height, $categories__tablet-height-4);
    }
  }

  @media #{$desktop} {
    width: 25%;
    height: $categories__desktop-height-4;
  }
}

.categories__category--3 {
  @extend .categories__category;

  // mobile
  @include category-mobile-style(3);

  @media #{$mobile-landscape}, #{$tablet} {
    // category-mobile-style uses :first-child so we need to override it
    &, &:first-child {
      width: (100% / 3);
      height: $categories__tablet-height-3;
    }
  }

  @media #{$desktop} {
    // category-mobile-style uses :first-child so we need to override it
    &, &:first-child {
      width: (100% / 3);
      height: $categories__desktop-height-3;
    }
  }
}

.categories__category-content {
  @include prefix-val(display, flex);
  @include prefix-prop(align-items, center);

  border-radius: $dimension-card-border-radius;
  background-size: cover;
  background-position: center;

  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.10), inset 0 0 0 999999px rgba(0, 0, 0, 0.2); /* big enough number to cover the whole area */
  width: 100%;
  height: 100%;

  @include hover-transition();

  &:hover {
    transform: scale(1.011);
  }
}

.categories__category-title {
  color: #FFF;
  margin: 0 auto;
  @include typography__semibold;
  letter-spacing: 0px;
  line-height: 22px;

  font-size: 16px;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  @media #{$desktop} {
    font-size: 18px;
  }

}