/* ═══════════════════════════════════════════════════════
 *  التجاوب مع الشاشات
 *  المنهج: تصميم سطح المكتب أولاً ثم التبسيط للأصغر،
 *  مع نقاط توقّف مبنية على انكسار التخطيط الفعلي
 *  لا على مقاسات أجهزة بعينها.
 * ═══════════════════════════════════════════════════════ */

/* ─── شاشات كبيرة جداً ─── */
@media (min-width: 1440px) {
	:root { --hg-container: 1320px; }
}

/* ─── لابتوب ─── */
@media (max-width: 1199px) {
	:root { --hg-gutter: 20px; }

	.hg-nav__list a { padding: 10px 10px; font-size: .9rem; }
	.hg-header__inner { gap: 18px; }

	.hg-single__layout {
		grid-template-columns: minmax(0, 1fr) 290px;
		gap: 32px;
	}

	.hg-footer__main {
		grid-template-columns: 1.4fr repeat(3, 1fr);
		gap: 30px;
	}
}

/* ─── تابلت أفقي: القائمة تتحول لقائمة جانبية ─── */
@media (max-width: 991px) {
	:root { --hg-header-h: 68px; }

	/* إخفاء القائمة الأفقية وإظهار زر البرجر */
	.hg-nav { display: none; }
	.hg-burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* الشعار وأدوات الهيدر معاً كانا أعرض من الشاشة — نضغط المسافات */
	.hg-header__inner { gap: 12px; }
	.hg-header__tools {
		margin-inline-start: auto;
		gap: 6px;
		min-width: 0;
	}
	.hg-logo { min-width: 0; }
	.hg-logo img,
	.hg-logo .custom-logo { max-width: 140px; }

	/* الهيرو يصبح عمودياً */
	.hg-hero__inner {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	/* الزخارف تخف: الأشكال الصغيرة تزدحم مع النص على الشاشة الضيقة */
	.hg-hero__decor span:nth-child(2),
	.hg-hero__decor span:nth-child(3),
	.hg-hero__decor span:nth-child(4) { display: none; }

	.hg-hero__decor span:nth-child(1) {
		inset-block-start: -140px;
		inset-inline-start: -70px;
		width: 280px;
		height: 280px;
	}
	.hg-hero {
		text-align: center;
		padding-block: 44px 52px;
	}
	.hg-hero__text {
		margin-inline: auto;
	}
	.hg-hero__actions { justify-content: center; }

	/* width:100% ضروري — بدونه يتقلّص العنصر إلى صفر داخل الشبكة
	   لأن محتواه (شرائح مطلقة الموضع) بلا عرض جوهري */
	.hg-hero__media {
		order: -1;
		width: 100%;
		max-width: 520px;
		margin-inline: auto;
	}

	/* زر الدعوة موجود داخل قائمة الموبايل — وجوده في الهيدر يسبب تمريراً أفقياً */
	.hg-header__cta { display: none; }

	/* الشبكات */
	.hg-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.hg-grid--3 { grid-template-columns: repeat(2, 1fr); }

	/* ترويسة الصفحات الداخلية تصبح عمودية */
	.hg-pagehead--split .hg-pagehead__inner { grid-template-columns: 1fr; }
	.hg-pagehead { text-align: center; }
	.hg-pagehead__text { margin-inline: auto; }
	.hg-pagehead__media { max-width: 520px; margin-inline: auto; }

	/* الشريط الجانبي ينزل تحت المحتوى */
	.hg-single__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
	.hg-sidebar { position: static; }

	/* الفوتر */
	.hg-footer__main {
		grid-template-columns: repeat(2, 1fr);
		gap: 34px;
	}
	.hg-footer__brand { grid-column: 1 / -1; }

	.hg-newsletter__inner { gap: 20px; }
	.hg-newsletter__form { max-width: none; }

	/* الشريط العلوي: النص التسويقي يختفي، تبقى بيانات التواصل */
	.hg-topbar__text { display: none; }
}

/* ─── تابلت رأسي / موبايل كبير ─── */
@media (max-width: 767px) {
	:root {
		--hg-gutter: 16px;
		--hg-radius-lg: 14px;
	}

	body { font-size: 15px; }

	.hg-section { padding-block: 40px; }

	/* عمود واحد لكل الشبكات */
	.hg-grid--2,
	.hg-grid--3,
	.hg-grid--4 { grid-template-columns: 1fr; }
	.hg-grid { gap: 20px; }

	/* الشريط العلوي يختفي تماماً — مساحة الشاشة أثمن */
	.hg-topbar { display: none; }

	/* ─── الفوتر: عمود واحد متمركز ─── */
	.hg-footer__main {
		grid-template-columns: 1fr;
		gap: 32px;
		padding-block: 36px;
		text-align: center;
	}

	.hg-footer__brand { display: grid; justify-items: center; }
	.hg-footer__brand img { margin-inline: auto; }
	.hg-footer__desc {
		max-width: 46ch;
		margin-inline: auto;
	}

	.hg-social { justify-content: center; }

	/* الروابط وبيانات التواصل تتمركز ككتلة */
	.hg-footer__links,
	.hg-footer__contact {
		display: grid;
		justify-items: center;
	}

	/* الأيقونة والنص يبقيان متلاصقين ويتمركز السطر ككل */
	.hg-footer__contact li {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-align: start;
	}
	.hg-footer__contact .hg-icon { margin-top: 0; }

	.hg-footer__bottom {
		flex-direction: column;
		text-align: center;
		gap: 12px;
	}
	.hg-footer__nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 18px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hg-newsletter__inner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		gap: 18px;
	}
	.hg-newsletter__text { margin-inline: auto; max-width: 42ch; }
	.hg-newsletter__form { min-width: 0; }
	.hg-newsletter__msg { text-align: center; }

	/* المحتوى */
	.hg-content { font-size: .98rem; line-height: 1.85; }
	.hg-content h2 { font-size: 1.35rem; }
	.hg-content h3 { font-size: 1.15rem; }

	/* الجداول تُمرَّر أفقياً بدل كسر الصفحة */
	.hg-content table { display: block; overflow-x: auto; white-space: nowrap; }

	.hg-single__meta { gap: 8px 14px; font-size: .84rem; }

	/* الفلاتر تمرّر أفقياً بدل التكدّس */
	.hg-filters {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		padding-bottom: 8px;
		margin-inline: calc(var(--hg-gutter) * -1);
		padding-inline: var(--hg-gutter);
		scrollbar-width: none;
	}
	.hg-filters::-webkit-scrollbar { display: none; }
	.hg-filter { flex-shrink: 0; }

	/* الأزرار تملأ العرض داخل الهيرو */
	.hg-hero__actions { flex-direction: column; align-items: stretch; }
	.hg-hero__actions .hg-btn { width: 100%; }

	/* ─── السلايدر على الموبايل ─── */
	.hg-slider__track {
		/* نسبة أقرب للمربّع — الصور العريضة تصبح شريطاً رفيعاً على الشاشة الضيقة */
		aspect-ratio: 4 / 3;
	}

	/* أزرار التنقل تظهر دائماً — لا يوجد تحويم على اللمس */
	.hg-slider__nav {
		opacity: 1;
		width: 36px;
		height: 36px;
		background: rgba(255, 255, 255, .85);
	}
	.hg-slider__nav--prev { inset-inline-start: 8px; }
	.hg-slider__nav--next { inset-inline-end: 8px; }

	.hg-slide__caption {
		padding: 34px 18px 22px;
	}
	.hg-slide__title { font-size: 1.05rem; }
	.hg-slide__text {
		font-size: .85rem;
		-webkit-line-clamp: 2;
	}
	.hg-slide__caption .hg-btn {
		padding: 9px 18px;
		font-size: .82rem;
	}

	/* النقاط أكبر قليلاً ليسهل الضغط عليها */
	.hg-slider__dots { inset-block-end: 10px; }
	.hg-slider__dot { width: 8px; height: 8px; }
	.hg-slider__dot.is-active { width: 22px; }

	/* البحث */
	.hg-search { padding: 16px 0; }
	.hg-search__form { flex-direction: column; }
	.hg-search__form .hg-btn { width: 100%; }

	/* زر العودة لأعلى أصغر */
	.hg-totop {
		width: 42px;
		height: 42px;
		inset-block-end: 18px;
		inset-inline-end: 18px;
	}

	/* ترقيم الصفحات */
	.hg-pagination .page-numbers {
		min-width: 38px;
		height: 38px;
		font-size: .88rem;
	}
}

/* ─── موبايل صغير ─── */
@media (max-width: 479px) {
	:root { --hg-header-h: 62px; }

	.hg-logo img { height: 36px; }

	.hg-card__body,
	.hg-post__body { padding: 16px; }

	.hg-card__footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.hg-feature {
		flex-direction: column;
		align-items: flex-start;
		text-align: start;
		padding: 18px;
	}

	.hg-btn { padding: 12px 22px; font-size: .9rem; }
	.hg-btn--lg { padding: 14px 26px; font-size: .95rem; }

	.hg-iconbtn { width: 38px; height: 38px; }

	/* البحث متاح من داخل قائمة الموبايل — إخفاؤه هنا يوفّر عرضاً للشعار */
	.hg-header__tools [data-hg-search-toggle] { display: none; }
	.hg-lang__toggle { padding: 8px 10px; font-size: .8rem; }
	.hg-logo img,
	.hg-logo .custom-logo { max-width: 118px; }

	/* السلايدر: النص يختصر أكثر على الشاشة الصغيرة جداً */
	.hg-slider__track { aspect-ratio: 1 / 1; }
	.hg-slide__text { -webkit-line-clamp: 1; }
	.hg-slide__caption { padding: 30px 14px 20px; }

	.hg-toc { padding: 16px 18px; }

	.hg-share { gap: 8px; }
	.hg-share a { width: 36px; height: 36px; }
}

/* ═══════════════════════════════════════════════════════
 *  أهداف اللمس: 44 بكسل كحد أدنى على الأجهزة اللمسية
 *  (توصية إرشادات الوصولية — يمنع الضغط الخاطئ)
 * ═══════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
	.hg-nav__list a,
	.hg-mobile__list a,
	.hg-footer__links a,
	.hg-lang__item {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.hg-iconbtn,
	.hg-burger {
		min-width: 44px;
		min-height: 44px;
	}

	/* تأثيرات التحويم لا معنى لها باللمس — تُلغى لتجنّب الحالات العالقة */
	.hg-card:hover,
	.hg-post:hover,
	.hg-cat:hover,
	.hg-feature:hover { transform: none; }

	.hg-card:hover .hg-card__media img,
	.hg-post:hover .hg-post__media img { transform: none; }
}

/* ═══════════════════════════════════════════════════════
 *  الشاشات القصيرة (موبايل أفقي)
 * ═══════════════════════════════════════════════════════ */
@media (max-height: 480px) and (orientation: landscape) {
	.hg-hero { padding-block: 28px; }
	.hg-mobile__body { padding-bottom: 40px; }
}