/* =========================================================
   ARTICLE CTA
   ========================================================= */

.single-journal__cta {
	background:
		linear-gradient(
			135deg,
			#9d3034 0%,
			#8b292d 100%
		);

	color: var(--jl-paper-light);

	margin:
		6rem
		0;

	max-width: 1650px;
	width: 88vw;

	overflow: hidden;

	padding:
		clamp(
			3rem,
			5vw,
			5rem
		);

	position: relative;

	transform-origin: left center;
	will-change: transform;

	clip-path:
		polygon(
			0 0,
			100% 0,
			100% 78%,
			94% 100%,
			0 100%
		);
}


/* =========================================================
   CONTENT
   ========================================================= */

.single-journal__cta-inner {
	margin-left:
		clamp(
			20rem,
			20vw,
			25rem
		);

	max-width: 42rem;

	position: relative;

	z-index: 2;
}


/* Eyebrow */

.single-journal__cta-eyebrow {
	color: inherit;

	font-family: var(--jl-sans);

	font-size: 0.65rem;
	font-weight: 700;

	letter-spacing: 0.18em;

	margin:
		0
		0
		1.25rem;

	text-transform: uppercase;
}


/* Heading */

.single-journal__cta-title {
	color: var(--jl-paper-light);

	font-family: var(--jl-sans);

	font-size:
		clamp(
			2.75rem,
			5vw,
			5rem
		);

	font-weight: 700;

	letter-spacing: -0.055em;

	line-height: 0.9;

	margin:
		0
		0
		2rem;

	max-width: 9ch;

	text-transform: uppercase;
}


.single-journal__cta-title span {
	display: block;

	font-size: 0.55em;

	letter-spacing: -0.08em;

	margin-top: 0.35rem;
}


/* Copy */

.single-journal__cta-copy {
	color:
		rgba(
			255,
			255,
			255,
			0.82
		);

	font-family: var(--jl-sans);

	font-size: 1rem;

	line-height: 1.7;

	margin:
		0
		0
		2.25rem;

	max-width: 35rem;
}


/* =========================================================
   BUTTON
   ========================================================= */

.single-journal__cta-button {
	align-items: center;

	background: var(--jl-ink);

	color: var(--jl-paper-light);

	display: inline-flex;

	font-family: var(--jl-sans);

	font-size: 0.68rem;
	font-weight: 700;

	gap: 3rem;

	justify-content: space-between;

	letter-spacing: 0.16em;

	min-width: 12rem;

	padding:
		1rem
		1.4rem;

	text-decoration: none;

	text-transform: uppercase;

	transition:
		background-color 220ms ease,
		transform 220ms ease;
}


.single-journal__cta-button:hover {
	background: #111;

	color: var(--jl-paper-light);

	transform: translateY(-2px);
}


.single-journal__cta-button span:last-child {
	transition:
		transform 220ms
		cubic-bezier(
			0.16,
			1,
			0.3,
			1
		);
}


.single-journal__cta-button:hover
span:last-child {
	transform: translateX(5px);
}


/* =========================================================
   GRAPHICS
   ========================================================= */

.single-journal__cta-graphics {
	inset: 0;

	pointer-events: none;

	position: absolute;
}


/* Dot field */

.single-journal__cta-dot-field {
	background-image:
		radial-gradient(
			rgba(
				255,
				255,
				255,
				0.35
			) 1px,
			transparent 1px
		);

	background-size:
		8px
		8px;

	height: 80px;

	position: absolute;

	right: 7%;

	top: 18%;

	width: 80px;
}


/* Cross */

.single-journal__cta-cross {
	bottom: 18%;

	height: 28px;

	position: absolute;

	right: 18%;

	width: 28px;
}


.single-journal__cta-cross::before,
.single-journal__cta-cross::after {
	background:
		rgba(
			255,
			255,
			255,
			0.5
		);

	content: "";

	left: 50%;

	position: absolute;

	top: 50%;

	transform:
		translate(
			-50%,
			-50%
		);
}


.single-journal__cta-cross::before {
	height: 1px;

	width: 100%;
}


.single-journal__cta-cross::after {
	height: 100%;

	width: 1px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

	.single-journal__cta {
		margin:
			4rem
			0;

		padding:
			3rem
			2rem;

		width: 94vw;

		clip-path:
			polygon(
				0 0,
				100% 0,
				100% 92%,
				92% 100%,
				0 100%
			);
	}


	.single-journal__cta-inner {
		margin-left: 0;

		max-width: 34rem;
	}


	.single-journal__cta-title {
		font-size:
			clamp(
				2.5rem,
				12vw,
				4rem
			);
	}


	.single-journal__cta-dot-field {
		opacity: 0.5;

		right: 5%;

		top: 10%;
	}


	.single-journal__cta-cross {
		display: none;
	}

}