@import 'global';

@import 'cards';

/* ------------------ BUTTONS ------------------- */

@import 'buttons';

/* ------------------ PREVIEWS ------------------- */

$preview-height: 8*1.5rem;

.previews-section {
  display: grid;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto;
  grid-gap: 1.5rem;
}

.preview-container {
  width:100%;
}

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){

  .prev-col-2 .preview-container {
    width:50%;
  }

  .prev-col-3 .preview-container {
    width:33%;
  }

  .prev-col-4 .preview-container {
    width:25%;
  }

}

.card-preview {
  padding:0;
  width:100%;
  margin:auto;
  box-shadow: $large-shadow, $inset-shadow;
}

.preview-link:hover {
  text-decoration:none!important;
}

.preview-item {
  height: $preview-height;
  font-size:0.9rem;
	line-height: 1.5rem !important;
  padding:0.2em;
  text-align:justify;
  background-color:rgba(0,0,0,0.00);
  color:rgba(0,0,0,0.4);
	position: relative;
	
	display: flex;
  -ms-flex-align: center !important;
  align-items: center !important;
  justify-content: center;

  .preview-overlay {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    padding: 0.75rem;
    backdrop-filter: none;
    transition: background 0.3s;

    h1, h2, h3, h4, h5, h6 {
      color: $color-light;
      font-size: 1rem;
      line-height: 1.5rem;
      font-weight:200;
    }

    .card-header {
      font-family: Work Sans;
      font-size: 1rem;
      background-color: $color-primary;
      @include card-header(0.75rem);
      font-weight:200;
    }
  }

  &:hover {
    .preview-overlay {
      backdrop-filter: blur(2px);
      background-color:rgba(0,0,0,0.4);

      .preview-metadata {
        opacity: .9;
        transition: opacity .5s;
      }
    }
  }
}

.preview-content {
  max-height: $preview-height;
  overflow:hidden;

  h1, h2, h3, h4, h5, h6 {
    margin-bottom:0px;
    max-width:100%;
    display:none;
  }

  & > p {
    width:100%;
    margin:auto;

    & > img {
      max-width:100%;
      height:auto;
      vertical-align:middle;
      margin:auto;
      text-align:center;
    }

    &.p-img {
      text-align:center;
      margin:auto;
      padding:auto;
      display: block;
      width:100%;
    }
  }
}

.preview-metadata {
	opacity: 0;
	transition: opacity .3s;
  color: $color-light;
}



.comment-text {
  margin-top:0.8em;
}

.card-preview time {
  margin-bottom:0.4em;
  display:block;
}

// Author area

.author-area {
  display:flex;

  img.author-avatar {
    display:block;
    height: 4.5rem;
    width:auto;
    border-radius:100%;
    padding:0;
    margin:0;
    margin-right:1.5rem;
  }

  .author-metadata {
    align-items:center;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: flex-start;
  }

  .author-date {
    font-style:italic;
  }

  &:not(:last-child) {
    margin-bottom:1.5rem;
  }
}