/* ==========================================================================
   isamahdi.studio — v4
   work.css · فهرس الأعمال وصفحات المشاريع
   المرحلة 3
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. شريط الفلترة — محوران مستقلان
   -------------------------------------------------------------------------- */

.filters {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-block-end: var(--sp-3);
  border-block-end: 1px solid var(--line);
  margin-block-end: var(--sp-4);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
}

.filter-row > .tc {
  flex: 0 0 auto;
  min-inline-size: 5.5em;
  color: var(--bone-dim);
}

.fbtn {
  padding: 0.5em 0.95em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: none;
  color: var(--bone-dim);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.fbtn:hover { border-color: var(--gold-dim); color: var(--bone); }

.fbtn[aria-pressed="true"] {
  border-color: var(--gold);
  background-color: var(--gold);
  color: var(--ink);
}

.filter-count {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--bone-dim);
}

.filter-count b { color: var(--gold); font-weight: 500; }

/* --------------------------------------------------------------------------
   2. شبكة الأعمال
   -------------------------------------------------------------------------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--sp-4) var(--sp-3);
}

.work-card[hidden] { display: none; }

/* بطاقة بلا صورة — لعمل لم تُعتمد له صورة مفتاحية بعد */
.card--text .card__media {
  display: grid;
  place-items: center;
  padding: var(--sp-4) var(--sp-3);
  border: 1px solid var(--line);
  background-color: var(--ink-soft);
  aspect-ratio: 16 / 9;
  text-align: center;
}

.card--text .card__media span {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

/* رسالة "لا نتائج" */
.no-results {
  padding-block: var(--sp-5);
  text-align: center;
  color: var(--bone-dim);
}

.no-results[hidden] { display: none; }

/* --------------------------------------------------------------------------
   3. صفحة المشروع الواحد
   -------------------------------------------------------------------------- */

.project-hero {
  padding-block: var(--sp-6) var(--sp-4);
}

.project-hero h1 { max-width: 20ch; }

.project-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.4em;
  margin-block-start: var(--sp-2);
}

/* التحدي / الحل / الدور */
.brief {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-block: 1px solid var(--line);
}

.brief h2 {
  font-size: var(--step-1);
  margin-block-end: 0.6em;
}

/* التنقّل بين المشاريع */
.prevnext {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--sp-3);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line);
}

.prevnext a {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease);
}

.prevnext a:hover { border-color: var(--gold); }

.prevnext a:last-child { text-align: end; }

.prevnext strong {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.15;
}