/* ==========================================================
   NAPONTA JOBBAN
   Single Article
   ========================================================== */

body.single-post {
	background: #FAF8F3;
}


/* ==========================================================
   ARTICLE STRUCTURE
   Blocksy DOM:
   figure -> hero -> content
   Vizuálisan:
   hero -> figure -> content
   ========================================================== */

.single-post article.post {
	display: flex;
	flex-direction: column;
}


/* Hero first */
.single-post article.post > .hero-section {
	order: 1;
}


/* Featured image second */
.single-post article.post > .ct-featured-image {
	order: 2;
}


/* Content third */
.single-post article.post > .entry-content {
	order: 3;
}


/* ==========================================================
   HERO / ARTICLE HEADER
   ========================================================== */

.single-post .hero-section {
	width: min(1000px, calc(100% - 40px));

	margin: 0 auto;

	padding:
		clamp(70px, 8vw, 110px)
		0
		44px;

	text-align: center;
}


.single-post .hero-section .entry-header {
	width: 100%;
	max-width: none;

	margin: 0 auto;
}


/* Category / meta */
.single-post .entry-header .entry-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	gap: 9px;

	margin: 0 0 20px;

	color: rgba(43, 43, 43, .46);

	font-family: "Manrope", sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;

	letter-spacing: .04em;
}


/* Category links */
.single-post .entry-header .entry-meta a {
	color: #2E5E4E;

	text-decoration: none;
}


/* Article title */
.single-post .entry-header h1,
.single-post .entry-header .entry-title {
	max-width: 940px;

	margin:
		0 auto
		22px;

	color: #144637;

	font-family:
		"Libre Caslon Text",
		Georgia,
		serif;

	font-size:
		clamp(46px, 4.5vw, 66px);

	font-weight: 400;
	line-height: 1.04;

	letter-spacing: -.035em;

	text-wrap: balance;
}


/* Excerpt */
.single-post .entry-header .entry-excerpt {
	max-width: 760px;

	margin:
		0 auto;

	color:
		rgba(43, 43, 43, .68);

	font-family:
		"Manrope",
		sans-serif;

	font-size: 18px;
	font-weight: 400;
	line-height: 1.7;
}


/* Blocksy may wrap excerpt in p */
.single-post .entry-header .entry-excerpt p {
	margin: 0;
}


/* ==========================================================
   FEATURED IMAGE
   ========================================================== */

.single-post article.post > figure.ct-featured-image {
	position: relative;

	width:
		min(
			1240px,
			calc(100% - 40px)
		) !important;

	max-width: 1240px !important;

	height:
		clamp(
			360px,
			38vw,
			500px
		);

	margin:
		0 auto
		72px !important;

	overflow: hidden;

	border-radius: 24px;

	box-shadow:
		0 22px 54px
		rgba(43, 43, 43, .065);
}


.single-post
.ct-featured-image
.ct-media-container {
	width: 100%;
	height: 100%;
}


.single-post
.ct-featured-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}


/* Very subtle image tone */
.single-post
.ct-featured-image::after {
	content: "";

	position: absolute;
	inset: 0;

	pointer-events: none;

	background:
		linear-gradient(
			180deg,
			rgba(20, 70, 55, .015),
			rgba(20, 70, 55, .07)
		);
}


/* ==========================================================
   ARTICLE BODY
   ========================================================== */

.single-post .entry-content {
	width:
		min(
			760px,
			calc(100% - 40px)
		) !important;

	max-width: 760px !important;

	margin:
		0 auto !important;

	padding:
		0
		0
		110px;

	color:
		rgba(43, 43, 43, .76);

	font-family:
		"Manrope",
		sans-serif;

	font-size: 16px;
	line-height: 1.78;
}


/*
 * WordPress .is-layout-constrained otherwise
 * gives child blocks their own width rules.
 */
.single-post .entry-content > * {
	width: 100%;
	max-width: 100% !important;

	margin-left: 0;
	margin-right: 0;
}


/* ==========================================================
   BODY TYPOGRAPHY
   ========================================================== */

.single-post .entry-content p {
	margin:
		0
		0
		22px;
}


/* First introductory paragraph */
.single-post .entry-content > p:first-child {
	color:
		rgba(43, 43, 43, .72);

	font-size: 18px;
	line-height: 1.72;
}


/* ==========================================================
   H2
   ========================================================== */

.single-post .entry-content h2 {
	position: relative;

	margin:
		56px
		0
		18px;

	padding-top: 19px;

	color: #144637;

	font-family:
		"Libre Caslon Text",
		Georgia,
		serif;

	font-size: 32px;
	font-weight: 400;
	line-height: 1.16;

	letter-spacing: -.02em;
}


/* Amber editorial marker */
.single-post .entry-content h2::before {
	content: "";

	position: absolute;

	top: 0;
	left: 0;

	width: 42px;
	height: 2px;

	background: #C89B3C;

	border-radius: 999px;
}


/* ==========================================================
   H3
   ========================================================== */

.single-post .entry-content h3 {
	margin:
		40px
		0
		14px;

	color: #144637;

	font-family:
		"Libre Caslon Text",
		Georgia,
		serif;

	font-size: 25px;
	font-weight: 400;
	line-height: 1.22;
}


/* ==========================================================
   LISTS
   ========================================================== */

.single-post .entry-content ul,
.single-post .entry-content ol {
	margin:
		4px
		0
		26px;

	padding-left: 26px;
}


.single-post .entry-content li {
	margin-bottom: 9px;

	padding-left: 4px;
}


/* ==========================================================
   STRONG / LINKS
   ========================================================== */

.single-post .entry-content strong {
	color: #144637;

	font-weight: 700;
}


.single-post .entry-content a {
	color: #2E5E4E;

	text-decoration-color:
		rgba(200, 155, 60, .65);

	text-underline-offset: 3px;
}


/* ==========================================================
   BLOCKQUOTES
   ========================================================== */

.single-post .entry-content blockquote {
	position: relative;

	margin:
		36px
		0;

	padding:
		23px
		26px
		23px
		30px;

	background:
		linear-gradient(
			135deg,
			rgba(127, 167, 139, .08),
			rgba(255, 255, 255, .45)
		);

	border:
		1px solid
		rgba(46, 94, 78, .10);

	border-radius: 16px;

	color:
		rgba(43, 43, 43, .72);
}


.single-post .entry-content blockquote::before {
	content: "";

	position: absolute;

	top: 20px;
	bottom: 20px;
	left: 0;

	width: 3px;

	background: #C89B3C;

	border-radius: 999px;
}


/* ==========================================================
   IMAGES INSIDE ARTICLE
   ========================================================== */

.single-post .entry-content .wp-block-image {
	margin:
		34px
		0;
}


.single-post .entry-content .wp-block-image img {
	border-radius: 16px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1024px) {

	.single-post .hero-section {
		padding:
			72px
			0
			38px;
	}


	.single-post
	article.post
	> figure.ct-featured-image {
		height:
			clamp(
				330px,
				48vw,
				450px
			);

		margin-bottom:
			60px !important;
	}

}


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

@media (max-width: 767px) {

	.single-post .hero-section {
		width:
			calc(100% - 40px);

		padding:
			54px
			0
			30px;

		text-align: left;
	}


	.single-post
	.entry-header
	.entry-meta {
		justify-content:
			flex-start;

		margin-bottom: 15px;
	}


	.single-post
	.entry-header h1,
	.single-post
	.entry-header .entry-title {
		margin-left: 0;
		margin-right: 0;

		font-size:
			clamp(
				38px,
				10vw,
				46px
			);

		line-height: 1.05;
	}


	.single-post
	.entry-header
	.entry-excerpt {
		margin-left: 0;
		margin-right: 0;

		font-size: 15px;
		line-height: 1.65;
	}


	.single-post
	article.post
	> figure.ct-featured-image {
		width:
			calc(100% - 24px)
			!important;

		height: 280px;

		margin-bottom:
			46px !important;

		border-radius: 20px;
	}


	.single-post .entry-content {
		width:
			calc(100% - 40px)
			!important;

		padding-bottom: 76px;

		font-size: 15px;
		line-height: 1.72;
	}


	.single-post
	.entry-content
	> p:first-child {
		font-size: 16px;
	}


	.single-post
	.entry-content h2 {
		margin-top: 44px;

		font-size: 27px;
	}


	.single-post
	.entry-content h3 {
		font-size: 23px;
	}

}

/* ==========================================================
   SINGLE ARTICLE – category
   ========================================================== */

.single-post .entry-header .entry-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	margin-bottom: 20px;
}


/* Category */
.single-post .entry-header .entry-meta .meta-categories a,
.single-post .entry-header .entry-meta [class*="category"] a {
	display: inline-flex;
	align-items: center;

	padding: 7px 12px;

	background: rgba(127, 167, 139, .11);
	color: #2E5E4E;

	border-radius: 999px;

	font-family: "Manrope", sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: .09em;
	text-transform: uppercase;

	text-decoration: none;
}


/* Date remains subtle */
.single-post .entry-header .entry-meta time {
	color: rgba(43, 43, 43, .45);

	font-family: "Manrope", sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .04em;
}

/* ==========================================================
   SINGLE ARTICLE – closing callout
   ========================================================== */

.single-post
.entry-content
.nj-article-callout {
	position: relative;

	margin:
		52px
		0
		0 !important;

	padding:
		26px
		30px;

	background:
		linear-gradient(
			135deg,
			rgba(127, 167, 139, .10),
			rgba(255, 255, 255, .52)
		);

	border:
		1px solid
		rgba(46, 94, 78, .11);

	border-radius: 17px;

	color: #144637;

	font-family:
		"Libre Caslon Text",
		Georgia,
		serif;

	font-size: 23px !important;
	font-weight: 400;
	line-height: 1.35 !important;
}


.single-post
.entry-content
.nj-article-callout::before {
	content: "";

	position: absolute;

	top: 24px;
	bottom: 24px;
	left: 0;

	width: 3px;

	background: #C89B3C;

	border-radius: 999px;
}


/* ==========================================================
   Footer wrapper
   Break out of narrow 760px reading column
   ========================================================== */

.single-post
.nj-single-article-footer {
	position: relative;
	left: 50%;
	transform: translateX(-50%);

	width: min(1240px, calc(100vw - 40px));
	margin: 76px 0 0;
}


/* ==========================================================
   Tools
   ========================================================== */

.nj-single-article-tools {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 24px;

	padding:
		22px
		0;

	border-top:
		1px solid
		rgba(46, 94, 78, .12);

	border-bottom:
		1px solid
		rgba(46, 94, 78, .12);
}


.nj-single-back {
	display: inline-flex;
	align-items: center;

	gap: 8px;

	color: #2E5E4E;

	font-family:
		"Manrope",
		sans-serif;

	font-size: 13px;
	font-weight: 700;

	text-decoration: none;

	transition:
		transform 180ms ease,
		color 180ms ease;
}


.nj-single-back:hover {
	color: #144637;

	transform:
		translateX(-3px);
}


/* ==========================================================
   Share
   ========================================================== */

.nj-single-share-wrap {
	position: relative;
}


button.nj-single-share {
	display: inline-flex;
	align-items: center;

	gap: 8px;

	min-height: auto;

	margin: 0;
	padding: 8px 0;

	background: transparent !important;
	color: #2E5E4E !important;

	border: 0 !important;
	border-radius: 0 !important;

	box-shadow: none !important;

	font-family:
		"Manrope",
		sans-serif;

	font-size: 13px;
	font-weight: 700;

	cursor: pointer;

	transform: none !important;
}


.nj-single-share svg {
	width: 17px;
	height: 17px;
}


.nj-single-share-toast[hidden] {
	display: none !important;
}


.nj-single-share-toast {
	position: absolute;

	top: calc(100% + 9px);
	right: 0;

	z-index: 5;

	display: flex;
	align-items: center;

	gap: 7px;

	padding:
		9px
		12px;

	background:
		rgba(20, 70, 55, .94);

	color: #FAF8F3;

	border-radius: 9px;

	box-shadow:
		0 10px 24px
		rgba(20, 70, 55, .16);

	font-size: 11px;
	font-weight: 600;

	white-space: nowrap;

	opacity: 0;

	transform:
		translateY(-4px);

	transition:
		opacity 180ms ease,
		transform 180ms ease;
}


.nj-single-share-toast::before {
	content: "";

	position: absolute;

	top: -4px;
	right: 17px;

	width: 8px;
	height: 8px;

	background:
		rgba(20, 70, 55, .94);

	transform:
		rotate(45deg);
}


.nj-single-share-toast.is-visible {
	opacity: 1;

	transform: translateY(0);
}


/* ==========================================================
   RELATED ARTICLES
   ========================================================== */

.nj-related-articles {
	padding:
		86px
		0
		20px;
}


.nj-related-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;

	gap: 40px;

	margin-bottom: 34px;
}


.nj-related-header
.nj-section-eyebrow {
	margin:
		0
		0
		9px;

	color: #C89B3C;

	font-size: 11px;
	font-weight: 700;

	letter-spacing: .09em;
}


.nj-related-header h2 {
	margin: 0;

	color: #144637;

	font-family:
		"Libre Caslon Text",
		Georgia,
		serif;

	font-size: 38px;
	font-weight: 400;
	line-height: 1.1;
}


.nj-related-all {
	color: #2E5E4E;

	font-size: 13px;
	font-weight: 700;

	text-decoration: none;
}


/* ==========================================================
   Related grid
   ========================================================== */

.nj-related-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.nj-related-grid:has(.nj-related-card:only-child) {
	grid-template-columns: minmax(280px, 380px);
}

.nj-related-grid:has(.nj-related-card:first-child:nth-last-child(2)) {
	grid-template-columns: repeat(2, minmax(280px, 380px));
}


.nj-related-card {
	overflow: hidden;

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,.90),
			rgba(247,245,240,.96)
		);

	border:
		1px solid
		rgba(46,94,78,.10);

	border-radius: 18px;

	box-shadow:
		0 10px 28px
		rgba(43,43,43,.035);

	transition:
		transform 200ms ease,
		box-shadow 200ms ease;
}


.nj-related-image {
	display: block;

	height: 190px;

	overflow: hidden;
}


.nj-related-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 500ms
		cubic-bezier(.22,1,.36,1);
}


.nj-related-copy {
	padding:
		22px
		22px
		24px;
}


.nj-related-category {
	display: inline-block;

	margin-bottom: 9px;

	color: #C89B3C;

	font-size: 10px;
	font-weight: 700;

	letter-spacing: .08em;

	text-transform: uppercase;
}


.nj-related-card h3 {
	margin:
		0
		0
		10px;

	font-family:
		"Libre Caslon Text",
		Georgia,
		serif;

	font-size: 23px;
	font-weight: 400;
	line-height: 1.16;
}


.nj-related-card h3 a {
	color: #144637;

	text-decoration: none;
}


.nj-related-card p {
	margin:
		0
		0
		17px;

	color:
		rgba(43,43,43,.62);

	font-size: 12px;
	line-height: 1.55;
}


.nj-related-link {
	position: relative;

	color: #2E5E4E;

	font-size: 12px;
	font-weight: 700;

	text-decoration: none;
}


.nj-related-link::after {
	content: "";

	position: absolute;

	left: 0;
	bottom: -5px;

	width: 26px;
	height: 1px;

	background: #C89B3C;

	transition:
		width 180ms ease;
}


@media (hover: hover) {

	.nj-related-card:hover {
		transform:
			translateY(-3px);

		box-shadow:
			0 16px 36px
			rgba(43,43,43,.06);
	}


	.nj-related-card:hover
	.nj-related-image img {
		transform:
			scale(1.035);
	}


	.nj-related-card:hover
	.nj-related-link::after {
		width: 100%;
	}

}


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

@media (max-width: 767px) {

	.single-post
	.entry-content
	.nj-article-callout {
		margin-top:
			42px !important;

		padding:
			21px
			22px;

		font-size:
			20px !important;
	}


	.single-post
	.nj-single-article-footer {
	position: relative;
	left: 50%;
	transform: translateX(-50%);

	width: min(1240px, calc(100vw - 40px));
	margin: 76px 0 0;
	}


	.nj-single-article-tools {
		padding:
			18px
			0;
	}


	.nj-related-articles {
		padding-top: 64px;
	}


	.nj-related-header {
		align-items: flex-start;
		flex-direction: column;

		gap: 14px;

		margin-bottom: 26px;
	}


	.nj-related-header h2 {
		font-size: 32px;
	}


	.nj-related-grid {
		grid-template-columns: 1fr;

		gap: 14px;
	}


	.nj-related-card {
		display: grid;

		grid-template-columns:
			110px
			minmax(0, 1fr);
	}


	.nj-related-image {
		width: 110px;
		height: 100%;

		min-height: 150px;
	}


	.nj-related-copy {
		padding:
			17px
			17px
			18px;
	}


	.nj-related-card h3 {
		font-size: 20px;
	}


	.nj-related-card p {
		display: none;
	}

}

/* ==========================================================
   RELATED ARTICLES – editorial refinement
   ========================================================== */

.nj-related-articles {
	position: relative;

	margin-top: 72px;
	padding: 42px 44px 46px;

	background:
		linear-gradient(
			135deg,
			rgba(127, 167, 139, .075),
			rgba(255, 255, 255, .34)
		);

	border: 1px solid rgba(46, 94, 78, .08);
	border-radius: 24px;
}


/* ==========================================================
   Header
   ========================================================== */

.nj-related-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;

	gap: 32px;

	margin-bottom: 28px;
}


.nj-related-header > div {
	min-width: 0;
}


.nj-related-header .nj-section-eyebrow {
	margin: 0 0 8px;

	color: #C89B3C;

	font-size: 10px;
	font-weight: 700;

	letter-spacing: .10em;
	text-transform: uppercase;
}


.nj-related-header h2 {
	position: relative;

	margin: 0;
	padding-top: 14px;

	color: #144637;

	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 34px;
	font-weight: 400;
	line-height: 1.1;
}


.nj-related-header h2::before {
	content: "";

	position: absolute;

	top: 0;
	left: 0;

	width: 34px;
	height: 2px;

	background: #C89B3C;

	border-radius: 999px;
}


/* "Minden útmutató" */
.nj-related-all {
	flex: 0 0 auto;

	display: inline-flex;
	align-items: center;

	padding: 7px 0;

	color: #2E5E4E;

	font-size: 12px;
	font-weight: 700;

	text-decoration: none;

	transition:
		color 180ms ease,
		transform 180ms ease;
}


.nj-related-all:hover {
	color: #144637;

	transform: translateX(3px);
}


/* ==========================================================
   Grid
   ========================================================== */

.nj-related-grid {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 16px;
}


/* 1 related article */
.nj-related-grid:has(.nj-related-card:only-child) {
	grid-template-columns:
		minmax(0, 520px);
}


/* 2 related articles */
.nj-related-grid:has(
	.nj-related-card:first-child:nth-last-child(2)
) {
	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	max-width: 850px;
}


/* ==========================================================
   Card
   ========================================================== */

.nj-related-card {
	display: flex;
	flex-direction: column;

	min-width: 0;

	overflow: hidden;

	background:
		rgba(255, 255, 255, .68);

	border: 1px solid rgba(46, 94, 78, .09);
	border-radius: 17px;

	box-shadow:
		0 8px 24px rgba(43, 43, 43, .025);

	transition:
		transform 200ms ease,
		box-shadow 200ms ease,
		border-color 200ms ease;
}


.nj-related-image {
	display: block;

	width: 100%;
	height: 180px;

	overflow: hidden;
}


.nj-related-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 500ms cubic-bezier(.22, 1, .36, 1);
}


.nj-related-copy {
	display: flex;
	flex: 1;
	flex-direction: column;

	padding: 20px 21px 22px;
}


.nj-related-category {
	margin-bottom: 9px;

	color: #C89B3C;

	font-size: 9px;
	font-weight: 700;

	letter-spacing: .09em;
	text-transform: uppercase;
}


.nj-related-card h3 {
	margin: 0 0 9px;

	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 23px;
	font-weight: 400;
	line-height: 1.15;
}


.nj-related-card h3 a {
	color: #144637;

	text-decoration: none;
}


.nj-related-card p {
	margin: 0 0 17px;

	color: rgba(43, 43, 43, .60);

	font-size: 12px;
	line-height: 1.55;
}


.nj-related-link {
	position: relative;

	align-self: flex-start;

	margin-top: auto;
	padding-bottom: 5px;

	color: #2E5E4E;

	font-size: 11px;
	font-weight: 700;

	text-decoration: none;
}


.nj-related-link::after {
	content: "";

	position: absolute;

	left: 0;
	bottom: 0;

	width: 24px;
	height: 1px;

	background: #C89B3C;

	transition: width 180ms ease;
}


@media (hover: hover) {

	.nj-related-card:hover {
		transform: translateY(-3px);

		border-color: rgba(46, 94, 78, .16);

		box-shadow:
			0 14px 34px rgba(43, 43, 43, .05);
	}


	.nj-related-card:hover .nj-related-image img {
		transform: scale(1.035);
	}


	.nj-related-card:hover .nj-related-link::after {
		width: 100%;
	}

}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 767px) {

	.nj-related-articles {
		margin-top: 56px;

		padding: 30px 20px 32px;

		border-radius: 20px;
	}


	.nj-related-header {
		align-items: flex-start;
		flex-direction: column;

		gap: 13px;

		margin-bottom: 22px;
	}


	.nj-related-header h2 {
		font-size: 29px;
	}


	.nj-related-grid,
	.nj-related-grid:has(.nj-related-card:only-child),
	.nj-related-grid:has(
		.nj-related-card:first-child:nth-last-child(2)
	) {
		grid-template-columns: 1fr;

		max-width: none;
	}


	.nj-related-card {
		display: grid;

		grid-template-columns:
			115px minmax(0, 1fr);
	}


	.nj-related-image {
		width: 115px;
		height: 100%;

		min-height: 150px;
	}


	.nj-related-copy {
		padding: 17px 17px 18px;
	}


	.nj-related-card h3 {
		font-size: 20px;
	}


	.nj-related-card p {
		display: none;
	}

}