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

  Requires tokens.css and typography.css to be loaded first (reuses
  .rs-heading / .rs-heading--h4 for both variants' titles).

  Figma's component set is named Size × Type × State, but only two
  combinations actually exist in the file: "Size=Third, Type=Blog,
  State=Default" and "Size=Half, Type=Case Study, State=Default". The
  Dev Mode reference code's prop types imply four combos (Third/Half
  × Blog/Case Study), but Third+Case Study and Half+Blog aren't built
  anywhere — flagging per your note about the file not always being
  fully systemic, rather than guessing at unbuilt combinations. Built
  here as two named variants (--blog, --case-study) rather than
  separate size/type modifiers, since size and type are coupled in
  every instance that exists.

  Neither variant has a link/href in this frame — built as static,
  non-interactive markup. Wrap in an <a> later if these need to be
  clickable.

  Both variants now have a State=Hover, confirmed via Dev Mode:
  - Blog: a full-bleed "Overlay" layer (Brand/Transparency/Dark/10%,
    i.e. --color-transparency-dark-10) fades in over the image.
    Figma's interaction panel gives an explicit spec for this one:
    trigger "While hovering", action "Change to", animation
    "Dissolve", easing "Ease out", duration 200ms — implemented as a
    ::after opacity fade on .rs-card__image.
  - Case Study: the card's own background changes from
    --color-neutral-100 to --color-neutral-200 on hover. No separate
    timing was given for this one; reusing the Blog overlay's 200ms
    ease-out for consistency since both are the same interaction
    system, but that reuse isn't confirmed against Figma — flag if
    the Case Study hover should use different timing.

  Figma also dropped "Size" from the variant name (now just Type ×
  State) since only one size per type ever existed — no change needed
  here, .rs-card--blog / .rs-card--case-study already map directly to
  Type.
*/

.rs-card {
  box-sizing: border-box;
}

/* ---------- Size=Third, Type=Blog ---------- */
/* A blog post preview: image, bold date label, H4 heading, snippet.
   Figma's export wraps each text line in its own auto-layout frame
   with one-sided padding rather than using margins directly —
   translated here into margins on the actual text elements, which is
   equivalent and more idiomatic for hand-written CSS. */

.rs-card--blog {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 416px;
}

.rs-card--blog .rs-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 416 / 246;
  border-radius: var(--space-6);
  overflow: hidden;
}

.rs-card--blog .rs-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rs-card--blog .rs-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-transparency-dark-10);
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.rs-card--blog:hover .rs-card__image::after {
  opacity: 1;
}

.rs-card__date {
  margin: var(--space-12) 0 var(--space-4) 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-neutral-700);
}

.rs-card--blog .rs-heading--h4 {
  margin-bottom: var(--space-8);
}

.rs-card__snippet {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-neutral-900);
}

/* ---------- Size=Half, Type=Case Study ---------- */
/* A card-shell wrapping a cover image + heading/snippet detail,
   stacked vertically (unlike the shared .rs-case-study-cover pattern
   used by Testimonial/Case Study/Download, which sits side-by-side
   with text and carries a "Get the case study" badge). This variant
   has no badge and is genuinely a different composition, so it's
   built as its own .rs-card__cover rather than reusing that class —
   though it shares the same 230:322.563 source-image aspect ratio,
   just scaled up to a 319px-wide card.

   Note: Figma gives this cover a 6px corner radius and a Shadow/
   Header drop-shadow (0 8px 8px, 2% opacity), which is a different
   radius/shadow spec than .rs-case-study-cover's (no radius, 0 8px
   4px, 5% opacity) despite both being visually "a cover image with a
   shadow" — implemented exactly as Dev Mode reports it here rather
   than reconciled with the other primitive; worth tightening in
   Figma if these are meant to be the same treatment. */

.rs-card--case-study {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  width: 415px;
  padding: var(--space-48);
  border-radius: var(--space-16);
  background-color: var(--color-neutral-100);
  transition: background-color 200ms ease-out;
}

.rs-card--case-study:hover {
  background-color: var(--color-neutral-200);
}

.rs-card__cover {
  width: 319px;
  aspect-ratio: 230 / 322.563;
}

.rs-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--space-6);
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.02);
}

.rs-card__detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.rs-card--case-study .rs-heading--h4 {
  margin-bottom: var(--space-8);
}