/* Modularized Blog Card CSS Rules
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.card.card--blog {
	grid-template-areas: "thumbnail" "head" "byline" "excerpt" "read-more";
	grid-column-gap: 1.125rem;
	grid-template-rows: min-content min-content 1fr max-content min-content;
	padding: 1.125rem 0;
	margin-top: 1.75rem;
	line-height: 1.375;
}

.card__image-container.card__image-container--blog {
	width: 100%;
	height: auto;
}

.card__header.card__header--blog a {
	font-size: 0.95rem;
	letter-spacing: normal;
	padding: 0.6875rem 0;
	font-weight: 500;
	color: #012e5d;
}

.card__header.card__header--blog a:hover {
	color: var(--pgsp-theme-color);
}

.card__bylines.card__bylines--blog {
	display: flex;
	flex-wrap: wrap;
	color: var(--byu-grey-dark);
	font-size: 0.875rem;
	letter-spacing: 0;
	padding-top: 0.25rem;
}

.card__blogger-name,
.card__blog-date {
	white-space: nowrap;
}

.card__byline-separator.card__byline-separator--blog {
	display: inline-block;
	padding: 0 0.5625rem;
}

.card__excerpt.card__excerpt--blog {
	font-size: 0.9rem;
	line-height: 22px;
	color: #575757;
	padding-top: 0.375rem;
	padding-bottom: 1rem;
	margin-top: 0.9375rem;
}

.card__excerpt span {
	-webkit-line-clamp: 4;
}

.card__read-more.card__read-more--blog {
	grid-area: read-more;
	display: block;
}

.card__read-more.card__read-more--blog a {
	font-size: 0.75rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--pgsp-theme-color);
	font-weight: 500;
}

@media (min-width: 640px) {

	.card.card--blog {
		grid-template-areas:
			"thumbnail head"
			"thumbnail byline"
			"thumbnail byline"
			"thumbnail excerpt"
			". read-more";
		grid-column-gap: 1.8rem;
	}

	.card__image-container.card__image-container--blog {
		width: 212px;
		height: 138px;
	}

	.card__header.card__header--blog a {
		padding: 0;
	}

	.card__bylines.card__bylines--blog {
		display: flex;
	}

	.card__byline-separator.card__byline-separator--blog {
		display: inline-block;
	}

	.card__excerpt.card__excerpt--blog {
		margin-top: 0;
	}

	.card__excerpt span {
		-webkit-line-clamp: 3;
	}
}