/* All classes that are mostly about adding color. */

.background-replacement-for-no-image {
  background-color: cadetblue;
}

/** This isn't color but it's what the color gets painted on so we'll let it stay. */
.views-element-container.block--content > h2.subtitle {
  padding: 0.2em 0.2em 0 0.2em;
}

/* Front page view titles (the h2) and more links (the button) get rather
   un-SMACSS targeting, sorry. */
.page--content-item--article .background-replacement-for-no-image,
.block-views-blockhome-page-views-block-articles > h2.subtitle,
.block-views-blockhome-page-views-block-articles .button,
.block-views-blockhome-page-views-block-featured > h2.subtitle,
.block-views-blockhome-page-views-block-featured .button,
.is-article .background-replacement-for-no-image {
  background-color: $article;
  color: $white;
  a {
    color: $white;
  }
}
.page--content-item--blog .background-replacement-for-no-image,
.block-views-blockhome-page-views-block-blogs > h2.subtitle,
.block-views-blockhome-page-views-block-blogs .button,
.is-blog .background-replacement-for-no-image {
  background-color: $blog;
  color: $white;
  a {
    color: $white;
  }
}
.page--content-item--collection .background-replacement-for-no-image,
.block-views-blockhome-page-views-block-collections > h2.subtitle,
.block-views-blockhome-page-views-block-collections .button,
.is-collection .background-replacement-for-no-image {
  background-color: $collection;
  color: $white;
  a {
    color: $white;
  }
}
.page--content-item--gleaning .background-replacement-for-no-image,
.block-views-blockhome-page-views-block-gleanings > h2.subtitle,
.block-views-blockhome-page-views-block-gleanings .button,
.is-gleaning .background-replacement-for-no-image {
  background-color: $gleaning;
  color: $black;
  a {
    color: $black;
  }
}

// Gleanings don't have the same faux-image structure (because they don't have
// featured images) but we still want the title to look about the same.
.page--content-item--gleaning .page-title {
  background-color: $gleaning;
}