/**
 * Case study feature — intro copy + one referenced portfolio card.
 *
 * The intro copy (html_text) is unstyled here (inline styles carry it, per
 * project convention). The summary card is this component's own markup
 * (there's no matching html/*.html section for this pattern — no direct
 * service-page mockups exist), so its visual design is new but modeled on
 * the case-study card styling in html/Portfolio.html: 1px #EBEBEF border,
 * rounded corners, cover-fit image, #6A6A72 excerpt text, #FF2D6B link.
 */
.mk3-sdc--case-study-feature {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.mk3-sdc--case-study-feature .mk3-sdc__inner {
  max-width: 50rem;
  margin: 0 auto;
  padding-left: clamp(1.25rem, 4vw, 3rem);
  padding-right: clamp(1.25rem, 4vw, 3rem);
}

.mk3-csf__card {
  display: flex;
  flex-direction: column;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid #EBEBEF;
  border-radius: 1.25rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .25s ease, transform .25s ease;
}

.mk3-csf__card:hover {
  box-shadow: 0 20px 40px rgba(15, 15, 18, .08);
  transform: translateY(-2px);
  color: inherit;
}

.mk3-csf__card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #F4F4F6;
}

.mk3-csf__card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mk3-csf__card-body {
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.mk3-csf__card-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  letter-spacing: -.02em;
  margin-bottom: .5rem;
}

.mk3-csf__card-excerpt {
  font-size: 1rem;
  line-height: 1.7;
  color: #6A6A72;
  margin: 0 0 .75rem;
}

.mk3-csf__card-link {
  font-weight: 700;
  font-size: .875rem;
  color: #FF2D6B;
}

@media (min-width: 768.02px) {
  .mk3-csf__card {
    flex-direction: row;
  }

  .mk3-csf__card-media {
    width: 42%;
    aspect-ratio: auto;
  }

  .mk3-csf__card-body {
    width: 58%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .mk3-sdc--case-study-feature .mk3-sdc__inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}