/*
  Case Study — Website Refresh 2026 1e (Figma), "Case Study" frame.
  Source: https://www.figma.com/design/2W6CyIAW3cKDEqdv26CeE2/Website-Refresh-2026-1e?node-id=8064-42611

  Requires tokens.css, typography.css, buttons.css, flash.css, and
  case-study-cover.css to be loaded first — this component is mostly
  assembled from pieces that already exist rather than new styling:

  - The cover image + overlapping "Get the case study" badge reuse
    .rs-case-study-cover / .rs-case-study-cover__flash directly (the
    same shared primitive the Testimonial "Text + Case Study" variant
    uses) — same visual pattern, so no second copy of it here.
  - The heading reuses .rs-heading.rs-heading--h3 from typography.css
    (28px Space Grotesk Bold, confirmed as an exact match).
  - The "Download now" button reuses .rs-button.rs-button--outline-neutral
    from buttons.css directly (confirmed as an exact match, not just
    similar).

  All three clickable elements — the cover image, the Flash badge,
  and the "Download now" button — point at the same case study URL.
  Only the card's own layout (.rs-case-study, .rs-case-study__text,
  paragraph spacing) is actually new CSS.
*/

.rs-case-study {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-48);
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-48);
  border-radius: var(--space-16);
  background-color: var(--color-neutral-100);
}

.rs-case-study__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 0%;
  min-width: 0;
  align-self: stretch;
}

.rs-case-study__text .rs-heading--h3 {
  margin-bottom: var(--space-20);
}

.rs-case-study__body {
  margin: 0 0 var(--space-24) 0;
  width: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-neutral-900);
}

@media (max-width: 768px) {
  .rs-case-study {
    flex-direction: column;
  }
  .rs-case-study-cover {
    width: 100%;
  }
}