/* df-ui.css — unified tokens + dark-mode safe + no font bloat */

/* --- Fallback & bridge tokens (تجسير المتغيرات القديمة مع الحديثة) --- */
:root{
  color-scheme: light dark;

  /* التقط من theme.json إن وُجدت، وإلا استخدم القيم الافتراضية */
  --surface: var(--wp--preset--color--doaf-surface, #ffffff);
  --border: #e2e8f0;
  --text: var(--wp--preset--color--doaf-text, #1f2937);
  --text-muted: var(--wp--preset--color--doaf-muted, #667085);
  --brand-navy: var(--wp--preset--color--doaf-primary, #1e374e);
  --brand-lime: var(--wp--preset--color--doaf-secondary, #68a00b);
  --accent: var(--wp--preset--color--doaf-accent, #f39c12);

  --shadow-1: var(--wp--custom--shadow--light, 0 2px 8px rgba(0,0,0,.08));
  --shadow-2: var(--wp--custom--shadow--medium, 0 5px 15px rgba(0,0,0,.12));

  /* جسر لمتغيرات df القديمة */
  --doafeer-primary-color: var(--brand-navy);
  --doafeer-secondary-color: var(--brand-lime);
  --doafeer-accent-color: var(--accent);
  --doafeer-text-color: var(--text);
  --doafeer-white: var(--surface);
  --doafeer-border-radius: var(--wp--custom--radius--xl, 12px);
  --doafeer-shadow-light: var(--shadow-1);
  --doafeer-shadow-medium: var(--shadow-2);
  --doafeer-transition-speed: .2s;
  --doafeer-focus: color-mix(in srgb, var(--brand-navy) 55%, transparent);
}

:root[data-theme="dark"]{
  --surface: #0b1116;
  --border: #1b2936;
  --text: #e6edf3;
  --text-muted: #9fb0c1;
  --brand-navy: #8ab4ff;
  --shadow-1: 0 2px 10px rgba(0,0,0,.35);
  --shadow-2: 0 8px 22px rgba(0,0,0,.45);

  --doafeer-white: var(--surface);
  --doafeer-shadow-light: var(--shadow-1);
  --doafeer-shadow-medium: var(--shadow-2);
}

/* --- Grid base (بدون تحديد أعمدة؛ الأعمدة في doaf-brand.css / doaf-home.css) --- */
.df-grid{
  display: grid;
  gap: 16px;
}

/* --- Card --- */
.df-card{
  background: var(--doafeer-white);
  border: 1px solid var(--border);
  border-radius: var(--doafeer-border-radius);
  box-shadow: var(--doafeer-shadow-light);
  overflow: hidden;
  transition: transform var(--doafeer-transition-speed), box-shadow var(--doafeer-transition-speed);
  will-change: transform;
}
.df-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--doafeer-shadow-medium);
}

/* غلاف للصورة والبادجات */
.df-card__img-wrap{ position: relative; }

/* صورة البطاقة كعنصر خلفية (توافق قديم) */
.df-card__img{
  display: block;
  inline-size: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: inherit; /* يحافظ على الزوايا عند الخلفية */
}

/* دعم <img> داخلي كبديل محسّن (srcset/sizes) */
.df-card__img > img,
.df-img{
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* عنوان البطاقة العام */
.df-card__title{
  display: block;
  text-align: center;
  padding: 10px 12px;
  color: var(--doafeer-primary-color);
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-inline-size: 0; /* يضمن عمل ellipsis داخل الحاويات المرنة */
}
.df-card__title:hover{ text-decoration: underline; }

/* تحسين الوصول */
.df-card a:focus-visible,
.df-chip:focus-visible{
  outline: 2px solid var(--doafeer-focus);
  outline-offset: 2px;
  border-radius: 10px;
}

/* --- Aspect ratios (خارج Icon Grid) --- */
.df-ar-5x4{ aspect-ratio: 5/4; }
.df-ar-1x1{ aspect-ratio: 1/1; }
.df-ar-4x5{ aspect-ratio: 4/5; }

/* أنماط الأيقونات (النسخ الأربعة الموحّدة) */
/* main: 150x120 → 15/12 */
.df-card__img.df-main{ aspect-ratio: 15/12; }
/* term: 140x140 → 1/1 */
.df-card__img.df-term{ aspect-ratio: 1/1; }
/* cover: 140x170 → 14/17 */
.df-card__img.df-cover{ aspect-ratio: 14/17; }
/* sub: 150x130 → 15/13 */
.df-card__img.df-sub{ aspect-ratio: 15/13; }

/* توافق خلفي: tile = main */
.df-card__img.df-tile{ aspect-ratio: 15/12; }

/* ملاحظة: ضمن .df-grid-icons قد يتم تعطيل aspect-ratio وتثبيت الأبعاد عبر ملفات الهوية */

/* --- Badge --- */
.df-badge{
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--doafeer-secondary-color);
  font-size: .85rem;
  line-height: 1.2;
  box-shadow: var(--doafeer-shadow-light);
  pointer-events: none;
  z-index: 1;
}

/* --- Chips (لروابط الأبناء أسفل البطاقة) --- */
.df-card__children{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px 12px;
  justify-content: center;
}
.df-chip{
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: .82rem;
  line-height: 1.1;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.df-chip:hover{
  border-color: color-mix(in srgb, var(--brand-navy) 35%, var(--border));
  background: rgba(0,0,0,.02);
}

/* عدّاد العناصر بجانب اسم التصنيف */
.df-term-count{
  color: var(--text-muted);
  font-weight: 400;
}

/* --- Embedded viewers --- */
.df-pdf{
  inline-size: 100%;
  block-size: 80vh;
  border: 0;
  border-radius: var(--doafeer-border-radius);
  box-shadow: var(--doafeer-shadow-light);
}
@media (max-width: 640px){
  .df-pdf{
    block-size: 52.5vh;
    block-size: 52.5svh;
    block-size: 52.5dvh;
  }
}

.df-video-wrap{
  inline-size: 100%;
  border-radius: var(--doafeer-border-radius);
  overflow: hidden;
}
.df-video{
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* --- تقليل الحركة --- */
@media (prefers-reduced-motion: reduce){
  .df-card{ transition: none; }
  .df-card:hover{ transform: none; box-shadow: var(--doafeer-shadow-light); }
}

/* --- تباين أعلى عند الحاجة --- */
@media (prefers-contrast: more){
  .df-card{ border-color: color-mix(in srgb, var(--brand-navy) 40%, var(--border)); }
  .df-card__title{ text-decoration: underline; }
}

/* وضع ألوان قسرية (Windows High Contrast) */
@media (forced-colors: active){
  .df-card{ border: 1px solid CanvasText; }
  .df-card__title{ color: CanvasText; }
  .df-badge{ forced-color-adjust: none; }
}

/* فالبك لو المتصفح لا يدعم aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  /* ارتفاعات تقريبية لعدم انهيار التخطيط (خارج Icon Grid) */
  .df-card__img.df-ar-1x1{ height: 140px; }
  .df-card__img.df-ar-5x4{ height: 160px; }

  /* الأنماط الأربعة */
  .df-card__img.df-main{  height: 120px; } /* 150x120 */
  .df-card__img.df-term{  height: 140px; } /* 140x140 */
  .df-card__img.df-cover{ height: 170px; } /* 140x170 */
  .df-card__img.df-sub{   height: 130px; } /* 150x130 */

  /* توافق خلفي */
  .df-card__img.df-tile{  height: 120px; } /* = main */
}