@charset "utf-8";
/* ==========================================================================
   ministry-card.css — المكوّن البصري الموحّد لبطاقة وزارة التعليم
   Single source of truth for the ministry identity capsule.

   إعداد وتنفيذ الأستاذة دعاء الجرواني · © 2026

   يُستخدم هذا الملف — وهو وحده — في كل شاشة يظهر فيها شعار الوزارة:
   بوابة الدخول · الواجهة الرئيسية · صفحات الصفوف · عن المنصة · 404 ·
   عالم المغامرة (الشارة الركنية ولوحة «عن المنصة»).

   قواعد ملزمة:
   • الشعار يبقى بألوانه الأصلية — لا تلوين ولا إعادة رسم ولا قلب إلى أبيض.
   • النسبة ثابتة: العرض = الارتفاع × 4 — فيتغيّر المقاس دون أن يتغيّر الشكل.
   • المحاذاة رأسية كاملة بين الشعار والنص (center) على كل المقاسات.
   • الموضع (absolute / fixed / in-flow) مسؤولية الصفحة، لا مسؤولية المكوّن.
   ========================================================================== */

/* ------------------------------------------------------- المقاس المرجعي */
/* Desktop : 280×70  والشعار 53  ونصف القطر 35
   Tablet  : 248×62  والشعار 47
   Phone   : 216×54  والشعار 41
   النسبة ثابتة (العرض = الارتفاع × 4) فيتغيّر المقاس دون أن يتغيّر الشكل. */
:root { --moe-h: 70px; --moe-r: 35px; }

/* لوحي */
@media (max-width: 1024px) { :root { --moe-h: 62px; --moe-r: 31px; } }
/* هاتف عريض / لوحي صغير */
@media (max-width: 760px)  { :root { --moe-h: 58px; --moe-r: 29px; } }
/* هاتف */
@media (max-width: 480px)  { :root { --moe-h: 54px; --moe-r: 27px; } }
/* هاتف أفقي قصير الارتفاع */
@media (max-height: 520px) and (orientation: landscape) { :root { --moe-h: 52px; --moe-r: 26px; } }

/* --------------------------------------------------------- المكوّن نفسه */
.ministry__card {
  box-sizing: border-box;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;          /* محاذاة رأسية كاملة */
  justify-content: center;
  flex-direction: row;          /* النص بجانب الشعار — لا فوقه ولا تحته */
  flex-wrap: nowrap;
  width: calc(var(--moe-h) * 4);
  height: var(--moe-h);
  padding-inline: calc(var(--moe-h) * 0.13);
  padding-block: 0;
  gap: calc(var(--moe-h) * 0.115);
  border-radius: var(--moe-r);             /* Capsule / Pill */
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: linear-gradient(180deg, #fffdf8 0%, #f6f1e6 100%);
  box-shadow:
    0 14px 34px rgba(3, 10, 18, 0.34),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
  text-align: start;
  overflow: hidden;
}

/* الشعار: بألوانه الأصلية، محتوى كامل بلا قصّ */
.ministry__card img,
.ministry__logo {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: calc(var(--moe-h) * 0.757);   /* 53px عند 70px */
  max-height: calc(var(--moe-h) * 0.757);
  object-fit: contain;
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
}

/* النص */
.ministry__card p,
.ministry__name {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  padding-inline-start: calc(var(--moe-h) * 0.105);
  border-inline-start: 1px solid rgba(158, 43, 51, 0.28);
  font-family: var(--font-display, "Dubai", "Tajawal", "Cairo", "Noto Kufi Arabic",
               "Segoe UI", "Geeza Pro", system-ui, -apple-system, Arial, sans-serif);
  font-size: clamp(0.62rem, calc(var(--moe-h) * 0.196), 0.9rem);
  font-weight: 600;
  line-height: 1.3;
  color: #23323e;
  white-space: nowrap;
  text-shadow: none;
}

.ministry__card p b,
.ministry__name b { font-weight: 800; color: #9e2b33; }

/* بعض الشاشات كانت تعرض «وزارة التعليم» و«سلطنة عُمان» في سطرين منفصلين.
   نُعيدها إلى سطر واحد مرتّب داخل البطاقة الموحّدة. */
.ministry__card > div {
  display: inline;
  min-width: 0;
}

@supports (backdrop-filter: blur(4px)) {
  .ministry__card {
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(246, 241, 230, 0.93));
    -webkit-backdrop-filter: blur(12px) saturate(1.08);
    backdrop-filter: blur(12px) saturate(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ministry__card { transition: none; }
}