/* Blog post extras: "Back to news" and "More insights". */

/* The Patient page's outline button (as the News cards' "Read more"),
   with a back arrow. Sits above the category line and title. */
.cl-post-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	margin: 0 0 28px;
	padding: 0 18px 0 14px;
	border: 1px solid rgba(6, 30, 33, 0.16);
	border-radius: 6px;
	background: transparent;
	color: #16232B !important;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cl-post-back:hover { background: #F4F5F3; border-color: #16232B; }

.cl-post-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* "More insights": a hairline above, then the same spacing as the site's
   other sections (100 / 75 / 50). The page background (cream on posts)
   carries through. */
.cl-post-more {
	padding: 100px 0;
	border-top: 1px solid rgba(6, 30, 33, 0.08);
}

.cl-post-more__head { margin-bottom: 48px; text-align: center; }

/* The label and heading take the site's h6 / h2 styles and the `miller`
   serif. Only colour and spacing are set here. */
.cl-post-more .cl-post-more__label { margin: 0 0 4px; padding: 0; color: #061E21B3; }
.cl-post-more .cl-post-more__title { margin: 0; padding: 0; color: #061E21; }

.cl-post-more__foot { display: flex; justify-content: center; margin-top: 56px; }

/* The site's main red button (nectar_cta, as "View all news" on About). */
.cl-post-more .cl-post-more__btn {
	display: inline-flex;
	align-items: center;
	padding: 12px 24px;
	border-radius: 8px;
	background: #C91228;
	color: #FDFDFC !important;
	font-size: 16px;
	line-height: 18px;
	text-decoration: none !important;
	transition: background-color 0.2s ease;
}

.cl-post-more .cl-post-more__btn:hover { background: #C91228CC; }

@media (max-width: 999px) {
	.cl-post-more { padding: 75px 0; }
}

@media (max-width: 999px) {
	/* Tablets show the grid in two columns, which would leave the third
	   card on a row by itself; phones stack them into a long scroll. Two
	   cards below desktop. */
	.cl-post-more .cl-news__grid > [data-card]:nth-child(n+3) { display: none; }
}

@media (max-width: 690px) {
	.cl-post-more { padding: 50px 0; }
	.cl-post-more__head { margin-bottom: 32px; }
	.cl-post-more__foot { margin-top: 40px; }
}