/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.bcgov-graphical-tiles-display {
  list-style: none;
  padding: 0;
}

.bcgov-graphical-tile {
  position: relative;
}
.bcgov-graphical-tile a {
  text-decoration: none !important;
}

.bcgov-graphical-tile a .bcgov-graphical-tile-title {
  text-decoration: underline;
}
.bcgov-graphical-tile a:hover .bcgov-graphical-tile-title {
  text-decoration: none;
}
.bcgov-graphical-tile-bottom a:hover {
  z-index: 1;
  position: relative;
  padding: 10px;
}

.bcgov-graphical-tile-img {
  position: relative;
  width: 100%;
}

.bcgov-graphical-tile-bottom h2 {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
}

.bcgov-graphical-tile-top {
  z-index: 2;
  position: relative;
}

.bcgov-graphical-tile-excerpt {
  white-space: normal;
}

.bcgov-gt-edit-link {
  position: absolute;
  margin-right: 12px;
  background-color: #ddd;
  padding: 2px 8px 0px;
  border-radius: 10px;
  font-size: 12px;
  right: -9px;
  top: 1px;
  z-index: 40;
  color: #666 !important;
  -webkit-box-shadow: 2px 3px 17px 1px rgba(0, 0, 0, 0.24);
  -moz-box-shadow: 2px 3px 17px 1px rgba(0, 0, 0, 0.24);
  box-shadow: 2px 3px 17px 1px rgba(0, 0, 0, 0.24);
}

/** Theme digital **/
.bcgov-graphical-tiles-display.theme-digital {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 30px 0 15px !important;
}

.bcgov-graphical-tiles-display.theme-digital li {
  margin: 2% 1%;
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-flex: 1;
}
.bcgov-graphical-tiles-display.theme-digital .bcgov-graphical-tile {
  border: 1px solid #606060;
  padding: 3rem 3rem 3rem;
  width: 100%;
  /*min-height: 340px;*/
}

.bcgov-graphical-tiles-display.theme-digital .bcgov-graphical-tile:hover {
  border-top: 5px solid #f4bb2d;
  padding-top: calc(3rem - 4px);
}

.bcgov-graphical-tiles-display.theme-digital .bcgov-graphical-tile-title {
  color: inherit;
  margin: 8px 0 15px;
}

.bcgov-graphical-tiles-display.theme-digital .bcgov-graphical-tile-category {
  color: #606060;
  font-size: 1.5rem;
  line-height: 1.3rem;
}

.bcgov-graphical-tiles-display.theme-digital .bcgov-graphical-tile-excerpt {
  color: initial;
}

@media screen and (min-width: 668px) {
  .bcgov-graphical-tiles-display.theme-digital li {
    margin: 1%;
    width: 48%;
    max-width: 48%;
    min-width: 48%;
  }
}
@media screen and (min-width: 992px) {
  .bcgov-graphical-tiles-display.theme-digital li {
    width: 31.3%;
    max-width: 31.3%;
    min-width: 31.3%;
  }
}

/** Theme classic */
.bcgov-graphical-tiles-display.theme-classic {
  margin: 30px -15px 0;
}
.bcgov-graphical-tiles-display.theme-classic .bcgov-graphical-tile-category {
  display: none;
}
.bcgov-graphical-tiles-display.theme-classic .bcgov-graphical-tile {
  -webkit-box-shadow: 10px 10px 52px -13px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 10px 10px 52px -13px rgba(0, 0, 0, 0.35);
  box-shadow: 10px 10px 52px -13px rgba(0, 0, 0, 0.35);
  margin-bottom: 40px;
}

.bcgov-graphical-tiles-display.theme-classic .bcgov-graphical-tile-bottom {
  background-color: #38598a;
  color: #fff;
}

.bcgov-graphical-tiles-display.theme-classic .bcgov-graphical-tile-title {
  color: #fff;
  font-size: 1.3rem;
  display: table-cell;
  vertical-align: middle;
  font-weight: normal;
  white-space: normal;
  padding: 8px 4px;
  margin: 0;
}

.bcgov-graphical-tiles-display.theme-classic .bcgov-graphical-tile-top {
  background-color: #38598a;
  color: #fff;
  border-bottom: 1px solid #fff;
  padding: 10px;
}
.bcgov-graphical-tiles-display.theme-classic .bcgov-graphical-tile-excerpt {
  padding: 10px;
}

.bcgov-graphical-tiles-display.theme-classic
  .bcgov-graphical-tile
  > a:hover
  .overlay {
  z-index: 3;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  opacity: 0.4;
  display: flex;
  align-items: stretch;
  padding: 0 15px;
  background-color: #000;
}