/*
 * Blog categories (Story #857): the filter row, the card label, the article
 * page labels and "More in <category>". Colours are the theme's own
 * (--primary navy, --secondary turquoise); one chip style everywhere:
 * turquoise outline and text, 4px corners like the site's buttons and
 * pagination, filled when selected.
 */

/* Filter row */
.go-blog-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 28px;
}

.go-blog-chip {
	display: inline-block;
	border: 1px solid var(--secondary);
	border-radius: 4px;
	background: var(--white);
	color: var(--secondary);
	font-size: 15px;
	line-height: 1.4;
	padding: 5px 12px;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .15s, color .15s;
}

.go-blog-chip:hover,
.go-blog-chip:focus {
	background: var(--secondary);
	color: var(--white);
	text-decoration: none;
}

.go-blog-chip.is-active {
	background: var(--secondary);
	color: var(--white);
}

/* Category page: the category description under the chips */
.go-blog-category-intro {
	margin: -12px 0 28px;
	color: var(--gray);
}

.go-blog-category-intro p {
	margin: 0;
}

/* Resource Center banner subtitle */
.go-blog-subtitle {
	margin: 6px 0 0;
	font-size: 18px;
	opacity: .9;
}

/* Card label, above the title */
/* Close to the title and to the picture, so label and title read as one block */
.blog-1 .blog_item .blog-post-thumbnail {
	margin-bottom: 12px !important; /* overrides Bootstrap's mb-3 (16px) */
}

.go-blog-card-label {
	display: flex;
	line-height: 1;
	margin: 0 0 6px;
}

/* The theme pads card titles 15px at the top (#blog h3); under a label that gap would split them */
#blog .go-blog-card-label + h3 {
	padding-top: 0;
}

.go-blog-chip--label {
	font-size: 12px;
	line-height: 16px;
	padding: 1px 6px;
}

/* Card excerpt: three lines, so the cards of a row line up */
.go-blog-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 8px;
}

/* Article page: labels above the title, on the navy banner */
.single-post .inner-banner {
	height: auto;
	min-height: 222px;
	padding-top: 24px;
	padding-bottom: 24px;
}

.go-blog-banner-labels {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 12px;
}

.go-blog-chip--banner {
	border-color: var(--white);
	background: transparent;
	color: var(--white);
	font-size: 14px;
	padding: 1px 10px;
}

.go-blog-chip--banner:hover,
.go-blog-chip--banner:focus {
	background: var(--white);
	color: var(--primary);
}

/* More in <category>: in the sidebar from 768px, below the article on phones */
.go-blog-more-in ul {
	padding: 0;
	margin: 0 0 24px;
}

.go-blog-more-in li {
	list-style: none;
	line-height: 1.5;
	margin-bottom: 12px;
}

.go-blog-more-in--mobile {
	display: none;
}

@media (max-width: 767px) {
	.go-blog-more-in--mobile {
		display: block;
		margin: 0 0 32px;
	}

	/* One line of chips that scrolls sideways, fading at the edge */
	.go-blog-filter {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-right: -15px;
		padding-right: 32px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		-webkit-mask-image: linear-gradient(90deg, black 85%, transparent);
		mask-image: linear-gradient(90deg, black 85%, transparent);
	}

	.go-blog-filter::-webkit-scrollbar {
		display: none;
	}

	.go-blog-chip {
		font-size: 14px;
	}
}

/* Cards of a row share their height, so Read More lines up even when titles wrap differently */
.blog-1 > .row > [class*="col-"] {
	display: flex;
}

.blog-1 .blog_item {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.blog-1 .blog_item .more-link {
	margin-top: auto;
}