/**
 * CARD ELEMENTS
 =======================================================
 * Card components have the following classes available:
 =======================================================
 * Outer wrapper classes
 * - card__wrapper
 * - node__card || Try to use card__wrapper instead
 *
 * Wrapper classes
 * - card
 *
 * Inner wrapper classes
 * - card__content
 * - node__content || Try to use card__content instead
 * - card__row
 *
 * Region classes
 * - card__top
 * - card__body
 * - card__footer
 *
 * Element classes
 * - card__title
 * - card__title
 *
 * Extended classes 
 * These must start with '.card' and be followed by '.extension' 
 * e.g .card .extended..
 * 
 * - img
 * - .rating
 * - .author
 * - .testimonial_author
 * - .testimonial_company
 * - .testimonial_rating
 */

/* -----------------------
   Card height - default
/* ---------------------- */

.card__wrapper,
.card__content,
.card__wrapper .card {
  height: 100%;
}

/* -----------------------
   Card regions - default
/* ---------------------- */

.card {
  background: #fff;
  border-radius: 0.25rem;
}

.card__body {
  padding: 1.5rem;
}

.card__footer {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .card__wrapper {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* -------------------------
   Card regions - overrides
/* ------------------------- */

.card__top ~ .card__body {
  /* @override if the card top exists */
  margin-top: 1.5rem;
  padding-top: 0;
}

/*  Card extensions
/* -------------------------------------------------------------------------- */

/* --------------------
   Image
/* -------------------- */

.card img {
  width: 100%;
  /* force full width image */
}

/* --------------------
   Rating (used for feedback)
 ------------------------- */

.card .rating {
  margin-bottom: 1rem;
}

/* --------------------
   Views (card offsets)
/* -------------------- */

.card__row > div {
  /* This will target any columns in the row */
  margin-bottom: 2rem;
}

.card__row > div:last-child {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .card__row > div {
    margin-bottom: 0;
  }

  .card__row.card--offset > div {
    position: relative;
  }

  /**
   * The offset classes below requires the state classes added
   * in Drupal's view .card--offet, added as a row class alongside
   * .card__row.
   *
   * Once added, it looks at the output 'cols-x' class to determine
   * the amount of padding to be added to balance the relative 
   * positioning of the 'cards'; each of which via nth-child, gets a
   * progressive 'top' offset.
   *
   */

  .cols-3 .card__row.card--offset {
    padding-bottom: 4rem;
  }

  .cols-3 .card__row.card--offset .views-col:first-child {
    top: 4rem;
  }

  .cols-3 .card__row.card--offset .views-col:nth-child(2) {
    top: 2rem;
  }

  .cols-4 .card__row.card--offset {
    padding-bottom: 6rem;
  }

  .cols-4 .card__row.card--offset .views-col:first-child {
    top: 6rem;
  }

  .cols-4 .card__row.card--offset .views-col:nth-child(2) {
    top: 4rem;
  }

  .cols-4 .card__row.card--offset .views-col:nth-child(3) {
    top: 2rem;
  }

  .cols-4 .card__row.card--offset .views-col:last-child {
    top: 0;
  }
}

/*# sourceMappingURL=card.css.map */