/* ============================================================================
   NOORDEV · Case Studies index
   Filter row + magazine-style grid of case cards. One feature card, then a
   uniform 3-up grid below.
   ============================================================================ */

.cases {
  max-width: var(--container-wide); margin: 0 auto;
  padding: 64px var(--gutter) 96px;
}
.cases__filter {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 20px 0; border-bottom: 1px solid var(--color-border);
  margin-bottom: 48px;
}
.cases__filter-label {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--color-ink-muted);
}
.cases__filter-list { display: flex; gap: 8px; flex-wrap: wrap; }
.cases__count {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-muted);
}
.cases__count b { color: var(--color-ink); font-weight: 500; }

/* Feature card (1-up, large) */
.case-feat {
  display: grid; grid-template-columns: 6fr 5fr; gap: 0;
  background: var(--navy-900); color: white;
  border-radius: var(--radius-lg); overflow: hidden;
  margin-bottom: 32px; min-height: 460px;
  text-decoration: none;
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.case-feat:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.case-feat__copy { padding: 56px 48px; display: flex; flex-direction: column; }
.case-feat__tag {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--crimson-400);
  display: inline-flex; align-items: center; gap: 8px;
}
.case-feat__tag::before {
  content:''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--crimson-500); box-shadow: 0 0 0 4px rgba(207,29,59,0.18);
}
.case-feat__client {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--navy-300); margin-top: 32px;
}
.case-feat__title {
  font-size: clamp(28px, 3.4vw, 44px); font-weight: 400; letter-spacing: -0.02em;
  line-height: 1.1; margin: 16px 0 20px; color: white;
}
.case-feat__title .italic { font-family: var(--font-display); font-style: italic; color: var(--navy-200); }
.case-feat__body { color: var(--navy-200); font-size: var(--text-md); line-height: 1.65; margin: 0 0 32px; max-width: 460px; }
.case-feat__meta {
  display: flex; gap: 32px; flex-wrap: wrap;
  margin-top: auto; padding-top: 24px; border-top: 1px solid var(--navy-800);
}
.case-feat__meta .k { font-family: var(--font-sans); font-size: var(--text-2xl); font-weight: 300; letter-spacing: -0.02em; color: white; line-height: 1; }
.case-feat__meta .l { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--navy-400); margin-top: 6px; }
.case-feat__visual {
  background: var(--navy-800);
  background-image:
    radial-gradient(ellipse at 80% 20%, rgba(207,29,59,0.22), transparent 55%),
    linear-gradient(180deg, rgba(7,13,19,0.0) 0%, rgba(7,13,19,0.4) 100%);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.case-feat__visual::before {
  content:''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 70%);
          mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 70%);
}
.case-feat__mark {
  font-family: var(--font-display); font-style: italic; font-size: 120px;
  color: white; line-height: 1; position: relative;
}
.case-feat__mark .dot {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  background: var(--crimson-500); position: absolute; top: 22px; right: -14px;
}

@media (max-width: 900px) {
  .case-feat { grid-template-columns: 1fr; }
  .case-feat__copy { padding: 40px 28px; }
  .case-feat__visual { min-height: 220px; }
  .case-feat__mark { font-size: 80px; }
}

/* 3-up grid */
.case-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.case-card {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: all 220ms var(--ease-out);
}
.case-card:hover { transform: translateY(-3px); border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.case-card__visual {
  aspect-ratio: 16 / 10;
  background: var(--navy-900);
  background-image:
    radial-gradient(ellipse at var(--vx, 30%) var(--vy, 80%), rgba(207,29,59,0.18), transparent 55%),
    linear-gradient(135deg, var(--navy-800), var(--navy-950));
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.case-card__visual::before {
  content:''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 40%, black 30%, transparent 80%);
          mask-image: radial-gradient(ellipse at 60% 40%, black 30%, transparent 80%);
}
.case-card__mark {
  font-family: var(--font-display); font-style: italic; font-size: 56px;
  color: white; line-height: 1; position: relative;
}
.case-card__mark .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--crimson-500); position: absolute; top: 8px; right: -8px;
}
.case-card__body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.case-card__client {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--color-ink-muted);
}
.case-card__title {
  font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.015em;
  margin: 10px 0 12px; color: var(--color-ink); line-height: 1.25;
}
.case-card__metric {
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--color-border);
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.case-card__metric b {
  font-family: var(--font-sans); font-weight: 500; font-size: var(--text-md);
  color: var(--color-ink); letter-spacing: -0.01em;
}

@media (max-width: 1024px) { .case-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .case-grid { grid-template-columns: 1fr; } }