/**
 * @file
 * EBSCO Flipster styles for public "Featured Magazines" block.
 */

/*
  The following CSS needs to go elsewhere, but is being developed here to avoid
  having to run blt frontend:build, which takes too much time:
 */
.flipster-newsletter-margin-fix {
  background-image: linear-gradient(135deg, #3e75cf 20%, #002f56 80%);
  margin: 0 -50%;
}
.flipster-newsletter-margin-fix .container.health-care-newsletter-bg {
  background-image: none;
}
.flipster-newsletter-margin-fix .container.health-care-newsletter-bg {
  background-image: none;
  width: 55%;
  margin: 0 auto;
}


/*
  Mobile First:
    |---------------------|
    ||-------------------||
    ||         h2        ||
    ||-------------------||
    ||---------|---------|| <- .mag-grid
    ||  mag 1  |  mag 2  ||
    ||---------|---------||
    ||  mag 3  |  mag 4  ||
    ||---------|---------||
    ||  mag 5  |  mag 6  ||
    ||---------|---------||
    ||-------------------||
    ||    browse all     ||
    ||-------------------||
    ||-------------------||
    ||    search all     ||
    ||-------------------||
    |---------------------|

 */

.flipster-featured-magazines-block {
  text-align: center;
  padding: 30px 0 20px 0;
}
.flipster-featured-magazines-block.default-featured-magazines {
  background-color: #ffffff;
}
.block-flipster-featured-magazines:not(.default-featured-magazines) .flipster-featured-magazines-block {
  background-color: #002f56;
  color: #ffffff;
  margin: 0 -50%;
}
.block-flipster-featured-magazines:not(.default-featured-magazines) .flipster-featured-magazines-block > div {
  width: 50%;
  margin: 0 auto;
}
.flipster-featured-magazines-block .mag-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: auto;
  margin: 10px 5%;
}
.flipster-featured-magazines-block .mag-grid .mag-cell {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 15px;
}
.flipster-featured-magazines-block .mag-grid .mag-cell a {
  display: block;
  border: 1px solid #D9DADB;
}
.flipster-featured-magazines-block .mag-grid .mag-cell a:hover {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
  transition: all 0.35s ease-in-out;
}

.flipster-featured-magazines-block .flipster-mag-search-form-container {
  background-color: rgb(0, 47, 86);
  text-align: center;
  padding: 20px 0 50px 0;
  margin: 35px 0 0 0;
}
.flipster-featured-magazines-block .flipster-mag-search-form-container h4 {
  color: #ffffff;
  margin: 0 0 15px 0;
}
.flipster-featured-magazines-block .flipster-mag-search-form-container form.flipster-mag-search {
  justify-content: center;
  margin: 0;
}
.flipster-featured-magazines-block.flipster-homepage form.flipster-mag-search .form-item {
  width: 80%;
}
.flipster-featured-magazines-block .browse-all-btn-container {
  margin: 15px 0;
}

@media only screen and (min-width: 641px) {
  /*
    |-------------------------------|
    ||-----------------------------||
    ||              h2             ||
    ||-----------------------------||
    ||---------|---------|---------|| <- .mag-grid
    ||  mag 1  |  mag 2  |  mag 3  ||
    ||---------|---------|---------||
    ||  mag 3  |  mag 4  |  mag 5  ||
    ||---------|---------|---------||
    ||-----------------------------||
    ||          browse all         ||
    ||-----------------------------||
    ||-----------------------------||
    ||          search all         ||
    ||-----------------------------||
    |-------------------------------|
  */
  .flipster-featured-magazines-block .mag-grid {
    grid-template-columns: repeat(3, auto);
  }
  .flipster-featured-magazines-block.flipster-homepage form.flipster-mag-search .form-item {
    width: 70%;
  }
}

@media only screen and (min-width: 1001px) {
  /*
    |-------------------------------------------|
    ||-----------------------------------------||
    ||                    h2                   ||
    ||-----------------------------------------||
    ||------|------|------|------|------|------|| <- .mag-grid
    || mag1 | mag2 | mag3 | mag4 | mag5 | mag6 ||
    ||------|------|------|------|------|------||
    ||-----------------------------------------||
    ||                browse all               ||
    ||-----------------------------------------||
    ||-----------------------------------------||
    ||                search all               ||
    ||-----------------------------------------||
    |-------------------------------------------|
  */
  .flipster-featured-magazines-block .mag-grid {
    grid-template-columns: repeat(6, auto);
    margin: 10px 3%;
  }
  .flipster-featured-magazines-block.flipster-homepage form.flipster-mag-search .form-item {
    width: 50%;
  }
}



/*
  The hack below belongs in cog_ebsco/ebsco_design_library/css/sub-navigation.css, but I can't
  run gulp or frontend:build right now. This was needed because the "market" links in Flipster's
  homepage navigation bar all point to pages with url's ending in "/flipster", triggering the
  active-link treatment. Also, none of these links are show-hide triggers, so hover-state should
  get an underline. If/when this fix is moved to sub-navigation.css, the appropriate selectors
  should probably be used instead of "!important". These classes are assigned in the menu links,
  under "ATTRIBUTES".
 */
.never-active {
  text-decoration: none !important;
}
.not-a-trigger:hover {
  text-decoration: underline !important;
}