/* ==========================================================================
   حقل الوسائط الموحّد — يرافق templates/includes/_media_field.html
   ========================================================================== */

.mf {
  display: grid;
  gap: 8px;
  --mf-line: #d9e3dd;
  --mf-ink: #08643f;
  --mf-muted: #5d6b64;
}

.mf__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #17332a;
}

.mf__body {
  display: grid;
  gap: 12px;
  align-items: start;
}

.mf--avatar .mf__body {
  grid-template-columns: 92px minmax(0, 1fr);
}

.mf--cover .mf__body,
.mf--wide .mf__body {
  grid-template-columns: minmax(0, 1fr);
}

/* ------------------------------------------------------------- المعاينة */

.mf__thumb {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #f2f6f4;
  border: 1px solid var(--mf-line);
  border-radius: 14px;
}

.mf--avatar .mf__thumb {
  inline-size: 92px;
  block-size: 92px;
  border-radius: 50%;
}

.mf--cover .mf__thumb {
  aspect-ratio: 16 / 5;
  inline-size: 100%;
}

.mf--wide .mf__thumb {
  aspect-ratio: 16 / 9;
  inline-size: 100%;
}

.mf__thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.mf__empty {
  color: #93a49b;
  font-size: 1.4rem;
}

.mf__edit {
  position: absolute;
  inset-block-end: 6px;
  inset-inline-end: 6px;
  inline-size: 30px;
  block-size: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--mf-ink);
  color: #fff;
  cursor: pointer;
  font-size: 0.72rem;
  box-shadow: 0 2px 8px rgb(8 100 63 / 28%);
}

.mf__edit:hover { filter: brightness(1.12); }
.mf__edit:focus-visible { outline: 2px solid #0d8a58; outline-offset: 2px; }

/* --------------------------------------------------------- منطقة الاختيار */

.mf__drop {
  /* يحصر حقل الملف المخفي داخل المنطقة. بدونه يُحسب عرضه من الصفحة كلها
     فيُحدث انزلاقًا أفقيًا لا يراه أحد لكنه يزيح التخطيط. */
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 18px 14px;
  text-align: center;
  border: 1.5px dashed var(--mf-line);
  border-radius: 14px;
  background: #fbfdfc;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.mf__drop:hover,
.mf__drop:focus-visible,
.mf__drop.is-dragging {
  border-color: var(--mf-ink);
  background: #f1f8f4;
}

/* قواعد النماذج العامة تفرض width:100% على كل input بانتقائية أعلى، لذا
   نرفع انتقائية هذه القاعدة ونستخدم width الفيزيائي حتى تتنافس معها فعلًا. */
.mf .mf__drop input[type="file"] {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.mf__drop-icon { color: var(--mf-ink); font-size: 1.05rem; }
.mf__drop-title { font-size: 0.84rem; font-weight: 600; color: #17332a; }
.mf__drop-hint { font-size: 0.72rem; color: var(--mf-muted); line-height: 1.6; }

/* ------------------------------------------------------------ حالة النشر */

.mf__status {
  font-size: 0.72rem;
  color: var(--mf-muted);
  min-block-size: 1rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mf__status::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: currentcolor;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.mf.is-local .mf__status,
.mf.is-uploading .mf__status { color: #8a6100; }
.mf.is-published .mf__status { color: #0b7a4b; }
.mf.has-error .mf__status { color: #b42318; }

.mf.is-local .mf__status::before,
.mf.is-uploading .mf__status::before,
.mf.is-published .mf__status::before,
.mf.has-error .mf__status::before { opacity: 1; }

.mf.is-uploading .mf__status::before { animation: mf-pulse 1s ease-in-out infinite; }

@keyframes mf-pulse {
  50% { opacity: 0.25; }
}

.mf__error {
  font-size: 0.72rem;
  color: #b42318;
}

.mf.has-error .mf__drop { border-color: #e3a6a0; }

@media (prefers-reduced-motion: reduce) {
  .mf.is-uploading .mf__status::before { animation: none; }
}