/* ============================================================
   صفحة "الرؤية والرسالة والقيم" (vision-mission.php) — تصميم مستقل (vmx-)
   مطابقة لمخطط الخطة التشغيلية: الرؤية (أعلى) ثم الرسالة والقيم.
   ============================================================ */
.vmx-grid {
  --vmx-navy: var(--navy-primary, #13243E);
  --vmx-teal: var(--teal-accent, #4F8C89);
  --vmx-gold: var(--gold-accent, #B9975B);
  --vmx-bounce: cubic-bezier(.34, 1.56, .64, 1);
  display: grid; gap: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 6px 0 8px;
}
.vmx-card {
  position: relative; border-radius: 22px; padding: 28px 30px; display: flex; gap: 22px; align-items: flex-start; overflow: hidden;
  box-shadow: 0 1px 8px rgba(19, 36, 62, .08);
  animation: vmx-in .5s var(--vmx-bounce) backwards;
}
.vmx-vision { grid-column: 1 / -1; background: var(--vmx-navy); color: #fff; min-height: 190px; align-items: center; animation-delay: 0ms; }
.vmx-mission { grid-column: span 3; background: var(--vmx-teal); color: #fff; min-height: 240px; animation-delay: 90ms; }
.vmx-values { grid-column: span 2; background: #fff; color: var(--vmx-navy); min-height: 240px; animation-delay: 180ms; }
.vmx-vision::after, .vmx-mission::after {
  content: ""; position: absolute; inset-inline-start: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255, 255, 255, .06); pointer-events: none;
}
.vmx-vision::before { content: ""; position: absolute; inset-inline-end: 0; top: 0; bottom: 0; width: 6px; background: var(--vmx-gold); }
.vmx-icon {
  flex: none; width: 64px; height: 64px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28);
}
.vmx-icon svg { width: 32px; height: 32px; }
.vmx-values .vmx-icon { background: #F4EEE3; border-color: transparent; color: var(--vmx-gold); }
.vmx-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.vmx-body h2 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 800; letter-spacing: .02em; }
.vmx-vision .vmx-body h2, .vmx-mission .vmx-body h2 { color: var(--vmx-gold); }
.vmx-mission .vmx-body h2 { color: #F4E6C8; }
.vmx-values .vmx-body h2 { color: var(--vmx-gold); }
.vmx-body p { margin: 0; font-size: 1.45rem; line-height: 2; font-weight: 600; }
.vmx-mission .vmx-body p { font-size: 1.3rem; }

.vmx-value-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vmx-value {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: #F7F8F7;
  font-size: 1.1rem; font-weight: 800; color: var(--vmx-navy);
  animation: vmx-in .45s var(--vmx-bounce) backwards; animation-delay: calc(260ms + var(--i, 0) * 70ms);
}
.vmx-value-n {
  width: 30px; height: 30px; border-radius: 50%; background: var(--vmx-teal); color: #fff; font-size: 0.85rem; font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}

@keyframes vmx-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vmx-card, .vmx-value { animation: none; } }

@media (max-width: 1000px) {
  .vmx-grid { grid-template-columns: 1fr; }
  .vmx-vision, .vmx-mission, .vmx-values { grid-column: 1 / -1; min-height: 0; }
  .vmx-body p { font-size: 1.2rem; }
  .vmx-mission .vmx-body p { font-size: 1.12rem; }
}
@media (max-width: 560px) {
  .vmx-card { padding: 20px 18px; flex-direction: column; gap: 14px; }
  .vmx-icon { width: 52px; height: 52px; border-radius: 14px; }
  .vmx-icon svg { width: 26px; height: 26px; }
  .vmx-body p { font-size: 1.05rem; line-height: 1.9; }
  .vmx-value { font-size: 1rem; }
}
@media print { .vmx-card { box-shadow: none; border: 1px solid #ccc; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }