/* ============================================================
   work-showcase — بطاقات المشاريع والشارة
   ============================================================ */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
  min-height: 15rem;
  padding: var(--sp-s);
  border-radius: var(--radius);
  background: var(--card-bg, var(--accent));
  color: var(--card-fg, var(--on-accent));
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--speed) var(--ease-bounce),
    box-shadow var(--speed) var(--ease-bounce),
    filter 0.2s ease;
}

@media (min-width: 992px) {
  .card {
    grid-column: var(--card-col-start, 1) / var(--card-col-end, 26);
    min-height: 22rem;
    max-height: 34rem;
    padding: var(--sp-m) var(--sp-l) var(--sp-s);
    border-radius: var(--radius-l);
  }

  .card.is-large {
    min-height: 30rem;
  }
}

/* تحويم: ارتفاع + ظل + تزويج (site-interactions) */
@media (min-width: 768px) and (hover: hover) {
  .card:hover {
    transform: translate3d(0, -6px, 0);
    box-shadow: var(--shadow-lg);
    filter: saturate(1.2);
  }

  .card:hover .card-inner {
    transform: translate3d(0, -0.5rem, 0);
  }
}

/* ضغط: إلغاء الظل والارتفاع (site-interactions) */
.card:active {
  transform: translate3d(0, 0, 0);
  box-shadow: none;
}

.card:focus-visible {
  box-shadow:
    inset 0 0 0 2px var(--card-fg, var(--on-accent)),
    0 0 0 3px var(--accent);
}

.card-inner {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  transition: transform 0.5s var(--ease-bounce);
  /* تصفير اللون هنا يُبطل `p { color: var(--text-2) }` من base.css،
     وإرث لون البطاقة (--card-fg) يحكم العنوان/الوصف/الفهرس.
     بدونه يتلوّن الوصف بلون الواجهة الداكن فوق خلفية بنفسجية → 1.25:1. */
  color: var(--card-fg, var(--on-accent));
}

/* شارة "قيد العمل" */
.card-badge {
  align-self: flex-start;
  padding: 0.25rem 0.7rem;
  background: rgba(0, 0, 0, 0.28); /* خلفية داكنة شفافة: تباين آمن فوق كل ألوان البطاقات */
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.card-title {
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
}

.card-meta {
  font-size: var(--fs-mini);
  /* لازم color صريح على .card-meta نفسه: قاعدة `p { color: var(--text-2) }`
     من base.css تستهدفه مباشرةً، واللون الموروث من .card-inner يخسر دائماً
     أمامها. بدون هذا السطر يتلوّن الوصف بلون الواجهة الداكن فوق خلفية
     بنفسجية → 1.25:1 (أقل من حد WCAG AA 4.5:1). */
  color: var(--card-fg, var(--on-accent));
  /* 0.94 كان يسقط إلى ~3:1 على البطاقات البنفسجية الفاتحة —
     1.0 يرفع كل الأزواج فوق 4.5:1 مع بقاء تمييز الحجم عن العنوان. */
  opacity: 1;
}

.card-index {
  position: absolute;
  top: var(--sp-s);
  inset-inline-end: var(--sp-s);
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  /* يرث لون البطاقة لا لون الواجهة (base.css p/span) — زخرفية لكنها مرئية */
  color: var(--card-fg, var(--on-accent));
  /* aria-hidden (زخرفية) لكنها مرئية، فتطبق عليها حدود WCAG:
     0.85 كان يسقط إلى 4.21:1 على ألوان البنفسجي الفاتح. */
  opacity: 1;
}

@media (min-width: 992px) {
  .card-index {
    top: var(--sp-m);
    inset-inline-end: var(--sp-l);
  }
}

/* زخرفة دائرية خلفية تظهر عند التحويم */
.card-flourish {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 0.3s ease, transform 0.3s ease;
  background: radial-gradient(
    60% 60% at 80% 20%,
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0) 70%
  );
}

@media (min-width: 992px) and (hover: hover) {
  .card:hover .card-flourish {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}