/* ==========================================================================
   Component: featured case study (.cm-case-featured)
   A large, full-width clickable card — image on one side, copy on a navy
   "statement" surface on the other. Links to the full study.
   ========================================================================== */

.cm-case-featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  border-radius: 22px;
  overflow: hidden;
  background: var(--cm-navy);
  color: var(--cm-on-dark);
  transition: transform var(--cm-dur) var(--cm-ease);
}

/* It's an <a> — keep it on-dark, not the global red link colour, on hover. */
.cm-case-featured:hover {
  color: var(--cm-on-dark);
  transform: translateY(-2px);
}

.cm-case-featured__media {
  aspect-ratio: 4 / 3;
  background: #0f1720;
}

.cm-case-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cm-case-featured__body {
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  min-width: 0;
}

.cm-case-featured__tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(241, 244, 247, 0.7);
}

.cm-case-featured__title {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

.cm-case-featured__result {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(241, 244, 247, 0.8);
}

.cm-case-featured__link {
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}