/* ------------------------------------------------------------------
   Single post — related news slider (nk-rel)
   Loaded after style.css / goji-react.css, so it wins on equal weight.
------------------------------------------------------------------ */

.related-news.nk-rel{
	width:100%;
	float:left;
	margin-top:38px;
	padding:14px;
	background:#ffffff;
	border:1px solid #e6eee9;
	border-radius:16px;
	box-shadow:0 2px 14px rgba(13,64,42,.05);
	box-sizing:border-box;
}

/* ---------------------------------------------------------- head bar */
.nk-rel .nk-rel__head{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	min-height:66px;
	padding:10px 16px 10px 20px;
	border-radius:12px;
	overflow:hidden;
	background:#078954;
	background-image:linear-gradient(100deg,#0d9a5e 0%,#078954 46%,#05663f 100%);
}

.nk-rel .nk-rel__title{
	position:relative;
	z-index:2;
	display:flex;
	align-items:center;
	gap:14px;
	min-width:0;
	padding:0;
	border:0;
	text-decoration:none;
}
.nk-rel .nk-rel__title:before{
	content:"";
	flex:0 0 auto;
	width:5px;
	height:28px;
	border-radius:3px;
	background:#c90002;
}
.nk-rel .nk-rel__title span{
	display:block;
	min-width:0;
	color:#ffffff;
	font-size:23px;
	font-weight:700;
	line-height:1.35;
	letter-spacing:.2px;
	text-shadow:0 1px 2px rgba(0,0,0,.14);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.nk-rel .nk-rel__title:hover span{
	color:#eafff3;
}

/* mountain + stupa line art, purely decorative */
.nk-rel .nk-rel__art{
	position:absolute;
	right:112px;
	bottom:0;
	z-index:1;
	width:300px;
	height:100%;
	fill:none;
	stroke:#ffffff;
	stroke-width:1.6;
	stroke-linejoin:round;
	stroke-linecap:round;
	opacity:.3;
	pointer-events:none;
}

/* --------------------------------------------------------- arrows */
.nk-rel .nk-rel__nav{
	position:relative;
	z-index:2;
	display:flex;
	align-items:center;
	gap:10px;
	flex:0 0 auto;
}
.nk-rel .nk-rel__btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:44px;
	height:44px;
	padding:0;
	margin:0;
	border:0;
	border-radius:50%;
	cursor:pointer;
	line-height:0;
	-webkit-appearance:none;
	appearance:none;
	transition:background .18s ease,transform .18s ease,opacity .18s ease;
}
.nk-rel .nk-rel__btn svg{
	width:19px;
	height:19px;
	fill:none;
	stroke-width:2.4;
	stroke-linecap:round;
	stroke-linejoin:round;
}
.nk-rel .nk-rel__btn--prev{
	background:rgba(255,255,255,.34);
}
.nk-rel .nk-rel__btn--prev svg{
	stroke:#064a30;
}
.nk-rel .nk-rel__btn--next{
	background:#ffffff;
	box-shadow:0 2px 8px rgba(0,0,0,.14);
}
.nk-rel .nk-rel__btn--next svg{
	stroke:#07794b;
}
.nk-rel .nk-rel__btn:hover{
	transform:translateY(-1px);
}
.nk-rel .nk-rel__btn--prev:hover{
	background:rgba(255,255,255,.52);
}
.nk-rel .nk-rel__btn[disabled]{
	opacity:.42;
	cursor:default;
	transform:none;
}
.nk-rel.is-static .nk-rel__nav{
	display:none;
}

/* ---------------------------------------------------------- track */
.nk-rel .nk-rel__viewport{
	position:relative;
	width:100%;
	float:left;
}
.nk-rel .nk-rel__track{
	--nk-rel-cols:4;
	--nk-rel-gap:18px;
	display:flex;
	flex-wrap:nowrap;
	align-items:stretch;
	gap:var(--nk-rel-gap);
	padding:18px 4px 8px;
	margin:0;
	overflow-x:auto;
	overflow-y:hidden;
	scroll-snap-type:x proximity;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
	-ms-overflow-style:none;
}
.nk-rel .nk-rel__track::-webkit-scrollbar{
	width:0;
	height:0;
	display:none;
}

/* ---------------------------------------------------------- card */
.nk-rel .nk-rel__card{
	flex:0 0 calc((100% - (var(--nk-rel-cols) - 1) * var(--nk-rel-gap)) / var(--nk-rel-cols));
	min-width:0;
	display:flex;
	flex-direction:column;
	scroll-snap-align:start;
	background:#ffffff;
	border:1px solid #ecf1ee;
	border-radius:12px;
	overflow:hidden;
	box-shadow:0 2px 10px rgba(16,48,32,.07);
	transition:transform .2s ease,box-shadow .2s ease;
}
.nk-rel .nk-rel__card:hover{
	transform:translateY(-3px);
	box-shadow:0 10px 22px rgba(16,48,32,.14);
}

.nk-rel .nk-rel__media{
	position:relative;
	display:block;
	width:100%;
	padding:0;
	border:0;
	line-height:0;
	background:#eef3f0;
	overflow:hidden;
}
.nk-rel .nk-rel__media img{
	display:block;
	width:100%;
	height:168px;
	min-height:0;
	max-width:100%;
	margin:0;
	object-fit:cover;
	transition:transform .35s ease;
}
.nk-rel .nk-rel__card:hover .nk-rel__media img{
	transform:scale(1.04);
}
.nk-rel .nk-rel__cat{
	position:absolute;
	top:10px;
	left:10px;
	z-index:2;
	display:inline-block;
	padding:3px 11px;
	border-radius:4px;
	background:#c90002;
	color:#ffffff;
	font-size:12px;
	font-weight:600;
	line-height:1.7;
	letter-spacing:.2px;
	white-space:nowrap;
	max-width:calc(100% - 20px);
	overflow:hidden;
	text-overflow:ellipsis;
}

.nk-rel .nk-rel__link{
	display:block;
	flex:1 1 auto;
	padding:13px 14px 0;
	border:0;
	text-decoration:none;
}
.nk-rel .nk-rel__link h3{
	margin:0;
	padding:0;
	color:#17251e;
	font-size:17px;
	font-weight:700;
	line-height:1.6;
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.nk-rel .nk-rel__link:hover h3{
	color:#07794b;
}

.nk-rel .nk-rel__time{
	display:flex;
	align-items:center;
	gap:7px;
	padding:11px 14px 14px;
	color:#7b8a84;
	font-size:13.5px;
	line-height:1.5;
}
.nk-rel .nk-rel__time svg{
	flex:0 0 auto;
	width:15px;
	height:15px;
	fill:none;
	stroke:#7b8a84;
	stroke-width:1.8;
	stroke-linecap:round;
}

/* ---------------------------------------------------------- sizes */
@media (max-width:1199px){
	.nk-rel .nk-rel__track{--nk-rel-cols:3;}
	.nk-rel .nk-rel__media img{height:152px;}
}
@media (max-width:991px){
	.nk-rel .nk-rel__track{--nk-rel-cols:2;}
	.nk-rel .nk-rel__title span{font-size:20px;}
	.nk-rel .nk-rel__art{right:104px;width:220px;}
}
@media (max-width:767px){
	.related-news.nk-rel{margin-top:26px;padding:10px;border-radius:12px;}
	.nk-rel .nk-rel__head{min-height:58px;padding:9px 12px 9px 14px;}
	.nk-rel .nk-rel__title span{font-size:17px;white-space:normal;}
	.nk-rel .nk-rel__title:before{height:24px;width:4px;}
	.nk-rel .nk-rel__art{display:none;}
	.nk-rel .nk-rel__btn{width:38px;height:38px;}
	.nk-rel .nk-rel__btn svg{width:16px;height:16px;}
	.nk-rel .nk-rel__track{--nk-rel-cols:1.18;--nk-rel-gap:14px;padding:14px 2px 6px;}
	.nk-rel .nk-rel__media img{height:188px;}
	.nk-rel .nk-rel__link h3{font-size:16px;}
}