/**
 * @file
 * EBSCO Flipster styles for public Magazine Cover pages.
 */


/*
  Mobile First:

  |-----------------|
  |      title      |
  |-----------------|
  |      cover      |
  |      cta-1      |
  |-----------------|
  |      detail     |
  |-----------------|
  |      cta-2      |
  |-----------------|
 */

.flipster-mag-detail-page {
  /*border: 1px solid red;*/
  display: grid;
  margin: 0 20px;
}
.flipster-mag-detail-page .title-container h1 {
  padding: 0 0 10px 0;
}
.flipster-mag-detail-page .cover-container {
  padding: 0 0 30px 0;
}
.flipster-mag-detail-page .cover-container img,
.flipster-mag-detail-page .edl-btn {
  width: 100%;
  max-width: 300px;
}
.flipster-mag-detail-page .cover-container > div {
  margin: 30px 0 0 0;
}
.flipster-mag-detail-page .detail-container p + p {
  margin-top: 16px;
}
.flipster-mag-detail-page .detail-container .callout-note {
  background: url(https://www.ebsco.com/modules/custom/ebsco_flipster/css/circle-info-solid.svg) no-repeat 18px 23px;
  background-size: 17px 17px;
  padding: 20px 20px 20px 45px;
  background-color: #fafafa;
  font-size: 14px;
}
.flipster-mag-detail-page .detail-container .detail-item {
  margin: 0 5px;
}

.flipster-mag-detail-page .detail-container .footnote {
  font-size: 12px;
  margin: 5px 0 30px 0;
}
.flipster-mag-detail-page .cta2-container {
  text-align: center;
}
.flipster-mag-detail-page .cta2-container h3 {
  position: relative;
  margin: 0 auto;
  width: 100%;
  border-top: 1px solid rgb(217, 218, 219);
  padding: 30px 0 0 0;
}
.flipster-mag-detail-page .cta2-container p {
  margin: 16px 0 30px 0;
}

/* Tablet: 510 to 960 pixels: */

@media only screen and (min-width: 510px) and (max-width: 960px) {
  /* Same grid-layout as above, but minor tweaks to spacing */

  .flipster-mag-detail-page .detail-container .footnote {
    margin: 5px 0 40px 0;
  }
  .flipster-mag-detail-page .cta2-container p {
    margin: 16px 0 40px 0;
  }
}

/* Desktop: 961 pixels and up: */
@media only screen and (min-width: 961px) {
/*
 1 |-------------------------|
   | title         |  cover  |
 2 |---------------| -  -  - |
   | detail        |         |
   |               |         |
   |               | [cta-1] |
 3 | -  -  -  -  - |---------|
   |               |  cta-2  |
   |               |         |
 4 | -  -  -  -  - | -  -  - |
 5 | -  -  -  -  - | -  -  - |
 - | -  -  -  -  - | -  -  - |
 - | -  -  -  -  - | -  -  - |
10 |---------------|---------|

  The extra rows at the bottom
  provide "elasticity" to prevent
  either of the top two cells from
  stretching in the event one of
  the two bottom cells be made to
  hold a a great deal more content
  than the other. There may have
  been a better way. Try playing
  with min-content and fr values
  for rows if there's time...
 */


  .flipster-mag-detail-page {
    grid-template-columns: 1fr 400px;
    grid-template-rows: auto;
    margin: 0;
  }
  .flipster-mag-detail-page .title-container {
    grid-row-start: 1;
    grid-column-start: 1;
    padding: 0 80px;
  }
  .flipster-mag-detail-page .cover-container {
    grid-row-start: 1;
    grid-row-end:3;
    grid-column-start: 2;
    text-align: center;
    padding: 30px 0 10px 0;
    background-color: #fafafa;
  }
  .flipster-mag-detail-page .cover-container > div {
    margin: 20px 0 0 0;
  }
  .flipster-mag-detail-page .cover-container img {
    /* width: 300px; */
  }
  .flipster-mag-detail-page .detail-container {
    grid-row-start: 2;
    /* Extra rows for elasticity */
    grid-row-end: 10;
    grid-column-start: 1;
    padding: 0 80px;
  }
  .flipster-mag-detail-page .detail-container .footnote {
    /* Same as previous breakpoint: */
    margin: 5px 0 40px 0;
  }
  .flipster-mag-detail-page .cta2-container {
    grid-row-start: 3;
    /* Extra rows for elasticity */
    grid-row-end: 10;
    grid-column-start: 2;
    padding: 20px 0 0 0;
    background-color: #fafafa;
  }
  .flipster-mag-detail-page .cta2-container h3 {
    /* border-top: 1px solid rgb(217, 218, 219); */
    padding: 20px 0 0 0;
    max-width: 300px;
  }
  .flipster-mag-detail-page .cta2-container p {
    /* Same as previous breakpoint: */
    margin: 16px 0 40px 0;
  }
}