/* Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
   for details. All rights reserved. Use of this source code is governed by a
   BSD-style license that can be found in the LICENSE file. */

/******************************************************
  home page
******************************************************/

@use 'variables';

.home-banner {
  text-align: center;
  padding: 30px 20px 0px 20px;

  > .logo {
    width: 100%;
    max-width: 328px;
    max-height: 70px;
    margin-bottom: 28px;

    @media (max-width: variables.$device-mobile-max-width) {
      max-width: 188px;
      max-height: 40px;
      margin-bottom: 22px;
    }
  }

  > .text {
    margin: 1em auto;
    max-width: 500px;

    color: var(--pub-home_banner-text-color);
    font-size: 18px;

    > a {
      color: var(--pub-home_banner-link-color);
    }
  }

  > .link {
    text-transform: uppercase;
    display: inline-block;
    margin: 0 16px;
    font-weight: 500;
    font-size: 14px;

    &:after {
      content: " >";
    }
  }

  > .banner-item {
    margin: 0 auto;
  }
}

.home-banner {
  padding-top: 110px;
  padding-bottom: 110px;
}

.landing-main {
  background-image: url('../img/square-bg-full-2x.webp');
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 1440px 2279px;
}

.home-block {
  padding: 20px;

  .home-block-title {
    color: var(--pub-home_title-text-color);
    margin-bottom: 0;
  }

  a {
    // To improve contrast, links have the same color as .home-block-title
    color: var(--pub-home_title-text-color);
  }

  .home-block-context-info {
    font-size: 18px;
    margin-top: 0;
  }

  &.home-block-ff,
  &.home-block-pow {
    background: var(--pub-inset-bgColor);
  }

  .home-block-image {
    display: none;
    position: relative;
    top: 60px;
    transform: scale(1.25);
    z-index: 0;

    > img {
      max-height: 240px; // effective max-height: 240 * 1.25 = 300px, 75% of two cards total height.
    }
  }

  .home-block-content {
    z-index: 1;
  }

  .mini-list-item {
    @include variables.elevated-content-border;

    background: var(--pub-neutral-bgColor);
    border-radius: 4px;
    padding: 28px 30px 30px; // title's top gap is about 2px (30-2 => 28)
    margin-bottom: 10px;
    min-height: 100px;

    &:hover {
      background: var(--pub-neutral-hover-bgColor);

      @media (min-width: variables.$device-desktop-min-width) {
        .mini-list-item-body {
          &:before {
            background: linear-gradient(transparent 90%, var(--pub-neutral-hover-bgColor));
          }
        }
      }
    }

    .mini-list-item-title {
      > .mini-list-item-title-text {
        display: block;
        color: var(--pub-home_card_title-text-color);
        font-size: 20px;
        // Needs to be slightly more than 1.2, otherwise the bottom
        // part of the letters (e.g. of `g`) will get trimmed.
        line-height: 1.3;
        margin: 0;
        /* Trim long package names, forcing them to be displayed only on a single line. */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .mini-list-item-description {
      font-size: 14px;
      margin: 4px 0 0 0;
    }

    .mini-list-item-publisher {
      margin: 8px 0px 0px 0px;
    }

    .publisher-badge {
      width: 14px;
      height: 14px;
      position: relative;
      top: 3px;
      margin-right: 3px;
    }

    .publisher-link {
      font-size: 12px;
      display: inline-block;
    }
  }

  .home-block-view-all {
    text-align: right;
    padding-right: 8px;

    @media (min-width: variables.$device-desktop-min-width) {
      margin-right: 16px;
    }
  }

  .home-block-view-all-link {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
  }

  @media (min-width: variables.$device-desktop-min-width) {
    .mini-list {
      display: flex;
      flex-wrap: wrap;
      padding: 4px;
      // This should be the same as the padding above, but
      // in practice (and possibly because of the drop shadow),
      // it looks better with 1px difference.
      margin: -3px;
    }

    .mini-list-item {
      width: 260px;
      height: 190px;
      margin: 0px 16px 16px 0px;

      display: flex;
      flex-direction: column;
    }

    .mini-list-item-body {
      flex-grow: 1;
      overflow: hidden;
      position: relative;

      // fade-out the bottom of the body content
      &:before {
         content: '';
         position: absolute;
         left: 0;
         top: 0;
         bottom: 0;
         right: 0;
         background: linear-gradient(transparent 90%, var(--pub-neutral-bgColor));
       }
    }
  }

  @media (min-width: variables.$device-desktop-min-width) {
    &.home-block-ff,
    &.home-block-pow {
      .home-block-content {
        margin: 0 auto;
        max-width: 556px;

        @media (min-width: 870px) {
          max-width: 830px;
        }

        @media (min-width: 1150px) {
          max-width: 1110px;
        }

        .mini-list,
        .landing-pow-list {
          overflow: hidden;
          height: 200px;
        }
      }
    }

    &.home-block-mp,
    &.home-block-tf,
    &.home-block-td {
      display: flex;
      max-width: 596px;
      margin: 0 auto;
      align-items: center;

      @media (min-width: 870px) {
        max-width: 870px;
      }

      @media (min-width: 1040px) {
        max-width: 1480px;

        .home-block-image {
          display: block;
          max-width: calc(100% - 830px);
          min-width: calc(5% + 100px);
        }

        .home-block-content {
          width: 830px;
        }
      }
    }
  }

  // The image for "Top Flutter packages" is on the right side of the screen.
  // The scale rule forces it to go outside of the content area, and a bottom
  // scroll bar appears. Pushing it to the left a bit solves this issue.
  // The proper (minimum) amount of left is unknown, we can increase this if needed.
  &.home-block-tf {
    .home-block-image {
      left: -2.5%;
    }
  }
}

.landing-pow-list {
  flex-wrap: wrap;
  padding: 4px;
  margin: -3px -3px 10px -3px;

  @media (min-width: variables.$device-desktop-min-width) {
    display: flex;
  }

  .pow-video {
    margin: 0 16px 16px 0;
    text-align: center;
    position: relative;

    // compensate default link hover effects
    a { filter: none; }

    &:hover,
    &:focus-within {
      .pow-video-overlay-img-active { display: inline-block; }
      .pow-video-overlay-img-inactive { display: none; }
    }
  }

  .pow-video-thumbnail {
    height: auto;
    width: 100%;
    @media (min-width: variables.$device-desktop-min-width) {
      max-width: 260px;
      max-height: 195px;
    }
  }

  .pow-video-overlay {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 35%;
    justify-content: center;
    align-items: center;
  }

  .pow-video-overlay-img-active {
    display: none;
  }
}
