/* زائد طبي متناثر لا شبكة تخطيط: نسخة رفيعة من علامة السلسلة نفسها
   («زائد» — القسم ٢ من وثيقة البنية) تتكرر بعيدًا عن بعضها بشفافية شبه
   معدومة، فتُقرأ لكنة هوية لا رسمًا هندسيًا كثيفًا يزاحم النص فوقه. شبكة
   ٤٠ بكسل بلون مشبع كامل الوضوح كانت تُقرأ ورقًا مربعًا — هذه ٩٦ بكسل
   بشفافية ٠٫١٢ لا تُلاحظ إلا عن قرب. حجمها أقل من ٢٠٠ بايت داخل الملف
   نفسه، بلا طلب شبكة. */
/* ===== إيقاع أقسام الرئيسية ===== */

/* الحشو الرأسي هنا لا في سمات البلوك.

   الأنماط كانت تعلن padding في تعليق البلوك
   ("style":{"spacing":{"padding":...}})، ولا يظهر منه شيء: قوالب
   البلوكات تُعرض بـHTML الساكن كما هو، ولا يُعاد تحويل سمات التعليق
   إلى أنماط سطرية عند العرض. فكانت الأقسام كلها بحشو صفر والنص ملتصقًا
   بحافة الخلفية الملوّنة أعلى وأسفل — والهيرو وحده سليم لأنه يأخذ حشوه
   من هذا الملف لا من التعليق.

   الهامش بين الأقسام يُصفَّر: الفصل مسؤولية حشو القسم وحده، وإلا جُمع
   هامش وحشوان فصار الفاصل ثلاث قيم من ثلاثة مصادر. */
.mc-hero,
.mc-about,
.mc-departments,
.mc-branches,
.mc-doctors-section,
.mc-steps,
.mc-faq,
.mc-closing-section {
  padding-block: var(--wp--preset--spacing--90);
  margin-block: 0;
}

/* شريط الأرقام ليس قسمًا بل شريط بين قسمين: حشو قسم كامل يحوّل أربعة
   أرقام في سطر واحد إلى كتلة بارتفاع ٢٨٠ بكسل بلا سبب. */
.mc-numbers {
  padding-block: var(--wp--preset--spacing--70);
  margin-block: 0;
}

.mc-hero {
  position: relative;
  background-color: var(--wp--preset--color--brand-900);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M48 42v12M42 48h12' stroke='%2300B4D8' stroke-width='2' opacity='.12'/%3E%3C/svg%3E");
  padding-block: var(--wp--preset--spacing--90);
}

/* بصورة فرع حقيقية: تتصدّر الهيرو ويلتصق بها المحتوى تحتها */
.mc-hero--media { padding-block-start: 0; }

.mc-hero__image { margin: 0 0 var(--wp--preset--spacing--80); }

.mc-hero__image img {
  width: 100%;
  height: clamp(320px, 46vh, 560px);
  object-fit: cover;
  display: block;
}

.mc-hero__inner { padding-inline: var(--wp--preset--spacing--50); }

/* لا لوح أبيض يحمل العنوان: النص مباشرة على الكحلي، فأول ما يقرأه الزائر
   جملة تخصّه لا حافّة صندوق. عمود ضيّق (٦٤٠) يمنع السطر من الامتداد فوق
   خلفية داكنة حيث الامتداد الطويل أصعب قراءة. */
.mc-hero__intro { max-width: 640px; }
.mc-hero__intro h1 { margin: 0 0 12px; max-width: 18ch; line-height: 1.25; color: var(--wp--preset--color--paper-50); }

/* الوسم الصغير والوعد نص ثانوي على الداكن: brand-700 الافتراضي (نص
   الوسم) وink-500 (نص الوعد) تباينهما دون ١:١ على الكحلي تقريبًا،
   فيُستبدلان بـ brand-100 الذي يقيس ١١٫٩:١ على brand-900. */
.mc-hero__intro .mc-eyebrow { color: var(--wp--preset--color--brand-100); }
.mc-hero__lede { max-width: 52ch; color: var(--wp--preset--color--brand-100); margin: 0; }

/* خيط لا صندوق: يفصل الوعد عن أداة البحث بلا أن يلفّها في لوح جديد.
   الحقول بيضاء بذاتها فتُميَّز عن الكحلي وحدها بلا مساعدة صندوق. */
.mc-hero__action {
  max-width: 720px;
  margin-top: var(--wp--preset--spacing--70);
  padding-top: var(--wp--preset--spacing--60);
  border-top: 1px solid var(--wp--preset--color--brand-700);
}

.mc-hero__action .mc-search label { color: var(--wp--preset--color--brand-100); }

.mc-hero__alt {
  margin: var(--wp--preset--spacing--40) 0 0;
  font-size: var(--wp--preset--font-size--small);
}

.mc-hero__alt a { color: var(--wp--preset--color--brand-100); }

/* ===== رسم الهيرو المتجهي (medical/hero-art) ===== */

/* عمودان يتقاسمان الشريط بلا تزاحم: النص والبحث في عمود، والمبنى في عمود
   ثابت العرض بجواره — تراكبٌ فوق النص كان يضعف تباين العنوان، وعمود
   منفصل يحلّ هذا بلا أن يفقد الرسم مكانه. يُنشَّط بصنف mc-hero--art
   المحسوب في hero.php (بلا صورة فرع حقيقية فقط). */
.mc-hero--art .mc-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  grid-template-areas: "intro art" "action art";
  align-items: end;
  column-gap: var(--wp--preset--spacing--70);
}

.mc-hero--art .mc-hero__intro { grid-area: intro; }
.mc-hero--art .mc-hero__action { grid-area: action; }

.mc-heroart {
  grid-area: art;
  align-self: end;
  aspect-ratio: 760 / 420;
}

.mc-heroart svg { display: block; width: 100%; height: 100%; }

/* كتلة المبنى: أفتح من الكحلي المحيط فتُقرأ بناءً مضاءً على خلفية داكنة،
   لا نصًّا ولا خلفية تحت نص أبيض — cyan-500 هنا حدّ رفيع لا امتلاء. */
.mc-heroart__block rect {
  fill: var(--wp--preset--color--brand-800);
  stroke: var(--wp--preset--color--brand-500);
  stroke-width: 1.5;
}

/* الكتل الثلاث تظهر معًا تقريبًا بفارق بسيط بينها (٠ إلى ٠٫١ثانية، من
   --d المحسوب في HeroArt.php) — لا تسلسل طويل، فهي واجهة واحدة لا عناصر
   منفصلة. */
.mc-heroart__block {
  opacity: 0;
  transform: translateY(10px);
  animation: mc-heroart-rise .7s ease-out both;
  animation-delay: var(--d, 0s);
}

/* النوافذ: مطفأة ثم تضيء بترتيب يصعد من قاعدة المبنى لأعلاه — التأخير
   الفعلي محسوب في HeroArt.php من موضع النافذة لا من ترتيبها في الشيفرة. */
.mc-heroart__win {
  fill: var(--wp--preset--color--brand-900);
  opacity: 0;
  animation: mc-heroart-light 1.1s ease-out both;
  animation-delay: calc(var(--d, 0s) + .25s);
}

@keyframes mc-heroart-rise {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mc-heroart-light {
  0%   { opacity: 0; fill: var(--wp--preset--color--brand-900); }
  55%  { fill: var(--wp--preset--color--brand-100); }
  100% { opacity: 1; fill: var(--wp--preset--color--brand-100); }
}

.mc-heroart__emblem rect { fill: var(--wp--preset--color--brand-50); }

.mc-heroart__cross {
  fill: none;
  stroke: var(--wp--preset--color--brand-800);
  stroke-width: 3;
  stroke-linecap: round;
}

.mc-heroart__entry path,
.mc-heroart__entry rect {
  fill: none;
  stroke: var(--wp--preset--color--brand-100);
  stroke-width: 2;
}

/* نبض القاعدة: أثر يسري لا وميض يلمع. pathLength="100" على المسار في
   HeroArt.php يطبّع الطول، فـ١٦ وحدة هنا هي الأثر المضيء الوحيد المرئي
   على مسار طوله المجرَّد ١٠٠ دائمًا بصرف النظر عن هندسته الفعلية. حلقة
   بلا قفزة: الفارق بين نقطتَي from وto يساوي مجموع الشرطة والفراغ
   (١٦+١٢٠) تمامًا، فتُغلق الدورة بلا التفاتة تلفت العين. تسع ثوانٍ بطيئة
   عمدًا — نبض مستشفى هادئ لا وميض إطلاق منتج. */
.mc-heroart__pulse {
  fill: none;
  stroke: var(--wp--preset--color--brand-500);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16 120;
  opacity: .6;
  animation: mc-heroart-pulse 11s linear infinite;
}

@keyframes mc-heroart-pulse {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -136; }
}

@media (max-width: 782px) {
  /* الرسم زخرفي محض (aria-hidden) ووزنه بصري لا معلوماتي: على الجوال
     يأخذ ارتفاع الشاشة الأول كله عنوانٌ وبحث، ومبنى بجوارهما يضغطهما
     تحت الطية. القرار هنا أن يختفي كليًّا لا أن يصغر — نسخة مصغّرة من
     مبنى بثلاث كتل ونوافذ تتحول بقعة غير مقروءة، وهي زخرفة أصلًا فلا
     خسارة معلومة في إخفائها. */
  .mc-heroart { display: none; }
  .mc-hero--art .mc-hero__inner { display: block; }
}

/* ===== شريط الأرقام — بند مستقل بعد الهيرو، لا داخله ===== */

/* على brand-50 القياس يحكم: brand-700 (لون الوسم الافتراضي) ٤٫٠٢:١
   ويفشل، وbrand-800 ٥٫٧٥:١ وينجح — القسم ٤ من وثيقة اللوحة. */
.mc-numbers .mc-eyebrow { color: var(--wp--preset--color--brand-800); }

/* حدّ سفلي: القسم التالي (الأقسام) بنفس خلفية brand-50، وبلا خيط بينهما
   يذوب الشريطان في كتلة واحدة فيضيع استقلال «شريط الأرقام». */
.mc-numbers { border-bottom: var(--mc-border); }

.mc-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--60);
  margin-top: var(--wp--preset--spacing--60);
}

.mc-trust__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--80);
  margin: 0;
}

/* خيط رفيع بين الأرقام لا إطار حول كل رقم: الإطارات تصنع بطاقات متطابقة،
   وهي بالضبط ما تبدو عليه القوالب الجاهزة. */
.mc-trust__fact { position: relative; }

.mc-trust__fact + .mc-trust__fact::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: calc(var(--wp--preset--spacing--80) / -2);
  width: 1px;
  background: var(--wp--preset--color--line-200);
}

.mc-trust__value {
  font-size: var(--wp--preset--font-size--h-1);
  font-weight: 700;
  line-height: 1.1;
  color: var(--wp--preset--color--brand-900);
}

.mc-trust__label {
  margin: 2px 0 0;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--ink-500);
}

.mc-trust__promise {
  max-width: 34ch;
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--ink-500);
  border-inline-start: 3px solid var(--wp--preset--color--brand-500);
  padding-inline-start: 12px;
}

/* ===== من نحن ===== */

.mc-about {
  padding-block: var(--wp--preset--spacing--90);
  border-bottom: var(--mc-border);
}

.mc-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
  gap: var(--wp--preset--spacing--80);
  align-items: center;
}

.mc-about__text h2 { margin: 0 0 var(--wp--preset--spacing--40); }
.mc-about__text p { margin: 0 0 var(--wp--preset--spacing--30); max-width: 60ch; color: var(--wp--preset--color--ink-500); }
.mc-about__text p:last-child { margin-bottom: 0; }

.mc-about__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--mc-radius-md);
  overflow: hidden;
  border: var(--mc-border);
}

.mc-about__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* رسم بديل حين لا صورة: خلفية فاتحة بلا حدّ إضافي — الإطار الخارجي وحده
   من .mc-about__media يكفي، وحدّ ثانٍ حول الرسم نفسه يصنع إطارين متداخلين. */
.mc-about__media--art {
  background: var(--wp--preset--color--brand-50);
  border-color: var(--wp--preset--color--line-200);
}

.mc-aboutart { width: 100%; height: 100%; }

/* نفس لغة رسم الهيرو، بألوان مقلوبة لخلفية فاتحة لا كحلية: كتلة sky-200
   بحدّ cyan-500 — المعالجة نفسها المستعملة لمربّع أيقونة القسم، فيقرأ
   القسمان بيد واحدة. */
.mc-aboutart__block {
  fill: var(--wp--preset--color--brand-100);
  stroke: var(--wp--preset--color--brand-500);
  stroke-width: 1.5;
}

.mc-aboutart__win { fill: var(--wp--preset--color--brand-500); opacity: .3; }

.mc-aboutart__emblem rect { fill: var(--wp--preset--color--white); stroke: var(--wp--preset--color--line-200); }

.mc-aboutart__cross {
  fill: none;
  stroke: var(--wp--preset--color--brand-800);
  stroke-width: 3;
  stroke-linecap: round;
}

.mc-aboutart__entry,
.mc-aboutart__ground {
  fill: none;
  stroke: var(--wp--preset--color--line-200);
  stroke-width: 2;
}

@media (max-width: 782px) {
  .mc-about { padding-block: var(--wp--preset--spacing--70); }
  .mc-about__grid { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50); }
  .mc-about__media { order: -1; aspect-ratio: 16 / 10; }
}

/* ===== الخطوات ===== */

.mc-steps__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--70);
  margin: var(--wp--preset--spacing--70) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

/* leading أضيق من الافتراض العام (١٫٩) يرثه رقم الخطوة ونص الشرح تحته —
   القسم «المقياس المطبَّق» في تذكرة الطباعة. */
.mc-step { padding-top: var(--wp--preset--spacing--50); border-top: 2px solid var(--wp--preset--color--line-200); line-height: var(--mc-leading-body); }

/* الخطوة الأخيرة هي المهمة — المكالمة التي تحوّل الطلب إلى ميعاد */
.mc-step:last-child { border-top-color: var(--wp--preset--color--brand-500); }

.mc-step__num {
  display: block;
  font-size: var(--wp--preset--font-size--h-1);
  font-weight: 700;
  line-height: 1;
  color: var(--wp--preset--color--brand-700);
}

/* h-2 كان يجعل عنوان الخطوة بحجم عنوان القسم الذي يحويها — بطاقة العنوان
   القياسية (--mc-card-title-size) تناسب خطوة بين ثلاث لا قسمًا بأكمله. */
.mc-step__title { margin: 12px 0 8px; font-size: var(--mc-card-title-size); line-height: var(--mc-card-title-line); }
.mc-step p { margin: 0; color: var(--wp--preset--color--ink-500); }

/* أيقونة القسم في مربّع بلون العلامة الفاتح: تمييز بلا صورة وبلا لون
   إضافي خارج اللوحة. */
.mc-card__icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--mc-radius-md);
  background: var(--wp--preset--color--brand-100);
  color: var(--wp--preset--color--brand-700);
}

/* حدّ سفلي: قسم الفروع بعده مباشرة على brand-50 نفسها، وبلا خيط بينهما
   يذوب القسمان في كتلة واحدة — نفس علّة شريط الأرقام أعلاه. */
.mc-departments { border-bottom: var(--mc-border); }

/* الأيقونة بمحاذاة العنوان لا فوقه — تبقى لأرشيف الأقسام
   (templates/archive-mc_department.html) الذي ما زال يستعمل بطاقة العمق
   الأصلية (أيقونة + عنوان + مقتطف + وسوم). فهرس الرئيسية تحته صار بطاقة
   مختلفة (.mc-dept-tile، display:flex أدناه) فلا يتأثر بهذه القواعد رغم
   مشاركته سمة data-mc="department-card" نفسها: خاصية display تُحسم
   بترتيب الظهور عند تساوي التخصيص، و.mc-dept-tile يأتي لاحقًا فيغلب. */
[data-mc="department-card"] {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: var(--wp--preset--spacing--30);
  align-content: start;
}

[data-mc="department-card"] > * { grid-column: 2; }

[data-mc="department-card"] .mc-card__icon {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

/* عنوان بطاقة العمق في أرشيف الأقسام: كتلة post-title تحمل صنف المعاينة
   has-h-2-font-size (fontSize:"h2" في templates/archive-mc_department.html)
   ووردبريس يولّد قاعدة الحجم لكل صنف preset بـ !important في الأنماط
   المضمّنة العامة (global styles) — انتقاء أخصّ من صنف واحد لا يكفي
   لغلبتها، و!important هنا يقابل !important لا يزايد عليه. البديل الحقيقي
   (حذف fontSize:"h2" من القالب) خارج ملكية هذه المهمة (لا قوالب).
   .mc-dept-tile (فهرس الرئيسية) لا يملك هذا الصنف أصلًا فلا يتأثر رغم
   مشاركته وسم department-card. */
[data-mc="department-card"] .wp-block-post-title {
  font-size: var(--mc-card-title-size) !important;
  line-height: var(--mc-card-title-line);
}

.mc-departments__lede { max-width: 62ch; margin: var(--wp--preset--spacing--30) 0 0; color: var(--wp--preset--color--ink-500); }

/* رابط «تفاصيل كل قسم» على brand-50: لون الرابط الافتراضي (brand-700 من
   theme.json) ٤٫٠٢:١ على هذه الخلفية ويفشل — نفس علّة brand-700 المذكورة
   في وثيقة اللوحة، وحلّها نفسه: brand-800 الذي يقيس ٥٫٧٥:١. */
.mc-departments .mc-section__more a { color: var(--wp--preset--color--brand-800); }

/* ===== فهرس الأقسام: بطاقة اسم لا بطاقة عمق (القرار في departments-grid.php) ===== */

/* شبكة كثيفة auto-fill بحدّ أدنى ١٧٠: على عرض المحتوى ١٢٠٠ تنتج سبعة
   أعمدة تقريبًا، وعلى عرض الجوال عمودان — لا ثلاثة أعمدة عند أي عرض من
   الاثنين، فلا تلتقي هذه الشبكة بمعيار «لا صف من ثلاث بطاقات متطابقة»
   أصلًا مهما بلغ عدد الأقسام. */
.mc-dept-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--wp--preset--spacing--40);
  margin: var(--wp--preset--spacing--70) 0 0;
  padding: 0;
  list-style: none;
}

.mc-dept-tile {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  padding: 12px var(--wp--preset--spacing--40);
  text-decoration: none;
  color: var(--wp--preset--color--ink-900);
  font-weight: 500;
  transition: transform .18s ease, border-color .18s ease;
}

.mc-dept-tile .mc-card__icon { width: 36px; height: 36px; flex: none; }

/* بلاطة مكثّفة لا بطاقة عمق: الاسم بحجم النص الأساسي (تسمية لا عنوان) —
   القسم «طبقتا الكثافة» في تذكرة الطباعة. */
.mc-dept-tile__name {
  min-width: 0;
  font-size: var(--wp--preset--font-size--body);
  line-height: var(--mc-tile-title-line);
}

.mc-dept-tile:hover,
.mc-dept-tile:focus-visible {
  transform: translateY(-2px);
  border-color: var(--wp--preset--color--brand-500);
}

/* ===== لمحة الأطباء ===== */

/* ثلاثة أعمدة ثابتة لا auto-fill: الأخيرة كانت تعطي خمسة أعمدة لستة
   أطباء، فينزل السادس وحده ويبدو الصف مكسورًا. الثلاثة تقسم الستة
   بالتساوي، وتنزل إلى عمودين ثم عمود في الشاشات الأضيق. */
.mc-doctor-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--50);
  margin: var(--wp--preset--spacing--70) 0 0;
  padding: 0;
  list-style: none;
}

/* بطاقة أفقية: الحرف مربع صغير بجوار الاسم لا لوح لوني بعرض العمود.
   المربع الكبير في بطاقة عريضة يصير أبرز شيء في القسم، والأبرز يجب أن
   يكون اسم الطبيب. */
.mc-doctor-tile {
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: var(--wp--preset--spacing--40);
  align-items: center;
  text-decoration: none;
  color: inherit;
  border-inline-start: 3px solid var(--wp--preset--color--brand-700);
  transition: border-color .18s ease, transform .18s ease;
}

.mc-doctor-tile:hover,
.mc-doctor-tile:focus-visible {
  border-inline-start-color: var(--wp--preset--color--brand-500);
  transform: translateY(-2px);
}

.mc-doctor-tile__photo,
.mc-doctor-tile__monogram {
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: var(--mc-radius-sm);
  overflow: hidden;
}

/* تدرّج رمادي خفيف يوحّد ست صور من ست خلفيات مختلفة، ويزول عند التمرير:
   خلفيات الصور المتاحة متباينة، والتوحيد يجعل الصف يبدو مصوَّرًا لا
   مجموعًا. ليس تدرجًا لونيًا — grayscale مرشّح لا gradient. */
.mc-doctor-tile__photo img { filter: grayscale(0.25) contrast(1.02); transition: filter 0.2s; }
.mc-doctor-tile:hover .mc-doctor-tile__photo img { filter: none; }

.mc-doctor-tile__photo img { width: 100%; height: 100%; object-fit: cover; }

.mc-doctor-tile__monogram {
  background: var(--wp--preset--color--brand-100);
  color: var(--wp--preset--color--brand-700);
  font-size: var(--wp--preset--font-size--h-1);
  font-weight: 700;
}

/* بلاطة مكثّفة كبلاطة القسم أعلاه: الاسم تسمية بحجم النص الأساسي لا
   عنوان مكبَّر — ستة أطباء في صف واحد لا يحتملون عنوان قسم لكل اسم. */
.mc-doctor-tile__name {
  font-weight: 700;
  font-size: var(--wp--preset--font-size--body);
  line-height: var(--mc-tile-title-line);
}
.mc-doctor-tile__title,
.mc-doctor-tile__specialty {
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--mc-leading-meta);
  color: var(--wp--preset--color--ink-500);
}

@media (max-width: 980px) {
  .mc-doctor-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .mc-doctor-strip { grid-template-columns: 1fr; }
}

/* ===== بطاقات الفروع ===== */

/* صفوف لا شبكة من ثلاث بطاقات متساوية: الأخيرة توقيع القالب الجاهز
   (المعيار ٣)، وهي أسوأ للمهمة أيضًا — السؤال هنا «أيّها أقرب ومفتوح
   الآن؟» وهو سؤال مقارنة، والمقارنة تحتاج أعمدة محاذاة لا بطاقات
   متجاورة تُقفز العين بينها. */
.mc-branch-cards {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  margin: var(--wp--preset--spacing--70) 0 0;
  padding: 0;
  list-style: none;
}

.mc-branch-card {
  display: grid;
  gap: 6px;
  align-content: start;
  transition: transform .18s ease, border-color .18s ease;
}

/* البطاقة نفسها بلا رابط واحد يلفّها (اسم وحجز واتصال روابط منفصلة
   داخلها)، فحركة التمرير تُفعَّل بالمؤشر :hover على البطاقة، وبمكافئها
   للوحة المفاتيح :focus-within — أي رابط داخلي يأخذ التركيز يرفع
   البطاقة كلها، لا الرابط وحده، فلا يُحرَم مستخدم لوحة المفاتيح
   الإفادة نفسها التي يراها مستخدم الفأرة. */
.mc-branch-card:hover,
.mc-branch-card:focus-within {
  transform: translateY(-2px);
  border-color: var(--wp--preset--color--brand-500);
}

/* الوضع المكدّس هو الأصل، والصفّ يبدأ حين يتّسع العرض لأربعة أعمدة
   بلا ضغط. الإسناد الصريح لكل عمود لا الترتيب التلقائي: الفرع بلا
   مدينة لا يعرض عنصر المدينة أصلًا، فالتلقائي يزحزح المواعيد مكانها. */
@media (min-width: 900px) {
  /* أعمدة المعلومات تلتصق بمحتواها بحدّ أدنى ثابت، والفراغ كله يذهب
     للعمود الأخير: الحدّ الأدنى يغلب المحتوى القصير فتتطابق الأعمدة
     عبر الصفوف رغم أن كل بطاقة شبكة مستقلة، والأزرار تصطفّ في الطرف. */
  .mc-branch-card {
    grid-template-columns:
      minmax(220px, max-content) minmax(110px, max-content) minmax(150px, max-content) 1fr;
    align-items: center;
    column-gap: var(--wp--preset--spacing--50);
    row-gap: 2px;
  }

  .mc-branch-card__state { grid-column: 1; grid-row: 1; }
  .mc-branch-card__name  { grid-column: 1; grid-row: 2; }
  .mc-branch-card__city  { grid-column: 2; grid-row: 1 / span 2; }
  .mc-branch-card__hours { grid-column: 3; grid-row: 1 / span 2; }

  .mc-branch-card__actions {
    grid-column: 4;
    grid-row: 1 / span 2;
    justify-self: end;
    flex-wrap: nowrap;
    margin: 0;
  }
}

.mc-branch-card__state {
  margin: 0;
  font-size: var(--wp--preset--font-size--label);
  line-height: var(--mc-leading-meta);
  font-weight: 700;
}

.mc-branch-card__state.is-open { color: var(--wp--preset--color--brand-700); }
.mc-branch-card__state.is-shut { color: var(--wp--preset--color--ink-500); }

.mc-branch-card__state::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* h-2 كان يجعل اسم الفرع بحجم عنوان قسم «فروعنا» الذي يحويه — نفس علّة
   .mc-step__title أعلاه، والحلّ نفسه. */
.mc-branch-card__name { margin: 0; font-size: var(--mc-card-title-size); line-height: var(--mc-card-title-line); }
.mc-branch-card__name a { text-decoration: none; color: inherit; }
.mc-branch-card__name a:hover { text-decoration: underline; }

.mc-branch-card__city,
.mc-branch-card__hours {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--mc-leading-meta);
  color: var(--wp--preset--color--ink-500);
}

.mc-branch-card__actions .mc-btn--quiet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mc-branch-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--wp--preset--spacing--40) 0 0;
}

/* ===== الأسئلة الشائعة ===== */

.mc-faq__list { margin-top: var(--wp--preset--spacing--70); }

.mc-faq details {
  border-bottom: var(--mc-border);
  padding-block: var(--wp--preset--spacing--40);
}

.mc-faq summary {
  cursor: pointer;
  font-weight: 500;
  font-size: var(--wp--preset--font-size--h-2);
  padding-inline-end: 8px;
}

.mc-faq details[open] summary { color: var(--wp--preset--color--brand-700); }
.mc-faq details p { margin: 12px 0 0; color: var(--wp--preset--color--ink-500); max-width: 62ch; }

/* ===== الدعوة الختامية والطوارئ ===== */

.mc-closing {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--wp--preset--spacing--80);
  align-items: start;
}

.mc-closing__book h2 { margin: 0 0 12px; font-size: var(--wp--preset--font-size--h-1); }
.mc-closing__book p { margin: 0 0 var(--wp--preset--spacing--50); max-width: 46ch; }
.mc-closing__book .mc-btn--quiet { color: var(--wp--preset--color--paper-50); }

/* بطاقة فاتحة داخل شريط داكن: الأحمر على الأزرق الداكن تباينه ٢٫٧:١ وهو
   غير مقروء، وتفتيح الأحمر يفقده دلالة الخطر. قلب الخلفية يحلّ الاثنين
   ويجعل البطاقة تقفز من الشريط — وهو المطلوب لنداء طوارئ. */
/* بطاقة قائمة بذاتها بلا صنف mc-card (حدّها الأحمر خاص بها)، فتستورد
   leading نفسه يدويًا بدل الوراثة من .mc-card — نفس علّة الوسوم أعلاه. */
.mc-emergency {
  background: var(--wp--preset--color--paper-50);
  color: var(--wp--preset--color--ink-900);
  border: 2px solid var(--wp--preset--color--alert-600);
  border-radius: var(--mc-radius-md);
  padding: var(--wp--preset--spacing--50);
  line-height: var(--mc-leading-body);
}

.mc-emergency p { margin: 0 0 8px; }
.mc-emergency__label { font-weight: 700; color: var(--wp--preset--color--alert-600); }
.mc-emergency__note { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-500); }

.mc-emergency__phone {
  font-size: var(--wp--preset--font-size--h-2);
  font-weight: 700;
  color: var(--wp--preset--color--alert-600);
  text-decoration: none;
}

.mc-emergency__hours { font-size: var(--wp--preset--font-size--label); color: var(--wp--preset--color--ink-500); margin: 0; }

.mc-search {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--wp--preset--spacing--40);
  align-items: end;
  margin-top: var(--wp--preset--spacing--50);
}

.mc-search__field { display: grid; gap: 6px; }
.mc-search label { font-size: var(--wp--preset--font-size--label); color: var(--wp--preset--color--ink-500); }

.mc-search select {
  width: 100%;
  padding: 11px 12px;
  /* حقل نموذج لا حدّ زخرفي: حدّ الحقول الفاتح (line-200) تباينه ١٫٢:١
     على الأبيض ويختفي، فحقل البحث عن طبيب يأخذ حدّ الحقول الأغمق. */
  border: 1px solid var(--wp--preset--color--line-400);
  border-radius: var(--mc-radius-sm);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--ink-900);
  font: inherit;
}

.mc-search__submit {
  padding: 12px 24px;
  border: 0;
  border-radius: var(--mc-radius-sm);
  background: var(--wp--preset--color--brand-700);
  color: var(--wp--preset--color--white);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

/* الشبكة على قائمة العناصر لا على غلاف الاستعلام: بلوك post-template
   يلفّ كل منشور في <li> داخل <ul>، فالغلاف له طفل واحد فقط. */
.mc-departments__grid .wp-block-post-template,
.mc-branches__grid .wp-block-post-template {
  display: grid;
  gap: var(--wp--preset--spacing--50);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-top: var(--wp--preset--spacing--60);
  padding: 0;
  list-style: none;
}

/* أعمدة صريحة، ولا عمود ثالث أبدًا.

   الحيلة السابقة — «أول بطاقتين أعرض» — كانت تكسر التماثل الذي يمنعه
   المعيار الثالث، وصُمّمت حين كانت الأقسام ستة. على أربعة وعشرين صارت
   تمنح أول قسمين بروزًا لا يقابله معنى: الترتيب أبجدي لا تفضيلي،
   فالبطاقة الأعرض تَعِد بأهمية لا وجود لها.

   البديل يحفظ المعيار بالبنية لا بحيلة فوقها: القفز من عمود إلى عمودين
   إلى أربعة لا يمرّ بثلاثة أبدًا، فلا يتشكّل صف الثلاث المتماثلة عند
   أي عرض شاشة — لا عند العروض التي تفحصها الاختبارات وحدها. */
.mc-departments__grid .wp-block-post-template {
  grid-template-columns: 1fr;
}

/* ووردبريس يضيف هامشًا علويًا لكل عنصر عدا الأول (قاعدة blockGap في
   دعم التخطيط)، والشبكة هنا لها gap خاصّ بها. فتُحسب الفجوة مرتين لكل
   عنصر إلا الأول، فيجلس الأول أعلى من صفّه بمقدار الهامش — انزياح
   يُرى ولا يُفسَّر. الفجوة مسؤولية الشبكة وحدها. */
.mc-departments__grid .wp-block-post-template > * { margin-block: 0; }

@media (min-width: 560px) {
  .mc-departments__grid .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .mc-departments__grid .wp-block-post-template { grid-template-columns: repeat(4, 1fr); }
}

/* .mc-card هنا لا في tokens.css: ترتيبها الأصلي بعد .mc-doctor-tile في
   base.css كان يلغي حدّها الجانبي الأزرق (border-inline-start) ويُعيدها
   لحدّ .mc-card العادي. لو انتقلت لـ tokens.css لسبقت .mc-doctor-tile في
   الترتيب فانقلبت النتيجة، فبقيت هنا حفاظًا على المفعول البصري نفسه. */
/* نصف قطر أكبر من --mc-radius-md (٦ بكسل): شكل بطاقة جديد يواكب حركة
   التمرير المضافة في هذا الملف — زاوية أليَن تُقرأ «قابلة للمس» بوضوح
   أكبر من الزاوية الحادة القديمة. */
/* leading البطاقة موروث هنا لا مكرَّر على كل نص بداخلها: أي نص بلا
   line-height خاص (فقرة، مقتطف، تسمية) يرث ١٫٥ بدل ١٫٩ العام في
   theme.json — القسم «المقياس المطبَّق» في تذكرة الطباعة. العنوان والوسوم
   والحقائق الصغيرة تخصّص قيمتها الخاصة فوق هذا الأصل عند تعريفها. */
.mc-card {
  background: var(--wp--preset--color--white);
  border: var(--mc-border);
  border-radius: 10px;
  padding: var(--wp--preset--spacing--50);
  height: 100%;
  line-height: var(--mc-leading-body);
  transition: transform .18s ease, border-color .18s ease, opacity .18s ease;
}

@media (max-width: 1024px) {
  .mc-trust__list { gap: var(--wp--preset--spacing--70); }
  .mc-trust__fact + .mc-trust__fact::before { inset-inline-end: calc(var(--wp--preset--spacing--70) / -2); }
}

@media (max-width: 782px) {
  .mc-hero { padding-block: var(--wp--preset--spacing--70); }
  .mc-hero__action { margin-top: var(--wp--preset--spacing--60); padding-top: var(--wp--preset--spacing--50); }
  .mc-search { grid-template-columns: 1fr; }

  .mc-trust__list { gap: var(--wp--preset--spacing--60); }
  .mc-trust__fact + .mc-trust__fact::before { content: none; }
  .mc-trust__promise { max-width: none; }

  .mc-steps__list { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50); }
  .mc-closing { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); }
}