/* Blog styles for thedemand.stream.
   Palette is the site palette: darkblue #244855, beige #fbe9d0, red #e64833,
   lightblue #90aead. Everything here is scoped to .blog-* so style.css is
   untouched. */

/* ---------------------------------------------------------- listing */

.blog-listing__head {
  margin-bottom: 45px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(251, 233, 208, 0.18);
  overflow: hidden;
}

.blog-listing__title {
  float: left;
  margin: 0;
  font-size: 50px;
  line-height: 1;
  color: #fbe9d0;
}

.blog-listing__all {
  float: right;
  margin-top: 14px;
  font-family: 'teko', sans-serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: #90aead;
}

.blog-listing__all:hover,
.blog-listing__all:focus {
  color: #e64833;
  text-decoration: none;
}

/* The newest post runs wide across the top of page one when it has an image.
   The image spans the full width of the card and the copy sits under it. On
   desktop it holds a 2.4:1 letterbox rather than the thumbnails' 16:9, which
   at this width would stand over 600px tall and swamp the grid below. */
.blog-featured {
  margin-bottom: 55px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(251, 233, 208, 0.18);
  overflow: hidden;
}

.blog-featured__media {
  display: block;
  position: relative;
  padding-top: 56.25%;
  margin-bottom: 26px;
  overflow: hidden;
  background-color: #90aead;
}

.blog-featured__media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-featured__media:hover img,
.blog-featured__media:focus img {
  opacity: 0.88;
}

.blog-featured__kicker {
  display: block;
  margin-bottom: 10px;
  font-family: 'teko', sans-serif;
  font-size: 16px;
  letter-spacing: 0.12em;
  color: #e64833;
}

.blog-featured__title {
  margin: 0 0 16px;
  font-size: 46px;
  line-height: 1.02;
}

.blog-featured__title a {
  color: #fbe9d0;
}

.blog-featured__title a:hover,
.blog-featured__title a:focus {
  color: #e64833;
  text-decoration: none;
}

.blog-featured__excerpt {
  margin-bottom: 22px;
  font-size: 17px;
  color: rgba(251, 233, 208, 0.85);
}

@media (min-width: 992px) {
  .blog-featured__media {
    padding-top: 41.66%;   /* 2.4:1 */
  }

  .blog-featured__excerpt {
    max-width: 720px;
  }
}

/* Without an image the card has only type to carry it, so the headline goes up
   and the opening runs wider than a grid excerpt would. */
.blog-featured--plain .blog-featured__title {
  font-size: 58px;
  margin-bottom: 20px;
}

.blog-featured--plain .blog-featured__excerpt {
  font-size: 19px;
  line-height: 1.6;
  max-width: 820px;
}

@media (max-width: 767px) {
  .blog-featured__title,
  .blog-featured--plain .blog-featured__title {
    font-size: 34px;
  }
}

.blog-card-col {
  margin-bottom: 50px;
}

/* cards are floated columns of uneven height, so start a fresh row every third
   one or they snag on the tallest card above them */
/* col-md-4 is three across from 992px up (Bootstrap 3), full width below */
@media (min-width: 992px) {
  .blog-card-col:nth-child(3n+1) { clear: left; }
}

/* Posts with an image get a 16:9 thumbnail; the migrated archive has none and
   keeps its typographic card. The slot has a fixed ratio so the row never
   reflows as images load, and a background so a slow or missing file leaves a
   brand-coloured block rather than a hole. */
.blog-card__media {
  display: block;
  position: relative;
  margin-bottom: 20px;
  padding-top: 56.25%;
  overflow: hidden;
  background-color: #90aead;
}

.blog-card__media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__media:hover img,
.blog-card__media:focus img {
  opacity: 0.88;
}

/* an illustrated card carries the image's visual weight, so its heading drops
   back a size to sit level with the plain cards beside it */
.blog-card--illustrated .blog-card__title {
  font-size: 28px;
}

.blog-card__title {
  margin: 0 0 18px;
  font-size: 34px;
  line-height: 1.05;
}

.blog-card__title a {
  color: #fbe9d0;
}

.blog-card__title a:hover,
.blog-card__title a:focus {
  color: #e64833;
  text-decoration: none;
}

.blog-card__excerpt {
  margin-bottom: 20px;
  font-size: 15px;
  color: rgba(251, 233, 208, 0.85);
}

.blog-card__more {
  display: inline-block;
  font-family: 'teko', sans-serif;
  font-size: 17px;
  letter-spacing: 0.08em;
  color: #90aead;
  border-bottom: 1px solid rgba(144, 174, 173, 0.5);
  padding-bottom: 2px;
}

.blog-card__more:hover,
.blog-card__more:focus {
  color: #e64833;
  border-bottom-color: #e64833;
  text-decoration: none;
}

/* ------------------------------------------------------- pagination */

.blog-pagination {
  margin-top: 20px;
  padding-top: 28px;
  border-top: 1px solid rgba(251, 233, 208, 0.18);
  font-family: 'teko', sans-serif;
  font-size: 18px;
  letter-spacing: 0.05em;
  text-align: center;
}

.blog-pagination__num,
.blog-pagination__step {
  display: inline-block;
  margin: 0 7px;
  color: #90aead;
}

.blog-pagination__num:hover,
.blog-pagination__step:hover,
.blog-pagination__num:focus,
.blog-pagination__step:focus {
  color: #e64833;
  text-decoration: none;
}

.blog-pagination__num.is-current {
  color: #fbe9d0;
  border-bottom: 2px solid #e64833;
}

/* ------------------------------------------------------------- post */

.blog-post-section .container {
  max-width: 820px;
}

.blog-post__back {
  display: inline-block;
  margin-bottom: 40px;
  font-family: 'teko', sans-serif;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: #90aead;
}

.blog-post__back:hover,
.blog-post__back:focus {
  color: #e64833;
  text-decoration: none;
}

.blog-post__timestamp {
  display: block;
  margin-bottom: 10px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: rgba(251, 233, 208, 0.7);
}

.blog-post__headline {
  margin: 0 0 14px;
  font-size: 54px;
  line-height: 1.02;
  color: #fbe9d0;
}

.blog-post__byline {
  margin-bottom: 40px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: rgba(251, 233, 208, 0.7);
}

.blog-post__hero {
  margin: 0 0 40px;
}

.blog-post__hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
}

/* End-of-post call to action. One action carries the weight, the other two
   routes sit quietly under it. Framed rather than filled, so it reads as a
   closing note on a dark page instead of a banner dropped on top of it. */
.blog-cta {
  max-width: 760px;
  margin: 60px 0 0;
  padding: 34px 38px 38px;
  background-color: #fbe9d0;
  border-left: 3px solid #e64833;
}

/* Dark blue, not the brand red: red on cream is 3.31:1, under the 4.5 needed
   for text this size. The red stays as the left edge, where contrast rules do
   not apply to a border. */
.blog-cta__kicker {
  margin: 0 0 6px;
  font-family: 'teko', sans-serif;
  font-size: 16px;
  letter-spacing: 0.12em;
  color: rgba(36, 72, 85, 0.85);
}

.blog-cta__title {
  margin: 0 0 12px;
  font-size: 38px;
  line-height: 1.05;
  color: #244855;
}

.blog-cta__body {
  margin: 0 0 24px;
  font-size: 16px;
  color: rgba(36, 72, 85, 0.9);
}

.blog-cta__button {
  display: inline-block;
  padding: 12px 26px;
  font-family: 'teko', sans-serif;
  font-size: 20px;
  letter-spacing: 0.06em;
  color: #fbe9d0;
  background-color: #244855;
}

.blog-cta__button:hover,
.blog-cta__button:focus {
  color: #fbe9d0;
  background-color: #e64833;
  text-decoration: none;
}

.blog-cta__alt {
  margin: 20px 0 0;
  font-size: 14px;
  color: rgba(36, 72, 85, 0.8);
}

.blog-cta__alt a {
  color: #244855;
  border-bottom: 1px solid rgba(36, 72, 85, 0.4);
}

.blog-cta__alt a:hover,
.blog-cta__alt a:focus {
  color: #e64833;
  border-bottom-color: #e64833;
  text-decoration: none;
}

@media (max-width: 767px) {
  .blog-cta {
    padding: 26px 22px 28px;
  }

  .blog-cta__title {
    font-size: 30px;
  }
}

.blog-post__body p,
.blog-post__body li {
  font-size: 17px;
  line-height: 1.65;
  color: #fbe9d0;
}

.blog-post__body p {
  margin-bottom: 22px;
}

.blog-post__body h2,
.blog-post__body h3,
.blog-post__body h4 {
  margin: 44px 0 16px;
  color: #fbe9d0;
  line-height: 1.1;
}

.blog-post__body h2 { font-size: 38px; }
.blog-post__body h3 { font-size: 30px; }
.blog-post__body h4 { font-size: 24px; }

.blog-post__body h2 strong,
.blog-post__body h3 strong,
.blog-post__body h4 strong {
  font-weight: normal;
}

.blog-post__body ul,
.blog-post__body ol {
  margin: 0 0 22px 22px;
}

.blog-post__body li {
  margin-bottom: 9px;
}

.blog-post__body a {
  color: #90aead;
  border-bottom: 1px solid rgba(144, 174, 173, 0.5);
}

.blog-post__body a:hover,
.blog-post__body a:focus {
  color: #e64833;
  border-bottom-color: #e64833;
  text-decoration: none;
}

.blog-post__body blockquote {
  margin: 30px 0;
  padding: 6px 0 6px 24px;
  border-left: 3px solid #e64833;
  font-size: 19px;
}

.blog-post__body img {
  max-width: 100%;
  height: auto;
  margin: 10px 0 26px;
}

/* -------------------------------------------------- next / previous */

.blog-nextprev {
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid rgba(251, 233, 208, 0.18);
  overflow: hidden;
}

.blog-nextprev__link {
  display: block;
  float: left;
  width: 48%;
  font-family: 'teko', sans-serif;
  font-size: 22px;
  line-height: 1.15;
  color: #fbe9d0;
}

.blog-nextprev__link--older {
  float: right;
  text-align: right;
}

.blog-nextprev__link span {
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #90aead;
}

.blog-nextprev__link:hover,
.blog-nextprev__link:focus {
  color: #e64833;
  text-decoration: none;
}

/* current page marker in the main nav */

.mainNav a.is-current {
  border-bottom: 2px solid #e64833;
}

/* ------------------------------------------------------------ small */

@media (max-width: 767px) {
  /* the fixed .logo-nav is taller on mobile than the space .header reserves,
     so the first heading needs to start below it */
  .blog-listing,
  .blog-post-section { padding-top: 90px; }

  .blog-listing__title { font-size: 38px; float: none; }
  .blog-listing__all { float: none; display: block; margin-top: 8px; }
  .blog-post__headline { font-size: 38px; }
  .blog-card__title { font-size: 30px; }
  .blog-nextprev__link,
  .blog-nextprev__link--older {
    float: none;
    width: 100%;
    text-align: left;
    margin-bottom: 22px;
  }
}