// CARDS

.ht-card{
	display: block;
	padding: 16px;
}
.template-card{
	margin: 0 0 24px;
	padding: 0;
	.card-thumbnail{
		position: relative;
		.thumb-wrap{
			.thumb-image{
				background-color: rgba(#000,.1);
				&:before{
					display: block;
					content: "";
					position: absolute;
					top: 0; left: 0; right: 0; bottom: 0;
					background-color: transparent;
					@include transition(background-color .2s ease-in-out);
				}
			}
		}
		.thumb-actions{
			display: none;
			position: absolute;
			top: 50%; left: 24px; right: 24px;
			@include translateY(-50%);
			z-index: 47;
			@include transition(opacity .2s ease-in-out);
			.ht-btn-default{
				border-color: transparent;
			}
		}
	}
	.card-content{
		padding: 12px 16px;
		.t-title{
			margin: 0;
			line-height: 18px;
			font-size: 14px;
			font-weight: 400;
			a{
				display: inline;
				padding: 2px 0;
				font-size: 16px;
				color: $color-primary-text;
				&:hover{
					color: $color-primary-light;
				}
			}
		}
		.t-price{
			margin: 4px 0 0;
			padding: 2px 0;
			font-size: 18px;
			font-weight: 500;
			color: $color-secondary;
			cursor: default;
		}
	}
	@media (min-width: $screen-md-min){
		.card-thumbnail{
			position: relative;
			.thumb-wrap{
				.thumb-image{
					background-color: rgba(#000,.4);
				}
			}
			.thumb-actions{
				display: block;
				opacity: 0;
			}
		}
		&:hover{
			.card-thumbnail{
				.thumb-image{
					&:before{
						background-color: rgba(#000,.4);
					}
				}
				.thumb-actions{
					opacity: 1;
				}
			}
		}
	}	
}
.news-card{
	margin-bottom: 24px;
	border: 1px solid $border;
	.card-thumbnail{
		margin: -8px -8px 8px;
		a{
			background-color: material-color('grey','200');
		}
	}
	.card-header{
		margin: 0 0 4px;
		padding: 4px 0;
		height: 72px;
		.news-title{
			margin: 0 0 8px;
			font-size: 24px;
			font-weight: 500;
			max-height: 40px;
			@include multiLineEllipsis(2);
			a{
				display: inline-block;
				vertical-align: top;
				line-height: 20px;
				font-size: 16px;
				font-weight: 500;
				color: $color-primary-text;
				&:hover{
					color: $color-primary;
				}
			}
		}
		.news-meta{
			color: $color-secondary-text;
			&:after{
				color: #999;
			}
		}
	}
	.card-content{
		margin: 4px 0;
		padding: 4px 0;
		height: 60px;
		.news-excerpt{
			margin: 0;
			line-height: 20px;
			font-size: 14px;
			max-height: 60px;
			@include multiLineEllipsis(3);
		}
	}
	.card-footer{
		margin: 16px 0 0;
		text-align: center;
		.btn{
			padding-left: 24px;
			padding-right: 24px;
		}
	}
}
.article-card{
	padding-bottom: 48px;
	.article-featured-img{
		margin-bottom: 12px;
	}
	.article-header{
		margin: 0 0 12px;
		padding: 12px 0 20px;
		border-bottom: $border;
		@media (min-width: $screen-sm-min){
			margin: 0 0 28px;
			padding: 16px 0 24px;
		}
	}
	.article-title{
		margin: 0 0 12px;
		font-size: 24px;
		font-weight: 500;
		color: $color-primary-text;
		@media (min-width: $screen-sm-min){
			margin: 0 0 12px;
			font-size: 28px;
		}
	}
	.article-meta{
		margin-top: 16px;
		color: $color-secondary-text;
	}
	.article-content{
		margin-top: 24px;
		h1:not(:first-child),
		h2:not(:first-child),
		h3:not(:first-child),
		h4:not(:first-child),
		h5:not(:first-child),
		h6:not(:first-child){
    	margin-top: 32px;
		}
	}
	.related-posts{
		margin-top: 96px;
		.single-post{
			position: relative;
			margin: 0;
			font-size: 16px;
			border-bottom: 1px dotted $color-divider;
			&:first-child{
				border-top: 1px dotted $color-divider;
			}
			&:before{
		    content: "\f0da";
		    display: block;
		    position: absolute;
		    top: 11px; left: 4px;
		    line-height: 20px;
		    font-family: FontAwesome;
		    font-size: inherit;
		    font-weight: normal;
		    font-style: normal;
		    font-variant: normal;
		    text-rendering: auto;
		    -webkit-font-smoothing: antialiased;
		    -moz-osx-font-smoothing: grayscale;
		    color: material-color('grey','800');
			}
			a{
				display: inline-block;
				line-height: 20px;
				font-size: 16px;
				font-weight: 400;
				padding: 12px 0 12px 20px;
				color: $color-primary-text;
				&:hover{
					color: $color-secondary;
				}
			}
		}
	}
}
.comment-card{
  ul.list-comment{
    li{
      .single-comment{
        display: block;
        position: relative;
        margin: 0 0 16px;
        padding: 0 0 0 48px;
        min-height: 48px;
        span,a{
          margin-right: 4px;
        }
        .user-image{
          display: block;
          position: absolute;
          top: 0; left: 0;
          width: 48px; height: 48px;
          background-color: material-color('grey','200');
        }
        .comment-info{
          padding: 0 0 0 12px;
          .comment-meta{
            .c-name{
              font-size: 14px;
              font-weight: 500;
              color: $color-primary-text;
            }
            .c-date{
            	margin-right: 8px;
              font-size: 12px;
              color: $color-secondary-text;
            }
            .c-action{
              font-size: 12px;
            }
          }
          .comment-content{
            margin-top: 4px;
            line-height: 18px;
            font-size: 13px;
          }
        }
      }
    }
    ul{
      padding-left: 24px;
      border-left: $border;
    }
  }
}