/*
 * service-landing-page.css — تصميم صفحات الخدمة الفردية.
 *
 * يُحمَّل فقط على الصفحات التي تستخدم قالب «صفحة خدمة فردية» (service-landing)،
 * وكل محدداته مقيَّدة بصنف .page-service-landing الذي يضيفه القالب إلى <body>
 * (inc/service-landing-enhancements.php). لا يمسّ الهيدر ولا الفوتر، ولا يؤثر
 * على الرئيسية أو بقية الصفحات التي تشترك في أصناف البطاقات والخطوات.
 *
 * بنية المحتوى (محتوى Gutenberg محفوظ — لا يتغيّر):
 *   .section--hero.hero               الواجهة (eyebrow + H1 + وصف + أزرار)
 *   .section > h2 + p + .cards-3      كروت الخدمات (.service-card)
 *   .section > h2 + p                 قسم نصي
 *   .section > h2 + .process-grid     خطوات العمل (.process-step)
 *   .section > h2 + .why-grid         لماذا المكتب (.why-card)
 *   .section > h2 + .faq-list         الأسئلة الشائعة (details)
 *   .section.final-cta > .final-cta-panel   الدعوة الختامية
 *
 * جوال أولًا، خصائص منطقية، بلا جافاسكربت.
 */

.page-service-landing {
	--sl-card: #ffffff;
	--sl-line: #e7e1d6;
	--sl-ink: #0e1a2b;
	--sl-text: #161b22; /* لون نص موحّد أسود تقريبًا لكل الفقرات */
	--sl-muted: var(--sl-text);
	--sl-bronze: #8a6a2f;
	--sl-gold: var(--c-gold);
	--sl-navy: var(--c-navy);
	--sl-shadow-soft: 0 1px 2px rgb(14 26 43 / 0.04), 0 8px 24px -12px rgb(14 26 43 / 0.12);
	--sl-shadow-lifted: 0 1px 2px rgb(14 26 43 / 0.05), 0 18px 36px -14px rgb(14 26 43 / 0.2);
	--sl-inline: max(var(--gutter), calc((100% - var(--wide)) / 2));
}

/* ======================================================================
 * 1) إيقاع الأقسام والخلفيات
 *    لا نكتب هنا أي لون خلفية للأقسام: صنف .section يبقى أبيض
 *    و.section--ivory يبقى بيج (العاجي) كما هو معرَّف في patterns.css
 *    ويمكن تغييرهما أو تجاوزهما من محرر المكوّنات.
 * ====================================================================== */

.page-service-landing .entry-content > .section {
	position: relative;
	padding-block: clamp(2.75rem, 6vw, 4.75rem);
	padding-inline: var(--sl-inline);
}

/*
 * كل أبناء القسم يمتدون على عرض الحاوية نفسها ويبدؤون من بداية السطر.
 * !important على الهامش لأن ووردبريس يطبّق على أبناء المجموعات المقيّدة
 * (is-layout-constrained) margin:auto !important فيتوسّط كل ابن بعرض 720px.
 */
.page-service-landing .entry-content > .section > * {
	max-inline-size: none;
	margin-inline: 0 !important;
}

/* فقرات وقوائم القسم: عرض قراءة مريح، تبدأ من بداية السطر */
.page-service-landing .entry-content > .section > :is(p, ul, ol) {
	max-inline-size: 72ch;
	text-align: start;
}

/*
 * التحكم بمحاذاة الفقرة من المحرر: حدّد الفقرة ← «محاذاة النص» ← وسط.
 * الافتراضي (بدون محاذاة) = من بداية السطر (اليمين). عند اختيار «وسط» تتوسّط
 * الكتلة والنص معًا.
 * القوائم (ul/ol): الصنف list-center من «متقدم» يوسّطها.
 */
.page-service-landing .entry-content > .section > p.has-text-align-center {
	margin-inline: auto !important;
	text-align: center !important;
}

/*
 * القوائم (ul/ol): تبدأ من بداية السطر (اليمين) افتراضيًا، وكل البنود من نقطة
 * بداية واحدة (النقطة/الرقم خارج النص). للتوسيط: حدّد القائمة ← متقدم ← صنف CSS
 * إضافي ← اكتب list-center: تتوسّط الكتلة وتبقى البنود من نقطة بداية واحدة.
 */
.page-service-landing .entry-content > .section > :is(ul, ol) {
	margin-block: 1rem 0;
	padding-inline: 1.5rem 0;
	list-style-position: outside;
	text-align: start;
	font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
	line-height: 2.05;
	color: var(--sl-text);
}

.page-service-landing .entry-content > .section > :is(ul, ol) > li {
	margin-block: 0;
	padding-block: 0.125rem;
	text-align: inherit;
}

/* قائمة متوسطة: الكتلة في منتصف الصفحة، لكن كل البنود تبدأ من نفس نقطة البداية */
.page-service-landing .entry-content > .section > :is(ul, ol):is(.list-center, .has-text-align-center) {
	inline-size: fit-content;
	max-inline-size: min(72ch, 100%);
	margin-inline: auto !important;
	text-align: start;
}

.page-service-landing .entry-content p:empty {
	display: none;
}

/* ======================================================================
 * 2) عناوين الأقسام: كلها من بداية السطر مع خط برونزي رفيع
 * ====================================================================== */

.page-service-landing .entry-content > .section:not(.section--hero):not(.final-cta) > h2 {
	margin: 0;
	text-align: center;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.35;
	font-weight: 800;
	color: var(--sl-ink);
}

.page-service-landing .entry-content > .section:not(.section--hero):not(.final-cta) > h2::after {
	content: "";
	display: block;
	inline-size: 3.5rem;
	block-size: 2px;
	margin-block-start: 0.75rem;
	margin-inline: auto;
	background-image: linear-gradient(to right, transparent, var(--sl-bronze), transparent);
	border-radius: 2px;
}

/* الفقرة التمهيدية تحت العنوان */
.page-service-landing .entry-content > .section > h2 + p {
	max-inline-size: 68ch;
	margin-block: 1.125rem 0;
	text-align: start;
	font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
	line-height: 2.05;
	color: var(--sl-text);
}

/* مسافة بين رأس القسم ومحتواه */
.page-service-landing .entry-content > .section > :is(.cards-3, .process-grid, .why-grid, .faq-list) {
	margin-block-start: 2rem;
}

/* ======================================================================
 * 3) الواجهة (Hero)
 * ====================================================================== */

.page-service-landing .section--hero.hero {
	overflow: hidden;
	padding-block: clamp(3rem, 7vw, 5.5rem);
	background:
		radial-gradient(60% 90% at 0 100%, rgb(201 162 39 / 0.14), transparent 62%),
		radial-gradient(50% 70% at 100% 0, rgb(14 34 53 / 0.05), transparent 60%),
		var(--c-ivory);
	border-block-end: var(--border-thin) solid var(--sl-line);
}

/* حلقات زخرفية هادئة في جهة الفراغ */
.page-service-landing .section--hero.hero::after {
	content: "";
	position: absolute;
	inset-block: 50% auto;
	inset-inline-end: auto;
	inset-inline-start: -8rem;
	inline-size: 26rem;
	block-size: 26rem;
	margin-block-start: -13rem;
	border-radius: 50%;
	background:
		radial-gradient(circle, transparent 58%, rgb(201 162 39 / 0.18) 58.4%, transparent 59.2%),
		radial-gradient(circle, transparent 72%, rgb(201 162 39 / 0.12) 72.4%, transparent 73.2%),
		radial-gradient(circle, transparent 86%, rgb(201 162 39 / 0.08) 86.4%, transparent 87.2%);
	pointer-events: none;
}

.page-service-landing .section--hero .wp-block-columns {
	position: relative;
	z-index: 1;
	max-inline-size: none;
	margin: 0;
}

.page-service-landing .section--hero .wp-block-column {
	flex-basis: 100% !important;
	max-inline-size: 50rem;
}

.page-service-landing .section--hero .eyebrow {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0.3rem 0.875rem;
	background-color: rgb(201 162 39 / 0.14);
	border-radius: var(--radius-pill);
	color: var(--sl-bronze);
	font-size: 0.875rem;
	font-weight: 700;
}

.page-service-landing .section--hero h1 {
	max-inline-size: none;
	margin-block: 0 0.5em;
	font-size: clamp(2rem, 4.6vw, 3.25rem);
	line-height: 1.25;
	font-weight: 800;
	color: var(--sl-ink);
}

.page-service-landing .section--hero .hero__desc {
	max-inline-size: 46rem;
	margin-block: 0 1.75rem;
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	line-height: 2;
	color: var(--sl-muted);
}

.page-service-landing .section--hero .wp-block-buttons {
	gap: 0.75rem;
}

/* ======================================================================
 * 4) كروت الخدمات (.cards-3 > .service-card)
 * ====================================================================== */

.page-service-landing .cards-3 {
	gap: 1.25rem;
	align-content: start;
}

.page-service-landing .cards-3 > .service-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-block-size: 9.5rem;
	padding: 1.75rem 1.625rem;
	background-color: var(--sl-card);
	border: var(--border-thin) solid var(--sl-line);
	border-radius: 22px;
	box-shadow: var(--sl-shadow-soft);
	transition: box-shadow var(--transition);
}

.page-service-landing .cards-3 > .service-card:hover,
.page-service-landing .cards-3 > .service-card:focus-within {
	border-color: var(--sl-line);
	box-shadow: var(--sl-shadow-lifted);
}

.page-service-landing .cards-3 > .service-card h3 {
	min-block-size: 0;
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.4;
	font-weight: 700;
	color: var(--sl-ink);
}

.page-service-landing .cards-3 > .service-card p {
	min-block-size: 0;
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--sl-muted);
}

/* ======================================================================
 * 5) الأقسام النصية (عنوان + فقرة فقط): عمود واحد
 * ====================================================================== */

.page-service-landing .entry-content > .section:not(.section--hero):not(.final-cta):not(:has(> :not(h2, p))) > p {
	max-inline-size: 64ch;
	margin-block: 1.25rem 0;
	margin-inline: 0;
	text-align: start;
	font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
	line-height: 2.05;
	color: var(--sl-text);
}

/* ======================================================================
 * 6) خطوات العمل (.process-grid > .process-step)
 *    جوال: خطّ زمني عمودي. سطح المكتب: خطّ زمني أفقي متصل.
 * ====================================================================== */

.page-service-landing .process-grid {
	counter-reset: sl-steps;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	max-inline-size: 36rem;
	margin-inline: 0;
	align-items: start;
}

.page-service-landing .process-step {
	counter-increment: sl-steps;
	position: relative;
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	grid-template-rows: auto;
	column-gap: 1rem;
	row-gap: 0.25rem;
	align-content: start;
	justify-items: start;
	margin: 0;
	padding-block-end: 1.75rem;
	text-align: start;
}

.page-service-landing .process-step:last-child {
	padding-block-end: 0;
}

.page-service-landing .process-step::before {
	content: counter(sl-steps);
	grid-column: 1;
	grid-row: 1 / span 3;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	margin: 0;
	background-color: var(--sl-card);
	border: 2px solid var(--sl-gold);
	border-radius: 50%;
	color: var(--sl-navy);
	font-size: 1.0625rem;
	font-weight: 800;
	position: relative;
	z-index: 1;
}

/* الموصل العمودي بين الدوائر */
.page-service-landing .process-step:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-inline-start: calc(1.375rem - 1px);
	inset-block: 2.75rem 0;
	inline-size: 2px;
	block-size: auto;
	margin: 0;
	background-color: rgb(201 162 39 / 0.45);
	border-radius: 1px;
}

.page-service-landing .process-step > p {
	grid-column: 2;
	margin: 0;
	text-align: start;
}

.page-service-landing .process-step > p:first-child {
	padding-block-start: 0.5rem;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--sl-ink);
}

.page-service-landing .process-step > p:first-child strong {
	font-weight: 800;
}

.page-service-landing .process-step > p + p {
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--sl-muted);
}

@media (min-width: 64em) {
	.page-service-landing .process-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 1.25rem;
		max-inline-size: none;
	}

	.page-service-landing .process-step {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.625rem;
		justify-items: start;
		padding-block-end: 0;
		text-align: start;
	}

	.page-service-landing .process-step::before {
		grid-column: 1;
		grid-row: auto;
		margin-block-end: 0.5rem;
	}

	/* الموصل الأفقي: من حافة دائرة الخطوة إلى حافة دائرة التالية */
	.page-service-landing .process-step:not(:last-child)::after {
		inset-block: 1.375rem auto;
		inset-inline-start: 3.25rem;
		inline-size: calc(100% + 1.25rem - 3.75rem);
		block-size: 2px;
		background-color: rgb(201 162 39 / 0.45);
	}

	.page-service-landing .process-step > p {
		grid-column: 1;
		text-align: start;
	}

	.page-service-landing .process-step > p:first-child {
		padding-block-start: 0;
	}
}

/* ======================================================================
 * 7) لماذا المكتب (.why-grid > .why-card)
 * ====================================================================== */

.page-service-landing .why-grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	align-content: start;
}

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

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

/* !important لأن أول بطاقة تحمل حشوة مضمّنة (inline) في المحتوى المحفوظ */
.page-service-landing .why-card {
	position: relative;
	min-inline-size: 0;
	padding: 1.75rem 1.625rem !important;
	background-color: var(--sl-card);
	border: var(--border-thin) solid var(--sl-line);
	border-radius: 22px;
	box-shadow: var(--sl-shadow-soft);
}

.page-service-landing .why-card > p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--sl-muted);
}

.page-service-landing .why-card > p:first-of-type {
	margin-block-end: 0.375rem;
	font-size: 1.125rem;
	line-height: 1.5;
	color: var(--sl-ink);
}

.page-service-landing .why-card > p:first-of-type strong {
	font-weight: 700;
}

/* ======================================================================
 * 8) الأسئلة الشائعة (.faq-list > details)
 * ====================================================================== */

.page-service-landing .faq-list {
	display: grid;
	gap: 0.875rem;
	max-inline-size: 52rem;
	margin-inline: 0;
}

.page-service-landing .faq-list .wp-block-details {
	margin: 0;
	padding: 0;
	background-color: var(--sl-card);
	border: var(--border-thin) solid var(--sl-line);
	border-radius: 18px;
	box-shadow: var(--sl-shadow-soft);
	transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.page-service-landing .faq-list .wp-block-details[open] {
	background-color: var(--sl-card);
	border-color: color-mix(in srgb, var(--sl-gold) 55%, var(--sl-line));
	box-shadow: var(--sl-shadow-soft);
}

.page-service-landing .faq-list .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.125rem 1.375rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--sl-ink);
	border-radius: 18px;
}

/* سهم الفتح/الإغلاق: يبقى بجانب السؤال داخل مسار flex */
.page-service-landing .faq-list .wp-block-details summary::after {
	position: static;
	flex: none;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	background-color: var(--sl-bronze);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='2.2' 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='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: rotate var(--transition);
}

.page-service-landing .faq-list .wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 1.375rem 1.25rem;
	font-size: 0.9688rem;
	line-height: 1.95;
	color: var(--sl-muted);
}

.page-service-landing .entry-content > .section > .faq-list {
	max-inline-size: 52rem;
	margin-inline: auto !important;
}

/* فتح/إغلاق ناعم حيث يدعمه المتصفح، وبلا تأثير في غيره */
@supports (selector(::details-content)) {
	.page-service-landing {
		interpolate-size: allow-keywords;
	}

	.page-service-landing .faq-list .wp-block-details::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size 0.25s ease, content-visibility 0.25s ease allow-discrete;
	}

	.page-service-landing .faq-list .wp-block-details[open]::details-content {
		block-size: auto;
	}
}

/* ======================================================================
 * 9) الدعوة الختامية
 * ====================================================================== */

.page-service-landing .entry-content > .section.final-cta {
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem);
}

.page-service-landing .final-cta-panel {
	position: relative;
	overflow: hidden;
	max-inline-size: none;
	padding: clamp(2.25rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3.5rem);
	background:
		radial-gradient(70% 120% at 100% 0, rgb(201 162 39 / 0.22), transparent 60%),
		radial-gradient(60% 100% at 0 100%, rgb(255 255 255 / 0.06), transparent 60%),
		var(--sl-navy);
	border: var(--border-thin) solid rgb(201 162 39 / 0.35);
	border-radius: 28px;
	box-shadow: 0 24px 48px -24px rgb(14 26 43 / 0.45);
}

.page-service-landing .final-cta-panel .final-cta-panel__title {
	text-align: center;
}

.page-service-landing .final-cta-panel .wp-block-buttons {
	justify-content: center;
}

.page-service-landing .final-cta-panel__title {
	margin-block: 0 0.5rem;
	font-size: clamp(1.5rem, 3.4vw, 2.25rem);
	line-height: 1.35;
}

.page-service-landing .final-cta-panel p:not(.final-cta-panel__title) {
	max-inline-size: 40rem;
	margin-inline: auto;
	font-size: 1.0625rem;
	line-height: 1.9;
	color: rgb(247 244 236 / 0.88);
}

.page-service-landing .final-cta .wp-block-buttons {
	margin-block-start: 1.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.page-service-landing .cards-3 > .service-card,
	.page-service-landing .faq-list .wp-block-details,
	.page-service-landing .faq-list .wp-block-details summary::after,
	.page-service-landing .faq-list .wp-block-details::details-content {
		transition: none;
	}
}