/* ==========================================================================
   THE ARTICLE CALL TO ACTION, [clevel_cta]. 29 September 2026.

   Built in inc/post-cta.php; read the header there for why it exists and how to use it.

   ITS OWN FILE, loaded only on a page whose text carries the shortcode. It was first written at
   the end of single-post.css, but that file carries other work not yet on the live site, so the
   block could not go live without taking that work with it.

   LAYOUT. A dark teal panel on the text column, photo on the left and the offer on the right.
   Below 768px it stacks, with the photo as a band across the top.

   TYPE. Three of the site's five sizes, no new ones: label, heading and body. The button takes
   the body size, larger than the site's usual 14px button, because it is the one ask on the page.
   Both families are already loaded.

   COLOURS. Teal #005A69 panel, white text, the site's lime button and lime ticks. The lime is
   the site's own button colour, used here so the ask is the brightest thing on the screen.

   THE LONG PREFIX. The article rules above reach (0,4,2) for list items and links, so every rule
   here starts from the same five-part prefix and wins without !important.
   ========================================================================== */

.single-post .site-content .site-main article .entry-content .clevel-cta {
	display: grid;
	grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
	max-width: var(--post-measure, 680px);
	margin: 3.5rem 0;
	background: var(--theme-dark);
	color: #fff;
	border-radius: 12px;
	overflow: hidden;
}

.single-post .site-content .site-main article .entry-content .clevel-cta .clevel-cta__photo {
	position: relative;
	margin: 0;
	min-height: 100%;
}

.single-post .site-content .site-main article .entry-content .clevel-cta .clevel-cta__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 30% 50%;
	margin: 0;
	border-radius: 0;
}

.single-post .site-content .site-main article .entry-content .clevel-cta .clevel-cta__photo figcaption {
	position: absolute;
	left: 12px;
	bottom: 12px;
	margin: 0;
	padding: 4px 10px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	border-radius: 4px;
	font-size: var(--fs-label);
	line-height: 1.4;
	text-align: left;
}

.single-post .site-content .site-main article .entry-content .clevel-cta .clevel-cta__body {
	padding: 40px 40px 36px;
}

.single-post .site-content .site-main article .entry-content .clevel-cta p {
	margin: 0;
	color: #fff;
}

.single-post .site-content .site-main article .entry-content .clevel-cta .clevel-cta__label {
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--theme-green);
	margin-bottom: 12px;
}

.single-post .site-content .site-main article .entry-content .clevel-cta .clevel-cta__title {
	font-family: "Epilogue", sans-serif;
	font-size: var(--fs-heading);
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 24px;
}

.single-post .site-content .site-main article .entry-content .clevel-cta .clevel-cta__text {
	font-size: var(--fs-body);
	line-height: 1.55;
	margin-bottom: 16px;
	color: rgba(255, 255, 255, 0.92);
}

/* The last thing in the panel takes no space under it; the panel's own padding does that. */
.single-post .site-content .site-main article .entry-content .clevel-cta .clevel-cta__body > :last-child {
	margin-bottom: 0;
}

.single-post .site-content .site-main article .entry-content .clevel-cta .clevel-cta__text + .clevel-cta__actions {
	margin-top: 32px;
}

.single-post .site-content .site-main article .entry-content .clevel-cta .clevel-cta__points {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}

.single-post .site-content .site-main article .entry-content .clevel-cta .clevel-cta__points li {
	position: relative;
	margin: 0 0 14px;
	padding: 0 0 0 34px;
	font-size: var(--fs-body);
	line-height: 1.5;
	color: #fff;
}

.single-post .site-content .site-main article .entry-content .clevel-cta .clevel-cta__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--theme-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23005A69' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.single-post .site-content .site-main article .entry-content .clevel-cta .clevel-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-bottom: 24px;
}

.single-post .site-content .site-main article .entry-content .clevel-cta a.clevel-cta__button {
	margin: 0;
	padding: 18px 32px;
	font-size: var(--fs-body);
	font-weight: 600;
	color: var(--theme-dark);
	text-decoration: none;
}

/* An arrow after the words, so the button reads as the way forward and not as a label. */
.single-post .site-content .site-main article .entry-content .clevel-cta a.clevel-cta__button::after {
	content: "→";
	display: inline-block;
	margin-left: 10px;
	transition: transform 0.15s ease;
}

.single-post .site-content .site-main article .entry-content .clevel-cta a.clevel-cta__button:hover::after,
.single-post .site-content .site-main article .entry-content .clevel-cta a.clevel-cta__button:focus::after {
	transform: translateX(4px);
}

.single-post .site-content .site-main article .entry-content .clevel-cta a.clevel-cta__button:hover,
.single-post .site-content .site-main article .entry-content .clevel-cta a.clevel-cta__button:focus {
	background: #fff;
	color: var(--theme-dark);
}

.single-post .site-content .site-main article .entry-content .clevel-cta a.clevel-cta__secondary {
	color: #fff;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.single-post .site-content .site-main article .entry-content .clevel-cta a.clevel-cta__secondary:hover,
.single-post .site-content .site-main article .entry-content .clevel-cta a.clevel-cta__secondary:focus {
	color: var(--theme-green);
}

.single-post .site-content .site-main article .entry-content .clevel-cta .clevel-cta__note {
	font-size: var(--fs-label);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.8);
}

/* Below 768px: the photo becomes a band across the top and the button fills the width. */
@media screen and (max-width: 767px) {

	.single-post .site-content .site-main article .entry-content .clevel-cta {
		grid-template-columns: 1fr;
		border-radius: 8px;
	}

	.single-post .site-content .site-main article .entry-content .clevel-cta .clevel-cta__photo {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	.single-post .site-content .site-main article .entry-content .clevel-cta .clevel-cta__body {
		padding: 26px 20px 24px;
	}

	.single-post .site-content .site-main article .entry-content .clevel-cta a.clevel-cta__button {
		width: 100%;
		text-align: center;
	}
}