/* Case cards (problem -> åtgärd -> effekt) */
.case-cards { 
  display:grid; 
  gap: var(--space-4); 
  margin-top: var(--space-4); 
  grid-template-columns: repeat(auto-fit,minmax(min(20rem,100%),1fr));
}

.case-card { 
  position:relative; 
  padding: var(--space-4) var(--space-4) var(--space-4); 
  background: linear-gradient(150deg,var(--color-surface-alt) 0%, var(--color-surface) 100%); 
  border:1px solid var(--color-border); 
  border-radius: var(--radius-m); 
  display:flex; flex-direction:column; gap: var(--space-3);
}
.case-card::after { content:""; position:absolute; inset:0; border-radius: inherit; background:linear-gradient(110deg, rgba(255,122,0,.25), transparent 60%); mix-blend-mode:overlay; opacity:.15; pointer-events:none; }
.case-card header { display:flex; flex-direction:column; gap:.35rem; }
.case-card__logo { display:flex; align-items:center; justify-content:flex-start; width: clamp(var(--logo-min-width), var(--logo-pref-width), var(--logo-max-width)); padding:.2rem .4rem .35rem; border:1px solid var(--color-border); border-radius: var(--radius-s); background:transparent; box-shadow: var(--shadow-s); }
.case-card__logo img { display:block; width:100%; height: clamp(var(--logo-min-height), 6vw, var(--logo-max-height)); object-fit:contain; filter: saturate(1.05) contrast(1.05); }
/* Optional helper: invert logos that are dark-on-white only */
.case-card__logo.is-invert img { filter: invert(1) hue-rotate(180deg) saturate(1.1) contrast(1.05); }
.case-card h3 { margin:0; font-size: clamp(1rem, .95rem + .4vw, 1.25rem); }
.badge { display:inline-block; font-size:.65rem; letter-spacing:.06em; text-transform:uppercase; background: var(--color-accent); color: var(--color-text-invert); padding:.25rem .5rem; border-radius: var(--radius-s); font-weight:600; box-shadow: 0 0 .5rem -.1rem rgba(255,122,0,.6); }
.case-card dl { margin:0; display:grid; gap:.6rem; }
.case-card dt { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color: var(--color-muted); }
.case-card dd { margin:0; font-size: var(--font-size-s); line-height:1.5; }
.case-card .effect { border-left:3px solid var(--color-accent); padding-left:.75rem; background: linear-gradient(90deg, rgba(255,122,0,.10), transparent 70%); border-radius:2px; }
.case-card footer { margin-top:auto; }
.case-card footer span { font-size: .6rem; letter-spacing:.1em; text-transform:uppercase; color: var(--color-muted); }
.case-card__logo--footer { margin-bottom:.5rem; width: clamp(var(--logo-min-width), 26vw, calc(var(--logo-max-width) - 2rem)); padding:.35rem .6rem .5rem; }

/* White background variant for logos needing neutral plate (applied to all per request) */
.case-card__logo--white-bg { background:#ffffff; }
html[data-theme="light"] .case-card__logo--white-bg { background:#ffffff; }

@media (hover:hover) { .case-card { transition: transform var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
  .case-card:hover { transform: translateY(-4px); border-color: var(--color-accent); }
}

html[data-theme="light"] .case-card { background: linear-gradient(150deg,#fafafa 0%, #f0f0f0 100%); }