@import "../../../sass/webpack_deps";

$fad-column-width: (100% / 3);

.food-and-drink {
  font-weight: $font-weight-medium;
  margin-bottom: $spacing;
  position: relative;

  @media (min-width: $min-960) {
    min-height: 400px;
  }

  @media (min-width: $min-1080) {
    min-height: 425px;
  }

  &__heading {
    @include h1();
  }

  &__image {
    display: none;

    @media (min-width: $min-480) {
      bottom: 0;
      display: block;
      left: 0;
      margin-bottom: auto;
      margin-top: auto;
      position: absolute;
      top: 0;
      width: $fad-column-width;
      z-index: z("below");
    }

    @media (min-width: $min-1410) {
      top: -5rem;
    }
  }

  &__image + &__inner {
    @media (min-width: $min-480) {
      margin-bottom: ($spacing * 4);
      margin-left: $fad-column-width;
      padding-left: $gutter;
    }
  }

  &__list {
    list-style: none;
    margin-bottom: ($spacing * 4);

    @media (min-width: $min-960) {
      overflow: hidden;
    }
  }

  &__item {
    border-bottom: .1rem solid $item-border-color;

    @media (min-width: $min-960) {
      float: left;
      width: calc(50% - #{$gutter});
    }

    &:first-child {
      border-top: .1rem solid $item-border-color;
    }

    &:nth-child(2) {
      @media (min-width: $min-960) {
        border-top: .1rem solid $item-border-color;
      }
    }

    &:nth-child(even) {
      @media (min-width: $min-960) {
        margin-left: $gutter;
      }
    }

    @for $i from 5 through 9 {
      &[data-index="#{$i}"] {
        @media (max-width: $max-960) {
          display: none;
        }
      }
    }

    a {
      display: block;
      padding-bottom: 1.8rem;
      padding-top: 2.1rem;
      transition: transform $animation-speed;
    }

    &:hover a {
      transform: translateX(1rem);
    }
  }


  &__title {
    @include link-transition();
    color: rgba($light-text-color, .6);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__name {
    color: $darkgray;
  }

  &__location {
    color: $light-text-color;
  }

  &__categories {
    color: rgba($light-text-color, .6);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    margin-top: .4rem;
    text-transform: uppercase;
  }

  &__button-container {
    text-align: center;
  }

  &__more {
    @include more();
  }
}