/* Hero News Slider 1.2.0 */

.hns {
	--hns-accent: #b3121b;
	--hns-h: 520px;
	--hns-hm: 300px;
	--hns-tw: 190px;
	--hns-tb: 2px;
	--hns-tbg: rgba(0, 0, 0, 0.55);
	--hns-vis: 4;
	--hns-vis-m: 3.4;
	--hns-ms: 6000ms;
	--hns-gap: 8px;
	position: relative;
	display: grid;
	grid-template-columns: var(--hns-tw) minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	gap: var(--hns-gap);
	height: var(--hns-h);
	margin: 0 0 24px;
	color: #fff;
	line-height: 1.5;
	-webkit-tap-highlight-color: transparent;
}

.hns *,
.hns *::before,
.hns *::after {
	box-sizing: border-box;
}

.hns--nothumbs {
	grid-template-columns: minmax(0, 1fr);
}

.hns--end {
	grid-template-columns: minmax(0, 1fr) var(--hns-tw);
}

.hns--end .hns__thumbs {
	order: 2;
}

.hns-note {
	padding: 10px 14px;
	border: 1px dashed #c3c4c7;
	border-radius: 6px;
	background: #fff8e5;
	color: #1d2327;
	font-size: 14px;
}

/* ---------- المصغرات ---------- */

.hns__thumbs {
	display: flex;
	flex-direction: column;
	gap: var(--hns-gap);
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: none;
}

.hns__thumbs::-webkit-scrollbar {
	display: none;
}

.hns__thumb {
	position: relative;
	flex: 0 0 calc((100% - (var(--hns-vis) - 1) * var(--hns-gap)) / var(--hns-vis));
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	overflow: hidden;
	background: #1b1b1b;
	color: #fff;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.25s ease;
}

.hns__thumb:hover,
.hns__thumb:focus-visible,
.hns__thumb.is-active {
	opacity: 1;
}

.hns__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	border: var(--hns-tb) solid transparent;
	border-radius: 6px;
	pointer-events: none;
	transition: border-color 0.25s ease;
}

.hns__thumb.is-active::after {
	border-color: var(--hns-accent);
}

.hns__thumb:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

.hns__timg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hns__ttl {
	position: absolute;
	inset: auto 0 0 0;
	display: block;
	padding: 22px 9px 10px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
	font-size: 12px;
	font-weight: 700;
	line-height: 1.55;
	text-align: start;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.hns__ttl span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hns__thumb:hover .hns__ttl,
.hns__thumb:focus-visible .hns__ttl,
.hns__thumb.is-active .hns__ttl {
	opacity: 1;
	transform: none;
}

/* شريط التقدّم على المصغّرة النشطة: يملأ خلال مدة بقاء الخبر */
.hns__bar {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 3px;
	background: var(--hns-accent);
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}

.hns--rtl .hns__bar,
.hns--rtl .hns__progress {
	transform-origin: right center;
}

.hns__thumb.is-active .hns__bar {
	animation: hns-bar var(--hns-ms) linear forwards;
}

/* ---------- المسرح والشرائح ---------- */

.hns__stage {
	position: relative;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	border-radius: 6px;
	background: #111;
	touch-action: pan-y;
}

.hns__slide {
	position: absolute;
	inset: 0;
	visibility: hidden;
	opacity: 0;
}

.hns__slide.is-active {
	z-index: 2;
	visibility: visible;
	opacity: 1;
	transition: opacity 0.9s ease;
}

.hns__slide.is-leaving {
	z-index: 1;
	visibility: visible;
	opacity: 1;
}

.hns__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
}

.hns__noimg {
	background: linear-gradient(135deg, #262626 0%, var(--hns-accent) 160%);
}

/* تقريب بطيء جداً: تنوّع نقطة الارتكاز لتختلف حركة كل صورة */
.hns--kb .hns__slide.is-active .hns__img,
.hns--kb .hns__slide.is-leaving .hns__img {
	animation: hns-kb calc(var(--hns-ms) + 1.4s) linear forwards;
}

.hns--kb .hns__slide:nth-child(3n + 2) .hns__img {
	transform-origin: 30% 65%;
}

.hns--kb .hns__slide:nth-child(3n + 3) .hns__img {
	transform-origin: 70% 40%;
}

.hns__shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.5) 34%, rgba(0, 0, 0, 0) 68%);
	pointer-events: none;
}

.hns__cover {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* ---------- الوسوم العلوية ---------- */

.hns__tags {
	position: absolute;
	top: 16px;
	inset-inline-start: 16px;
	z-index: 4;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hns__cat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	border-radius: 4px;
	background: rgba(10, 10, 10, 0.62);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
}

.hns__cat::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c, var(--hns-accent));
}

.hns__cat:hover,
.hns__cat:focus-visible {
	background: rgba(10, 10, 10, 0.85);
	color: #fff;
}

.hns__new {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px;
	border-radius: 4px;
	background: var(--hns-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
}

.hns__new::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
	animation: hns-pulse 1.8s ease-in-out infinite;
}

/* ---------- النص ---------- */

.hns__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 0 30px 32px;
	padding-inline-end: 150px;
	pointer-events: none;
}

.hns__title {
	max-width: 900px;
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: var(--hns-ts, 26px);
	font-weight: 800;
	line-height: 1.6;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

/* ----- محاذاة العنوان ----- */

.hns--t-center .hns__body,
.hns--t-end .hns__body {
	padding-inline-end: 30px;
}

.hns--t-center .hns__body {
	align-items: center;
	text-align: center;
}

.hns--t-end .hns__body {
	align-items: flex-end;
	text-align: end;
}

/* عند المحاذاة غير الافتراضية ينتقل العدّاد وزر الإيقاف للأعلى حتى لا يزاحم العنوان */
.hns--t-center .hns__ctl,
.hns--t-end .hns__ctl {
	top: 16px;
	bottom: auto;
}

/* ----- خلفية العنوان الشفافة (على العنوان فقط) ----- */

.hns--tbg .hns__title {
	width: fit-content;
	max-width: 100%;
	padding: 8px 20px;
	border-radius: 6px;
	background: var(--hns-tbg);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.hns--tbg.hns--tfull .hns__title {
	width: 100%;
	max-width: 100%;
}

.hns--tbg.hns--tfull .hns__body {
	align-items: stretch;
}

/* خط التمييز: على جهة البداية، وأسفل الصندوق عند التوسيط */
.hns--tacc.hns--t-start .hns__title {
	border-inline-start: 4px solid var(--hns-accent);
}

.hns--tacc.hns--t-end .hns__title {
	border-inline-end: 4px solid var(--hns-accent);
}

.hns--tacc.hns--t-center .hns__title {
	border-bottom: 3px solid var(--hns-accent);
}

.hns__title a {
	color: inherit;
	text-decoration: none;
	pointer-events: auto;
}

/* اختصار بنقاط بدل قص السطر: على الرابط الداخلي (بلا حشوة) حتى لا يظهر جزء من السطر التالي */
.hns__title a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--hns-lines, 3);
	line-clamp: var(--hns-lines, 3);
	overflow: hidden;
}

.hns__title a:hover,
.hns__title a:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--hns-accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 9px;
}

.hns__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 760px;
	margin: 0;
	color: rgba(255, 255, 255, 0.86);
	font-size: 15px;
	line-height: 1.8;
}

.hns__meta {
	color: rgba(255, 255, 255, 0.78);
	font-size: 13px;
}

/* ---------- التحكم ---------- */

.hns__nav {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: -22px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.25s ease, background 0.25s ease;
}

.hns__nav--prev {
	inset-inline-start: 14px;
}

.hns__nav--next {
	inset-inline-end: 14px;
}

.hns--rtl .hns__nav svg {
	transform: scaleX(-1);
}

.hns:hover .hns__nav,
.hns__nav:focus-visible {
	opacity: 1;
}

.hns__nav:hover,
.hns__nav:focus-visible {
	background: var(--hns-accent);
}

.hns__ctl {
	position: absolute;
	bottom: 20px;
	inset-inline-end: 18px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 6px 4px 14px;
	padding-inline: 14px 6px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	font-size: 13px;
	font-weight: 600;
}

.hns__count b {
	font-weight: 800;
}

.hns__play {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease;
}

.hns__play:hover,
.hns__play:focus-visible {
	background: var(--hns-accent);
}

.hns__play .hns__ico-play,
.hns__play[aria-pressed="true"] .hns__ico-pause {
	display: none;
}

.hns__play[aria-pressed="true"] .hns__ico-play {
	display: block;
}

.hns__nav:focus-visible,
.hns__play:focus-visible,
.hns__cat:focus-visible,
.hns__title a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* خط التقدّم على المسرح: يظهر فقط عند إخفاء المصغرات، ويتحكم دائماً بموعد الانتقال */
.hns__progress {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 4;
	height: 3px;
	background: var(--hns-accent);
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}

.hns--nothumbs .hns__progress {
	opacity: 1;
}

.hns__slide.is-leaving .hns__progress {
	opacity: 0;
}

.hns__slide.is-active .hns__progress {
	animation: hns-progress var(--hns-ms) linear forwards;
}

.hns--noauto .hns__progress,
.hns--noauto .hns__bar {
	animation: none !important;
	display: none;
}

/* إيقاف مؤقت: مرور الماوس، اللمس، تبويب مخفي، السلايدر خارج الشاشة، أو زر الإيقاف */
.hns.is-paused .hns__progress,
.hns.is-paused .hns__bar,
.hns.is-paused .hns__img {
	animation-play-state: paused;
}

/* ---------- حركة الانتقال ---------- */

.hns--wipe .hns__slide.is-active {
	transition: none;
}

.hns__slide.is-entering .hns__title,
.hns__slide.is-entering .hns__excerpt,
.hns__slide.is-entering .hns__meta,
.hns__slide.is-entering .hns__tags {
	animation: hns-rise 0.7s 0.18s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hns--wipe .hns__slide.is-entering {
	animation: hns-wipe-ltr 0.85s cubic-bezier(0.7, 0, 0.2, 1) both;
}

.hns--wipe.hns--rtl .hns__slide.is-entering {
	animation-name: hns-wipe-rtl;
}

/* طريقة ظهور العنوان */
.hns--a-none .hns__slide.is-entering .hns__title,
.hns--a-none .hns__slide.is-entering .hns__excerpt,
.hns--a-none .hns__slide.is-entering .hns__meta,
.hns--a-none .hns__slide.is-entering .hns__tags {
	animation: none;
}

.hns--a-fade .hns__slide.is-entering .hns__title,
.hns--a-fade .hns__slide.is-entering .hns__excerpt,
.hns--a-fade .hns__slide.is-entering .hns__meta,
.hns--a-fade .hns__slide.is-entering .hns__tags {
	animation-name: hns-fadein;
}

@keyframes hns-fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes hns-bar {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes hns-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes hns-kb {
	from { transform: scale(1); }
	to { transform: scale(1.09); }
}

@keyframes hns-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

@keyframes hns-wipe-ltr {
	from { clip-path: inset(0 0 0 100%); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes hns-wipe-rtl {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes hns-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(0.7); }
}

/* ---------- الموبايل ---------- */

@media (max-width: 768px) {
	.hns,
	.hns.hns--end {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		height: auto;
	}

	.hns__stage {
		order: 1;
		height: var(--hns-hm);
	}

	.hns__thumbs,
	.hns--end .hns__thumbs {
		order: 2;
		flex-direction: row;
		height: 70px;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.hns__thumb {
		flex: 0 0 calc((100% - (var(--hns-vis-m) - 1) * var(--hns-gap)) / var(--hns-vis-m));
	}

	.hns__ttl {
		display: none;
	}

	.hns .hns__body {
		padding: 0 16px 18px;
		gap: 6px;
	}

	.hns__title {
		font-size: var(--hns-tsm, 17px);
		line-height: 1.55;
	}

	.hns--tbg .hns__title {
		padding: 6px 14px;
	}

	.hns__excerpt {
		display: none;
	}

	.hns__tags {
		top: 12px;
		inset-inline-start: 12px;
	}

	.hns .hns__ctl {
		top: 12px;
		bottom: auto;
		inset-inline-end: 12px;
	}

	.hns__count {
		display: none;
	}

	.hns__ctl:not(:has(.hns__play)) {
		display: none;
	}
}

@media (hover: none) {
	.hns__nav {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hns__img,
	.hns__new::before,
	.hns__slide.is-entering,
	.hns__slide.is-entering .hns__title,
	.hns__slide.is-entering .hns__excerpt,
	.hns__slide.is-entering .hns__meta,
	.hns__slide.is-entering .hns__tags {
		animation: none !important;
	}

	.hns__slide.is-active {
		transition: none;
	}
}