/**
 * @file
 * news-listing
 * 
 * Theme styles for the News Listings in:
 *  - the FP Footer's area
 *  - the Taxonomy Pages
 *
 * Added through the .theme file + to the FP library
 */

/*=======================================
   Global
  =======================================*/

/*----------------------------
   Shorthand Classes
  ----------------------------*/
.font-size--1em {
  font-size: 1em;
}
.font-size--small {
  font-size: .95em;
  color: #333;
}

.font-size--smaller {
  font-size: .9em;
  color: #666;
}

/*=======================================
   News Article Blocks
  =======================================*/

.news-item--footer {
  margin-bottom: 2em;
}

.news-item--no-border {  border-right: none;  }

.news-item--space-below {  margin-bottom: 3em;  }

/*----------------------------
   Fields
  ----------------------------*/
.news-item__title {
  line-height: 1.35em;
}

/* Image
----------------*/
.news-item__image a,
.news-item__image img {  width: 100%; }

/*=======================================
   Individual
  =======================================*/

/*----------------------------
   Footer
  ----------------------------*/

/* Four item *
.news--footer-4 .news-item--footer:not(:nth-child(3n)) {
  width: calc(25% - .5em - 8px);
}

.news--footer-4 .news-item--footer:last-child {
  width: calc(25% - 3em + 7px);
}

/* views row  *
.news--footer-3 .news-item__image,
.news--footer-3 .news-item__title,
.news--footer-3 .news-item__caption {width: 250px;}
*/

@media screen and (min-width: 500px) {

  /*=======================================
     News Article Blocks
    =======================================*/

  .news-item--footer {
    display: inline-block;
    vertical-align: top;
    padding: 0 1em 1.5em 0;
    margin: 0 1em 0 0;
  }

  .news--fp .news-item--footer {
    border-right: 1px dotted #ccc;
  }
}

@media screen and (min-width: 500px) and (max-width: 999px) {

  /*=======================================
     News Article Blocks
    =======================================*/

  /*----------------------------
     3 item & 4-item
    ----------------------------*/
  .news--footer-3 .news-item--footer,
  .news--footer-4 .news-item--footer {
    width: calc(53% - 1em - 4px);
  }

  .news--footer-3 .news-item--footer:nth-child(2n),
  .news--footer-4 .news-item--footer:nth-child(2n) {
    width: 47%;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    border: 0;
  }

}

@media screen and (min-width: 1000px) {

  /*=======================================
     Global
    =======================================*/

  /*----------------------------
     Shorthand Classes
    ----------------------------*/
  .font-size--small {
    font-size: .9em;
  }

  .font-size--smaller {
    font-size: .8em;
  }

  /*=======================================
     News Article Blocks
    =======================================*/
  .news--footer-3 .news-item--footer:nth-child(3n),
  .news--footer-4 .news-item--footer:nth-child(4n) {
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    border: 0;
  }

  /*----------------------------
     3 item
    ----------------------------*/
  .news--footer-3 .news-item--footer {
    width: calc(33.33% - .5em - 4px);
  }

  .news--footer-3 .news-item--footer:nth-child(3n) {
    width: calc(33.33% - 2em);
  }

  /*----------------------------
     4 item
    ----------------------------*/
  .news--footer-4 .news-item--footer {
    width: calc(25% - .5em - 8px);
  }

  .news--footer-4 .news-item--footer:nth-child(4n) {
    width: calc(25% - 3em + 7px);
  }
}