/* ==========================================================================
   PHARMACY NEWSFEED FOR CHILD PAGES CSS
========================================================================== */
/* Black background selection styles */
.child-news--black {
  background: var(--vcu-black);
  margin: 2rem auto auto;
  padding: 1rem 0 3rem;
}
.child-news--black .child-news__heading, 
.child-news--black .newsfeed__teaser, 
.child-news--black .newsfeed__date {
  color: var(--vcu-white);
}
.child-news--black a {
  color: var(--vcu-gold);
}
.child-news--black a:hover,
.child-news--black a:focus {
  color: var(--vcu-white);
}

/* Rust background selection styles */
.child-news--rust {
  background-color: var(--vcu-rust);
  margin: 2rem auto;
  padding: 1rem 0 3rem;
}
.child-news--rust .child-news__heading, 
.child-news--rust .newsfeed__teaser, 
.child-news--rust .newsfeed__date, 
.child-news--rust .newsfeed__title {
  color: var(--vcu-white);
}
.child-news--rust a {
  color: var(--vcu-gold);
}
.child-news--rust a:hover,
.child-news--rust a:focus {
  color: var(--vcu-white);
}
/* Gold background selection styles */
.child-news--gold {
  background-color: var(--vcu-gold);
  margin: 2rem auto;
  padding: 1rem 0 3rem;
}
.child-news--gold .child-news__heading, 
.child-news--gold .newsfeed__teaser, 
.child-news--gold .newsfeed__date, 
.child-news--gold .newsfeed__headline {
    color: #000;
}
.child-news--gold a {
  color: #000!important;
}

/* Styles for all color backgrounds */
.child-news--black, 
.child-news--rust, 
.child-news--gold {
    padding: 1.5rem;
}

/* Image */
.newsfeed__img {
  display: block;
}
.newsfeed__img img {
  width: 100% !important;
  display: block;
  height: auto;
}

/* Title */
.newsfeed__title {
  font-size: 1.2rem;
  line-height: 1.3;
  padding-top: 0;
}

/* Teaser text */
.newsfeed__teaser {
  display: -webkit-box;
  font-size: 1rem;
  line-height: 1.5rem;
  max-height: 6.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

/* Deploy grid display at 768px instead of 1024px */
@media (min-width: 768px) {
  .newsfeed.cwf-grid.cwf-grid--3-columns {
    --cwf-grid--columns: 3;
    --cwf-grid--grid-template-columns: repeat(var(--cwf-grid--columns), 1fr);
  }
  .newsfeed {
    padding: 0;
    gap: 1.5rem;
  }
}