@import "../pages/mixins";

.home {
  & .nav {
    position: absolute;
    z-index: 100;
  }

  & .splash {
    /* positioning */
   /* necessary for image placement */
    z-index: 2; /* necessary for tooltip z-index managment */
    /* sizing */
    padding: 14vh 0 25vh 0; /* padding relative to viewport on small screens */
    min-height: 30rem; /* keep text and search visible on tiny screens */

    /* fixed padding on taller screens */
    @media (min-height: 700px) {
      padding: 6rem 0 11rem 0;
    }

    & .image {
      /* positioning */
      @add-mixin absolute-expand;
      z-index: -10;
      /* theming */
      background-color: var(--dark-3);
      background-position: 50%;
      background-size: cover;
      /* transitions */
      opacity: 0;

      &.selected {
        transition: opacity 0.5s ease-in-out 0.5s;
        opacity: 1;
      }
      &.bg-geo {
        background-image: url("/images/home/bg/geo.jpg");
      }
      &.bg-countries {
        background-image: url("/images/home/bg/countries.jpg");
      }
      &.bg-institutions {
        background-image: url("/images/home/bg/institutions.jpg");
      }
      &.bg-careers {
        background-image: url("/images/home/bg/careers.jpg");
      }
      &.bg-products {
        background-image: url("/images/home/bg/products.jpg");
      }
      &.bg-industries {
        background-image: url("/images/home/bg/industries.jpg");
      }
    }

    & .gradient {
      /* positioning */
      @add-mixin absolute-expand;
      z-index: -9;
      /* theming */
      background-color: rgba(25, 25, 40, 0.4);
      background:
        linear-gradient(
          color(var(--black) a(0.5)) -5%,
          rgba(25, 25, 40, 0.5) 33.333%,
          var(--dark-3) 90%),
        radial-gradient(
          transparent,
          var(--dark-3) 75%
        );
    }

    & .intro {
      max-width: 100%;
      width: 32rem;
      margin: 0 auto;

      & .text {
        padding: 0px var(--gutter);
        & .title {
          margin: 0px;
          margin-right: -30px;
          & img {
            display: block;
            width: 80%;
            max-width: 12rem; /* keep logo size reasonable */
            margin: 0 auto;
          }
          & .easter {
            position: absolute;
            left: 55%;
            top: 16%;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: block;
            z-index: 1; /* position in front of logo */
          }
        }

        & .lead {
          /* positioning */
          margin: 0.5em 0;
          text-align: center;
          z-index: 1;
          /* theming */
          color: var(--white); /* override heading deafult */
          text-shadow: 0 1px 1.5em rgba(0, 0, 0, 0.3);
        }
      }

      & .search-home-wrapper {
        width: 23rem;
        max-width: 100%;
        margin: 2.5em auto;

        /* progressively enhance with background blur where supported */
        & input {
          backdrop-filter: blur(10px);
        }
      }
    }
  }

  & .home-slider {
    lost-center: var(--width);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    z-index: 1;

    /* prevent tooltips from obscuring tabs */
    &:hover {
      z-index: 2;
    }

    /* adjust positioning on small and large screen */
    @add-mixin for-sm {
      top: -1rem;
      z-index: 2;
    }

    @mixin from-lg {
      margin-top: 1.5rem;
    }

    & .home-slide-item {
      flex: 1 1 25%;

      /* hide labels on small screens */
      @add-mixin for-sm {
        & .home-slide-btn {
          & .home-slide-label {
            @add-mixin visually-hidden;
          }
        }
      }

      /* add spacing between adjacent tabs on bigger screens */
      & + .home-slide-item {
        @add-mixin from-xs { margin-left: 1em; }
        @add-mixin from-md { margin-left: 2em; }
      }

      & .home-slide-selected {
        display: block;
        height: 4px;
        width: 0px;
        transition: width 0.5s ease-in-out;
      }
      & .home-slide-content {
        border-top-style: solid;
        border-top-width: 3px;
        background-color: var(--dark-3);
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        & .home-slide-btn {
          height: auto;
          display: flex;
          flex-wrap: nowrap;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          padding: 0.5em;
          z-index: 1;

          /* optical alignment on bigger screens */
          @add-mixin from-sm {
            padding: 1em 1em 1em 0.25em;

            & .home-slide-icon {
              margin-right: 5px;
            }
          }

          /* label */
          & .home-slide-label {
            @add-mixin font-xs;
            color: var(--white);
            line-height: 1em;
            /* transitions */
            opacity: 0.75;
            transition: opacity 0.2s;
          }

          /* icon positioning */
          & .home-slide-icon {
            display: inline;
            width: 20px;
            height: 20px;
          }

          /* interactions */
          &:hover,
          &:focus,
          &.selected {
            & .home-slide-label {
              opacity: 1;
            }
          }
          /* hide outline unless using keyboard */
          &.selected,
          &:hover {
            outline: none;
          }
        }
      }
      &.selected {
        & .home-slide-selected {
          width: 30%;
        }
      }
    }
  }

  /* about block */
  & .home-about-img {
    margin: 1rem auto 0 auto;
    width: 53.25rem; /* account for image white space */
    display: block;
  }
  & .home-text {
    width: 45rem;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;

    /* default margin on typographic elements */
    & > * {
      margin-bottom: 0.75em;
    }

    /* space out paragraph and heading */
    & p + h2 {
      margin-top: 2em;
    }

    /* about headings */
    & h2 {
      color: var(--accent);
      margin-bottom: var(--gutter);
    }
    /* about text */
    & p {
      color: var(--light-2);
      /* highlights */
      & span {
        @add-mixin body-font-bold;
        color: var(--white);
      }
    }
  }

  & .home-section-title {
    lost-flex-container: row;
    margin: var(--gutter) auto var(--gutter) auto;
    & h2 {
      text-align: center;
      lost-column: 1;
      color: var(--accent);
      margin-bottom: var(--gutter);
    }
    & .home-section-title-img {
      lost-column: 1;
      text-align: center;
      margin: calc(var(--gutter)/2) auto;
      & img {
        height: 1.5rem;
      }
    }
  }

  & .home-featured-profiles {
    lost-flex-container: column;
    margin: var(--gutter-half) auto var(--gutter) auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);

    & .home-profile-carousels-container {

      /* hide the fifth tile */
      @media (min-width: 480px) and (max-width: 991px) {
        & .tile:last-child {
          display: none;
        }
      }
    }
  }

  /* position button */
  & .home-btn-container {
    width: 100%; /* needed because of flex on parent 😓 */

    & .btn {
      margin: 1em 0;
      min-width: 16em;
      max-width: 100%;
    }
  }

  & .home-sources {
    lost-flex-container: column;
    lost-center: var(--width);
    max-width: 45rem;
    margin: var(--gutter) auto;
    & .dataset-list {
      lost-flex-container: row;
      lost-column: 1;
      margin-bottom: var(--gutter);
      margin-top: calc(0 - var(--gutter));

      & .l-col,
      & .r-col {
        lost-column: 1/2 2 3.5em;
      }

      & .l-col {
        @add-mixin from-sm {
          text-align: right;
        }

        /* add in border on small screens */
        @add-mixin for-sm {
          & .dataset:last-of-type {
            border-bottom: 1px solid var(--accent);
          }
        }
      }
    }

    & .dataset {
      padding: var(--gutter-half) 0;

      /* add border, but not to the last one */
      &:not(:last-of-type) {
        border-bottom: 1px solid var(--accent-dark);
      }

      & span {
        display: block;
        width: 100%;

        /* source title */
        &.name {
          color: var(--white);
          margin-bottom: 5px;
        }
        &.source {
          @add-mixin font-xxs;
          color: var(--light-2);
        }
      }
    }
  }
}


@add-mixin for-lg {
  .home {
    & .home-featured-profiles,
    & .home-slider,
    & .home-sources {
      lost-column: 1 1;
    }
    & .home-sources {
      max-width: 100%;
    }

    & .home-featured-profiles,
    & .home-slider,
    & .home-text,
    & .home-sources {
      margin-top: 0; /* override lost */
      padding: 0 var(--gutter);
    }
  }
}

@add-mixin for-md {
  .home {
    & .home-slider {
      & .home-slide-item {
        /* lost-column: 1/3 3 0px; */
        & .home-slide-content {
          padding-bottom: 0;
        }
      }
    }
    & .home-section-title {
      lost-column: 1;
      lost-center: 1;
    }
  }
}


@add-mixin for-sm {
  .home {
    & .home-slider {
      & .home-slide-item {
        /* lost-column: 1/3 3 0px; */
        & .home-slide-content {
          margin-bottom: 0px;
        }
      }
    }
    & .home-sources {
      & .dataset-list {
        & .l-col,
        & .r-col {
          lost-column: 1;
        }
      }
    }
  }
}

.subtle-table {
  color: var(--white);
}