/* Product card listing rendered by showproddetails() in hp_helper.php.
   Every rule is scoped under .prodcol because the .prodimage /
   .prodimage-container class names are also used by unrelated pages
   (panel print, acrylic prints) that must not be affected.

   The cards carry col-xs-6 col-md-4, so Bootstrap 3 lays them out
   2 per line below 992px and 3 per line from 992px up. */

/* Card shell */
.prodcol .prodcard {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
}

.prodcol .prodcard-img {
  display: block;
  width: 100%;
  padding: 0;
}

.prodcol .prodcard-body {
  padding: 0 15px;
}

.prodcol .prodcard-desc {
  position: relative;
  top: -10px;
  padding: 0 0 20px 20px;
  color: #3f3f3f;
}

/* Bootstrap 3 columns are floated, so a card taller than the one beside it
   traps the following card instead of letting it start a new line. Clearing
   the first card of each line keeps the grid aligned at every breakpoint.
   Counted with nth-of-type rather than nth-child because the row can also
   contain the one-off lazy-load <style>/<script> emitted by the first card. */

/* Two cards per line, up to the point Bootstrap switches to col-md-4 */
@media (max-width: 991px) {
  .prodcol:nth-of-type(2n + 1) {
    clear: left;
  }
}

/* Three cards per line */
@media (min-width: 992px) {
  .prodcol:nth-of-type(3n + 1) {
    clear: left;
  }
}

/* Tighter type on phones, where a card is only half a narrow screen wide */
@media (max-width: 767px) {
  .prodcol .prodcard-body {
    padding: 0 10px;
  }

  .prodcol .prodcard-body .wgt-title {
    margin-bottom: 15px;
    font-size: 14px;
  }

  .prodcol .prodcard-desc {
    top: -5px;
    padding: 0 10px 15px 10px;
    font-size: 13px;
  }
}

/* Common minimum height so cards sharing a line keep a common baseline */
@media (min-width: 768px) {
  .prodcol .prodcard {
    min-height: 420px;
  }
}