/*
 * services-page.css — تصميم صفحة الخدمات (أقسام الفئات بعد الهيرو).
 *
 * يُحمَّل فقط على صفحة الخدمات، وكل محدداته مقيَّدة بصنف
 * .page-services-hub الذي يضيفه القالب إلى <body> (inc/service-hub-enhancements.php).
 * لا يمسّ الهيدر ولا الفوتر ولا الهيرو (.fa-page-hero).
 *
 * بنية المحتوى (لا تتغيّر — محتوى Gutenberg محفوظ):
 *   section.section[.section--ivory]
 *     ├ .category-head  (صورة أيقونة + H2 — الأيقونة بجانب العنوان)
 *     ├ p.section__lead
 *     └ .services-grid > .service-card (h3 + p + p.service-card__more > a)
 *
 * التصميم: خلفية دافئة موحّدة لكل الصفحة، بطاقات بيضاء بحدّ ناعم وزوايا
 * دائرية كبيرة وظلّ خفيف، وأيقونة بجانب عنوان كل فئة. جوال = عمود، لوحي = عمودان،
 * سطح المكتب = ثلاثة أعمدة. خصائص منطقية، بلا جافاسكربت.
 */

.page-services-hub {
	--svc-bg: #faf7f2;
	--svc-card: #ffffff;
	--svc-line: #e7e1d6;
	--svc-ink: #0e1a2b;
	--svc-text: #161b22;
	--svc-muted: var(--svc-text);
	--svc-bronze: #8a6a2f;
	--svc-shadow-soft: 0 1px 2px rgb(14 26 43 / 0.04), 0 8px 24px -12px rgb(14 26 43 / 0.12);
	--svc-shadow-lifted: 0 1px 2px rgb(14 26 43 / 0.05), 0 18px 36px -14px rgb(14 26 43 / 0.2);
}

/* ---------- خلفية الصفحة ---------- */

.page-services-hub .site-main {
	padding-block-start: 0;
	background-color: var(--svc-bg);
}

/* ---------- القسم ---------- */

.page-services-hub .entry-content > .section {
	position: relative;
	display: block;
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
	padding-inline: max(var(--gutter), calc((100% - var(--wide)) / 2));
	background-color: transparent;
}

/* !important: ووردبريس يتوسّط أبناء المجموعات المقيّدة بـ margin:auto !important */
.page-services-hub .entry-content > .section > * {
	max-inline-size: none;
	margin-inline: 0 !important;
}

/* فقرات فارغة تركها المحرر داخل المحتوى */
.page-services-hub .entry-content p:empty {
	display: none;
}

/* ---------- ترويسة الفئة (بلا أيقونة) ---------- */

.page-services-hub .category-head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
}

.page-services-hub .category-head > .wp-block-image {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	margin: 0;
	background-color: var(--svc-card);
	border: var(--border-thin) solid var(--svc-line);
	border-radius: 1rem;
	box-shadow: var(--svc-shadow-soft);
}

.page-services-hub .category-head > .wp-block-image img {
	display: block;
	inline-size: 2rem;
	block-size: 2rem;
	object-fit: contain;
}

.page-services-hub .category-head h2 {
	margin: 0;
	font-size: clamp(1.5rem, 2.6vw, 1.875rem);
	line-height: 1.35;
	font-weight: 800;
	color: var(--svc-ink);
}

.page-services-hub .category-head h2::after {
	content: "";
	display: block;
	inline-size: 3.5rem;
	block-size: 2px;
	margin-block-start: 0.625rem;
	background-image: linear-gradient(to left, var(--svc-bronze), transparent);
	border-radius: 2px;
}

/* ---------- نص التعريف بالفئة ---------- */

.page-services-hub .section__lead {
	max-inline-size: 68ch;
	margin-block: 1.25rem 0;
	text-align: start;
	font-size: 1rem;
	line-height: 2;
	color: var(--svc-muted);
}

/* ---------- شبكة البطاقات ---------- */

.page-services-hub .services-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	align-items: stretch;
	align-content: start;
	margin-block-start: 2rem;
}

@media (min-width: 40em) {
	.page-services-hub .services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.page-services-hub .services-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- البطاقة ---------- */

.page-services-hub .service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	min-inline-size: 0;
	min-block-size: 11.5rem;
	padding: 1.875rem 1.75rem;
	background-color: var(--svc-card);
	border: var(--border-thin) solid var(--svc-line);
	border-radius: 22px;
	box-shadow: var(--svc-shadow-soft);
	transition: box-shadow var(--transition);
}

.page-services-hub .service-card:hover,
.page-services-hub .service-card:focus-within {
	border-color: var(--svc-line);
	box-shadow: var(--svc-shadow-lifted);
}

.page-services-hub .service-card h3 {
	min-block-size: 0;
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.4;
	font-weight: 700;
	color: var(--svc-ink);
}

.page-services-hub .service-card p {
	min-block-size: 0;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--svc-muted);
}

.page-services-hub .service-card h3 + p {
	margin-block-start: 0.5rem;
}

/* ---------- رابط «تفاصيل الخدمة» ---------- */

.page-services-hub .services-grid > .service-card > .service-card__more {
	margin-block: auto 0;
	padding-block: 1.25rem 0;
}

.page-services-hub .service-card__more:not(:has(a)) {
	display: none;
}

.page-services-hub .service-card__more a {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	min-block-size: 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--svc-bronze);
	text-decoration: none;
}

/* الرابط يغطي البطاقة كاملة كهدف نقر واحد */
.page-services-hub .service-card__more a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* سهم صغير بنفس لون الرابط */
.page-services-hub .service-card__more a::after {
	content: "";
	flex: none;
	inline-size: 1rem;
	block-size: 1rem;
	background-color: currentcolor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15 18-6-6 6-6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15 18-6-6 6-6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

[dir="ltr"] .page-services-hub .service-card__more a::after {
	transform: scaleX(-1);
}

.page-services-hub .service-card__more a:hover {
	text-decoration: none;
}

.page-services-hub .service-card__more a:focus-visible::before {
	outline: 3px solid var(--svc-ink);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.page-services-hub .service-card {
		transition: none;
	}
}